클린코드의 필요성....
기존 개발해놨던 페이지에 추가 기능과 함께 기존 기능을 조금 변경하게 되었다. 기존 기능을 별도의 모드로 변경하고 기본 모드를 추가하는 내용인데, 요구사항이 어려운 게 아니라고 생각했는데도 적용중에 기존 기능이 꼬여서 시간 대비 성과가 없던 것 같다.
바쁘다는 핑계로 외면하고 지냈던 클린코드의 개념을 정리하는 시간을 가져보자.
클린 코드(Clean Code)
클린코드(Clean Code)는 읽기 쉽고 이해하기 쉬운 코드를 작성하는 것을 의미한다. 궁극적인 목표는 유지보수 시간의 단축이다. 코드를 이해하고 수정하는데 걸리는 시간이 줄어드는 만큼 새로운 기능 구현 및 배포가 유리하다. 개발한 사람 뿐만 아니라 프로젝트 참여자와의 협업에도 필수적인 이유다.
클린코드 주요 원칙
1. 의미 있는 변수와 함수명
변수와 함수의 이름이 명확하고 의미있는 경우 코드를 읽는 사람은 해당 변수나 함수의 역할과 의도를 더 쉽게 파악할 수 있다. 코드를 읽는 사람에게 추가적인 설명을 할 필요가 없게된다.
좋은 함수를 만드려면?
- 함수이름은 동사로 구성되는 것이 좋다. 예를 들어, 'userInfo'보다는 'GetUserInfo'가 좋은 함수 이름이다.
- 함수의 전달할 인수 개수는 최소한으로, 가능한 3개 이하로 유지하는 것이 좋다. 너무 많은 인수를 사용하면 코드의 복잡성이 증가하여 유지보수가 어렵기 때문이다. 전달할 인수가 많다면, 특정 인수를 그룹화하여 객체로 전달하는 방식을 사용하는 것이 좋다.
- 함수는 한 가지 일만 잘 수행할 수 있도록 한다.
// Bad
int x = 10; // x가 의미하는 바를 정확히 이해하기 어려움
// Good
int userAge = 20; // 사용자 나이를 뜻함을 명확하게 보여줌
// Bad
function calc(a, b) {
return a * b; // 무엇을 계산하는 것인지 명확히 알기 어려움
}
// Good
function calculateArea(length, width) {
return length * width; // 넓이 계산
}
2. 가독성 좋은 코드
적절한 들여쓰기와 줄바꿈이 있는게 코드 읽기에 훨씬 수월하다.
// bad
const calculate=(a,b)=>{let result=0;if(a>10){result=a*b;}return result;}
// good
const calculateResult = (a, b) => {
let result = 0;
if (a > 10) {
result = a * b;
}
return result;
};3. 주석은 필요한 때만
변수명과 함수명 및 코드에 내용이 명확하게 설명되어 있다면 너무 좋겠지만, 부득이하게 코드 자체만으로는 이해하기 난해하거나 동작이 명확하지 않을 경우 추가 주석을 써주는 것이 좋다. 코드의 의도와 동작방식을 적절히 써주는 것이 좋다.
4. 간결한 코드 유지
복잡한 조건문이나 반복문이 단순하고 직관적인 로직으로 수정할 수 있다면 활용하는 것이 좋다. 함수는 한 가지의 기능을 수행하도록 하는 것이 좋은데, 재사용성을 고려해서 함수선언을 해야한다.
function isAdult(age) {
if (age >= 18) {
return true;
} else {
return false;
}
}
function isAdult(age) {
return age >= 18;
}
const isAdult = (age) => age >= 18;5. 모듈화
모듈화는 소프트웨어를 작은 단위로 분할하여 각각의 모듈이 독립적으로 동작하고 재사용될 수 있도록 하는 것을 의미한다. 모듈간의 의존성이 작아 변경이 발생했을 때 유지보수가 수월해지는 장점이 있다.
전체 소프트웨어가 유저 관리 시스템으로 구성되어 있다고 가정할 경우, 이 시스템은 회원가입, 로그인, 프로필 수정 등의 기능을 포함한다고 할 때 아래와 같이 모듈화할 수 있다.
회원가입 모듈: 사용자의 정보를 입력받고 회원가입을 처리하는 모듈
(이메일 중복 검사, 비밀번호 유효성 검사 등의 기능을 포함)
로그인 모듈: 사용자의 인증을 처리하는 모듈
(이메일과 비밀번호를 검사하여 로그인을 허용하거나 거부)
프로필 수정 모듈: 사용자의 프로필 정보를 수정하는 모듈
(사용자의 프로필 사진 업로드, 닉네임 변경 등의 기능을 제공)
6. 리팩토링을 통한 코드 개선
일반적으로 코드를 짤 때, 처음부터 깨끗하게 짜려고 하면 맘처럼 잘 되지 않는다. 처음부터 깨끗하게 짜려고 할 필요 없이 동작할 수 있는 코드를 먼저 구현하고, 마지막에 코드를 정리하는 방식으로 하도록 하자.
참고링크
https://yozm.wishket.com/magazine/detail/2415/
https://medium.com/naver-cloud-platform/%EB%84%A4%EC%9D%B4%EB%B2%84%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%A2%8B%EC%9D%80-%EC%BD%94%EB%93%9C%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-%ED%81%B4%EB%A6%B0%EC%BD%94%EB%93%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0-c7811f73a46b
