React 프로젝트 생성 및 초기 세팅 - 폴더 구조, 패키지 설치, 초기값

1. CRA

npx create-reat-app [프로젝트명]
npx create-react-app [프로젝트명] --template typescript

2. Vite

npm create vite@latest [프로젝트 명] 
npm create vite@latest [프로젝트 명] --template react-ts

프로젝트 주요 파일과 폴더 구조

• public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.
• src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.
• package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.

├── public
├── src
│   ├── @types	      			 # 전역타입 정의
│   ├── assets                   # 정적 자원
│   ├── components               # 재사용 가능한 컴포넌트
│   ├── constants                # 상수         
│   ├── hooks                    # 커스텀 훅
│   ├── pages                    # 페이지 컴포넌트
│   ├── routes                   # 라우팅         
│   ├── services				 # 비즈니스 로직, API 호출
│   ├── stores                   # 전역 상태 스토어
│   ├── utils                    # 유틸리티 함수
│   ├── styles                   # 스타일
│   ├── App.css 
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── .gitignore
├── .eslintrc.cjs                # ESLint 설정 파일
├── .prettierrc                  # Prettier 설정 파일
├── index.html                   # 애플리케이션의 진입점 HTML 파일 (Vite 설정 관련)
├── pnpm-lock.yaml(또는 package-lock.json, yarn.lock) # 의존성 트리 고정 파일
├── package.json                 # 프로젝트 메타데이터 및 의존성 정의
├── README.md
└── vite.config.js               # Vite 설정 파일

 

public/: 정적 파일들을 보관하는 폴더

src/: 소스 코드가 위치하는 폴더

• assets/: 이미지 파일과 같은 정적 자원들을 보관합니다.
• constant/: 상수를 모아둡니다.
• components/: 재사용 가능한 React 컴포넌트들이 위치하며, 공통 컴포넌트와 페이지별(도메인별) 컴포넌트로 구분됩니다.
• pages/: 각각의 페이지 컴포넌트들이 위치하며, 홈, 클래스, 게시판 등 여러 페이지로 나뉩니다.
• routes/: 애플리케이션의 라우팅 설정 파일들이 위치합니다.
• app/: 리덕스 스토어 설정 파일이 위치합니다.
• utils/: 유틸리티 함수들이 위치합니다. 프로젝트 전역에서 사용되는 특정 기능 및 작업을 수행하는데 도움을 주는 함수들이 위치합니다.
• hooks/: 커스텀 훅들이 위치합니다.
• styles/: 스타일 파일들이 위치합니다.
• App.tsx: 주요 React 컴포넌트로, 애플리케이션의 구조를 정의합니다.
• main.tsx: ReactDOM을 사용해 React 애플리케이션을 HTML DOM에 렌더링하는 파일입니다.

 

router, 전역상태 store, queryclient provider 등 패키지 설치

npm add react-router-dom @tanstack/react-query axios zustand

---

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가지 규칙

1. 제목과 본문을 한 줄 띄어 구분
2. 제목은 50자 이내
3. 제목 첫 글자는 대문자
4. 제목 끝에 마침표 X
5. 제목은 명령문으로, 과거형 X
6. 본문의 각 행은 72자 이내 (줄바꿈 사용)
7. 본문은 어떻게 보다 무엇을, 왜에 대하여 설명

//헤더는 필수이며 범위와 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://velog.io/@yongyong_21/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85-%EA%B0%9C%EC%9D%B8%EC%A0%81-%EC%A0%80%EC%9E%A5%EC%9A%A9

 

https://gamza1013.tistory.com/114