[React] 팀 프로젝트 준비 (+브랜치 규칙/초기 세팅)
리액트로 팀 프로젝트를 시작하기 전에 초기 설정이나 규칙같은 것들을 정리하고자 글을 썼다.
리액트를 독학하고 홈페이지에 어떻게 써야할까라는 의문이 항상 들었는데
회사에서 마음이 맞는 퍼블리셔들끼리 팀 프로젝트를 할 수 있게 되어 이렇게 시작하게 되었다.
일단 내가 github에서 organizations를 만들어 팀원들을 초대했다.
무료버전이다 보니까 Rulesets를 설정할 수 없어서 README 파일에 규칙을 기재해야할 것 같다.
규칙은 계속해서 추가할 예정이다.
1. 깃 협업 배포 순서
1. fetch 및 pull : 코드 수정 전 최신 코드를 로컬로 받기
2. commit : 작업 완료 후 코드를 수정하고 commit
3. fetch 및 pull : 다시 원격 저장소에서 최신 변경 사항을 가져온다.
4. 충돌 해결 : git pull 중에 충돌이 발생하면, 충돌을 해결하고 commit 한다.
5. Push : 로컬 변경 사항을 원격 저장소(git)에 푸시한다.
6. Pull Request : 팀장에게 merge 요청
💡 이 순서를 권장하는 이유
1. 충돌 최소화 : 작업 후 먼저 'pull'을 하여 최신 변경 사항을 가져오면, git에 있는 변경사항과 로컬 변경사항을 병합할 수 있다. 이때 충돌이 발생하면 로컬 환경에서 해결할 수 있어 푸시할 때 다른 팀원의 작업에 영향을 주지 않는다.
2. 코드 일관성 유지 : 최신 코드를 로컬에 반영한 후 푸시하면, git과의 일관성을 유지할 수 있다. 이는 다른 팀원이 'pull'할 때 예상치 못한 충돌을 피하는데 도움이 된다.
2. .gitignore 파일
깃이나 외부에 배포할 때 보안상의 이유로 배포에서 제외시킬 파일 기재
협업할 때 필요한 파일이 공유가 안될 수 있어 절대 파일 수정 금지
또 node_module같은 폴더는 각자 다운받는게 다를 수 있어서 각자의 node를 사용한다.
3. 파일 절대 경로
프로젝트 루트가 아닌 URL에서도 유연하게 절대경로를 사용할 수 있도록 한다.
html에서는 → %PUBLIC_URL%
<link rel="stylesheet" href="%PUBLIC_URL%/css/main.css">
<img src="%PUBLIC_URL%/images/logo.png" alt="Logo">
javascript → process.env.PUBLIC_URL
<Link to={`/${it.menu}/${it.id}`} props={props}>
<div style={{backgroundImage:`url(` + process.env.PUBLIC_URL + `/contentsboard/assets/img_${it.id}.jpg)` }}></div>
<h3>{it.title} </h3>
<p>{it.subTitle}</p>
</Link>
4. 협업 툴
GitHub Desktop을 이용해서 각자 레포지토리를 복사한 후 작업을 진행한다.
fork 대신 간편하게 GitHub Desktop을 사용할건데, 간편한 대신에 관리 기능이 몇가지 없다 😢
작업한 후에는 Pull Request를 하고 리뷰어에 마스터를 기본으로 추가한다.
5. 코드 컨벤션 설정하기
코드를 일관되고 효율적으로 작성하기 위한
네이밍 컨벤션
- 변수, 함수는 카멜 케이스 ex) fetchData, setData
- 클래스명은 스네이크 케이스 ex) login_wrap
- 컴포넌트명은 파스칼 케이스 ex)ItemList
- 스타일 파일은 컴포넌트명과 동일하게 ex) Home.js / Home.css
- 컴포넌트가 아닌 파일은 카멜 케이스 ex) useFetch
6. Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
min-height: 100vh;
font-family: '';
line-height: 1;
}
ol, ul, li {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
color: inherit;
}
input, button, textarea{
border: none;
background: inherit;
font-family: '', sans-serif;
outline: none;
}
7. 커밋 규칙
Commit message 7가지 규칙
- 제목과 본문을 한 줄 띄어 구분
- 제목은 50자 이내
- 제목 첫 글자는 대문자
- 제목 끝에 마침표 X
- 제목은 명령문으로, 과거형 X
- 본문의 각 행은 72자 이내 (줄바꿈 사용)
- 본문은 어떻게 보다 무엇을, 왜에 대하여 설명
//헤더는 필수이며 범위와 Footer는 생략 가능하다.
타입(범위) : 주제 // Header(헤더)
본문 // Body(바디)
바닥글 // Footer| 타입 | 설명 |
| feat | 새로운 기능에 대한 커밋 |
| fix | 버그 수정에 대한 커밋 |
| build | 빌드 관련 파일 수정 / 모듈 설치 또는 삭제에 대한 커밋 |
| chore | 그 외 자잘한 수정에 대한 커밋 |
| ci | ci 관련 설정 수정에 대한 커밋 |
| docs | 문서 수정에 대한 커밋 |
| style | 코드 스타일 혹은 포맷 등에 관한 커밋 |
| refactor | 코드 리팩토링에 대한 커밋 |
| test | 테스트 코드 수정에 대한 커밋 |
| perf | 성능 개선에 대한 커밋 |
Footer와 Body는 생략 가능하다.
Footer는 바닥글로 어떤 이슈에서 왔는지 같은 참조 정보들을 추가하는 용도로 사용한다.
예를 들어 특정 이슈를 참조하려면 Issues #1234 와 같이 작성하면 된다.
예시)
feat(router): React Router 연결
초기 컴포넌트 세팅 및 페이지 라우팅
https://www.sivillage.com/store/diptyque
우리가 만들 페이지는 딥디크라는 향수 홈페이지인데,
모션 스크립트를 공부하는 팀원이 있어서 메인을 화려하게 가져가기위해 고민하다 결정한 브랜드다.
메인, 로그인, 회원가입, 제품 리스트&뷰, 구매 페이지까지 구현을 하고 시간이 되면 마이페이지까지 만들 예정이다.
내가 맡은 역할은 대부분 REST API를 이용해서 데이터를 연결하고 가상의 데이터 서버(json)를 만드는 것이다.
로그인, 회원가입, 상품리스트, 뷰 등 데이터가 들어갈 부분은 거의 내가 만지게 될 것 같다.
대신 팀원들이 메인과 유효성 검사 등 디자인과 자바스크립트 쪽으로 힘써서 작업할 예정이다.
내가 리더처럼 진행하게 되었는데 꼼꼼하게 잘 해봐야될 것 같다.
일단 폴더와 컴포넌트를 크게 나눈 후에 구성 회의를 할 것 같다.
프로젝트 파일 구조
- src
- components // 재사용 가능한 컴포넌트 폴더
- Header.js // 헤더
- (등등)
- pages // 라우팅되는 페이지 컴포넌트 폴더
- Home.js //메인
- Member.js //로그인, 회원가입
- Item.js // 리스트, 뷰
- Buy.js // 구매
- Empty.js //존재하지 않는 페이지
- hooks //커스텀 훅
- db //data.json
- assets // 멀티미디어 파일(이미지, 폰트)
- utils //공통으로 사용하는 함수
- components // 재사용 가능한 컴포넌트 폴더
여기까지가 내가 생각한 초기 구성이고
저렇게 세팅을 한 후에 팀원들과 나눠서 작업을 하게될 것 같다.
각자 역할을 정해서 컴포넌트에서는 충돌이 없을 것 같은데
hooks나 utils 같은 폴더는 충돌이 많을 것 같아서 이런 부분도 공부하기에 좋을 것 같다.
초기 세팅
먼저 프로젝트를 생성해주고 필요없는 폴더는 삭제한다.
npm create-react-app .
나는 axios를 이용해서 REST API를 호출할것이다.
그리고 페이지 라우팅을 위해 react-router-dom도 설치해준다.
npm i axios react-router-dom
참고로 모바일 애플리케이션용 리액트 라우터는 react-router-native 다.
프로젝트에 라우터 적용하기
이제 페이지 라우팅을 위해 App 컴포넌트를 BrowserRouter 컴포넌트로 묶어준다.
💡 BrowserRouter에는 브라우저의 주소 변경을 감지하는 기능이 있다.
이 라우터는 컴포넌트가 페이지를 구성하고 이동하는 데 필요한 기능을 다양하게 제공한다.
(...)
import {BrowserRouter} from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);/index.js
페이지 라우팅 구현하기
URL 경로에 따라 브라우저에 적잘한 페이지를 렌더링하도록 페이지 라우팅을 구현한다.
import './App.css';
import Header from './components/Header';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Member from './pages/Member';
import Item from './pages/Item';
import Buy from './pages/Buy';
import EmptyPage from './pages/EmptyPage';
function App() {
return (
<div className="App">
<Header/>
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/member' element={<Member/>}/>
<Route path='/item' element={<Item/>} />
<Route path='/buy' element={<Buy/>} />
<Route path='*' element={<EmptyPage/>}/>
</Routes>
</div>
);
}
export default App;
이제 아래 구성으로 팀원 회의를 한 후 각자 만들어야할 부분을 나누면 될 것 같다.
📦src
┣ 📂assets
┣ 📂components
┃ ┗ 📜Header.js
┣ 📂db
┣ 📂hooks
┣ 📂pages
┃ ┣ 📜Buy.js
┃ ┣ 📜EmptyPage.js
┃ ┣ 📜Home.js
┃ ┣ 📜Item.js
┃ ┗ 📜Member.js
┣ 📂utils
┣ 📜App.css
┣ 📜App.js
┣ 📜index.css
┗ 📜index.js