개발 규칙

🪛기술 스택

🐣 Coding Convention

▶️ Coding Style

▶️ Naming

1. 코드 네이밍

2. 브랜치 네이밍 미정

3. 파일 네이밍

▶️ Folder Structure 보류

▶️ develop merge 방식

▶️ 코드 리뷰 방식

Pn 룰

• P1: 꼭 반영해주세요 (Request changes)
• 리뷰어는 PR의 내용이 서비스에 중대한 오류를 발생할 수 있는 가능성을 잠재하고 있는 등 중대한 코드 수정이 반드시 필요하다고 판단되는 경우, P1 태그를 통해 리뷰 요청자에게 수정을 요청합니다.
• 리뷰 요청자는 p1 태그에 대해 리뷰어의 요청을 반영하거나, 반영할 수 없는 합리적인 의견을 통해 리뷰어를 설득할 수 있어야 합니다.

• P2: 적극적으로 고려해주세요 (Request changes)
• 작성자는 P2에 대해 수용하거나 만약 수용할 수 없는 상황이라면 적합한 의견을 들어 토론할 것을 권장합니다.

• P3: 웬만하면 반영해 주세요 (Comment)
• 작성자는 P3에 대해 수용하거나 만약 수용할 수 없는 상황이라면 반영할 수 없는 이유를 들어 설명하거나 다음에 반영할 계획을 명시적으로(JIRA 티켓 등으로) 표현할 것을 권장합니다.
• Request changes 가 아닌 Comment 와 함께 사용됩니다.

• P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
• 작성자는 P4에 대해서는 아무런 의견을 달지 않고 무시해도 괜찮습니다.
• 해당 의견을 반영하는 게 좋을지 고민해 보는 정도면 충분합니다.

• P5: 그냥 사소한 의견입니다 (Approve)
• 작성자는 P5에 대해 아무런 의견을 달지 않고 무시해도 괜찮습니다.

코드 리뷰 in 뱅크샐러드 개발 문화 | 뱅크샐러드

안녕하세요, 뱅크샐러드 BanksaladX iOS Engineer 정진규입니다. 코드 리뷰란 개발자가 작성한 코드를 다른 사람들이 검토하고 피드백을 전달하며, 다시 작성자가 반영하는 과정을 말합니다. 이 과정을 통해 서비스의 기술적인 구현 부분에 대해 공유·습득할 수 있으며, 일관된 아키텍처를 유지하고, 문제를 해결할 수 있는 새로운 관점을 발견할 수도 있습니다.

https://blog.banksalad.com/tech/banksalad-code-review-culture/

📌

참고: [GitHub] Git 브랜치의 종류 및 사용법 (5가지)

💌 Git Commit Message

• 커밋메시지는 한국어로 작성

• 커밋 타입은 소문자로 작성

• init은 프로젝트 세팅 시 한정적으로 사용

• chore는 프로젝트 설정 변경 시 사용

• 커밋 메세지는 JIRA 이슈의 키값을 포함한다

• 작성 예시 : git commit -m 'DY2-5 feat: 로그인 버튼 추가"

✨Style Rules 미정

ESLint 미정

{
  "root": true,
  "env": { "browser": true, "es2020": true },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:storybook/recommended"
  ],
  "ignorePatterns": ["dist", "!.storybook"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["react-refresh", "import"],
  "rules": {
    "no-console": "warn",
    "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }],
    "import/order": [
      "error",
      {
        "groups": [
          "type",
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ]
      }
    ]
  }
}

Prettier

{
  "endOfLine": "auto",
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "semi": true,
	"bracketSameLine": false, // 닫는 괄호('>')를 같은 줄에 넣을까요 말까요
  "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 여부 { }
	//importOrder기능은 별도 plugin필요
  //https://github.com/trivago/prettier-plugin-sort-imports
  "importOrder": [
    "^react(.*)",
    "^@tanstack/(.*)$",
    "^recoil(.*)",
    "^axios(.*)",
    "^@pages/(.*)$",
    "^@components/(.*)$",
    "^@hooks/(.*)$",
    "^@store/(.*)$",
    "^@api/(.*)$",
    "^@utils/(.*)$",
    "^@router/(.*)$",
    "^@type/(.*)$",
    "^@constants/(.*)$",
    "^@assets/(.*)$",
    "^@styles/(.*)$",
    "^@stories/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": false, //import하는 경로 별칭마다 공백 줄지 말지
  "importOrderSortSpecifiers": true //import 경로 별칭별로 정렬할지 말지
}

TS Config

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2015",
    "skipLibCheck": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@type/*": ["./src/types/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@pages/*": ["./src/pages/*"],
      "@styles/*": ["./src/styles/*"],
      "@constants/*": ["./src/constants/*"],
      "@assets/*": ["./src/assets/*"],
      "@api/*": ["./src/api/*"],
      "@router/*": ["./src/router/*"],
      "@store/*": ["./src/store/*"],
      "@utils/*": ["./src/utils/*"]
    },
    "jsxImportSource": "@emotion/react",
    "allowSyntheticDefaultImports": true,
  },
  "exclude": ["node_modules"],
  "include": ["src", "**/*.ts", "**/*.tsx"]
}

👩‍💻 Branch Rules 미정

github flow 전략을 사용한다

• 새로운 브랜치는 항상 main브랜치에서 만든다

• 기능 개발, 버그 픽스 등 어떤 이유로든 새로운 브랜치를 생성하는 것으로 시작한다

• 브랜치 이름은 자세하게 어떤 일을 하고 있는지에 대해서 작성한다

• 브랜치를 머지하기 위해서는 모든 팀원의 리뷰를 받아야 한다

• 브랜치를 성공적으로 머지했으면 해당 브랜치는 삭제한다

✅  작업 진행 순서

✅  브랜치 공통 규칙

1. main: 배포용

2. 작업은 각자 브랜치 파서 작업합니다.