서론
하반기 채용을 준비하면서 이력서, 포트폴리오, 깃허브 관리 등 해야할 일이 많아졌다.
그런데 기존에 했던 프로젝트를 보니 너무 시간에 쫓긴 나머지 보기만해도 어지러운 코드를 작성해서 리팩토링의 필요성을 느꼈다.
우선 리팩토링을 어떻게 해야하는지, 클린코드란 무엇인지 감이라도 잡기 위해서 찾아보던 중 무료 강의를 발견해서 가볍게 듣고 정리해보았다.
변수 챕터
커뮤니케이션의 기본
코드 = 커뮤니케이션
- 다른 사람이 내가 짠 코드만을 보고도 내 의도를 100% 이해할 수 있어야 한다.
- 변수는 코딩의 가장 기본 단위로, 변수만 보고 기본적인 의도를 파악할 수 있다.
의도를 명확히 밝혀라
변수명은 구체적으로
- 작성자만 알 수 있는 약어 사용 X
const t→const selectedText- 단어를 쓰더라도 일반적인 단어보다는 구체적인 변수명으로 작성할 것
주석은 해결책이 아니다
const t = ""; // 유저가 선택한 문자열- 선언부에서는 설명이 가능할지 모르나, 주석이 써있는 선언부를 벗어나면 여전히 ‘t’가 무엇을 의미하는지 알기 어렵다.
- 변수 호출부가 한참 뒤에 나올 경우 어떤 변수였는지 기억하기 어렵다.
- 좋은 코드일수록 주석이 적게 필요하다.
중언부언 하지마라
- 일반적인 단어의 조합(numArray)로는 변수가 어떤 역할을 하는지 알 수 없다.
// Bad
const numArray = [1, 2, 3] // 유저 일련번호 목록
// Good
const userIds = [1, 2, 3]- 대상의 특징을 명확하게 드러낼 수 있는 용어를 사용하자.
정리
- 작성자만 알 수 있는 약자를 사용하지 말자
- 주석에 의존하지 말고 구체적인 변수명을 사용하자
- 변수의 역할을 설명할 수 있는 명확한 단어를 쓰자
Magic Number & Hard Corded Value
Magic Number 사용 금지
- Magic Number : 의미가 부여되어있지 않은 하드코딩된 숫자
// Bad
if (comments.length > 140) {
throw new Error("exceed comment length")
}
// Good
const commentLimitCount = 140
if (comments.length > commentLimitCount) {
throw new Error("exceed comment length")
}- MagicNumber를 쓰면 이 숫자가 어떤 역할인지, 어떤 기준으로 정해진 것인지 알기 어렵다.
- 2회 이상 중복 사용 시 유지보수성이 낮아진다.
// Bad - 특정 index number가 왜 쓰였는지 이해하기 어려움
userIds[0].someValue;
// Good - 특정 index number가 왜 쓰였는지 명확히 알 수 있음
const masterUserIdx = 0;
userIds[masterUserIdx].someValue;
// ES6 문법
const [masterUser] = userIds;
masterUser.someValueHard Coded Value는 변수 또는 열거형으로
// Bad : BTC, ETH가 어떤 의미인지 바로 파악하기 어려움
if(someCode === "BTC") {...}
else if(someCode === "ETH") {...}
// Good
enum CoinCode {
BITCOIN = "BTC",
ETHEREUM = "ETH",
}
if (someCode === CoinCode.BITCOIN) {...}- 값이 하나인 경우 변수에 저장, 여러개인 경우 열거형(enum)을 통해 무엇을 나타내는 변수인지 명확히 확인 가능
함수 챕터
함수를 잘 만든다는 것은?
깊게 들어가면
- 추상화 수준
- OCP, SRP, 다형성 등등 객체 지향 단어들
→ 초급 개발자가 이해하기 어렵다!
이번 강의 : 단순하고 구체적으로
실전에서 함수를 잘 만들 수 있는 단순하지만 쉬운 방법
- Pure Function
- 함수는 한가지 일만 한다.
Pure Function
Pure Function의 조건
- 특정 input에 대한 output 값이 항상 같아야 한다.
- 함수 밖에서 생긴 변화가 함수 내부에 영향을 주면 안된다.
- 부수효과(Side-effect)가 없어야 한다.
Input-Output
순수하지 않은 함수
- 함수 외부의 변수를 사용하기 때문에, 같은 input을 넣어도 output이 달라질 수 있다.
let outerValue = 7;
const impure = (input: number) => {
return input + outerValue;
}
impure(3); // 10
outerValue = 100
impure(3); // 103순수하지 않은 함수가 문제인 이유
- 함수 바깥에서 쓰이는 변수는 다른곳에서도 쓰이는 변수일 확률이 크다.
- 같은 외부 변수를 참조하는 A 함수, B 함수가 있을 때, A라는 함수를 위해 외부 변수 값을 바꿀 경우 B 함수가 영향을 받아 의도한대로 동작하지 않을 수 있다.
- 버그가 발생할 가능성이 높아지고 유지보수성도 떨어진다.
순수함수로 만들기
- 함수에서 사용하는 값은 파라미터로 받도록 수정하면 된다.
const pure = (input:number, add:number) => {
return input + add;
}
pure(3, 7); // 10Side-effect
- 함수 안에 생긴 변화가 함수 밖에 생겨서는 안된다.
부수효과를 발생시키는 함수
let outerValue = 7;
const impure = (input: number) {
if (input > outerValue) {
return input;
}
// 함수 내부 동작에 의해 외부변수 outerValue가 변경됨
outerValue++
return outerValue
}클린코드 예제
- 패스워드를 체크하는 함수인데, 세션을 초기화하는 작업도 같이 수행하고 있다.
// Bad
const checkPassword = (password: string) {
if (isValid) {
Session.init();
return true;
}
}- 예상 가능한 문제점
- checkPassword를 삭제할 때 유저 세션을 초기화하는 부분까지 같이 삭제 된다.
- 유저 세션 초기화 로직을 고쳐야한다면, 패스워드를 체크하는 기능까지 bug가 발생할 수 있다.
// Good
const checkPassword = (password: string) {
if (isValid) {
return true;
}
return false;
}
const isValid = checkPassword("myawesomepassword");
// 세션 초기화 부분을 checkPassword에서 분리함
if (isValid) {
Session.init();
}함수는 한가지의 일만 해야한다
여러가지 일을 하는 함수
- 앞서 보았던 부수효과를 일으키는 checkPassword에서는 비밀번호 체크와 유저 세션 초기화 2개의 역할을 하나의 함수에서 실행하고 있다.
- 이를 부수효과를 일으키지 않도록 고쳤을 때 checkPassword 함수는 비밀번호 체크 하나의 역할만을 담당하게 되었다.
- 이를 SRP(Single Reponsibility Principle; 단일책임원칙)을 따르는 함수가 되었다고 할 수 있다.
코멘트
순수함수라는 개념을 들어보기만 하고 사실 잘 알고 있지는 못했는데, 이번 강의를 통해서 좀 명확하게 이해한 것 같다.
변수명도 이미 최대한 의미를 부여하면서 작성하고 있었지만, 어떤 단어를 피해야 하는지를 알게 되었다.
하지만 이미 만든 코드를 뜯어 고치려고 해보니 여전히 많은 막막함을 느낄 수 있었다.
특히 주석 없이 작성한 코드에서 어떻게 주석을 달아야 하는 것인지를 잘 모르겠다.
우선 아무 설명 없이 코드만 넘겨줬을 때 남이 이해할 수 있어야 한다는 개념을 잘 기억해두고, 자세한 내용은 "클린코드" 책이나 유료 강의 등으로 더 찾아 배워야 할 것 같다.
