Convention

네이밍 컨벤션

CSS

• kebab-case

DB

• snake_case

파일, 폴더 이름

• 클래스, 컴포넌트 파일
  • PascalCase
• 그 외 파일, 폴더
  • camelCase
• client/pages 하위 파일은 컴포넌트지만 예외로 camelCase 사용

JS

• 클래스, 컴포넌트
  • PascalCase
• 변수, 함수
  • camelCase

기타

• 경로와 관련된 것은 제일 상단에 import
• SEO를 생각하면서 태그 선택해보기
• 그 외 규칙은 코드 리뷰를 하면서 맞춰가기로 결정

브렌치 컨벤션

• kebab-case
• 제일 상단에 main
• 아래에 develop
• 기능 별로 feature/000로 개발한다.
• 프론트와 백엔드 코드의 혼합 방지를 위해 커밋

CSS 컨벤션

• rem으로 통일

URL 컨벤션

• 랜딩 페이지
  • /
• 로비 페이지
  • /lobby
• 대기실 페이지
  • /waiting/:id
• 게임 페이지
  • /playing/:id
    • game 정보 불러온 후, participants에 user가 속해있는지 검사 후, 없으면 로비로 리다이렉트

코드 스타일

Prettier

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 120,
  "arrowParens": "avoid"
}

Eslint

npx eslint --init 으로 최초 설정 후 prettier, react, react-hooks 관련 설정 추가

  module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  plugins: ["react", "react-hooks", "@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json",
  },
  rules: {},
  settings: {
    react: {
      version: "detect",
    },
  },
};

폴더 구조 컨벤션

• 프로젝트를 진행하면서 바뀔 수 있으므로 확정하지 않는다.

프론트엔드

• public
• src
  • api
  • pages
    • LandingPage
      • index.tsx
      • style.ts
  • components
  • hooks
  • constants
  • utils
  • store
  • styles (reset, global, theme)
  • @types
    • index.d.ts
    • import { BuildingUploading } from "@types";
    • 
    • building.d.ts
    • 

---

백엔드

• nest new .
• prisma, MySQL 적용
  • https://github.com/seungjae94/nestjs-prisma-mysql-example/blob/master/docs/DOC1.md