[Study] 타입스크립트를 이용한 게시판 프로젝트 - 1 : 프로젝트 세팅

# 환경

• OS : MacOS - Monterey
• IDE - VS code
• Language + env : Typescript + React / Node.js + Express

 

# git repo 생성

• git repo 주소 : https://github.com/kcjfgnl9205/elice-ts-board/
• git branch
  • main
  • development : back-end
  • front-dev : front-end

// git clone
git clone https://github.com/kcjfgnl9205/elice-ts-board.git

// 프론트 엔드 개발 전용 로컬 저장소 branch 생성
git checkout -b dev-front

 

# front-end & back-end 환경 세팅

// front-end : react + typescript
npx create-react-app client --template typescript

// back-end : node.js + express
npm init -y
npm install -y express
mkdir server
// server.js 파일 생성
cd mkdir
mkdir Router
// 라우터 테스트를 위한 test.js 생성
node server.js

server 초기 세팅 테스트 화면

 

// npm script를 여러개 동시에 실행할 수 있는 모듈 설치
npm install npm-run-all --save-dev

// nodemon 설치
npm install --save-dev nodemon

• 프로젝트의 package.json script 부분 수정

// 초기 내용
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  
  
// 수정한 json 파일
  "scripts": {
    "start": "npm-run-all --parallel start:**",
    "start:server": "cd server && nodemon server",
    "start:client": "cd client && npm start"
  },

// 원격 저장소로 브랜치 업로드
git branch --set-upstream-to origin


+a 백엔드 설치시 추가하면 좋을 것 같은 패키지 나중에 해보도록하자
npm install cors // CORS 이슈 해결 가능

 

 

 

 

 

 

## 설정 관련 참고 

https://velog.io/@zero9657/%ED%98%84%EC%9E%A5%EC%8B%A4%EC%8A%B5-%EA%B7%B8-%ED%9B%84-React-Node.js-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%951#span-stylebackground-color-fff5b1%EC%85%8B%ED%8C%85span--%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%84%9C%EB%B2%84-%EB%85%B8%EB%93%9C-%EC%84%9C%EB%B2%84-%EB%8F%99%EC%8B%9C-%EC%8B%A4%ED%96%89