본문 바로가기

전체 글

require vs import 문법 비교하기 자바스크립트에서는 모듈을 불러오는 문법이 두가지 가 있다. 1. (require / exports ) 2. (import / export) 이 둘은 비슷하면서도 달라 가끔 자바스크립트를 사용하면서 혼동을 준다. (require / exports) NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다라고 볼 수 있다. /* CommonJS */ const name = require('./module.js'); (import / export ) 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다. /* ES6 */ import name from './module.js' require와 import 의 주요 차이점 1. reqi.. 더보기
Position 속성 알아보기 MDN position css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께합니다. static : 요소의 일반적인 문서 흘므에 따라 배치합니다. top, right ,bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. See the Pen Untitled by ChanwooPark (@chanw9503) on CodePen. relative 요소의 일반적인 문서 흐름에 따라 배치하고, 자기 자신 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에.. 더보기
HTTP에 대해 알아보자 HTTP 란? HTTP는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고 받을 수 있는 프로토콜 입니다. 프로토콜은 규칙이라고 생각하면 됩니다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발해서 서로 정보를 교환할 수 있게 된겁니다. MDN 공식문서 HTTP는 HMTL 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이기도 합니다. 클리이언트 - 서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetche.. 더보기
캐시 알아보기 캐시(Cache)란? [Cache] Cache 란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 가리킨다. 아래와 같은 계측 구조에서 확인할 수 있듯이, 캐시는 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공한다. 리액트가 우리의 컴포넌트를 인터랙티브 하게 만들어주고, states, props 같은걸 컴포넌트에게 주니까 프레임워크라고 생각하기도 한다. Cache는 아래와 같은 경우에 사용을 고려하면 좋다. 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우(서버의 군한 API 데이터) 반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸내일) Cache에 데이터를 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다. 결국 Cache란 반복적으로 .. 더보기
프레임워크와 라이브러리 프레임워크와 라이브러리 기준!!! 누가 누구를 컨트롤 하는가??? 내가 코드를 컨트를 하는건가? 모든 결정을 다 내리고 있는가? 아니면, 누군가 정해놓은 규칙에 따르고 있는가? 이것이 기준이다. 내가 코드를 컨트롤 하고 있다 === 라이브러리 라이브러리 정의는 개발에 필요한 것들을 미리 구현해 놓은 도구이다. 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합이다. 프레임워크와의 차이는 내가 필요할 때마다 부를 수 있고, 필요없어 졌을 때, 삭제에도 전체 코드에는 문제 없는것이 라이브러리이다. 누군가의 규칙에 따라 코딩하고 있다 === 프레임워크 프레임워크의 정의는 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 컨넥션 등의 기능들을 위해 뼈대(구조)를 제공.. 더보기
TDZ란? 앞서 설명한 hoisting에서 TDZ를 잠깐 언급한 적이 있다. TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻입니다. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다. let 과 const 로 선언된 변수는 var 와 같이 호이스팅을 거치지만, 초기화 전까지는 TDZ 에 들어간 변수입니다. TDZ 에 들어가 있는 변수를 사용하는 경우, Reference Error 를 만나게 됩니다. let 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록(선언단계)하지만 초기화단계는 변수 선언문에 도달했을 때(코드를 실행 후 ) 이뤄진다. 초기화 이전.. 더보기
Hoisting 이란? 유례? Hoisting : 끌어올리다. 식별자를 끌어올리다. hoisting은 어디서 나온걸까? 호이스팅을 알려면 먼저 알아야 할 것이 있는데, 실행컨텍스트 이다. Context : 해당 코드의 배경이 되는 조건, 환경정보를 뜻한다. Excution Context? 코드를 실행하는데 필요한 배경이 되는 조건/ 환경 동일한 조건과 환경을 지니고 있는 코드 조각들을 한데 모아 놓은 덩어리가 있다고 했을때, 이 코드뭉치를 실행할 때, 필요한 조건이나 환경정보가 실행컨텍스트라고 명명합니다. Excution Context → Lexical Enviroment 실행컨텍스트안에 있는 Lexical Enviroment를 알아야한다. Lexical Environment는 어휘적 / 사전적 환경 실행컨텍스트를 구성하는 환.. 더보기
브라우저 workflow & virtual DOM - 01 최근에 virtual DOM의 동작과정에 대해 궁금해서 찾아봤다. 근데 virtual DOM을 이해하기 위해서는 순서가 있다... 허허허허허헣헣ㅎ virtual DOM을 이해하기 위해서는 브라우저 workflow를 알고 가면 좋다. 이해가 훨씬더 잘되는 느낌? 그래서 오늘은 브라우저 workflow과정을 적고 가려고한다. 브라우저? 브라우저란 무엇일까? 우리가 인터넷을 접속할 때 사용하는 Chrome, Safari, FireFox, Explorer 등을 말한다. MDN 웹 브라우저(Web browser)혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크 를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다. 브라우저는 유저가 .. 더보기

티스토리툴바