하나의 깃헙 그리고 로컬 폴더에서 클라이언트와 서버를 같은 공간에 두지 않고 서버용 깃헙, 서버용 로컬 폴더 / 클라이언트용 깃헙, 클라이언트용 로컬 폴더 따로 작업하기 때문에 react를 사용한 클라이언트 개발 환경 설정을 해줍니다.
설치
yarn create react-app my-app
자동으로 같이 설치되는 불필요한 파일을 삭제 및 정리한다.
| 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 > compoents, shared, pages, js, api, styles 클라이언트에서 사용될 컴포넌트와 페이지등을 담을 폴더를 생성
*client > src > setupProxy.js
api 요청등으로 미들웨어가 필요할 경우 setupProxy.js 파일 생성
-
compoents : 컴포넌트들을 위한 폴더
-
shared : 공통적인 코드로 공용으로 사용할 법한 파일을 위함 그리고
Router.js와 같이 라우터 역할도 함 -
pages : 실제 페이지 역할을 할 컴포넌트를 위한 폴더로 페이지 단위의 컴포넌트들이 들어감
-
js : 스크립트 파일을 위한 폴더로 해당 폴더에 함수등을 정리하고 필요한 컴포넌트 파일에서 가져와서 사용
-
api : fetch or axios 등과 같이 api 요청을 위한 함수를 정리하기 위한 폴더로 하위 폴더로 GET, POST, DELETE 등... 을 추가해준다.
-
styles : css 정리 폴더
.gitignore 파일이 client에 있는지 확인하고 gitignore.io 👈 여기에서 .gitignore 파일에 추가될 목록 확인하고 추가
키워드는 react, linux, visual studio code 등...
최종적인 폴더/파일 구조
src
- src
- components
- js
- api
- GET
- POST
- DELETE
- PUT
- PATCH
- pages
- shared
- styles
.
.
.확장자 변경
여기서 추가로 컴포넌트와 JS의 확장자가 .js로 동일할텐데 구별을 위해서 컴포넌트 파일은 .jsx로 JS파일은 .js로 구별해주자
ex) App.js 👉 App.jsx
개발 브랜치
기본적인 초기 세팅은 끝났으니 진행하면서 필요한 모듈 및 폴더/파일을 추가로 정리
이제 개발만을 진행하기 위한 브랜치를 만들어줍니다.
main branch
Main(or Master) 브랜치는 배포가 가능한 상태만을 관리하기에 해당 브랜치에서 개발을 진행하는 것이 아닌 개발만을 위한 브랜치를 생성해야합니다.
Develop branch
git branch develop
기능 개발을 위한 브랜치들을 병합하기 위한 브랜치로 일반적인 개발은 해당 브랜치에서 부터 시작됩니다. 모든 기능이 추가되고 배포 가능한 안정적인 상태(버그 픽스 등..)라면 develop 브랜치를 main 브랜치에 병합할 수 있습니다.
Feature branch
ex) 로그인 기능 개발을 위한 브랜치
git branch feature/login
teature 브랜치는 새로운 기능 개발 혹은 버그 수정이 필요할 때 위의 develop 브랜치로부터 분기합니다.
/* 현재 develop 브랜치 */
/* 기능 개발 브랜치 생성 및 이동 */
git branch feature/login develop
/* 기능 개발 브랜치로 이동 */
git switch feature/login
.
.
.
/* 기능 개발 완료 */
/* 작업 확인 */
git status
/* 커밋 */
git commit -m 작업 내용
/* 깃헙에 푸쉬 */
/* (혹은 깃헙에 푸쉬하지 않고 로컬에서 머지하기도 함 여기선 깃헙에 올려 병합을 진행) */
git push origin feature/login
/* 위 과정으로 기능 개발 브랜치가 깃헙에 올라가며 Pull requests 목록에서 확인 가능 */
.
.
.
/* 깃헙에서 충돌 및 코드 확인 후 병합 */기능 구현 및 버그 수정이 완료되면 develop 브랜치에 병합합니다.
소규모 팀으로 진행할 때에는 위 과정만 들어가도 개발에 크게 문제가 없습니다.
