[GIT] 팀 프로젝트 초기 세팅 과정

기존에는 개인 Github repository에서만 작업을 하거나 이미 세팅이 완료되어 있는 Repository에서 git clone 후 시작했었다보니, 개발자에게 소통 능력과 협업이 중요하다는 점, 그리고 앞으로 수많은 팀 단위 개발에 Github가 중요한 역할을 한다는 것을 이론적으로만 인지하고 있었다. 그런데 직접 팀 프로젝트 초기 세팅을 진행하면서 어떤 부분들을 초기에 잘 세팅해야 하는지, 초기에 제대로 설정되지 않으면 어떤 문제, 불편함이 있는지 느꼈던 점들에 대해 정리해보았다.

진행 내용

팀원들이 모여 하나의 PC에서 팀 프로젝트 초기 세팅을 진행하고 Github에 main branch를 생성 -> 각 팀원이 branch를 생성해 그동안 개개인이 진행하던 인스타그램 클론 코딩 작업 결과물을 팀 프로젝트 폴더로 migration 하는 과정

팀 프로젝트 초기 세팅 CHECKLIST

1. CRA 및 Third-Party Library 설치

# CRA, Router, styling(SASS or Styled-components) 설치
$ npx create-react-app [프로젝트명] 
$ npm install react-router-dom
$ npm install sass
$ npm install styled-components styled-reset

# prettier eslint-prettier configuration, stylelint with scss, prettier 패키지, 추가 config 패키지 설치 
$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier
$ npm install -D stylelint stylelint-scss stylelint-config-prettier-scss
$ npm install -D stylelint-config-recommended-scss stylelint-config-property-sort-order-smacss

• git으로 추적되지 않는 node_modules 폴더에 설치된 라이브러리들이 저장되어 있지만, package.json 파일에서 dependencies 항목을 관리함에 따라 초기 세팅 후 git clone 시에는 npm install 명령어 하나로 모든 설치를 완료할 수 있다.

2. 공통 폴더 구조 설정

• CRA로 프로젝트를 시작하는 경우, 불필요한 이미지, 파일, 폴더 등이 생성된 상태로 시작함에 따라, 해당 부분들에 대한 삭제 후 추가 폴더 생성 필요
• 생성한 컴포넌트와 직접적으로 연관된 폴더는 폴더명을 PascalCase로 작성하고, 간접적인 관계의 폴더는 camelCase로 표기
  1) 여러 브랜치에서 충돌이 가능한 폴더에 대해서는 중복 방지를 위해아래와 같이 팀원, 브랜치 혹은 기능별로 추가 폴더 구분이 가능하다.

  src
  ├── assets
  │ ├── feature1
  │ │ └── heart.jpg
  │ └── feature2
  ├── components
  │ └── Nav
  │ ├── Nav.js
  │ └── Nav.scss
  ├── pages
  │ ├── feature1
  │ │ ├── Login
  │ │ │ ├── Login.js
  │ │ │ └── Login.scss
  │ │ └── Main
  │ │ ├── Main.js
  │ │ └── Main.scss
  │ └── feature2
  │ ├── Login
  │ │ ├── Login.js
  │ │ └── Login.scss
  │ └── Main
  │ ├── Main.js
  │ └── Main.scss
  ├── styles
  │ ├── common.scss
  │ ├── reset.scss
  │ └── variables.scss
  ├── Router.js
  └── index.js
  // Router.js

2) public/images/ VS src/assets/images

• js파일 안에서 사용하는 이미지는 public/images에 저장해서 사용해야 하며, js 파일에서 public/images로 접근할 때는 절대경로로 접근해야 한다.

// ProductDetail.js
import React from 'react';

const ProductDetail = () => {
  return <img src="/images/Detail/product1.jpg" alt="프로덕트1" />;
};

export default ProductDetail;

• css/scss 파일에서는 public 폴더에 접근할 수 없어, background-image 속성처럼 css에서 이미지 파일에 접근하기 위해서는 이미지 파일을 src/assets/images에서 관리해서 절대 경로 혹은 상대 경로로 사용해야 한다.

3. 팀 단위 작업 시 주의사항
1) 기존에 개인 폴더에서 작업했던 인스타그램 클론코딩 내용들을 팀 단위 폴더로 이동하는 과정에서 일부 개별적으로 적용했던 css 요소가 깨지는 경우를 확인하였다. 이를 바탕으로 추후 팀별 프로젝트 진행 시 각 기능에 따라 폴더를 구분할 수 있는 JS 부분 이외에 CSS 요소들은 미리 충분한 협의를 통해 reset, common.scss에 대해 정한 뒤 각자 작업을 시작해야 함을 깨달았다.
2) 폴더 구조도 좀 더 복잡해짐에 따라 각각 담당하는 기능, branch에 맡는 폴더에서만의 작업을 진행하여 git에서 merge 시 최대한 충돌이 발생하지 않도록 주의해야겠다고 생각했다.