[Project] 프론트엔드 협업을 위한 가이드 작성

프론트엔드 협업을 위한 코드 작성 가이드

 

프로젝트 팀원들, 특히 프론트엔드 파트 간에 코드를 작성하면서 불필요한 수정이 생기는 것을 예방하기 위해 코딩 컨벤션과 공통 가이드를 작성했다.

 

혼자서 코드를 작성할 때도 매번 달라지는 코드 작성 패턴이 있다고 느끼는데, 여러 명이서 협업을 하는 과정에선 이 패턴을 어느 정도 정리를 하고 가는게 좋다고 생각했다.

 

ESLint

 

먼저 ESLint와 Prettier 설정이 꽤 중요하다고 생각했고, 실제로 이 부분에 대해 많이 찾아보며 어떤 설정을 갖추는게 좋을까에 대해서 고민을 했다.

유명 인강 강사의 설정을 찾아보기도 하고, 여러 IT 기업의 설정을 둘러보기도 하면서 유명하기도 하고 많이 사용하는 AirBnB의 Lint 설정을 적용하기로 했다.

 

다만 이 설정의 패키지 중 더 이상 지원되지 않거나 지원이 끊긴 패키지들이 일부 있어서, 해당 패키지들은 ChatGPT에게 대체 가능한 패키지를 추천하도록 요청해, 기존 패키지를 삭제하고 대체 패키지로 변경하였다.

 

npm uninstall inflight @humanwhocodes/config-array rimraf glob @humanwhocodes/object-schema
npm install lru-cache @eslint/config-array rimraf@latest glob@latest @eslint/object-schema

 

Prettier

    arrowParens: "always",// 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
    // 닫는 괄호(>) 위치 설정
    // ex: <div
    //       id="unique-id"
    //       class="contaienr"
    //     >
    htmlWhitespaceSensitivity: "css",
    bracketSameLine: true, // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
    bracketSpacing: true, // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
    printWidth: 80,
    proseWrap: "preserve", // 산문 래핑 설정
    quoteProps: "as-needed", // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
    semi: true, // 세미콜론(;) 사용 여부
    singleQuote: true, // 싱글 인용 부호(') 사용 여부
    tabWidth: 2, // 탭 너비 설정
    trailingComma: "es5", // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
    useTabs: true, // 탭 사용 여부

 

prettier 설정은 여러 설정들을 찾아보며 입맛에 맞게 수정해 사용하기로 했다.

 

 

VSCode 설정

팀원 모두 VSCode를 사용하므로 FormatOnSave 기능을 통해 코드 저장시 자동으로 Formatting 되도록 설정했다.

설정 방법은 톱니바퀴 버튼 - 설정 - 검색창에 formatOnSave 검색 후 체크 이다.

 

 

VSCode Extension

함께 사용하면 좋을 익스텐션과 스니펫도 공유했다.

React + Tailwind + Zustand 를 사용하므로, 해당 스택에 대한 자동완성/스니펫을 사용하도록 했다.

 

• Tailwind CSS IntelliSense - 테일윈드 자동완성
  • HTML 요소 옆에 cl 입력 후 className 자동완성
  • 주요 Tailwind 코드는 검색과 ChatGPT 활용하기

 

• ES7+ React/Redux/React-Native snippets - 리액트 코드 자동완성
  • 코드 에디터 창에 rafce 입력 → 화살표 함수 컴포넌트 코드 생성

 

• Zustand Snippet
  • 코드 에디터 창에 zst 입력 → zustand 스토어 생성
  • 파일 명은 XXX.ts , 도메인.ts , 기능.ts 등으로 생성하기
  • useXXXStore 와 같은 이름으로 Store 생성하기
  • Action 명은 addXXX , removeXXX 등과 같이 동사 + 명사로 작성

 

함수 명명 규칙

 

 

혼자 개발할 때는 백엔드에서 API 통신으로 Data를 로드하는 함수와 컴포넌트에서 useEffect로 데이터를 로드하는 코드에 대해서 fetch 또는 get 이라는 이름을 구분없이 사용했다.

팀원들과 함께 작업하는 과정에선 함수의 이름만 보고 어떤 부분에서 어떻게 동작하는 함수인지 파악하는게 중요하다고 생각했고, 이 부분을 정할 필요가 있다고 느꼈다.

 

따라서 함수의 이름은 기본적으로 동사 + 명사 형으로 지정하고, 백엔드와 통신하는 API 로직 함수는 HTTP 메서드명 + 명사 로 구성하도록 했다.

컴포넌트 또는 페이지에서 단순 Data를 로드해오는 함수는 fetchXXXData의 형식으로 작성하며, useEffect를 이용해 실행하도록 했다.

 

함수 이름은 **동사 + 명사** 형으로 명명한다.
백엔드 통신 API 함수는 `HTTP 메서드명 + 명사` 형으로 작성한다.
(ex. `getUserData()` → get 요청 , `postUserData()` → post 요청)

 

 

 

마무리

프로젝트 기본 설정부터 여러 협업을 위한 가이드를 작성해보니 컨벤션과 패턴 정의가 정말 중요하다는 것을 느끼고 있다.

진행하면서 발견되는 문제들에 대해서도 중간에 수정을 하겠지만, 초기에 설정을 잘 해놓으면 함께 프로젝트를 진행하면서 충돌이나 불필요한 과정을 줄일 수 있으니 반드시 개발에 들어가기 전에 꼼꼼하게 설정해야겠다고 생각했다.