리액트에서 클라이언트와 서버를 동시에 개발하기 위한 초기 세팅
1. 클라이언트 설치
mkdir my-app && cd my-app
클라이언트와 서버가 담길 프로젝트 폴더로 이동
npx create-react-app client
클라이언트에서 리액트를 사용하여 개발하기 위한 리액트 설치
자동으로 같이 설치되는 불필요한 파일을 삭제 및 정리한다.
| public | src |
|---|---|
| favicon.ico | App.css |
| index.html | App.js |
| index.js |
위 파일만 남기고 삭제
파일 수정
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
<-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>css 파일들은 삭제해도 무관
client > src > compoent, routers, styles 등 클라이언트에서 사용될 컴포넌트와 페이지등을 담을 폴더를 생성
*client > src > setupProxy.js
api 요청등으로 미들웨어가 필요할 경우 setupProxy.js 파일 생성
.gitignore 파일이 client에 있는지 확인하고 node_modules을 추가하기
2. 서버 설치
my-app 위치에서 서버 설치
mkdir server
server 폴더에서 package.json 생성을 위해 npm init
server 폴더에서 package-lock.json 생성을 위해 npm install
server > index.js 혹은 server.js 파일 생성
server > config 폴더 생성
server > config > dev.js, key.js, prod.js등 설치
dev.js 및 key.js 와 같이 베포시 노출되어선 안되는 정보는 .gitignore에 포함시킨다.
.gitignore 파일이 server에 있는지 확인하고 node_modules을 추가하기
3. 프로젝트에 필요한 파일 생성
.gitignore 파일은 클라와 서버에 각 패키지가 있기 때문에 노드모듈을 깃에 올리지 않기 위해서 각각에 위치해 있어야한다.
.env, README.md등 필요한 파일을 프로젝트에 루트 위치에서 생성
깃헙 연동을 위해 깃헙에서 새로운 레포를 하나 생성
echo "# main-project" >> README.md
프로젝트의 루트 위치에서 리드미 생성 혹은 client에 위치한 리드미 루트로 이동
gitinit부터 romote ~ push까지 깃헙과 연동
