한량의 개발블로그

모듈 번들러 모듈의 개념을 모른다면 모듈시스템에 대하여 한번 읽고오자 현대의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 생긴다. 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리) 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가? 오버헤드 : 처리를 하기 위해 들어가는 간접적인 처리 시간, 메모리 등을 말한다 ES6+ 스펙의 코드를 어떻게 처리할 것인가? 위 문제들을 해결하기 위해 등장한 것이 모듈 번들러(Module Bundler)로 각각의 "모듈 의존성을 해결"하여 하나의 자바스크립트 파일로 만드는 도구 이다. 이미지 압축, 최소화(Minification) 등..

모듈이란? 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다. 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다. 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다. 이런 장점들을 살리기 위해서 모듈 개념이 필요했고 자바스크립트에선 모듈을 개발하기 위한 여러가지 시도들이 있었다. CommonJS, AMD, UMD 및 ..

자바스크립트 엔진이 코드를 실행하는 과정 자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋다. (V8, SpiderMonkey, Javascript core 등의 구현이 각각 다르다) 1. 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree) 로 변환한다. AST 다른말로 "Abstract Syntax Tree" 혹는 "Syntax Tree" 라고 불리는 이 Tree는 프로그래밍 언어로 쓰여진 소스코드의 abstract syntactic 구조를 표현하기 위해서 사용됩니다. 쉽게 말하자면 특정 프로그래밍 언어로 작..

브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. HTML 파싱 후, DOM트리 구축 DOM(Document Object Model) 트리는 완전히 구문 분석된 HTML 페이지의 Object 표현이다. 루트 요소 로 시작하여 페이지의 각 element/text에 대한 노드가 만들어진다. 다른 요소 내에 중첩된 요소는 자식 노드로 표시되며 각 노드에는 해당 요소의 전체 특성이 포함된다. 2. CSS 파싱 후 CSSOM(CSS Obj..

DOM이란 Document Object Model : HTML 및 XML 문서를 위한 API 즉, HTML 코드로 설계된 웹페이지가 크롬, 사파리와 같은 브라우저 안에서 화면에 나타나고 이벤트에 반응하는 기능들을 수행할 수 있는 "객체들로 실체화 된 형태" 그렇다면 무엇이 HTML코드를 객체로 변환시켜줄까? 모든 브라우저에는 DOM parser라는 것이 있는데, DOM parser가 그 역할을 한다 HTML로 구성된 웹페이지를 읽고 해당 데이터를 DOM으로 구성된 객체로 변환한 후 변환된 객체들을 트리구조로 배열화한다 최상위 루트 데이터로부터 그안에 포함된 요소들이 밑으로 뻗어나가는 구조를 트리구조라고 한다 DOM트리 안에 있는 각 HTML요소들을 "노드"라고 부른다 우리가 흔히 사용하는 자바스크립트 또..

그동안 "운영체제"라는 말을 들었을 때 맥과 윈도우만 생각했었다. 개발을 하겠다는 놈이 리눅스에 대해서 정확하게 알지도 못하고, 다른 개발자들이 왜 우분투를 사용하는지 어떤 장단점이 있는지에 대해 크게 궁금해하지 않았던 것에 대해 반성하며 글을 시작한다. ​ Linux 리눅스는 Window 또는 Mac OS와 같은 컴퓨터 운영체제중 하나로 다중 사용자, 다중 작업을 지원하는 네트워크 운영체제다. 즉, 리눅스를 사용한다는 것은 프로그래밍을하고 서비스를 운영할 때, 리눅스로 돌아가는 서버를 다루는 것과같이 개발중에 리눅스 관련 작업을 한다는 것이다. (서버를 다루는 경우 주로 리눅스 환경에서 프로그래밍을 한다) ​ Why Linux 우리는 왜 리눅스를 사용할까? 우리가 흔히 사용하거나 알고있는 Window,..