[React] Client + Server 파일 구조 초기 세팅

Duboo·2022년 9월 28일
1

REACT HOOK

목록 보기
8/16
post-thumbnail

리액트에서 클라이언트와 서버를 동시에 개발하기 위한 초기 세팅


1. 클라이언트 설치

mkdir my-app && cd my-app
클라이언트와 서버가 담길 프로젝트 폴더로 이동

npx create-react-app client
클라이언트에서 리액트를 사용하여 개발하기 위한 리액트 설치


자동으로 같이 설치되는 불필요한 파일을 삭제 및 정리한다.

publicsrc
favicon.icoApp.css
index.htmlApp.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.jskey.js 와 같이 베포시 노출되어선 안되는 정보는 .gitignore에 포함시킨다.

.gitignore 파일이 server에 있는지 확인하고 node_modules을 추가하기


3. 프로젝트에 필요한 파일 생성

.gitignore 파일은 클라와 서버에 각 패키지가 있기 때문에 노드모듈을 깃에 올리지 않기 위해서 각각에 위치해 있어야한다.

.env, README.md등 필요한 파일을 프로젝트에 루트 위치에서 생성

깃헙 연동을 위해 깃헙에서 새로운 레포를 하나 생성

echo "# main-project" >> README.md
프로젝트의 루트 위치에서 리드미 생성 혹은 client에 위치한 리드미 루트로 이동

gitinit부터 romote ~ push까지 깃헙과 연동

profile
둡둡

0개의 댓글