[정리] React + Vite 로컬 프로젝트 생성(터미널 기준)

로컬 프로젝트 생성시,

Frontend , Backend 로 작업물을 분리하여 진행시 필요한 npm install 리스트

 

# Frontend

순서	명령어	설명
1	npm create vite@latest 프로젝트명 Select a framework : React Select a variant : JavaScript	리액트 프론트앤드 프로젝트 폴더 생성 (반드시 해당 명령어로 생성!) (리액트/자바스크립트로 생성)
2	npm install react-router-dom	리액트 라우터 모듈 설치하기
3	npm install --save axios	axios 설정 설치하기, HTTP 요청용
4	npm install @mui/material @emotion/react @emotion/styled	mui 설치하기
5	npm install	리액트 실행(packge.json의 디펜던시를 설치)
6	npm run dev	리액트 서버 가동

 

---

 

# Backend

순서	명령어	설명
1	mkdir 리액트 프로젝트명	리액트 백앤드 프로젝트 폴더 생성
2	npm init	노드 기반의 프로젝트 초기화
3	npm install express cors json body-parser nodemon	필요한 모듈 한꺼번에 설치 - cors : 다른 도메인에서 제공하는 리소스에 엑세스 할 수 있음 - json : json 파싱 - body-parser : 클라이언트로 부터 전달된 요청 body 받기 - nodemon : index.js 저장시 서버 새로고침
4	npm install oracledb	오라클 디비를 연결하는 드라이버 설치
5	npm install multer	이미지, 파일등을 업로드하기위한 미들웨어 설치
6	npm start 혹은 node index.js	서버를 가동 (index.js에 서버 실행 내용을 작성하고, index.js 자체를 호출해도된다.)