[모두의 이력서_1일차] 기본세팅 + 프론트 Next.js+TS 세팅

프로젝트를 시작하기 앞에서 기본세팅에 대해 적어보려 합니다.

처음으로 혼자서 프론트부터 백까지 하는 프로젝트이다보니 정확하지 않을 수 있습니다!

 

 

프론트

• Next.js + TS

 

백엔드

• Express + TS

 

*이번 프로젝트는 npm으로 설치하겠습니다.*

 

 

기본세팅

---

1. 프로젝트 폴더를 만들고 vscode키기

 

2. front작업할 폴더, back작업할 폴더 만들기

저는 fornt, back으로 만들었습니다.

 

3. 프로젝트 폴더를 하나의 레포지토리로 관리하기 위해 git으로 만들기

git init

이렇게 하면 git폴더가 생긴다.

 

4. README.md 파일 생성하기

프로젝트 설명을 적을 파일

 

5. .gitignore 파일 생성하기

깃에서 무시하면 좋은 파일들 적기

// .gitignore
node_modules
.env

node_modules를 적은 이유

• 너무 크기 때문에
• 라이브러리는 npm install하면 package.json에 있는 dependencies에 있는 라이브러리를 다운 받을 수 있기 때문에

.env는 환경 변수 파일, 애플리케이션이 실행될 때 넘기고 싶은 특정 값을 담고 있는 변수를 기록합니다.

 

기본적인 세팅 끝!

 

프론트(Next.js + TS)

---

1. next.js 설치

npx create-next-app --typescript . // .은 현재 있는 폴더에 그대로 프로젝트를 만들어줘라라는 의미

npm i next react react-dom

npm run dev // 실행

npm i --dev typescript @types/react @types/node // 타입스크립트 관련 패키지

 

2. npm 사용예정임으로 yarn.lock파일 삭제하기

npm i

 

package-lock.json 파일 생성

 

참고자료

---

기본적인 초기세팅 및 Express까지의 내용이 담겨있음

https://www.youtube.com/watch?v=ntFeJ30GE40&t=627s 

 

프론트 Next.js세팅 (이 블로그는 yarn으로 설치했음)

https://ryurim.tistory.com/m/143

22.06.28 TIL NEXT.js + typescript: 초기세팅 (오늘의집 클론코딩 초기세팅)