✍🏻

코드 컨벤션(방현영)

폴더 / 파일 컨벤션

폴더명은 파스칼케이스로 작성합니다. (pages, components, assets, 등의 폴더는 제외)

	─── src
    ├── assets
    ├── components
    │   ├── Album
    │   ├── Alert
    │   ├── Buttons
    │   ├── Comment
    │   ├── Content
    │   └── User
    ├── pages
    │   ├── ChatFeed
    │   ├── ChatRoom
    │   ├── Splash
    │   └── YourProfile
    └── 
Plain Text
복사

컴포넌트 파일(.jsx)은 파스칼케이스로 작성합니다. (컴포넌트 파일 외의 다른 파일들은 카멜케이스로 작성합니다. ex 커스텀 훅)

  ├── components
  │   └──  ProductPrice 
	│				 └──  ProductPrice.jsx
  └──  						
JavaScript
복사

스타일 컴포넌트 파일은 스타일을 적용할 컴포넌트의 이름앞에 Styled를 붙여줍니다.

├── components
│   └──  ProductPrice 
│				 ├──  ProductPrice.jsx
└──  		 └──  StyledProductPrice.jsx
JavaScript
복사

네이밍 컨벤션

함수명, 변수명은 카멜케이스로 작성합니다.

let soldOutMenu;
const changeCategory = () => {};
JavaScript
복사

상수는 영문 대문자 스네이크 표기법(Snake case)를 사용합니다.

const UPPER_SNAKE_CASE;
JavaScript
복사

Boolean 값 (true, false)이 저장되는 변수는 is를 접두사로 붙입니다.

const isPending = true;
const isChecked = false;
JavaScript
복사

함수명은 동사형으로 시작하여 해당 함수의 역할을 정확히 표현합니다.

const getValue = () => {};
JavaScript
복사

이벤트핸들러에는 handle을 접두사로 붙입니다.

export default function Login() {
    const handleSubmit = () => {}

    return (
        <form onSubmit={handleSubmit}></form>
    )
}
JavaScript
복사

import 및 CSS 작성 순서

깃허브 CSS common component 작성 방법

파일 내 import 순서는 패키지(모듈), 컴포넌트, 스타일 컴포넌트 순으로 합니다.

import React from 'react'
import { useEffect, useState } from 'react'
import styled from "styled-components";

import Cart from '../../components/Cart/Cart'
import Card from '../../components/Card/Card'
import FailLoadData from '../../components/Shared/FailLoadData/FailLoadData';

import { Wrapper, Span, StyledButton } from "./NotFoundPage.style";
JavaScript
복사

CSS 작성 순서는 다음과 같이 작성합니다. (상위 정도의 순서만 지켜도 무방)

display
position
width/height
margin/padding/border
text 관련
color 관련
tranform, transition, animation
기타
Plain Text
복사

//예시
.fill-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 48px;
    border: none;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #fff;
    background-color: #3040c4;
    transition: opacity 300ms ease-in-out;
}
CSS
복사

기타 컨벤션

들여쓰기는 두 칸을 기본으로 합니다.

문자열을 처리할 때는 작은따옴표를 사용하도록 합니다.

z-index는 10 단위로 사용합니다.

문장이 종료될 때는 세미콜론을 붙여줍니다.

!=와 == 대신 !==와 ===를 사용합니다.

var는 사용하지 않습니다.

화살표 함수를 사용합니다.

연산자 사이에는 공백을 추가하여 가독성을 높입니다.

a+b+c+d // bad
a + b + c + d // good
JavaScript
복사

콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.

var arr = [1,2,3,4]; //bad
var arr = [1, 2, 3, 4]; //good
JavaScript
복사

주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

// Good
function someFunction() {
  ...

  // statement에 관한 주석
  statements
}
JavaScript
복사