React 팀 프로젝트 협업 준비

November 20, 2023

TIL 23. 11. 20

오늘 한 일

React 팀 프로젝트 협업 준비
- 프로젝트 초기 설정
- 코드 컨벤션 정의

들어가며

내일부터 React 팀 프로젝트 시작이다. 프로젝트 규모가 커졌고 달라진 팀원들과 협업하기 위해 미리 준비를 거쳤다. 필요한 설정을 정리하고 초기 프로젝트를 생성할 때 쉽게 시작하고자 글로 작성하였다.

프로젝트 초기 설정

yarn 버전

예전 npm을 사용하다가 install이 너무 오래 걸려 yarn을 사용하게 되었고, yarn berry를 패키지 매니저로 사용하고 있었다. 팀원들과 yarn 버전을 통일해야겠다고 생각이 들었다.

아직까지 yarn classic과 yarn berry의 차이를 정확히 알지 못하지만, 패키지 설치 방법이 달라 생성되는 파일이 달랐다. 팀원들은 yarn classic 1.22.19 버전을 사용하고 있어 yarn 버전을 변경했다.

yarn set version 1.22.19

프로젝트 생성 후 초기화

yarn create react-app project « 프로젝트 생성

이후 불필요한 파일 삭제

.gitignore 파일

프로젝트 업로드할 때 원하지 않는 파일을 올리지 않도록 제외 파일들을 정의한다. gitignore.io 에서 불필요한 IDE(vscode)와 패키지 매니저(yarn)의 설정 파일을 추가해 .gitignore 파일을 생성한다.

프로젝트 디렉토리 구조

📦project
 ┣ 📂public
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┣ 📂constants
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂component1
 ┃ ┃ ┃ ┣📜component1.jsx
 ┃ ┃ ┃ ┗📜component1.module.css
 ┃ ┃ ┣ 📂component2
 ┃ ┃ ┃ ┣📜component2.jsx
 ┃ ┃ ┃ ┗📜component2.module.css
 ┃ ┣ 📂hooks
 ┃ ┣ 📂pages
 ┃ ┣ 📂utils
 ┃ ┣ 📂redux
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┗ 📂modules
 ┃ ┣ 📜App.jsx
 ┃ ┗ 📜index.js
 ┣ 📜.eslintrc
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜jsconfig.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜yarn.lock

assets/ 멀티미디어 파일(이미지, 폰트)
constants/ 상수
components/ 재사용 가능한 컴포넌트
hooks/ 커스텀 훅
pages/ 라우팅되는 페이지 컴포넌트
redux/ 리덕스 관련 파일
utils/ 공통으로 사용하는 함수

절대 경로 설정

컴포넌트 등 파일을 import할 때 상대 경로 대신 절대 경로를 사용하기 위해 설정. 프로젝트 규모가 커지고 파일의 depth가 깊어지면 ../../../../...과 같이 보기에도 좋지 않고 경로를 파악할 수 없으므로 절대 경로를 사용한다.

jsconfig.json 파일을 생성해 설정해준다.

uaseUrl: 프로젝트의 베이스 경로 지정
include: 프로젝트의 파일을 명시

// jsconfig.json
{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

확장 프로그램 설치

Prettier: 코드 자동 정렬 도구

코드 스타일을 일관성 있게 작성하기 위해 사용한다.

yarn add -D prettier 패키지 설치하고 VSCode Extension 설치

// .prettierrc 프로젝트 루트 폴더에 생성
{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "useTabs": false,
  "endOfLine": "crlf"
}

ESLint: 자바스크립트 문법 유효성 검사 도구

문법적인 오류를 방지하고 다양한 방식으로 구현할 수 있는 코드 방식을 일관성 있게 구현할 수 있도록 도와준다.

yarn add -D eslint eslint-config-prettier

eslint-config-prettier: prettier와 충돌하는 옵션을 off

// .eslintrc 프로젝트 루트 폴더에 생성

{
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["react-app", "plugin:react/recommended"],
  "rules": {
    "react/prop-types": "warn"
  }
}

💬 아직 eslint를 잘 알지 못해서 추후 옵션들을 살펴보며 추가할 예정

Reactjs code snippets: React 관련 템플릿을 단축키로 작성

컴포넌트 파일 .jsx 생성할 때 스니펫을 사용하여 컴포넌트 선언 방법 통일

rfc - Create React Functional Component

import React from 'react';

export default function Component() {
  return (
    <div>
      
    </div>
  );
}

스타일 관련

웹 폰트 적용

Google Fonts 혹은 눈누에서 폰트를 다운받아 woff2로 변환하여 assets 폴더에 추가한 뒤 폰트 정의.

@font-face {
	font-family: 'PyeongChangPeace';
	src: url(assets/fonts/PyeongChangPeace-Light.woff2) format('woff2');
	font-weight: 300;
}

@font-face {
	font-family: 'PyeongChangPeace';
	src: url(assets/fonts/PyeongChangPeace-Bold.woff2) format('woff2');
	font-weight: 700;
} 

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: 'PyeongChangPeace';
	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: 'PyeongChangPeace', sans-serif;
	outline: none;
} 

필요한 패키지 설치

yarn add redux react-redux react-router-dom

코드 컨벤션 설정하기

코드를 일관되고 효율적으로 작성하기 위한

네이밍 컨벤션

변수, 함수는 카멜 케이스 ex) isPrime, fetchData
상수는 대문자 스네이크 케이스 ex) MAX_VALUE
클래스명은 케밥 케이스 ex) card-title
컴포넌트명은 파스칼 케이스 ex) CardList
컴포넌트가 아닌 파일은 카멜 케이스
스타일 파일은 컴포넌트명과 동일하게

들여쓰기

들여쓰기는 space와 섞어서 사용하지 않고 tab 사용

주석

한 줄 주석은 //, 멀티라인은 /* */

함수

컴포넌트 내부 함수는 화살표 함수
이벤트 핸들러 함수는 handle___

CSS Property 선언 순서

레이아웃 - display, position, top, right, bottom, left, float, clear, visibility
Box Model - width, height, margin, padding
윤곽, 배경 - background, border, box-shadow
폰트 - color, font-size, font-family, text-align, text-transform ...
기타 - cursor, overflow, z-index ...

느낀점

React에서 prettier나 eslint 등 초기 설정으로 인한 오류가 빈번했어서 걱정이 앞서긴 했지만 오늘 테스트해보니 당장은 문제가 없어 다행이다. 간단히 git 연습도 해보았다. (충돌로 애먹긴 했다.)

항상 협업은 쉽지 않아서 조금 걱정스럽긴 하지만 다들 열심히 하셔서 좋은 결과물을 만들 수 있을 것이라 생각! 협업 시에 발생하는 문제들을 기록하고 보완하면서 점점 효율적인 개발 방법을 찾아갈 예정이다.

지난 팀 프로젝트에서 develop 브랜치에 병합하는 과정에서 미리 결과를 예측하지 못해 추가 수정 커밋을 빈번히 했었다. 이번 과제에서는 netlify나 vercel로 배포하여 중간 결과물을 보며 merge 할 수 있도록 시도 해보려 한다.

Twitter Facebook LinkedIn

Son Changseong