프론트 개발 상식 간단히 정리

브라우저 저장소 : 로컬스토리지, 세선스토리지, 쿠키 

▶ HTML5에서 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할수있는도록 제공하는 기능.

▶ 로컬스토리지는 브라우저를 닫고 다시 열어도 유지, 영구적으로 보관이 가능 

▶ 세선스토리지는 브라우저 리로딩시에는 유지되나 닫으면 유지안됨.

    브라우저 컨텍스트가 다르기 때문에 브라우저가 다르면 다른 영역이 된다.

▶ 쿠키는 방문자의 정보를 컴퓨터 메모리에 저장

Web Storage와  Cookie 차이 - Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재. 

Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다.

polyfill 이란

S5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 사용가능한 객체로 만들어준다

캡쳐링과 버블링

• 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.
• 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.

target.addEventListener(type, listener[, useCapture]);
세번째 인자인 useCapture에서 캡쳐링 여부를 정의 할 수 있다.

default 값은 false 버블링을 통해 이벤트를 전파했을 것이다.

true 로 설정해주면 캡처링을 통해 이벤트를 전파한다.

웹팩(Webpack) 이란

프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러다.

그런트나 걸프 같은 빌드 툴은 구성 파일에서 이러한 파일을 변환, 조합 및 축소 하는 작업이나 단계를 지정해야한다.

 

 

Node.js

1. REPL(Read, Eval, Print, Loop)를 통해서 런타임을 제공한다.

Read : 유저의 입력값을 받아서 메모리에 저장

Eval :  입력값의 평가, 실행

Print : Eval로 인해 반환된 값을 출력

Loop : 1~3 반복

2. 자바스크립트 파일을 Node.js에서 제공하는 자바스크립트 런타임을 통해 실행이 가능

 repl 보다는 따로 스크립트 파일을 만들어서 그 스크립트 파일을 node.js, V8이 해석 후 실행하는 형태로 작업.