클린코드 Day 8-9. 더러운 코드 고치기

✅ 이 포스팅은 노마드 코더 북클럽  '클린 코드' 챌린지를 진행하면서 작성하는 TIL이며,  출처는 Clean Code입니다.

 

📚 미션 :  예시의 더러운 코드를 수정하고 고친 이유와, 배운 점 적어보기

 

 

🔥 Mission 1

1. BAD 더러운 코드 😣

• Hint❕ : 검색하기 쉬운 이름을 사용하세요.
• blastOFF는 로켓 발사를 의미. 86400000은 하루의 밀리초 (milliseconds) 의미. 

    // What the heck is 86400000 for?
    setTimeout(blastOff, 86400000);

 

2. GOOD 😎 위 코드를 깨끗하게 다시 작성해 주세요.

    const MILLISECONDS_OF_A_DAY = 86400000;

    setTimeout(blastOff, MILLISECONDS_OF_A_DAY);

3. 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

[고친 방법]

setTimeout 86400000이 ms 단위의 시간이라는 것은 알 수 있지만, 그냥 숫자만 봐서는 무엇을 의미하는지 와닿지 않았다. 86400000가 하루의 밀리초를 의미하는 시간이라는 것을 알고 , 하루의 밀리 초를 검색해보니 milliseconds of a day라고 표현한다는 사실을 알게 되었다.
따라서 86400000을 변수로 선언한 후 setTimeout 함수도 고쳐주어서 로켓 발사가 반복될 시간임을 알기 쉽게 만들어주었다.

[배운 점]

항상 코드를 작성할 때 다른 사람이 읽어도 한눈에 이해할 수 있도록 작성하는 것이 중요하다는 것을 느꼈다.
86400000 ms가 하루의 밀리 초를 의미한다는 점을 검색해보면 알 수도 있겠지만, 검색을 해서 알 수 있는 코드는 좋은 코드가 아니다.
나도 코드를 작성할 때 나만의 용어가 아닌 누구나 이해할 수 있는 코드를 작성할 수 있도록 노력해야겠다고 느꼈다. 

🔥 Mission 2

1. BAD 더러운 코드 😣

• Hint❕ : 의미 있는 이름을 사용해주세요.

    const yyyymmdstr = moment().format("YYYY/MM/DD");

 

2. GOOD 😎 위 코드를 깨끗하게 다시 작성해 주세요.

    const currentDate = moment().format("YYYY/MM/DD");

3. 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

[고친 방법]

예제의 yyyymmdstr은 연도, 월, 일을 의미한다는 것은 알 수 있지만, 어떤 날짜를 의미하는지는 알 수 없었다. 먼저 moment()를 console에 입력해봤는데 'moment는 정의되지 않은 함수'라고 나왔다. 
그럼 다른 의미가 있는 것인지 구글에 검색해보니 JS라이브러리 중에 moment.js라는 것이 있다는 것을 알게 되었다.
moment.js에서 moment( )는 현재 날짜와 시간을 생성하는 함수였다.

즉, 예시 코드가 의미하는 것은 현재 날짜와 시간을 YYYY/MM/DD의 형태로 바꾸어 주는 동작을 하는 함수라는 것이다.
따라서 yyyymmdstr대신, 현재 날짜를 의미하는 currentDate으로 바꾸어 의미를 바로 알 수 있도록 바꾸어주었다.

[배운 점]

moment.js라는 라이브러리가 있다는 것을 알게 되었고, moment( )의 의미도 배웠다.
그리고 다시 한번 느끼지만, 아무리 급해도 의미 없고, 깨끗하지 않은 코드를 작성하지 말아야겠다는 것을 느꼈다. 결국 나쁜 코드를 고치려면 또 시간이 들기 때문에 처음부터 잘 생각해서 코드를 작성하는 것이 시간을 아끼는 일이니까.

 

 

🔥 Mission 3

1. BAD 더러운 코드 😣

• Hint❕ : 불필요하게 반복하지 마세요.

    const Car = {
      carMake: "Honda",
      carModel: "Accord",
      carColor: "Blue"
    };

    function paintCar(car, color) {
      car.carColor = color;
    }

 

2. GOOD 😎 위 코드를 깨끗하게 다시 작성해 주세요.

    const Car = {
      make: "Honda",
      model: "Accord",
      color: "Blue"
    };

    function paintCar(car, color) {
      car.color = color;
    }

3. 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

[고친 방법]

예시에 나오는 Car object는 자동차의 생산회사, 모델명, 색상을 나타내는 object이고 모두 차에 관련된 내용들로 구성되어 있었다.
이미 3개의 key들이 'car'라는 공통점을 가지고 있다는 것을 object이름만 봐도 알 수 있는데, key에 또 car를 적을 필요는 없다고 판단되어서 make, model, color로 수정해주었다.

그리고 아래의 pintCar함수에는 위에 Car {}의 Carcolor를 color로 변경했으니까, 똑같이 car.Carcolor에서 car.color로 변경해주었다. console에서 Car.color를 시험해보니 Blue에서 내가 지정한 색으로 바뀌는 것을 볼 수 있었다.

[배운 점]

전에 강의를 들을 때 변수 선언 시 공통된 점이 있다면 각각을 따로 변수 선언하는 것보다 object로 묶는 것이 보기에 공통된 점을 가지고 있다는 것을 표현하기에 더 좋고, 간결하게 작성할 수 있다고 배웠는데, 이번에 실제로 사용해 보니 더욱 와닿았다.
하지만 단순히 object로 묶는 것이 끝이 아니고, 변수 이름 작성 시 중복되는 부분은 또 쓸 필요 없이 생략해야 한다. 아니면 object로 작성하는 것의 장점이 사라지기 때문이다.
앞으로 코드를 작성할 때 깨끗한 코드를 작성할 수 있도록 고려하면서, 중복도 줄여서 진정한 Clean Code를 작성할 수 있도록 고심하면서 작성해야겠다는 점을 느꼈다.