코딩 컨벤션

코딩 컨벤션 이란 쉽게말해 이름 짓는 방법을 말한다.
코딩 컨벤션이 중요한 이유

• 협업할 시에 팀원 모드 같은 코드를 작성할 수 있게 된다.
• 사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 된다.
• 모르는 부분의 코드도 빠르게 파악할 수 있게 한다.
• 코드, 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 된다.

camelCase

const thisIsVariable = true;
const goToHome = () => {
	return;
}

• 거의 대부분의 변수 함수 선언에 사용된다.

kebab-case

pages
	ㄴ todo-list
		ㄴTodoList.tsx
	ㄴ todo-detail
		ㄴTodoDetail.tsx

class-name, .item-id

• 페이지, pathname, 폴더명, css className 에 사용된다.

snake_case

const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀'

// 요건 js 에서 많이 씀
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

• 소문자 표현은 잘 쓰이지 않지만, 대문자 표현은 상수 표현 할때 많이 사용한다.

PascalCase

TodoList.tsx
Detail.tsx

• 컴포넌트, page 파일 명에 많이 사용된다.
  
  
  

기본적인 변수 / 함수 선언법

변수는 noun first

// bad
var goToHome = 1;

// good
let variable = 1;
let phoneNumber = '010-1234-5678'

꼭 명확한 의미를 담아서 작성하기 / 길더라도 (약속되지 않은) 줄임말은 쓰지 않기

//bad
let a = 1;
let b = 86400;

const gmName = "kim";
const gf = undefined;

//good
const itemId = 1;
const ONE_DAY_SECONDS = 86400;

const grandMotherName = "kim";
let girlFriend = undefined;

boolean 은 is, has, thisIs, -ing

//bad
const good = true;
const girlFriend = true;

//good
const isGood = true;
const thisIsGood = true;
const hasGirlFriend = false;

//mz 최신 유행
const loading = true;

if(isGood)

함수는 verb first

//bad
const home = () => {}
const eventHandler = () => {}

//good
const goToHome = () => {}
const handleEvent = () => {}

복수에는 복수 표현 사용하기 todoItems, todoList

//bad
var todo = [1,2,3,4];

//good
const todos = [1,2,3,4];
const todoList = [1,2,3,4];