● 모듈 - 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다. 유지보수성 : 기능들이 잘 모듈화 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다. 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다. 이런 장점들을 살리기 위해서 모듈 개념이 필요했고 자바스크립트에선 모듈을 개발하기 위한 여러가지 시도들이 있었다. CommonJS, AMD, UMD 및 E..
Frontend
● BOM (Browser Object Model) - 브라우저 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다. 이를 통해서 브라우저의 새창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window 가 있으며 하위 객체들로 location, navigator, document, screen, history가 포함되어 있다. ● DOM (Browser Object Model) - 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 최상위 인터페이스로 Node가 있으며 이는 아래와 같은 구조로 이루어진다. 위의 트리구조를 보면 엘리먼트 뿐만 아니라 텍스트와 주석도 있는 것을 알 수 있는데, 이런 것들까지도 DOM 트리에 포함된다. 실제적인 DO..
자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋다. (V8, SpiderMonkey, Javascript core 등의 구현이 각각 다르다) 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree) 로 변환한다. 인터프리터(Interpreter) 는 AST를 기반으로 바이트코드(Bytecode)를 생성 한다. 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data) 와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다. 최..
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. HTML 파싱 후, DOM(Document Object Model) 트리 구축 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 Javascript 실행 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트..
SPA (Single Page Application) - 하나의 HTML 파일을 기반으로 Javascript를 활용하여 동적으로 화면의 컨텐츠를 바꿔주는 방식의 어플리케이션이다. (Multiple Page Application) - 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱하여 보여주는 방식의 어플리케이션이다. 전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다. 각 방식의 장단점을 알아보고, 전통적인 방식에서 벗어나 SPA를 SSR로 구현했을 때의 장단점도 알아보자. ● CSR CSR에선 브라우저가 서버에 HTML과 JS 로드를 요청 한 후, 로드되면 사용자의 상호작용에 따라 JS을 이용해 ..
