[02-01] 웹 동작-3_개발과 배포 그리고 서비스까지의 흐름

- 과거: 완성된 HTML + JS로 DOM조작(SSR, SSG)

- 해당: 빈 HTML(템플릿만) + 거대한 내용의 JS(DOM 조작 + Repainting)(CSR)

 

1) 작업한 파일들을 올리기 전 합치고 정리하여 각 확장자별 하나의 파일로 병합(번들링)

2) S3서버에 업로드(대충 배포..)

3) 사용자 사용(중간 과정에 CDN이라는 개념이 있는데, 분산 서버를 사용해 웹 성능을 올리는 것)

출처: ASAC 7기 수업자료. 애런 쵝오..

시작 전에 전체적인 흐름을 담고 용어 정리와 기록하고자 한다.

---

번들러(bundler)
번들(bundle)	용어 그차체, 여러 파일을 하나로 묶는 작업
역할	- 파일 합치기(bundling) - 의존성 그래프 처리 - HMR
순서	1)의존성 그래프 생성(entry point 기준) 2) 의존성 분석 3) 파일 병합 및 최적화

 

* HMR(Hot Module Replacement): 변경 사항에 대해 런타임에 적용(개발환경//수정 감지-> 재기동)

code Splitting
목적	애플리케이션 코드를 작은 청크(chunk)로 분리 => 필요한 코드만 로드
장점	초기의 로딩 속도 향상 방문한 페이지에 필요한 것을 로드 -> 효율적 로드 가능 청크는 캐싱 가능 -> 페이지에서 변화가 없다면 재사용을 통해 네트워크 요청을 감소
방법	- entry 기반: entry point를 통해 독립적 번들 생성 - Dynamic import: 미리 import하지 않고 특정시점(사용시점)에서 동적 로드 - SPA에서 라우터별 적용

 

* 듣다가 헷갈린 용어

Dynamic Loading	- 필요할 때, 리소스 동적 로드 - json api 호출, 이미지 호출
Dynamic Import	- 동적 불러오기 - js 모듈에 대한 동적 로드 - ES6부터 import()로	aync import가 있는데, 반환 값이 Promise => .then() or async/await에 사용
Lazy Loading	- 리소스에 대한 지연 로딩

 

* 코드 최적화 시

Uglify	- 코드의 가독성 제거 및 난독화(=> 변수/함수 이름 축약/제거, 주석 제거) - 파일의 크기 감소 및 난독화(보안)
Minfy	- 불필요한 공백, 주석, 줄 바꿈 제거 - 난독화는 XX, 단지 가독성은 낮음

*

Transpiler: A-> A'(같은 언어지만 버전이 다른) Compiler: A->B(다른 언어로 변경)
Bable	- 트렌스파일 목적의 js컴파일러 - 구버전/오래된 브라우저 환경에서의 코드 동작이 목적 - 처리 대상 == 문법
Polyfill	- WB가 지원하지 않는 최신 기능/라이브러리 대용..땜빵 처리용 - 처리 대상 == 기능(api, 메서드, 객체) - core-js, regenerator-runtime

 

*typescript: 타입 지정하고 개발 해도 결국 js 런타임 환경에서 구동된다...

    -> 현재는 .ts->Babel(transpiler)->.js // 타입 다 때려부셔!!!!

    -> 정적 타입 체킹이기 때문에 컴파일 혹은 IDE를 통해 코드의 문법적 위반 사항만 확인

        => 외부의 데이터(사용자 입력, api응답, 파일)에 대한 문법적 위반 사항은 찾기 힘듦(런타임에서는 체킹 힘듦)

 

   => 이를 보안하기 위해 런타임 타입 체커로 joi, zod 사용