[Web] 2022 연말 Client / 웹 개발 관련 유의 키워드

1. Vite

- 무엇인가.

웹번들러. 너무 많아지는 자바스크립트 라이브러리에 대응하여, 실제 웹 페이지 서비스에서 필요한 것만 묶어내는 도구.

go lang으로 작성된 esbuild 사용, 라이브러리 설치시 bundle 미리 생성, 소스코드는 필요한 것만 손대는 적절함까지.

 

웹 번들링의 시간을 줄여냄에 따라, '미리보기' 기능 또한 강점이 있다. 

 

- 유사품 (번들링 툴)

(1) webpack. 사실 근본이다.

npm run build 때리면 번들링 해서 node_modules의 파일을 근간으로, dist에 필요한걸 생성.

-> 필요한 js파일을 하나로 만들어내며, import/require을 요구하지 않게됨.

 

(2) snowpack

얘는 나중에 찾아보자.

 

 

 

- 사용법 (+React)

npm create vite@latest

create-react-app이 아니다. webpack은 npx create-react-app. 

이제는 vite. 

npm run build

build란 무엇인가. 번들링 툴을 이용해서 js파일을 합쳐내는과정.

 

2. npm

-무엇인가.

그냥 쓰자. 라이브러리 설치, 관리를 도와주는 패키지 매니저.

node.js 설치하면 함께 설치된다.

* node설치하면 웹브라우저가 아닌 다른 환경에서도 js파일을 바로 실행 가능하다. 사실 그러니 서버로도 사용가능한거지.

라이브러리를 설치하면 node_modules에서 설치된다.

 

 

3. 웹 번들링 툴

- webpack, vite등

- 미사용 함수, 변수도 제거해주고

- ts, jsx, vue확장자로 떨어지는 기타 파일들 모두 .js로 변환해주면서

- 최신 문법에 호환성 좋도록 재구성해주는 역할까지. 크.

 

4. SSR과 왜 CSR이 아닌 SSR

클라이언트 사이드 렌더링하면 SPA도 이쁘게 만들고 잘 될줄 알았지만..

구글 검색 결과 노출에 난항, 그리고 첫페이지의 로드가 끔찍하게 길어지고 (single page app에 다 뚜들겨 담으니 그럴만도..)

그래서 서버에서 html을 만들어서 보내주기. 

사실 근본있는 방법이라고 한다 (asp.net라던지..)

 

 

5. Typescript

 

type 기능을 강화한 자바 스크립트.

그러나 .ts는 브라우저에서 기본으로 읽어들이지 못하니, 번들링툴을 이용해 .js로 변환 유의할 것.