Week13 paper

TypeScript의 동작 원리

타입스크립트 컴파일

타입스크립트는 그 자체로서 해석되어 동작하지 않으므로 타입스크립트를 자바스크립트로 먼저 컴파일하는 별도의 과정을 거치게 된다. 일반적으로 프로그래밍 언어가 컴파일되어 기계어로 번역되는 것에 선수과정이 하나 더 추가된 것으로 이해하면 된다.
더불어 타입 검사를 컴파일 과정에 진행하여 올바른 타입으로 작성되었는지 확인한다.

1. 우선 타입스크립트로 작성한 코드를 AST(abstract syntax tree)라는 추상 구문 트리로 만든 후 타입 검사를 실행한다.
2. 이때 타입 검사에 실패하면 컴파일이 종료되고, 성공하면 자바스크립트 코드로 변환된다.
3. 변환된 자바스크립트 코드를 다시 AST로 만든다.
4. AST에 따라 기계어로 번역된 것을 실행한다.

자바스크립트는 "자바스크립트 언어 -> AST -> 기계어" 단계만을 거친다.

NextJS를 사용하는 이유

리액트가 일반적으로 SPA을 구현하고 CSR 방식을 사용함에 따라, 웹사이트에 처음 접속했을 때 초기 렌더링 시간이 다소 오래 걸리고 이 렌더링 시간동안 사용자는 빈 HTML 화면을 보고있어야 하는 문제점이 있었다. 더불어 검색엔진이 유효한 자료를 수집하지 못해 SEO에 불리하다는 단점 또한 존재했다.

NextJS는 이런 문제점을 개선하기위해 SSR 방식을 기본으로 사용하여 프리렌더링을 지원한다. 서버에서 HTML을 미리 렌더링이 완료된 상태로 사용자에게 보내주기 때문에 초기 렌더링 시간이 짧고 SEO에도 유효한 홈페이지 정보를 전달할 수 있으므로 유리하다.

더불어 아래와 같은 추가적인 장점이 있다.

1. 이미지 최적화

• Image 컴포넌트를 제공하여 디바이스 크기에 맞는 이미지를 제공하여 리소스 소모를 줄이고 로딩을 빠르게 함
• lazy-loding을 제공하여 초기 로딩 시간을 단축함
• 블러 이미지를 먼저 띄워주는 등 로딩 과정에서의 layout shift를 방지
• 이미지를 최신 포맷(AVIF, WebP) 형식으로 변환해 전송하여 이미지를 압축함

2. 코드 스플리팅 지원

• 페이지 단위의 코드 스플리팅을 지원하여 초기에 모든 코드를 다 불러오지 않음

3. 페이지 이동시 CSR처럼 동작

• SSR의 단점으로 페이지 하나하나마다의 이동에 시간이 오래 걸린다는 것이 있으나, 이후 페이지 이동시부터는 CSR처럼 동작하게 되므로 페이지간 이동도 빠름
• client side navigation으로 <Link> 컴포넌트를 이용했을 경우 링크된 페이지에 대한 코드를 미리 가져와 빠르게 페이지 이동을 할 수 있게 함

4. 파일 시스템 라우팅 제공