티스토리 뷰

웹개발(프론트)

이쁜 코드를 짜는 규칙

수달찌 2021. 4. 29. 22:11

목차

 

 

이쁜 코드를 짜는 규칙

구독하고 있는 채널에서

관심 있는 주제(코드 퀄리티를 높이는 방법)에 대한 영상이 올라왔다.

이 글은 이영상에 대한 정리이다.

DRY

Don't Repeat Yourself

(반복하지 마라)

 

반대말로는

Write Everything Twice

(모든 걸 두 번씩 적는다)

반복되는 코드를 계속 하나하나 적음으로써

가독성이 줄어들고 코드 덩어리가 커지는 방법이다.

 

즉 다른 말로 하자면

DRY 방법을 쓰면 가독성을 향상하고,

후에 코드를 보완하는 유지보수에 대한 비용이 줄어든다.

 

제일 간단한 예로는 css 변수 설정을 들 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="width: 100px; height: 100px; background: #eca3f5; border-radius: 10px; margin-bottom: 10px;"></div>
  <div style="width: 100px; height: 100px; background: #eca3f5; border-radius: 10px; margin-bottom: 10px;"></div>
</body>
</html>

해당 코드로 이 결과를 얻을 수 있다.

하지만 같은 style을 WET방식으로 반복하여 적었으므로,

배경색을 변경하려면 하나하나 수정해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{width: 100px; height: 100px; background: #eca3f5; border-radius: 10px; margin-bottom: 10px;}
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</html>

이를 선택자 스타일로 지정하면

DRY 하게 반복하여 적지 않아도 된다.

KISS

Keep It Simple, Stupid

(단순하게, 멍청하게 유지하자)

 

음.. 이 부분에 대한 예제는 좀 아이러니한 게

이해를 위해 단순하게 만들고 싶지만,

코드가 복잡할수록 효과를 느끼기 쉽다.

function setTime(){
  let today = new Date();
  let hours = today.getHours();

  if(hours >= 12)
    console.log("It's",hours,"clock now \n afterNoon");
    
  else
    console.log("It's",hours,"clock now \n beforeNoon");
}

setTime();

기본적인 코드는 현재시간을 가져와

12시 이후라면 오후라는 메시지를

12시 이전이라면 오전이라는 메시지를 출력한다.

 

여기서 덜 KISS 한 코드로서의 아쉬움은

if문에 따라 나뉜 결과의 의도를

console.log의 인자를 읽고 나서 파악할 수 있다는 것이다.

 

이를 KISS문법으로 바꾸어 단순하게, 알아보기 쉽게 구성하자면

function setTime(){
  let today = new Date();
  let hours = today.getHours();

  if(hours >= 12)
    printTimePM(hours);
    
  else
    printTimeAM(hours);
}

function printTimePM(hours){
  console.log("It's",hours,"clock now \n afterNoon");
}

function printTimeAM(hours){
  console.log("It's",hours,"clock now \n beforeNoon");
}

setTime();

함수명에 해당 코드의 의도를 반영하여

함수명을 읽자마자 '아 이런 의도를 가지고 있구나'라고 파악하기 쉽게 만들 수 있다.

 

코드 한 줄은 보면 보이니깐 굳이 이렇게 해야 하나 생각되기도 했지만,

이를 기초 함수인 console.log가 아닌 다른 함수로 채워져 있다면,

한 줄이 아니라 2~3줄로 늘어난다면,

충분히 가치 있는 방식이라 생각한다.

 

또한 Simple / Stupid의 핵심은 하나의 함수가 하나의 의도만을 가져야 한다.

하나의 함수에서 2가지 행동을 가지면

이는 유지 보수할 때 합쳐져 있는지 확인 후, 분할해야 하는 번거로움이 생긴다.

YAGNI

You Ain't Gonna Need It

(너 그거 필요 없어)

 

불필요한 기능을 넣지 말자이다.

심미성을 제외하고 프로그램의 볼륨을 키우는 건

유지보수에서도, UX에서도 좋지 않은 행동이다.

끝

프리티한 코드~~

'웹개발(프론트)' 카테고리의 다른 글

시간표현  (0) 2021.05.06
정규표현식  (0) 2021.04.30
redux 데이터 여러개 수정하기  (0) 2021.04.27
Imported JSX component text must be in PascalCase or SCREAMING_SNAKE_CASE  (0) 2021.04.26
일러스트로 path 그리기  (0) 2021.04.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함