Portfolio

코딩_커밋_컨벤션

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/boostcamp-2020/Project18-D-WEB-Boostact/wiki/%EC%BD%94%EB%94%A9_%EC%BB%A4%EB%B0%8B_%EC%BB%A8%EB%B2%A4%EC%85%98

단위 설정하기

10px → 1rem

컴포넌트 파일 내부 작성 순서

import, type, 컴포넌트, 스타일?
import 순서 정렬(option + shift + o / alt + shift + o)


import React from 'react';

import a from '@/types/~~';

import b from '@/components/~~';

import c from '@/pages/~~';

폴더, 파일 구조


/src
│ App.tsx
│ Index.tsx
│ react-app-env.d.ts
│ Routes.tsx
├── /@type
│ └── index.d.ts
├── /assets
│ ├── Images
│ └── Svgs
├── /components
│ ├── /Commmon
│ ├── /Direct
│ ├── /Home
│ ├── /Login
│ └── /Signup
├── /pages
│ ├── /Direct
│ ├── /Home
│ └── /Login
├── /styles
│ ├── /UI
│ ├── globalStyles.ts
│ ├── styled.d.ts
│ └── theme.ts

폴더명과 파일명
맨 앞글자 = 폴더: 소문자 / 파일명: 대문자

src > components, hooks, pages
components > common > Button.tsx
index

폴더 안에 여러 파일이 있을 경우: index.tsx는 export 용도로 사용

alias 절대 경로 설정

@/components/signup

일단 화살표 함수: const fnName = () ⇒ {}

네이밍

이름은 소문자, 숫자, 언더스코어(_)의 조합으로 작성하며, 시작은 소문자로만 작성한다.

id 및 class 네이밍 규칙

PC 화면에서의 HTML을 작성할 때에는 아래와 같이 레이아웃 약속어를 따른다.
카멜 표기법을 원칙으로 한다.

클래스 선언 시에는 첫 글자를 대문자로 한 카멜 케이스를 사용한다.

상수는 영문 대문자 스네이크 표기법을 사용한다.

배열의 이름은 복수형으로 만든다.

정규표현식의 첫 글자는 'r'로 시작한다.

함수는 동사와 명사의 조합으로 하되, 형용사를 넣지 않는다.

이벤트 핸들러는 'handle'으로 시작한다.

ex) handle + 명사 + 동사

handleESCPress
handleAlertClick
https://ellie-dev.tistory.com/13 참고해서 작성

반환 값이 boolean형인 함수는 'is'로 시작한다. + boolean형 변수

범용적인 대문자 약어 (ex. URL, HTML)등은 대문자 그대로 사용한다.

풀네임으로 적기

너무 길면 축약형으로 대신 주석 달아놓기

추후 다시 논의

no-inferrable-types : 작성된 모든 타입 구문이 정말로 필요한지 확인 가능


{
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false, // Indent with tabs instead of spaces
  "semi": true,
  "quoteProps": "as-needed", //Only add quotes around object properties where required.
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

변수

camelCase
동사 + 명사? = searchButton
상수 : 대문자 + 언더바
컴포넌트 상단에 모아놓기

컴포넌트 : PascalCase
style

1개 감싸는거면 aWrapper
여러개면 aContainer

새롭게 추가된 사항

DOM Element가 포함된 파일 확장자: .tsx

DOM Element가 포함되지 않은 파일 확장자: .ts

src > styles 폴더에는 global.css만 추가
src > pages > 파일 + 각 page별 css 파일

export 문은 최하단에 작성

type은 한번만 사용되면 그 파일 내에서만 선언

2번이상 사용될 경우 types 폴더 안에서 작성

type 사용

ex) type IconType = {…}

파일명 index.tsx, style.css.ts으로 통일

코드 컨벤션

새롭게 추가된 사항