Skip to content

Frontend Convention wiki

Jump to bottom
Lim_Hosung edited this page Sep 4, 2023 · 4 revisions

1. GitHub

1-1. GitFlow

  • 브랜치 종류
    1. main: 최종본만을 올리는 브랜치
    2. release: dev에서 큰 범주의 기능을 완성시키면 올려서 ci/cd에 올리는 브랜치
    3. dev: feature에서 구현한 브랜치를 통합하는 브랜치
    4. feature: 기능을 구현하는 브랜치
      • feature 별로 브랜치 나눠놓습니다. 아래는 예시입니다.
        • feature/myprofile/
        • feature/teampage/
        • …
    5. hotfix: main에서 터진 급한 에러를 관리하는 브랜치

1-2. 이슈 컨벤션

  • 기능 명세 코드 사용
    • [기능명세코드] 기능명세상depth2
    • 예시) [D-MYPAGE-01~05] 프로필 이미지
  • 이슈 란에 구현할 기능에 대해 자세히 정확하게 작성
  • To-do list처럼 할일을 작성하고 끝날 때마다

1-3. 브랜치 관리

  • 프론트엔드와 백엔드 브랜치 구분
    • 깃헙 액션 CI/CD 활용 예정
  • 이슈 만들어서 fork된 브랜치로 브랜치 생성
    • PR 날릴때 커밋로그가 같이 동봉된다.

[우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그](https://techblog.woowahan.com/2553/)

1-4. 커밋 컨벤션

ex) Feat: 커밋 명 (50자) Feat : 새로운 기능 추가 Fix : 버그 고침 Design : CSS 등 사용자 UI 디자인 변경 Hotfix : 급하게 치명적인 버그를 고쳐야 하는경우 Break : 커다란 API 변경의 경우 Style (+ Comment) : 코드 포맷 변경, 세미콜론 누락, 코드수정이 없는경우, 주석 관련 수정, 오타 수정 등 의미 없는 변경사항 포함 Refact: 프로덕션 코드 수정 Docs : 문서 수정, 파일 혹은 폴더명 수정과 이동, 삭제 Test : 테스트 추가, 테스트 리팩토링 Chore : 도커, 메이크 파일 등 빌드 태스크 업데이트

  • 참조 git flow

1-5. pull request 컨벤션

  • 기능 코드 prefix로 작성
  • 코드리뷰는 추후 작성예정

2. 코드 컨벤션

  • Eslint

    {
  "extends": ["airbnb", "airbnb/hooks", "airbnb-typescript", "prettier"]
}
    • 기본적으로 airbnb의 코드 컨벤션을 적용합니다

    airbnb eslint 룰은 여기: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js

  • Prettier

    {
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
	"arrowParens": "always" //화살표함수의 매개변수는 항상 괄호 추가
}

  • 코드 작성 규칙

  1. spread 연산자: ✅ → ex) 배열 복사시 사용

  2. 구조 분해 할당: ✅

  3. React.FC: ❌ (최대한 배제)

  4. 변수 선언: let, const만

  5. 함수 선언: 화살표 함수 (=>)를 사용한다

  6. 필요한 부분만 주석 사용: 이슈를 최대한 사용해서 처리해보기

  7. 타입 정의

    객체의 경우: 인터페이스 선언

    interface Post {
  content: string
  questionId: number
  title: string
  answerCount: number
  category: string
  recommend: number
  view: number
  nickname: string
  createdAt: string
}

    일반 타입의 경우: Type 선언

    type Category = null | 'ft_irc' | 'minishell' | 'minirt' | 'search'

  8. 변수는 최대한 위에 선언해놓는다.

  9. 같은 라이브러리에서 컴포넌트나 함수 등을 임포트 할경우, {}를 사용하여 임포트 한다.

    import {
  Button,
  Container,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  SelectChangeEvent,
  TextField,
} from '@mui/material'
  • eslint와 prettier는 commit 하기전에 제대로 지켜졌는지 확인하기.

3. 네이밍 컨벤션

  • 컴포넌트 네이밍

    컴포넌트 이름은 PascalCase를 사용하여 작성합니다. 이름은 명사로 시작하며, 기능을 명확하게 설명해야 합니다.

    예시) UserProfile, NavBar, LoginButton

    import React from 'react';

interface Props {
  text: string;
  onClick: () => void;
}

const LoginButton = ({ text, onClick }: Props) => (
  <button onClick={onClick}>
    {text}
  </button>
);

export default LoginButton;

    컴포넌트 파일 이름은 해당 컴포넌트 이름과 동일하게 PascalCase를 사용하여 작성하며 .tsx 확장자를 사용해야 합니다.

  • 변수 및 함수 네이밍

    컴포넌트를 제외한 변수 및 함수는 camelCase를 사용하여 작성합니다. 함수 이름은 동사를 포함하여 작성되어야 하며, 기능을 명확하게 설명해야 합니다. 변수 이름은 명사를 사용하여 작성되어야 합니다.

    //함수 예시

const fetchData = async (): Promise<User[]> => {
  // 데이터를 가져오는 로직을 구현합니다.
  // 예: API 호출을 통한 데이터 불러오기
  const response = await fetch('https://api.example.com/data');
  return response.json() as Promise<User[]>;
};

//변수 예시
const [data, setData] = useState<User[]>([]);

    이벤트 핸들러 : 이벤트 핸들러는 handle/on/is 접두사 및 이벤트 이름(camelCase로 작성)을 사용해 작성해야 합니다.

    // 아래와 같이 이벤트 핸들러 함수는 handle과 같은 접두사를 붙여줍니다.
const handleUserClick = (userId: number) => {
  setCurrentUserId(userId);
};

// 아래와 같은 bool타입 변수는 is 접두사를 붙여줍니다.
const [isLoading, setIsLoading] = useState<boolean>(true);
if (isLoading) {
    return <div>Loading...</div>;
  }

  • 인터페이스 및 타입

    인터페이스와 타입 구분없이 PascalCase 사용.

    인터페이스와 타입 둘 다 PascalCase를 사용하여 네이밍을 진행합니다. 이 방식은 명확하고 간결한 표현으로 작성할 수 있습니다.

    • 인터페이스는 대문자 I라는 접두사를 붙여서 더욱 명확하게 전달합니다.
    interface IUser {
  id: number;
  name: string;
}

// interface 는 interface 디렉토리 안 기능별 디렉토리 작성되며 파일명은 interface.ts 입니다.

// - 는 디렉토리  -- 는 파일
//    - interface 
//					-Login 
//							--interface.ts
//          -Main
//              --inteface.ts
//          -Detail
//              --interface.ts
    • 타입은 대문자 T라는 접두사를 붙여서 더욱 명확하게 전달합니다.
    type TCategory = null | 'ft_irc' | 'minishell' | 'minirt' | 'search'

// type 디렉토리 구조도 interface와 동일합니다. 위 예시를 참고해주세요.

  • 폴더 네이밍

    • app 폴더 안에 들어가는 폴더에 대해서는 명사만 사용한다.
    • 즉 라우팅 되는 폴더는 간단 명료하게 작성하고, 카멜케이스로 작성한다.

    Screenshot 2023-07-25 at 7.37.56 PM.png

    • 라우팅 폴더 안 디렉토리는 [id] 라고 네이밍 한다.

      Screenshot 2023-07-25 at 8.03.43 PM.png

    스크린샷 2023-07-25 오후 7.48.54.png

    (ex 카카오 예시)

4. 폴더 구조

  • app
    • pages.tsx
    • /panel
      • 기능별로 분리된 component들…
  • hooks
    • 공통적으로 쓰이는 hook 정의
  • component
    • 공통적으로 쓰이는 component 정의
  • types
    • 인터페이스, 타입 파일
  • styles (optional)
  • theme (optional)
  • asset(optional)

5. 주석 규칙

(기획 회의 거쳐서 작성)

6. 디자인 패턴 관련

  • FLUX 패턴 이용

7. 기술 스택 정리

기술 별 버전, 패키지 등을 정할 수 있는 만큼 정해주세요

7-1. Main stack

  • React, Next.js 13
  • Zustand

7-2. CSS

  • MUI
  • 필요하면 커스텀으로!
  • 테마 사용

7-3. Library

  • axios

  • useForm

  • useSWR

  • 개발하면서 추가

Clone this wiki locally