Skip to content

Moddy FE Convention

Jump to bottom
lydiacho edited this page Mar 29, 2024 · 1 revision

Code Convention

▶️ 함수 형태

  1. const (화살표 함수형태/ rsc 컴포넌트 단축키 사용)
  2. event 함수 선언형태 : handle(Action)(Component) ex) handleClickResetBtn

▶️ 네이밍

  • 컴포넌트명 : PascalCase

  • non-components : camelCase

  • 속성명, 변수명 : camelCase

    // onClick, onSubmit
<div onClick="{}" onSubmit="{}"></div>;

  • 상수명 : UPPER_CASE

  • 파일명 :

    엘리먼트가 포함 되는 파일 → .tsx

    포함되지 않는 파일 → .ts

▶️ 코드 작성 순서

  • import
  • function
  • styled-component
  • export

▶️ 시맨틱 태그

  • img에 alt 명시
  • button에 type 명시

▶️ props interface 타입 선언

컴포넌트 이름 + props로 명명 && 컴포넌트 선언부 바로 위에 위치시키기

ex) HeaderProps

▶️ alias 사용

"baseUrl": "src",
"paths": {
      "@/*": ["*"],
      "@images/*": ["views/@common/assets/images/*"]
    }

  • src/ -> @/

  • src/views/@common/assets/images/ -> @images/*

    • common 폴더 하위에 있는 이미지 폴더로 바로 접근할 수 있는 path

  • 사용법

    import imgHdprofile from '@images/img_hdprofile.png';
    <img src={imgHdprofile} alt="마이페이지 프로필" />

▶️ 기타

  • 에러 핸들링 : try catch문 사용

  • 조건문 : if문보다 조건부 렌더링 & 삼항 조건 연산자 활용

  • 주석

    • 함수/컴포넌트 등 전체적인 내용에 대해 설명하는 코드는 /* */ 사용해서 바로 윗줄
    • 코드 한 줄에 대한 설명이 필요한 경우 //를 사용해서 바로 윗줄
    /* 여기에 주석! */
export defualt function Header(props) { 
	//여기에 주석!
  const { a, b, c } = props; 
  ...

Git Convention

⇒ 1 이슈 - 1 PR

작업할 태스크에 대한 Issue 생성 → 해당 이슈에 대한 depth2 브랜치 생성 후 작업 시작

▶️ Issue

// 이슈 제목 : [ 페이지명 ] 구현내용
## 어떤 기능을 구현하나요? 

## 세부 구현 태스크
- [ ]
- [ ]
- [ ]

▶️  commit message

  • depth 2 (이슈 브랜치) : ___ : 구현 내용
제목 내용
init 브랜치 첫 커밋
feat 새로운 기능에 대한 커밋
design CSS 등 사용자가 UI 디자인을 변경
fix 버그 수정에 대한 커밋
build 빌드 관련 파일 수정에 대한 커밋
chore 그 외 자잘한 수정에 대한 커밋
docs 문서 수정에 대한 커밋
style 코드 스타일 혹은 포맷 등에 관한 커밋
refactor 코드 리팩토링에 대한 커밋
  • depth 1 (feature 브랜치) : Squash Merge를 활용하여 커밋 메시지 뒤에 (#이슈번호)
스크린샷 2023-12-26 오후 3 43 20

#을 이용해서 이슈와 연결해두면 어떤 커밋인지 파악하기 쉽다!

▶️ branch 전략

  • 브랜치명
    • main: 최종 Merge를 하는 곳
    • develop : 개발할때 Merge
    • feature: 기능을 개발하면서 각자가 사용할 부모 브랜치
    • test: 개인 연습 브랜치
  • depth 0 : develop
  • depth 1 : feature/페이지명
    • feature/SelectPage
  • depth 2 : 페이지명/#이슈번호-구현기능설명
    • SelectPage/#3-SelectCustomUI
develop
ㄴ feature/SelectPage
	ㄴ SelectPage/#3-SelectCustomUI

▶️ merge 전략

  • depth 2 → depth 1 : Squash Merge

    git checkout parent               // parent 브랜치로 이동해서
git merge --squash child-branch    // child-branch 브랜치에 대한 통합 커밋을 생성하고 
                                   parent 브랜치에 병합하기 위한 명령
git commit -m "commit message (#123)"  // 통합 커밋을 생성

  • depth 1 → depth 0 : Merge

▶️ tool

  • 브랜치 삭제 자동화
    • Github Setting을 통해 설정
    • depth 2 (이슈 브랜치) → depth 1 (feature 브랜치)로 머지 시 자동 삭제
    • develop, feature 브랜치는 Branch protection을 통해 자동 삭제로부터 보호
  • Github - Discord Webhook 연동
  • 진행상황 팔로업을 위해 Github Projects의 칸반보드 활용
    • 이슈 생성 시, Projects→modee-web-kanban→status:Todo/InProgress 선택
    • 작업 진행 전/중/후에 따라 이슈 상태 업데이트 해주세요! (Todo/InProgress/Done)

모디_브랜치전략

Style Convention

▶️ SVGR 사용법

index.ts에서 svg 컴포넌트화 하여 export → 컴포넌트에서 import 시 컴포넌트처럼 불러오기

  • 파일명 : ic_arrow.svg (snake case)
  • 컴포넌트명 (사용할 때) : IcArrow.svg (Pascal case)

▶️ GlobalStyle

  • reset
    • styled-reset 을 통해 기본 css 설정 reset
  • font 적용
  • rem 단위를 쉽게 사용하기 위해 font-size: 10px; 선언

▶️ theme

디자인 측에서 전달하는 스타일 가이드 참고하여 생성

  • color
  • fonts

▶️ CSS

  • font : rem만 사용하기
    • 112px → 11.2rem
  • 가독성과 추후 확장을 고려하여 css 속성 간 개행 생활화 ⇒ Stylelint를 사용하여 자동 fix되도록 세팅
스크린샷 2024-01-09 오후 2 15 54
  • border는 예외적으로 px 사용 ⇒ stylelint로 세팅 ⇒ root값이 커지면서 테두리도 같이 두꺼워지는건 대부분의 경우에 디자이너들이 원하는게 아닐거라서

▶️ Styled Components Convention

  1. 스타일 코드와 컴포넌트 코드를 파일 분리하지 않는다.

  2. 모든 태그를 스타일드컴포넌트로 생성X. 재사용성이 없는 경우 html 태그를 사용해도 되며, 이때 스타일링은 &, className 을 활용하여 상위 스타일드 컴포넌트 내에서 중첩해서 스타일링한다.

  3. 파일을 분리하지 않고 S-dot Naming을 사용하기 위해 S 객체로 감싸서 사용

    예시

    const S = {
  CategoryList: styled.ul`
    background-color: ${({ theme }) => theme.colors.White};
    color: ${({ theme }) => theme.colors.Grey600};
    ${({ theme }) => theme.fonts.Title5};
  `,

  SelectAllBtn: styled.button<{ isSelectAll: boolean }>`
    width: 100%;
    height: 5.8rem;
    padding: 0;

    & > p {
      margin-left: 3.8rem;
      ${({ theme }) => theme.fonts.Title5};
      float: left;
    }

    ${({ isSelectAll }) =>
      isSelectAll &&
      css`
        background-color: ${({ theme }) => theme.colors.Blue};
        color: ${({ theme }) => theme.colors.White};
      `};
  `,

▶️ Styled Components Naming

  • 최상위 컴포넌트 명 : '컴포넌트명'Layout (태그 종류와 무관)
  • 각 태그들의 컴포넌트 명
    • div '컴포넌트명'Box 권장 (div가 영역 그룹화의 목적이 아닐 경우, 필요에 따라 다른 네이밍 사용해도 됨. ex- 구분선을 div로 구현할 때는 그냥 Line 등으로 네이밍해도OK)
    • section '컴포넌트명'Section
    • ul '컴포넌트명'List
    • li '컴포넌트명'Item
    • p '컴포넌트명'Paragraph
    • span '컴포넌트명'Span
Clone this wiki locally