멘토님께 혼나고 쓰는 react 프로젝트 초기 세팅

"앞으로 수없이 만들 프로젝트니, 초기세팅 방법은 외우세요"
라고 멘토님께서 단호하게 말씀하셔서 내가 보려고 적는 react 초기 세팅법

터미널에서 npm init -y

npm init -y

npm init 끝에 -y를 적으면 이름 등을 따로 적거나 엔터 눌러서 넘기지 않아도 알아서 자동으로 넘어간다.
package.json 파일이 생성된 것을 확인한다.

• 추가설명
  frontend에서도 노드 패키지를 많이 이용할 것이기 때문에 npm init이 필수이다.
  npm은 Node Package Manager의 약자로, node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포한다.
  다른 사람이 잘 만들어놓은 모듈들을 npm을 통하여 설치하여 사용이 가능하다.

터미널 npm i react next typescript

npm i react next typescript

스페이스바로 구분하여 react next typescript 동시에 설치

.gitignore 파일 생성

/node_modules
/.next
/out 

.gitignore 파일에는 git에 올리지 않을 파일들을 작성한다.
git에 node_modules 파일은 너무 무겁기 때문에 올라가지 않도록 한다.
.next와 out은 next.js에서 임시폴더로 사용하기 때문에 git에 올리지 않는다.

src 폴더 생성

하위 폴더 pages, components 생성

next.js에서는 pages 폴더를 약속처럼 사용한다. 필수적으로 존재해야 하는 폴더이다.

pages 폴더 안에 _app.tsx 파일 생성

페이지들의 근간.

import { AppProps } from 'next/app'
const App = ({ Component, pageProps }: AppProps) => {
	return (
    	<>
        	<Component {...pageProps} />
        </>
    )
}

export default App

pages 폴더 안에 index.tsx

const Index = () => {
    return <p>Id</p>
}

export default Index

package.json의 scripts에서 "dev" 명령어 추가

"scripts": {
        "dev": "next dev"
    },

scripts 항목에 다양한 명령어를 설정해두고 콘솔에서 실행할 수 있다.

1. start 명령어에 설정된 코드는  npm start  로 실행할 수 있다.
   - npm stop 으로 start한 걸 멈출 수 있다.
   - npm restart 으로 stop된 걸 재실행할 수 있다.
   - start 명령어를 별도 설정하지 않은 경우, node server.js 가 실행된다.

2. test 명령어에 설정된 코드는  npm test  로 실행할 수 있다.

3. 그 외 명령어에 설정된 코드는는  npm run 명령어  로 실행해야 한다.

터미널 npm run dev

npm run dev
를 돌리면 아랫줄의 코드대로 설치하라 뜰 것이다.

npm install --save-dev @types/react

로 인스톨 후 npm run dev로 돌리면 된다.

tsconfig.json에 "moduleResolution": "node" 추가

"moduleResolution": "node"

_app.tsx 파일 맨 윗줄에 'next/app'이 빨간 줄 뜨는게 없어진다.

출처

• npm 소개와 설치 (About Node Package Manager)
  https://web-front-end.tistory.com/3

• Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및사용 방법
  출처: https://curryyou.tistory.com/346 [카레유:티스토리]