[라이브세션] 웹이 빌드되고 유저에게 전달되어 브라우저에 랜더링 되기 까지의 과정

주제 예습

https://www.youtube.com/watch?v=YuqB8D6eCKE 

https://www.youtube.com/watch?v=iZ9csAfU5Os 

 

웹이 빌드되고 유저에게 전달되어 브라우저에 랜더링 되기 까지의 과정

 

브라우저가 이해할 수 있도록 트랜스파일을 진행한다.

 

모듈을 하나의 어플리케이션으로 만들기 위해 하나의 파일로 합치는 것을 모듈 번들링이라고 한다. 

웹팩을 사용한다!

create react app 안에 웹팩이 있다.

 

 

build 

map이란 ? 소스 map

 

 

사전 질문 Q&A

script tyle="module" 이라고 적혀있으면 모듈로서 사용하기 위해서는 돔 파싱을 막으면 안되기 때문에 defer를 적은 것과 같은 역할을 한다.

script를 다 다운받지 않은 것 같은데 밑에 잇는 아이콘을 파싱할 수 있지?

돔 파싱이 완료된 후 script를 실행한다.

 

이에 대한 질문은 유튜브 링크를 확인하면 명확하게 확인할 수 있다.

 

처음에 접근했을 때 데이터가 만들어져 있느냐, 안 만들어져있느냐 ...

SSG(Static Site Generate)

- 빌드 시점에 HTML을 만든다.

- 컨텐츠 제공이 언제 일어날 지 알고 있을 때

getStaticProps -> 빌드될 때 데이터를 가져와서 hTML을 만들어 응답

 

SSR(Server Side Rendering)

- 봇이 요청하는 시점에 HTML을 만든다.

- 컨텐츠 제공자가 유저일 때

getServerSideProps -> 요청이 올 때마다 실행

 

CSR(Client Side Renering)

- 언제나 데이터가 안 담긴 HTML을 보내준다..

 

공통 : 데이터가 담긴 HTML을  bot에 접근 가능하다.

 

NEXT.js 에서는 상황에 맞춰 이 모든 것을 다 활용할 수 있다.

 

CSR -> 초기 진입 때 모듈을 왕창 다운받아서

그 이후에 네트워크를 요청하지 않아도 렌더링이 가능하다.

 

SSR -> 미리 만들어진 HTML을 제공

-> 빠르다고 느끼다!

 

next.js를 사용하지 않고 pre-build를 이용하면 가능하다.

서버를 express를 구현해서 서버에 접근했을 때 SSR를 직접 구축하는 방법이 있다.

 

내 능력으로 개발할 수 없는 것들이 있을 때 동기 부여를 받는 편이다.

무엇을 찾아봐야하는 지 명확해지고 공부할 수 있다.

그런 점이 없어도 동기부여가 되야 한다.

다른 방식으로 구현을 해보면 어떻게 할 수 있을까?

더 잘 구현하라고 하면 어떻게 할 수 있을까?

이런 것들을 생각해본다.

 

사실 개발을 해보면 ' 다 똑같네? ' 라고 생각이 들 때가 있다.

내가 부족한 게 무엇일까? 남들과 비교해보면서 부족한 부분을 찾는 것이 좋은 것 같다.

 

 

내가 잘하고 있나?

남하고 비교하는 수밖에 없다.

나와 비슷하게 시작한 사람들(동기)과 비교해보자. 

자신감이 떨어지는 이유? -> 내가 만족할 만큼 공부하지 않았기 때문이다...

불안감을 떨칠 수 있는 방법은 떨칠 수 있을 때까지 공부하는 수밖에 없다.

 

나보다 더 잘하는 사람이 있다면 나보다 어떤 것을 잘하는지, 내가 무엇을 얻을 수 있는지 생각해보자.

 

구현이 되지 않으면 과감하게 머리를 식히는 것도 추천한다.

잠깐 딴 생각하다가 다시 돌아와서 숲부터 나무를 보는 식으로 해보면 더 잘 될 때가 많다.

 

 

typescript -> javascript는 high 언어에서 high 언어로 변경되는 것이기 때문에

컴파일이 아닌 트랜스파일이다.

컴파일은 상위 개념에서 하위 개념으로 변경하는 것을 의미한다.