Next.js 시작하기 - 프로젝트 세팅 (1)

시작하기에 앞서...

React 개발자로 일한지 어느덧 2년차에 접어들었지만, 스스로 기술적인 성장을 이룩하였는가에 대하여 돌아볼 때면 1년 전과 그리 차이가 크지 않은 것만 같은 불안감이 엄습했던 시기가 있었다. 아무래도 React 프레임워크 자체가 지금은 퇴사한 회사에서 사용된지도 3년 정도 밖에 되지 않기도 하고, 모두 처음 시작하는 것이다 보니 체계가 잡혀있거나 조언을 구할 사람이 없었던 것이 원인이었다. 지금은 물론 예전보다는 나아졌지만, 그것보다도 더, IT 산업은 빠르게 변화하고 있었다.

 

때문에 작년 12월 부터 이번년도 4월까지 F-Lab에서 별도의 멘토링 수업을 수강하였다. 이 때 프로젝트로 진행했던 트렐로 클론 코딩 프로젝트를 다시 한 번 해볼 겸 포스트를 작성한다. F-Lab 수업에 대한 내돈내산 후기는 Next.js 포스팅이 끝나면 별도로 다뤄볼 생각이다. 

 

왜 Next.js인가?

이직을 준비하면서 프론트엔드 개발자 공고를 찾아보는 동안, 많은 회사에서 요구한 기술 스텍 중 하나는 Next.js 프레임워크였다. React도 충분히 난해한데 Next.js를 왜 사용하는지 알아보았고, 간단히 정리하자면 Server Side Rendering 으로 동작하는 특성 때문이라고 할 수 있다.

 

기본적으로 React는 CSR, Next.js는 SSR로 동작한다.(물론 Next.js는 use Client라는 코드를 통해 일부 CSR로 동작하게 만들 수도 있다.)  이때 CSR은 빈 html 파일과 js를 클라이언트 사이드로 보내고, 클라이언트 측에서 이러한 빈 파일에 js 파일을 기반으로 랜더링하여 페이지를 구성한다. 때문에 처음 페이지에 접근할 경우 빈 화면이 뜨다가 랜더링이 끝나면 짠 하고 나타난다.

 

SSR은 반대로 서버 측에서 랜더링을 끝낸 페이지를 클라이언트로 보내준다. CSR과 달리 완성되 html을 보내주기 때문에 유저의 입장에서는 TTV(Time To View)가 짧다. 

 

물론 두 가지 방법 모두 장단점이 분명히 존재하지만 많은 회사에서 SSR로 전환하려는 가장 주요한 이유는 SEO 때문이라고도 할 수 있다.

 

많은 회사에서 면접 때 질문하는 것들 중 하나는 SEO 최적화를 해본 적 있나요? 이다. (간단히 검색할 때 우선순위를 더 상위에 올려주는 기능이라고 보면 된다.) 검색 엔진 최적화를 해보았냐고 묻는 것인데, SSR에서는 검색 엔진 최적화가 가능하지만 CSR에서는 불가능하기 때문이다 라고 알고 있는 사람이 많을 것이다. 맞는 말이지만 틀린 말이다. 현재 구글과 같은 경우, 서치 엔진 봇이 자바스크립트 또한 지원하기 때문에 노출이 불가한 것은 아니다.(네이버는 아직 검색엔진 봇이 자바스크립트 실행을 하지 못한다.)  

그러나 검색 엔진 입장에서는 자바스크립트를 실행하여 완성된 HTML이 존재해야 정확한 페이지 정보를 인식할 수 있지만, React는 클라이언트 측에서 랜더링되는 CSR의 구조상 서치 엔진 봇이 직접 랜더링을 수행하고 페이지 정보를 수집해야 하는 추가적인 과정으로 인해 자원이 많이 들기 때문에 SSR을 더 선호하는 것이다.

 

CSR과 SSR에 대한 이야기는 추후에 면접 질문들을 다뤄보면서 한 번 더 정리해보도록 하겠다.

프로젝트 세팅하기

단순히 Next.js 프로젝트라고 했지만, 최근에 많이 사용되는 여러 라이브러리들의 사용 방법에 대해서도 기본적인 활용법을 익힐 용도로 시작한 종합 선물세트 같은 프로젝트이다. Next.js 프로젝트는 이번이 처음이었던 만큼 아직 익숙하지 않은 사람들도 따라할 수 있게 작성해보려 한다. Next.js 프로젝트에서 사용할 다른 라이브러리들은 다음과 같다.

• Next.js 14
• MSW mocking
• Typescript
• Zustand
• React-Hook-Form
• React query
• ESLint+Prettier
• Jest

Next.js 14 버전으로 바뀐지 반년 밖에 되지 않았다보니, 아직 다른 라이브러리들과의 호환에 대하여 문제를 겪었던 일이 종종 있었다. 특히 MSW 가 도통 동작하지 않아 초기 세팅에 고생을 많이 했다.

 

Next.js 프로젝트 생성

해당 프로젝트는 이미 Node.js가 설치되어있다는 가정으로 생성 과정을 설명하고 있다. 만약 아직 Node.js가 설치되어있지 않을 경우, 아래의 블로그를 참고하여 Node.js 설치를 진행해야 한다.

https://ffoorreeuunn.tistory.com/199

[ Node.js ] Node.js 설치하기 & npm 설치하기 & npx 설치하기

이때 npx까지 설치해줘야 함을 잊지 말자.

 

설치가 다 끝나면 아래와 같이 터미널 혹은 CMD 창에 명령어를 입혁한다.

npx create-next-app@latest

 

명령어를 입력하면 보게 될 질문들은 다음과 같다.

1. ok to process? - Y
2. what is your project name? - 디폴트로 my-app이 되어있다. 원하는 프로젝트 이름을 작성해주자.
3. Would you like to use Typescript? - 타입스크립트를 사용하기로 했으니 Y를 하면 된다. 자동으로 타입스크립트 세팅을 해준다.
4. Would you like to use ESLint? - 코드 컨벤션이나 안티 패턴을 자동으로 검출하여 코드를 깔끔하게 쓸 수 있도록 돕는 스타일 가이드를 제공한다. 커스터마이즈도 가능하며 올바른 코드 작성을 위해 권장되는 기능이니 Y로 설치해주자.
5. Would you like to use Tailwind CSS? - tailwind css 스타일 라이브러리를 이용할 것인지에 대해 질문하고 있다. 이번 프로젝트에서 tailwind css 대신 MUI를 사용할 예정이기에 tailwind css 를 추가하지는 않았지만, 해당 라이브러리를 사용할 것이라면 Y를 하면 된다.
6. Would you like to use src/ Directory? - src 폴더를 별도로 생성할 것인지에 대하여 질문하고 있다. react에서는 기본적으로 src 폴더 하위에 파일들을 생성하여 사용하지만, Next.js에서는 src 폴더를 생성하지 않을 경우에는 app 디렉토리가 상위에 존재하게 된다. 여기서 무엇이 더 나은 폴더 구조인지에 대해서는 개인마다 차이가 있지만, 보다 깔끔한 폴더 구조를 만들고 싶었던 만큼, src 디렉토리를 선택하여 진행할 예정이다.
7. Would you like to use App Router? - React에서는 라우터를 사용하기 위해 별도의 세팅이 필요했지만, Next.js에서는 폴더 구조 규칙을 따라 생성할 경우, 해당 폴더에 대한 라우팅이 자동으로 된다. Y를 통해 이 기능을 사용하도록 한다.
8. Would you like to customize the default import alias(@/*) - 경로를 사용하여 import 할 경우 해당 import 구문을  @/components/index.tsx 와 같이 간단한 구문으로 가져올 수 있게 돕는다. Y를 통해 세팅한다.
9. What import alias would you like configured? - 개인적으로는 @/*를 선호하지만 원하는 기호 표시로 선택하면 된다.

설정이 끝나고 npm run build를 먼저 한 뒤 npm run start를 해야 한다. 그러지 않을 경우 에러가 발생한다.

start가 정상적으로 실행되면 http://localhost:3000/에서 확인할 수 있다.

이런 화면이 보인다면 정상적으로 프로젝트 세팅이 완료된 것이다.

험난한 Next.js 프로젝트 생성이 끝났다. 이제 더 험난한 라이브러리 세팅을 해보자.