프론트엔드 개발 문서

목차

• 코드 컨벤션
  • 네이밍
    • 변수명, 함수명
    • 상수
    • 컴포넌트, 객체, 클래스
    • 축약어
    • html 태그에 따른 스타일 컴포넌트 네이밍
    • api
  • CSS
    • attribute 순서
  • 상수
  • 타입
    • type
    • interface
  • 컴포넌트
    • 선언
    • props
    • export default
  • 리액트
    • 확장자
    • 작성 순서
    • path alias
    • react event handler
    • React.[type]
• 폴더 구조
• 사용 라이브러리
• 테스트

1️⃣ 코드 컨벤션

네이밍

변수명, 함수명

변수명, 함수명은 camelCase로 한다.

// bad
const this_is_my_object = {}
const this_is_my_function = () => {}

// good
const thisIsMyObject = {}
const thisIsMyFunction = () => {
  // ...
}

상수

상수명은 UPPER_CASE로 한다.

// bad
const myConstants = "상수"

// good
const MY_CONSTANTS = "상수"

컴포넌트, 객체, 클래스

컴포넌트, 객체, 클래스는 PascalCase로 한다.

// bad
const myReactComponent = () => {
  // ...
}
class person() {
  // ...
}

// good
const MyReactComponent = () => {
  // ...
}
class Person() {
  // ...
}

축약어

축약하여 네이밍을 하지 않는다.

// bad
const myBtn = document.querySelector('.my-button')
const myFn = () => {
  // ...
}

// good
const myButton = document.querySelector('.my-button')
const myFunction = () => {
  // ...
}

html 태그에 따른 스타일 컴포넌트 네이밍

모든 스타일 컴포넌트의 이름에는 기능을 암시하는 단어를 사용한다.

스타일 컴포넌트 네이밍	의미
Layout	최상위 레아웃을 설정할 때 사용한다.
Container	여러개의 요소를 묶을 때 사용한다.
Wrapper	하나의 요소를 묶을 때 사용한다.
Box	div태그를 사용할 때 권장한다.
List	ul태그를 사용할 때 권장한다.
Item	li태그, 반복되는 요소를 사용할 때 권장한다.

api

api 함수를 만들때 api method가 어두에 작성한다. api method가 아닌 단어는 어두에 작성하지 않는다.

// bad
const userGet = () => {
  // ...
}

const searchUser = () => {
  // ...
}

// good
const getUser = () => {
  // ...
}

단, 다양한 api method를 추상화 해야 하는 경우에는 fetch를 어두에 작성한다. api method에 대한 구분은 인자로 한다.

// bad
const getPostUser = () => {
  // ...
}

// good
const fetchUser = () => {
  // ...
}

CSS

attribute 순서

유사한 성격의 attribute을 묶어 작성한다. 다른 성격의 attribute와는 개행으로 구분한다.

|순서|성격|대표 attribute| |:---:||:---:||:---| |1|레이아웃|position, top, bottom, left, right, z-index, float, display, flex, flex-direction, grid, visibility| |2|BOX|width, height, margin, padding, border, outline, box-sizing| |3|배경|background, box-shadow| |4|폰트|font, color, text, line-height, letter-spacing, white-space, break-word| |5|변형|transform, transition, animate| |6|기타|overflow, opacity, cursor|