기술블로그 정리1

CSR( Client Side Rendering) 과 SSR (Server Side Rendering) 

SPA ( Single Page Application) 

- 하나의 파일을 기반으로 JS를 이용해 동적으로 화면을 전환하는 방식의 어플리케이션

MPA( Multiple Page Application)

-  사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다.

 

 전통적으로 SPA 는 CSR , MPA 는 SSR 사용했음

CSR 

- CSR에선 브라우저가 서버에 HTML과 JS 파일을 (전부)요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링을 시킨다.

- 첫 로딩이 오래걸리지만 이후에는 빠르게 렌더링 가능-> ux 좋음 , 서버에 부담낮음 , 검색엔진 최적화 (SEO) 문제 있음 

SSR

- 브라우저 요청마다 관련된 html, css , js를 서버에서 받아와서 렌더링

- 초기 로딩 빠름, js 이용한 렌더링 아니기에 검색엔진 최적화 가능 , 요청마다 로딩 있어서 ux 별로 , 서버 부하 커짐 

 

 

---

브라우저의 렌더링 원리 CRP(Critical Rendering Path)

CRP는 브라우저가 서버로부터 html응답을 받아 화면에 띄우기까지 실행하는 6단계를 말한다. 

 

1. DOM(document object model) 트리 만들기 

2.CSSOM(css object model) 트리 만들기 

3. JS 실행 ( 중간에 script 있다면 html 파싱 중단된다.)

4. Render 트리 만들기 (DOM+ CSSOM -> 최종적으로 렌더링할 내용을 나타낸 트리)

5. 레이아웃 생성

6. 페인팅 (페이지의 가시적인 내용을 픽셀로 변환해서 화면에 표시 )

 

 

 

https://wonism.github.io/critical-rendering-path/

WONISM's Blog

 

---

자바스크립트 엔진이 코드를 실행하는 과정 

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요 -> 브라우저에 내장 

 

1. 소스코드를 파싱하여 AST(abstract syntax tree)로 변환

2. 인터프리터가 코드를 읽으며 실행 

3. 코드 수행하는 과저에서 프로파일러가 지켜보며 최적화 가능한 코드를 컴파일러에게 전달. 

4. 주로 반복해서 실행되는 코드를 컴파일(최적화)한 후 원래있던 코드와 바꿔줌 

코드를 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일 하는 방법을 JIT(Just-In-Time) 컴파일러 라고 부릅니다. 크롬의 V8 엔진을 포함해 Mozilla의 Rhino, Firefox의 SpiderMonkey도 같은 방법을 사용합니다.

결론은, 자바스크립트는 실행되는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용됩니다. 이 방식은 자바스크립트의 성능을 크게 향상시켰습니다.

 

 

https://velog.io/@gusdnr814/Javascript%EB%8A%94-%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0-%EC%96%B8%EC%96%B4%EC%9D%B8%EA%B0%80

Javascript는 인터프리터 언어인가?

 

 

---

BOM과 DOM

BOM (Browser Object Model)

브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window 가 있으며 하위 객체들로 location , navigator , document , screen , history 가 포함되어 있다.

 

DOM (Document Object Model)

웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 최상위 인터페이스로 Node가 있으며 이는 아래와 같은 구조로 나타난다.

 

---

모듈 번들러와 트랜스파일러 

모듈 번들러

모듈은 특정 목적 및 기능에 따라 분리된 파일을 말한다. 

모듈 번들러는 모듈간 종속성으로 인한 문제 등을 해결하기 위해서 분리된 파일을 신속하게 하나의 파일로 병합하는 개발도구이다. 

 

https://developer-talk.tistory.com/550

모듈 번들러(module bundler)란?

 

트랜스파일러 

특정 언어로 작성된 코드를 비슷한 다른 언어로 바꿔주는 역할을 한다. 예를 들어 ES6+를 지원하지 않는 브라우저를 위해서 코드를 ES5 코드로 변환시켜준다거나 리액트의 JSX나 타입스크립트를 자바스크립트로 변환시키는 일 등이 트랜스파일링에 속한다. 

보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용한다.