악역영애의 개발일지

React 프로젝트를 시작해보자

그런데 이제 next.js 와 typescript 를 곁들인... !!

Node js 설치

프로젝트 생성 전에 무조건 node js 가 설치되어있어야 하므로 아래 커맨드로 node js 가 설치되어있는지 확인해보자

$ node -v

설치되어있지않다면, node js 홈페이지로 이동하여 Recommended For Most users 버전을 다운받자

https://nodejs.org/en

프로젝트 생성

내가 프로젝트 만들 위치로 이동하여 아래 커맨드를 실행시킨다

$ npx create-next-app react_next

아래와 같은 옵션을 선택해야하는데, 필요에 따라 선택하면 된다

√ Would you like to use TypeScript? ... No / Yes
 -> 나는 ts 쓸꺼라서 yes

√ Would you like to use ESLint? ... No / Yes
-> ESLint 쓸꺼라서 yes
참고로 ESLint는 간단히 말해서 야 이거 틀렷어!! 하고 난리쳐주는 고마운 검수자이다

√ Would you like to use Tailwind CSS? ... No / Yes
-> tailwind css안쓸래

√ Would you like to use `src/` directory? ... No / Yes
->소스 디렉터리 시작점을 app으로 할건지 

√ Would you like to use App Router? (recommended) ... No / Yes
-> 라우터 안쓸거라서 No

√ Would you like to customize the default import alias (@/*)? ... No / Yes
-> 안쓸거라서 No

src 안쓸때	src 쓸때	src 안쓰고 app router 안쓸때

프로젝트 실행

다운로드가 종료되면 아래 커맨드로 프로젝트를 실행시킨다

$ npm run dev

참고로  start 는 운영이고, dev는 개발이라고 보면 된다

run start 로 프로젝트를 실행시키면 로컬에서 소스코드 변경해도 바로 브라우저에 반영이 안된다
.next 로 만들어진 폴더의 내용물을 보여주기 때문이다

하지만 run dev로 실행시키면 소스코드 변경 시 바로 브라우저에 반영되므로 개발할땐 dev로 실행시키자

하지만 프로젝트 실행 시 다양한 이유로 실행이 안될수도있다.

나의 경우엔 node js 버전이 너무 낮아서 버전업이 필요한 상황이었다

$ npm run dev

> react_next@0.1.0 dev
> next dev

You are using Node.js 18.16.0. For Next.js, Node.js version >= v18.17.0 is required.

보면, 내가 설치한 node js 는 18.16.0 버전이지만, 요구되는 버전은 18.17 이다

nodejs 홈페이지 가보니까 20이 나와있는 상황이라 겸사겸사 다시 다운받았다.

node js 버전업 하는 방법이야.. 여러 방법이 있지만 나는 다 귀찮으므로 ㅋㅋㅋ

node js 홈페이지에서 다운로드파일 받고 실행시키면 알아서 버전업 된다

혹시 next: command not found 뜨면 npm install 해주고 실행하면 된다

호옥시!!! 그래도 안된다면 npm run dev 커맨드 실행하는 위치가 프로젝트 루트위치에서 실행하는게 맞는지 꼭 확인할것

프로젝트 확인

npm run dev를 실행하면 아래와 같이 표시될것이다

localhost:3000 부분을 클릭하면 브라우저가 열리고 react-next project가 보인다

여기까지 보인다면 프로젝트 설치  성공!