[TIL] 20230804 - 클린코드란???? 1

단순히 동작하게 작성하는 것에서 남이 봐도 이해할 수 있도록 작성하는 것 으로 코드를 바라보는 생각의 패러다임을 변경해야한다

클린코드는 비단 깨끗한 코드 그 자체를 넘어 개발자의 마인드셋과 직결되는 문제!!

 

1. 의미 있는 변수명/함수명 짓기

• camelCase
• kebab-case
• snake_case
• PascalCase

코드 컨벤션에 맞게 변수명을 만들면 팀원이 마치 한사람이 짠 코드처럼 코드를 작성할 수 있다.

규칙적인 변수명은 모르는 부분의 코드도 빠르게 파악할 수 있다.

 

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

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

복수표현 컨벤션에 대한 다른 글을 본적이 잇는데

글중

단순히 보면 +s를 붙이는 게 더 나을 수도 있는데 어떤 단어는 s를 붙이고, 어떤 단어는 es를, 어떤 단어는 ies를, 어떤 단어는 f를 v로 바꿔주고 es를…
어렵죠 영어는 ㅜ
그래서 네이밍할 때 이러한 수고를 덜고, List라는 이름만 보면, 아 이건 복수형이구나 라는 것을 알 수 있게 + list라는 규칙으로 정하였습니다.

공감한당 ㅎㅎㅎㅎㅎ

https://techblog.woowahan.com/9804/

 

• 객체 구조 분해 할당

// 하나의 동일한 변수명만 존재
const ItemComponent = ({title}) => {
	return <span>{title}</span>
}

// 같은 변수명을 여러번 써야할때 ex) isLoading, isError
const ItemComponent = ({title}) => {
	const {title: someHooksTitle} = someHook();
	return <span>{title}, {someHooksTitle}</span>
}

여러군데서 props를 받아올 시 같은 변수명이 있다면

구조분해 할당으로 받아올 때 새로운 명확한 변수명을 설정해주면 명확하게 사용가능

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

1. 컴포넌트에서

// rest = {content, subTitle}
const Parent = ({title, ...rest}) => { // 여기에서는 title만 사용할거야~ 라는 의도를 담을 수 있다.
	return <>
                <span>{title}</span>
                <Child {...rest}/>
            </>
}

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

1. 함수의 인수에 사용

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

//arg = [firstBoolean, secondBoolean, thirdBoolean]  <- 배열의 형태로 받아 올 수 있다.
const validBoolean = (...args) => {
	return args.every(isTrue => isTrue);
}

 

변수나 함수를 어떻게 써야하는지, 의미있게 쓰는게 중요하다는 말씀!!!!!!!!!!!!!!