코드잇 스프린트 13주 차 위클리 페이퍼

코드잇 스프린트 4기

13주 차 위클리 페이퍼

 

https://codingaring.tistory.com

 

 

1. TypeScript의 동작 원리에 대해 설명해 주세요.

타입스크립트는 컴파일 과정을 통해 자바스크립트 파일로 변환된다.

 

우선 Scanner에 의해 타입스크립트 코드를 토큰으로 분리시킨다.

분리된 토큰을 Parser가  타입스크립트 AST(추상 문법 트리)로 만들어준다. 이 과정에서 코드의 구문 오류도 잡아낸다.

AST(추상 문법 트리)는 코드의 실행과 상관없는 요소가 제거된 데이터 스트럭쳐이다.

 

Binder는 타입스크립트 AST를 읽어 타입 검사에 필요한 데이터를 수집한다. 수집한 데이터로 메타 데이터를 만들어 Symbols table에 저장한다. 이후 TypeChecker에 의해 타입스크립트 AST와 Symbols table을 기준으로 타입 검사가 진행된다.

 

타입 검사가 정상적으로 완료되면 Emitter는 타입스크립트 AST 파일로 자바스크립트 파일을 생성한다.

Emitter에는 JS코드를 생성하는 Emitter와 타입을 정의하는 Emitter가 존재한다.

 

2. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

일반적인 리액트로 진행하는 개발은 CSR(Client-Side Rendering)으로 웹 사이트를 요청했을 때 빈 HTML을 가져와서 스크립트를 로딩하기 때문에 로딩 과정에서 빈 화면만 보이게 된다. 이는 사용자 경험에 좋지 않다. 또 스크립트 로딩이 완료 되어야 메타 데이터가 생성되기 때문에 SEO에도 SSR(Server-Side Rendering)보다 취약하다.

 

Next.js를 통해 얻을 수 있는 이점

• SSR, CSR, SSG(Static-Site Generation) 등의 다양한 렌더링을 제공하며 SSR을 손쉽게 개발할 수 있게 해준다.
• 파일 기반 라우팅 시스템을 지원해서 파일 구조로 라우팅을 직관적으로 설정할 수 있다.
• Link 컴포넌트로 페이지 이동 시 전체 페이지를 리로딩하지 않기 때문에 사용자 경험이 좋다.
• 이 외에도 프리 렌더링, 코드 스플리팅 등을 지원해서 개발자 경험이 좋다.

 

 

감사합니다.