[특강] 클린코드_의미 있는 변수명 짓기

클린 코드는 무엇인가? 왜 써야 하는가 ?

클린코드는
유지보수와 디버깅에 용이
준수한 성능과 명확한 의도를 가진 코드.

내가 적은 코드에 의도를 담고
그 의도를 다른사람으로 하여금 납득할 수 있게 하는 것.

 

---

코드 컨벤션

// camelCase
// 거의 대부분의 변수 함수 선언에 사용
const thisIsVariable = true;
const goToHome = () => {
  return;
}

// kebab-case
// 페이지, pathname, 폴더명, css className 에 사용
pages
  ㄴ todo-list
    ㄴTodoList.tsx
  ㄴ todo-detail
    ㄴTodoDetail.tsx
// css className: class-name, .item-id

// snake_case
// 소문자 표현은 잘쓰이지 않지만, 대문자 표현은 상수 표현 할때 많이 사용합니다. 
const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀'
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; // 요건 js 에서 많이 씀
setTimeout(blastOff, MILLISECONDS_PER_DAY);

// PascalCase
// 컴포넌트, page 파일 명에 많이 사용
TodoList.tsx
Detail.tsx

 

 

---

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

1. 변수는 명사가 먼저 오게 작성. noun first

// 🚫bad
var goToHome = 1;

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

 

2. 명확한 의미를 담아서 서술적으로 작성. 길더라도 (약속되지 않은) 줄임말은 쓰지 않기

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

 

3. boolean 은 is, has, thisIs, -ing

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

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

const loading = true;

if(isGood)

 

4. 함수는 동사 먼저. verb first

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

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

 

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

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

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

 

 

---

객체 구조 분해 할당과 스프레드 연산자

1. 구조분해 할당

// 배열
const [state,setState] = useState();

// 객체
// 하나의 동일한 변수명만 존재
const ItemComponent = ({title}) => {
  return <span>{title}</span>
}
// 같은 변수명을 여러번 써야할때 ex) isLoading, isError
const ItemComponent = ({title}) => {
  const {title: someHooksTitle} = someHook();
  return <span>{title}, {someHooksTitle}</span>
}

 

2. 스프레드 연산자 + 구조 분해 할당

2-1) 컴포넌트에서

// rest = {content, subTitle}
const Parent = ({title, ...rest}) => {
  return <>
    <span>{title}</span>
    <Child {...rest}/>
  </>
}

const Child = ({content, subTitle}) => {
  return <>
    <span>{content}</span>
    <span>{subTitle}</span>
  </>
}

 

2-2) 함수에서

const validBoolean = (firstBoolean, secondBoolean, thirdBoolean) => {
  return firstBoolean && secondBoolean && thirdBoolean
}

//arg = [firstBoolean, secondBoolean, thirdBoolean]
const validBoolean = (...args) => {
  return args.every(isTrue => isTrue);
}