Next.js + Typescript 초기 세팅하기

취업 준비를 하면서, 포토폴리오에 대한 고민이 깊어졌다.

원래 있던 노션 포토폴리오가 있는데, 이력서를 갈아엎고 수정하는 과정에서 방치되었다.

그래서 종종 포토폴리오를 요구하는 회사는 지원하지 못했었는데,

next.js 공부도 할 겸 개인 프로젝트로 포토폴리오를 만들어보기로 했다.

(tmi, 이렇게 블로그에 적어놓으면 미래의 내가 찔려서라도 만들 것 같았다...)

 

그래서 잊어버리지 않기 위해 초기 세팅에 대한 글을 적어본다.

 

 

 

 

 

 

 

1. Next.js 설치하기

npx create-next-app@latest [projectName]

 

react로 프로젝트 세팅할 때와 비슷하지만 다른 명령어이다.

projectName은 본인이 원하는 이름으로 작성하면 끝.

 

 

2. 이어지는 질문들 대답하기

2-1. Would you like to use TypeScript?

터미널에 1번 명렁어를 입력하면 조금 뒤에 질문들이 연달아 나온다.

첫번째로, typescript를 사용할 거냐고 묻는 질문이다.

 

캡처를 해놓지 못해 아쉽지만, 나는 yes를 선택했다.

굳이 사용하지 않으려면 no를 택하면 자동으로 javascript로 설치된다.

 

2-2. Would you like to use ESLint?

질문처럼 ESLint를 프로젝트에 포함시킬지 묻는 질문이다.

 

ESLint란?

ES와 Lint를 합친말이다.

ES는 Ecma Script로, Ecma에서 만든 Script로 표준 JavaScript를 의미한다.

Lint는 에러가 있는 코드에 표시를 달아놓는 것을 말한다.

 

즉, ESLint는 자바스크립트 문법에서 에러를 표시해두는 도구이다.

프로젝트를 진행하면서 직접 수정할 수도 있는데, 협업할 때 유용하게 쓰인다.

 

https://daydream-sy.tistory.com/301

[Error] nest.js 사용중 Delete cr 에러 해결하기

 

이 글처럼, 줄바꿈에도 에러를 표시하는 일이 종종 있다.

eslint의 prettier의 개행 방식 때문에 벌어지는 오류인데, 이런 오류들은 사실 사람이 알 수 없는(ㅋㅋ) 휴먼 에러들도 있기 때문에 나는 yes를 선택했다.

 

2-3. Would you like to use Tailwind CSS?

tailwind css를 사용할 건지 묻는 질문.

 

https://daydream-sy.tistory.com/302

React + Typescript와 tailwindCSS 초기 세팅하기

이 글처럼, 나는 항상 react를 쓰면서 tailwind CSS를 사용해서 따로 세팅을 해주어야 했는데,

next.js는 이렇게 설치할 때부터 나와서 신기했다.

 

이번에 한 기업의 과제전형을 진행했는데, 그 때 오랜만에 tailwind CSS를 쓰고 styled-components와 다른 매력을 느껴서 나는 포토폴리오에도 쓰기로 했다.

 

no를 눌러도 나중에 설치할 수 있으니 상관 없다.

2-4. Would you like to use src/directory?

나는 이 질문이 뭔지 궁금했다. 항상 src 폴더를 사용하지 않나 싶어서.

그래서 다른 블로그들과 next.jst 공식 문서를 보면서 궁금증을 해결했다.

 

이 질문은 프로젝트의 소스 코드를 src/ 디렉토리 안에서 구성하고 싶은지 묻는 것이다.

다들 src 폴더 안에서 관리할텐데 무조건 나는 yes를 선택했다.

2-5. Would you like to use App Router?

Next.js의 Custom _app.js 혹은 _app.tsx 파일을 사용할 것인지 묻는 질문이다.

 

두 파일 모두 모든 페이지에 공통적인 레이아웃을 적용하거나 페이지 전환 시 상태를 유지하는 등의 용도로 사용할 수 있다. 혹은 global css를 적용할 때도 사용할 수 있다.

 

이건 필요에 따라 yes, no를 선택할 수 있는데 나는 선택했다.

어차피 공통된 코드를 사용할 때가 있을 텐데 나중에 따로 만드는 것보다 초기부터 있는게 낫지 않나 싶어서.

이건 본인 선택이기는 하다.

2-6. Would you like to customize the default import alias?

import 경로에 대한 alias를 따로 정의할 것인지 묻는 것이다.

 

alias란?

특정 디렉토리를 가리키는 새로운 이름을 설정하는 것을 의미한다.

import할 때 자주 사용하는 경로를 따로 설정해주고 짧게 참조할 수 있다는 것이다.

 

만약 yes를 선택하면 바로 설정하는 옵션이 활성화되는데, 나는 no를 선택해서 보지는 못했다.

아직까지 alias를 해본 적이 없는데, 만약 회사에 가서 실제로 적용하나 이건 좀 궁금하긴 하다.

 

 

 

 

 

3. 설치 완료

이대로 쭉 설치하기만 하면 끝이다.

 

 

 

 

 

 

 

 

 

 

---

 

이렇게 간단하게 설치가 끝났다.

블로그 글 올리기 며칠 전에 설치가 끝나서 캡처를 하지 못해 아쉽긴 하다.

포토폴리오를 위해 설치하긴 했지만, 실제로 next.js를 적용해 본적이 없어서 조금 떨린다.

 

포토폴리오를 만들다가 갑자기 개인 프로젝트를 해볼수도 있고...(잘 모름)

우선은 이력서를 다듬고 포토폴리오를 만들어야 겠다.