티스토리 뷰

웹개발(프론트)

이쁜 코드를 짜는 규칙

수달찌 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
    글 보관함