TypeScript의 동작원리 & Next.js를 사용하는 이유

 

 

- TypeScript의 동작 원리에 대해 설명해 주세요.
- 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

 

TypeScript의 동작 원리

타입 스크립트의 동작 원리를 설명하기 위해서는 다른 언어의 동작 원리와 다르다는 이야기를 해야하기 때문에 다른 프로그래밍 언어는 어떻게 동작하는지 먼저 알아보자.

다른 프로그래밍 언어의 동작 원리

프로그래밍 언어는 컴퓨터가 사용하는 기계어를 사람이 작성할 수 있게 만들어주는 것이다.

이때, 대다수의 프로그래밍 언어는 컴퓨터가 이해할 수 있도록 기계어로 변환해주는 과정을 거치는데 이를 컴파일(Compile)이라고 한다.

 

컴파일은 컴파일러(Compiler)이 수행하게 되는데, 자바스크립트나 자바 같은 프로그래밍 언어는 바이트 코드라는 (통칭) 기계어로 변환하게 된다.

 

컴파일을 할 때 바로 바이트 코드로 변환되는 것이 아닌데, 컴파일 되는 과정을 간단하게 정리하면 이와 같다.

Js -> AST (추상 문법 트리) -> 바이트 코드 

 

이때 AST는, 코드 실행에 불필요한 코드 및 주석들을 삭제한 트리 구조이다.

 

TypeScript의 동작원리가 다른 언어와 다른 점

다른 프로그래밍 언어의 컴파일 과정을 간단하게 알아보았는데, TypeScript의 컴파일 과정은 어떻게 다를까?

TS -> AST (추상 문법 트리) -> (검사 실패 시, 컴파일 종료) -> (검사 성공 시) JS

 

다른 언어는 컴퓨터가 이해하기 위한 바이트 코드로 컴파일 되는 반면, TypeScript는 JS로 컴파일이 된다.

이는 TypeScript를 사용하는 이유와도 관련이 있는데, 그에 대해서도 알아보자.

 

TypeScript를 사용하는 이유

자바스크립트는 동적 타입 시스템으로, 타입을 명시하지 않고 변수 및 함수를 정의하여 자유롭게 재사용한다.

이에 따른 장점과 단점이 있다.

 

장점 

• 변수에 여러 자료형을 담으며 유연하게 사용할 수 있다

단점

• 코드의 양이 길어질 수록 오류를 발생시킬 가능성이 높아진다
• 코드 작성시에는 작성하는 코드가 어떤 오류인지 발견할 수 없다 (런타임에 오류가 발생)

TypeScript는 자바스크립트의 동적 타입 시스템이 가진 단점을 보완하기 위해 사용하는 자바스크립트의 확장판이라고 할 수 있다. (슈퍼셋 : Superset)

 

- 정적 타입 시스템을 사용하여 코드의 양이 길어져도 변수에 대한 타입 제한을 두어 보다 오류 없이 작성할 수 있다.

- 런타임 이전에, 컴파일 과정에서 오류를 파악하여 런타임 시 오류가 발생하는 것을 방지할 수 있다.

  -> 이때 다시 한 번 TypeScript의 컴파일 과정을 보자

 

TS -> AST (추상 문법 트리) -> (검사 실패 시, 컴파일 종료) -> (검사 성공 시) JS

 

컴파일 과정 중 AST에서 JS로 변환이 완료 되기 전, 에러 발생 가능성을 파악한다.

-> 컴파일 단계에서 타입을 검사하기 때문에 런타임(실행 단계)에서 발생할 수 있는 오류를 사전에 발견하고 수정할 수 있다.

 

TypeScript를 사용하는 이유는 이 뿐만이 아니다.

• 코드 가독성 및 유지보수성 향상 : 타입을 명시적으로 지정함으로써, 코드의 의미를 명확하게 표현할 수 있고, 코드의 재사용성과 유지보수성을 높일 수 있다.
• 협업 효율성 향상 : 타입을 통해 코드의 의도를 명확하게 전달할 수 있기 때문에 협업 효율성을 높일 수 있다.
• 자바스크립트와 호환 : 앞서 말했듯, TypeScript는 자바스크립트의 모든 문법을 포함하는 슈퍼셋이기 때문에 자바스크립트가 사용되는 어떤 곳이든 타입스크립트를 사용할 수 있다.

이렇듯, TypeScript는 자바스크립트와는 다른 동작원리와 타입 시스템을 가졌기 때문에 자바스크립트의 단점을 보완할 수 있어 사용한다.

---

React와 Next.js가 가진 렌더링 방식의 차이점

React는 클라이언트사이드 렌더링(Client-Side Rendering) 방식으로 웹페이지가 렌더링 된다.

이 렌더링 방식의 동작 순서를 보면 이와 같다.

• 텅 빈 HTML 코드를 다운 받아서 텅 빈 화면을 보여준다. public / index.js
• JavaScript를 다운받아서 실행하면, React가 이 안에서 HTML을 만들어 보여줌 src / App.js

이 순서로 동작하기 때문에 초기 로딩이 느리다는 단점이 있고,

이와 더불어 검색 엔진에 제공할 수 있는 정보가 적다는 단점도 있다.

 

 

이를 보완하는 렌더링 방식에는 프리렌더링(Pre-rendering) 이 있는데, 

React에서 프리렌더링을 하기 위해서는

• 서버에서 렌더링을 하기 때문에 서버가 필요함 -> 서버를 직접 마련하기 보단, 서버를 대신 제공해주는 호스팅(Hosting) 서비스를 이용
• 서버 실행을 위한 모든 코드를 작성해야 함
• 이외에 프리렌더링을 위한 작업을 복잡하게 해야 함

이때, Next.js를 사용하면 훨씬 쉽게 프리렌더링을 할 수 있다.

Next.js란?

React프레임 워크 중 하나로, React구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행한다.

Next.js에서의 프리렌더링

• 프리렌더링을 간편하게 해준다.
• Vercel이라는 호스팅 서버로 손쉽게 서버 호스팅을 할 수 있다.

-> HTML을 다운받자마자 렌더링된 화면이 보임

 

이외에도, Next.js는 파일 시스템 기반의 라우팅을 제공하기 때문에 더욱 편하게 페이지를 나누고 개발할 수 있기 때문에 React를 사용할 때 Next.js 로 프로젝트를 구성하기도 한다.

 

 

출처

TypeScript를 사용하는 이유
우아한타입스크립트 with 리액트

TypeScript의 동작원리
한 입 크기로 잘라먹는 타입스크립트

Next.js란?
공식문서 

렌더링 방식
코드잇 Next.js로 웹사이트 만들기