타입 스크립트 + Next.js 입문

오늘과 어제 남는 시간에는 타입스크립트로 과제를 하고 Next.js 라우팅 부분만 가볍게 들어보았다. 오늘은 이에 대해 가볍게 정리해볼 것이다. 

 

타입스크립트

타입 스크립트는 동작할 때가 되면 적당히 타입을 추론해주는 자바 스크립트와 달리, 작성할 때 타입 스크립트 => 자바스크립트로 변환하며 타입을 확정하게 하는 정적 언어이다. 이러한 타입 스크립트는 변수 등의 데이터를 항상 정확하게 넣도록 해서 안전한 프로그래밍 환경을 제공한다. 사용해보니 확실히 로컬 환경에서 일일이 console을 찍지 않아도 데이터의 잘못된 부분을 짚어줘서 편하게 코드를 작성할 수 있었다. 아래의 그림과 같이 타입스크립트 환경에서는 프로그램을 실행하기 전에 오류를 잡아줄 수 있으니 혹시라도 백엔드와의 통신에서 중대한 오류 같은 것을 내는 것을 방지할 수도 있을 것 같다. 

 

타입 스크립트는 위 그림과 같이 자바스크립트처럼 타입 추론을 해주기도 하지만 기본적으로 타입을 내가 확정적으로 표기해주어야 한다. 예를 들어 아래 코드와 같다. 

자바스크립트
function add(a,b){ 
	return a+b
}
적당히 타입을 추론해주기 때문에 매개변수를 잘못넣으면 예기치못한 함수의 결과가 나옴 
예) add(가,1) = 가1


타입스크립트
function add(a:number,b:number):number{
	return a+b
}
매개변수부터 함수의 결과까지 타입을 명확하게 지정해주었기 때문에 
잘못된 값과 결과가 나오면 바로 오류가 뜸
원하지 않는 결과가 나올 가능성이 많이 줄어듬
예) add(가,1) <= 오류

 

이렇듯 타입스크립트는 코드를 작성하는 데에 도움을 주는 편리한 도구라고 보면 될 것 같다.

 

---

Next.js

Next.js는 리액트 프레임워크이다. 

 

프레임워크는 그동안 리액트 프로젝트를 진행하며 사용한 라이브러리와는 달리 특정한 함수나 값 같은 것들을 가져와서 내가 주체적으로 사용하는 것이 아니라 프레임워크 환경에 맞춰서 수동적으로 코드를 작성해야하는 도구이다. 

 

여태껏 사용한 React.js는 라이브러리로 프레임워크처럼 그전까지와 달리 컴포넌트 단위로 코드를 작성해야 했지만, 위의 타입스크립트의 타입스크립트=>자바스크립트 컴파일과 같이 컴포넌트로 작성한 것을 => js파일로 변환해주는 라이브러리를 사용한 것이다. 

 

프레임워크는 이에서 더 나아가 컴파일은 물론이고 여태껏 react-router-dom과 같은 라이브러리를 추가로 설치해야 사용할 수 있었던 기능들을 제공하는 기술을 조합한 개발 환경이다. 

 

 

위 그림과 같이 프레임워크는 개발자가 수동적이라는 특징이 있지만서도 여러 라이브러리 기능들을 통합한 것을 쉽게 사용할 수 있다는 장점이 있다.