Next.js + TypeScript + ESlint + Prettier 세팅(1)

Next.js는 React.js를 개발할 때 SSR(Server Side Rendering)을 보다 쉽게 해주는 프레임워크 중 하나이다.

 

React.js 실무 프로젝트에서 가장 많이 사용되는 프레임워크이며, 나 같은 경우엔 굳이 SSR이 꼭 필요한 상황이 아니더라도 라우팅 등이 편해서 React.js 프로젝트를 할 때는 Next.js 위에서 작업하는 것을 선호한다.

 

이 포스팅에서는 Next.js를 설치하고 TypeScript, ESlint, Prettier를 끼얹는 과정까지만 다룬다.

React.js 및 Next.js 프로젝트에서는 위의 프레임워크, 라이브러리 외에도 Redux나 Styled-Components와 같은 패키지들을 주로 설치해서 쓰곤 하나 반드시 필요한 요소라고는 할 수 없다.

 

TypeScript, ESLint, Prettier의 경우 프로젝트가 어떤 방향으로 흘러가는 반드시 설치하고 활용해야 하는 것들이라 기본 중 기본이라고 할 수 있어 여기서 한꺼번에 다루고 나머지 기타 등등의 세팅은 별도의 포스팅으로 빼는 것이 맞는 것 같다.

 

예전(아직도 SI 업계에서는 이렇게 하는 것 같다)에 JSP나 ASP로 html, css, javascript로 만들어진 프론트엔드 영역을 감싸는 형태로 만든 프로젝트에서는 데이터베이스 쿼리문이나 서버사이드 언어로 로직이 돌아가고 javascript 쪽은 jQuery로 UI 부분만 간단하게 처리하는 방식이라 프론트엔드 영역은 javascript, 심지어 ES6 이상의 문법도 별로 필요가 없었다. TypeScript 같은 건 오히려 번잡하고 컴파일도 해야 해서 불필요한 정도였다.

 

하지만 프론트엔드 개발이 별도로 분리되면서 구조가 복잡해지고 소스코드의 양도 많아졌을 뿐만 아니라, Next.js와 같이 SSR을 지원하는 프레임워크의 경우 프론트엔드임에도 불구하고 동적인 서버사이드가 존재하기 때문에 TypeScript는 사실상 필수로 자리 잡았다.

 

ESLint의 경우 현재 작성 중인 프로젝트의 여러 문법적, 혹은 다른 규칙적인 부분들을 검토하고 에러나 경고를 뿜어줘서 실수를 줄여준다. 또한 TypeScript 컴파일 과정에도 개입하여 배포 시 문제를 최소화하도록 해준다. 그리고 이러한 ESLint 세팅값들을 같이 프로젝트를 진행하는 다른 개발자들과 공유하게 되면 프로젝트의 각종 규약들을 자동화하여 협업에 유리하도록 할 수 있다.

 

Prettier의 경우 간단하게 말해 소스코드의 모양을 이미 세팅된 설정값에 따라 자동으로 잡아준다고 보면 된다. 프로그래밍 코드의 경우 문법적으로 틀리지만 않는다면 컴파일러나 인터프리터가 읽어서 알아서 기계어로 바꿔준다.

// case1
if (a === 1) {
    console.log(a);
} else {
    console.log(a);
}

// case2
if (a === 1)
{
    console.log(a);
}
else
{
    console.log(a);
}

위 2개의 case는 코드 모양은 다르지만 산출되는 기계어 및 결과는 똑같다.

 

하지만 사람은 case1과 case2를 볼 때 마냥 똑같지만은 않다.

 

사람에 따라 case1을 더 선호할 수도 있고 case2를 더 선호할 수도 있다. 이렇게 선호도에 따라 가독성이 달라지고 업무의 효율성도 달라질 수 있다.

 

위의 케이스는 단순히 if else 문의 중괄호를 어디에 붙일까냐는 문제가 아니다. 실무를 하다 보면 javascript의 경우 문자열 기호로 홑따옴표를 쓸지 큰따옴표를 쓸지, 세미콜론을 붙일 것인지 붙이지 않을 것인지 개발자들마다 의견이 갈릴 수 있고 이것을 통일하는 그들만의 규칙을 만들 수도 있다.

 

하지만 사람인지라 홑 따옴표로 쓰기로 약속을 했으나 큰따옴표에 익숙한 개발자의 경우 자기도 모르게 큰따옴표를 쓸 수 있고 그런 순간 규칙은 깨지는 것이다.

 

Prettier는 내가 홑 따옴표를 쓰든 세미콜론을 쓰지 않든 일단 코드를 작성 후에 Save만 하면 알아서 사전 설정된 규약에 맞게 코드를 마법처럼 바꿔준다.

 

협업을 할 때는 당연히 필요하고 혼자 작업할 때도 코드를 예쁘게 만들어줘서 좋다.

 

사전 설명이 너무 길어져서 시리즈로 빼야겠다...

 

2편은 다음에...

 

Next.js + TypeScript + ESlint + Prettier 세팅(2)

Next.js + TypeScript + ESlint + Prettier 세팅(3)

Next.js + TypeScript + ESlint + Prettier 세팅(4)