모듈 module 이란? 모듈은 여러기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다. 유지 보수성 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일수 있기 때문에 어떤 기능을 개선한다던가 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 JS에서 전역 변수는 전역 공간을 갖기에 코드가 만을수록 곂치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임 스페이스를 갖기에 문제가 해결된다. 재사용성 똑같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 사용가능하다. CommonJS JS 공식 스펙이 브라우저만 지원했기에 SSR 및 데스크탑 어플리케이션을 지원하기위해 범용적인 언어로 쓰이기 위한 스펙을 모듈방식으로 정의한 것이 CommonJS 방식의..
FE 이모저모 공부
BOM (Browser Object Model) 브라우저에서 웹 페이지와 관련된 객체들을 조작하고 제어하는데 사용되는 객체모델. 주요 사용법 열려있는 창의 URL 얻어오기 브라우저의 정보를 받아올 수 있는 기능 도큐먼트 제어 대신 브라우저를 제어한다 주요 객체 window 객체 : 브라우저 창 객체. 브라우저의 창 크기 조작, 새창 열기, url 변경가능 location 객체 : 현제 페이지 url을 다루는 객체, 페이지의 url 변경 및 분석에 사용 screen 객체 : 사용자 환경의 디스플레이(해상도, 색상) 관련 정보 접근 navigator 객체 : 브라우저와 사용자의 시스템 정보에 접근 가능 (브라우저 정보, 버전, 플렛폼 등의 정보 확인) history 객체 : 브라우저 창의 페이지 이동 히스토..
브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..
Javascript를 실행시키기 위해 Javascript엔진이 필요하고, 웹 브라우저는 엔진을 내장하고 있다. 코드 실행 방식이 각기 다르지만 방식은 비슷하다. JS엔진이 코드를 실행하는 과정 소스코드를 만나면 파서를 이용해 파싱을 한 뒤, AST(Abstract Syntax Tree: 추상 구문트리)로 변환한다. AST는 프로그래밍 언어로 작성된 소스코드의 추상 구조의 트리이다. 추상적이라는 의미는 실제 구문에서 나타나는 모든 세세한 정보를 나타내지 않는 다는 것을 의미한다. 참고 : 링크 Interpreter는 AST 기반으로 ByteCode를 생성한다. 인터프리터는 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 의미한다. 원시코드를 기계어로 변환하는 컴파일러와는 대비되는 ..
CSR와 SSR을 비교하며 알아보기 전에 SPA(Single Page Application)과 MPA(Multiple Page Application)에 대해 알아보자 ◎ SPA (Single Page Application) 한개의 html 파일을 기반으로 Javascript를 이용해 화면의 컨텐츠를 동적으로 바꾸는 방식의 웹 어플리케이션 -> 웹 어플리케이션에 필요한 모든 리소스를 최소 한번에 다운로드한다. 장점 페이지 요청시 전체 페이지를 업데이트 할 필요가 없기에 화면에 깜빡 거림이 없어 사용자 경험(UX)가 좋다. 정적 리소스를 한번만 요청하고 받은 데이터는 전부 저장하기에 필요한 리소스만 로딩하기에 성능 면에서 좋다. 서버의 템플릿 연산을 클라이언트로 분산이 가능해 성능면에서 좋다. 컴포넌트 별로..
body-parser 란 무엇인가? 간단히 말하자면 Express 4.16.0 버전 부터 내장 모듈로 포함되어있는 미들워어로써 req(요청)와 res(응답) 사이에서 요청의 본문을 지정한 형태로 파싱해주는 미들웨어이다. app.get('/link', (req, res) => { res.send('테스트'); console.log(req.body); }); 위의 코드에서 console.log(req.body) 에서 req.body를 이용해 request의 body를 설정한 형태로 파싱하여 활용할 수 있다. body-parser 설정 //body-parser 모듈 불러오기 const bodyParser = require('body-parser'); app.use(bodyParser.json());// req..
