CODE CONVENTION

<aside> ✅

코드 컨벤션의 중요성

팀원 모두 같은 코드를 작성할 수 있게 규칙을 설정한다.
사람에 의존적이지 않고 규칙에 의존적인 코드를 작성하게 되고 모르는 부분의 코드도 빠르게 파악할 수 있게 한다.
코드 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 한다. </aside>
변수 - 명사
- 배열은 복수형 ex) values, posts
- 재할당 필요 없을시 **const**로 선언
- const를 지향하고 var는 절대 사용하지 않기
  - 만약 let은 값이 변하는 경우에만 사용할 수 있음
- Boolean 타입의 변수는 is 접두사를 붙이기 ex) isActive, isLoggedIn
- 범용적인 약어 여부 관계없이 CamelCase를 사용하기
```
const variableName = 2;
const isClicked = false;
const imageUrl = '';
```
함수 - 동사
- 함수는 CamelCase로 선언하기
- Boolean 타입을 리턴하는 함수는 is 접두사를 붙이기
- API를 호출하는 함수는 아래의 명명규칙에 따라 접두사를 붙이기
```
// GET - "get-*"
const getSchedule = () => {}

// POST - "post-*"
const postSchedule = () => {}

// PATCH - "patch-*"
const patchSchedule = () => {}

// DELETE - "delete-*"
const deleteSchedule = () => {}
```
- getStudentName, getMonth
- 이벤트 핸들러
  - props로 전달할때는 on 접두사를 붙이기
  - 이벤트를 직접 처리하는 함수는 handle + 명사 + 동사 형태로 작명하기
```
보낼시 `onClick= {handleButtonClick}`  → 사용시 `onClick ={onClick}` 
```
  - ex) handleButtonClick, handleContentChange
- 화살표 함수로 집중해서 활용
- 2페이지 이상 공유하는 코드는 유틸로 빼서 진행하되 회의시간 공유(PR시간에 체크)
components 분리 방식
- 페이지별로 components 분리
- Pascal Case로 작성하기
- 폴더명은 복수형으로 작성
타입 방식
- props로 선언하는 타입은 interface 로 지정하기
- 그 외에는 type으로 지정하기
상수
- 상수는 SNAKE_CASE로 선언하기
- 상수는 Constants라는 폴더 안에 보관하기
```
const CONSTANT = 1;
```

import 순서

표준 라이브러리, third-party 라이브러리, local-module 라이브러리

import React, { useState } from 'react';

import { FaBeer } from 'react-icons/fa';

import AComponent from './AComponent';
import BComponent from './BComponent';

type
- -type.ts 로 작성하기

TailWind 작성방법
- 박스 모델 관련 속성 : 요소의 크기와 배치를 결정하는 속성 displayz-indexflex or grid
- 박스 크기와 간격 : 요소의 크기와 내부/외부 간격을 정의하는 속성 : 무조건 가로 값 먼저 작성하기 widthheightmarginpadding
- 색상 및 배경 색상과 배경 관련 속성 colorbackground 관련 속성
- 테두리 및 윤곽선 : 요소의 테두리와 외곽선을 정의하는 속성 borderoutlinebox-shadow
- 기타 등등 cursortransition, animationtransformoverlflow, clip-path
- 타이포그래피 관련 속성 : 텍스트와 관련된 속성 font , font-size, font-famaily, font-weightline-height, letter-spacing, word-spacingtext-align, text-transform, texet-decoration
```
/* Box model */
display: flex;
width: 100px;
height: 50px;
margin: 0 auto;
padding: 10px;
```
```
/* Typography */
font-size: 16px;
font-weight: bold;
text-align: center;
```
```
/* Visuals */
color: white;
background-color: blue;
border: 1px solid black;
```
- 색상 및 배경 : 색상과 배경 관련 속성 : color : background 관련 속성
- 테두리 및 윤곽선 : 요소의 테두리와 외곽선을 정의하는 속성 borderoutlinebox-shadow
- 기타, 등등 cursortransition, animationtransformoverlflow, clip-path