TIL | [React] 몇명이서 작업했어요?

[250106 월요일]

🛸 코드컨벤션?

• 팀의 코드를 한 사람이 짠것처럼 느껴지게, 팀원 모두 같은 코드를 작성할 수 있도록 만든 코드 규칙.
• 규칙에 맞춰 코드를 작성하면, 다른 사람이 작성한 부분의 코드도 더 빠르게 파악할 수 있게 된다.

팀으로 작업하게 되면 여러가지 팀만의 규칙을 정하게 될텐데, 지난 프로젝트를 진행하며 사전에 규칙을 정하고 진행하는 것과 아닌 것을 직접 팀원의 코드를 보면서 체감해 버렸다.

오늘 수업 말미에 코드 컨벤션이 잠깐 나와서 기록해 둔다.

🔹 모양새에 따른 코드이름짓는 방법

1. camelCase
   소문자시작 다음 단어 시작은 대문자로.
   거의 대부분의 변수 함수 선언에 사용됨.

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

2. kebab-case
   꼬치에 줄줄이 꽂은 형태.
   단어 사이를 '-'로 연결.
   페이지, 폴더명, css class-name 등에 주로 사용.

pages
	ㄴ todo-list
		ㄴTodoList.tsx
	ㄴ todo-detail
		ㄴTodoDetail.tsx
		ㄴTodo-detail.tsx
class-name, .item-id
<div class="item-id">

3. snake_case
   뱀이 지나가는 형상이라고 하는데..(어디가?)
   단어 사이를 밑줄로 연결.
   대문자 표현은 상수를 표현 할 때 많이 사용.

const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀'
// 상수표현은 js 에서 많이 씀
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

4. PascalCase
   대문자 시작 다음단어 대문자 시작.
   컴포넌트, page 파일 명에 많이 사용.

TodoList.tsx
Detail.tsx

---

🔹 변수 / 함수 이름짓는 방법

1,2 번은 잘 만들어 두면 변수인지 함수인지 이름만으로도 금방 파악할 수 있음.

1. 변수는 명사 first

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

2. 함수는 동사 first

//bad
const home = () => {}
const eventHandler = () => {}
//good
const goToHome = () => {}
const handleEvent = () => {}

3. 길더라도 꼭! 명확한 의미를 담아서 작성하기
   약속되지 않은 줄임말은 사용하지 않기.

//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;

4. boolean형은 is, has, thisIs, -ing
   변수/함수 명만 봐도 true, false로 표기할 수 있게.

//bad
const good = true;
const girlFriend = true;
//good
const isGood = true;
const thisIsGood = true;
const hasGirlFriend = false;
const loading = true;
if(isGood)

5. 복수형태는 복수 표현으로 사용하기
   기존 js용어들에도 복수 표기형이 되어 있다.
   todoItems, todoList처럼 함수나 변수명을 지정할때도 복수형태는 복수표현으로 사용.

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