코드숨 1주 차 주간회고

codesoom

코드숨 1주 차 주간회고 🚀

한 것(Fact) 🔧

1. let 제거하기

재할당이 가능한 let보다는 const를 사용하자. const는 선언과 동시에 값을 할당하고 재할당을 막아준다. 그래서 const로 선언된 값을 믿고(값의 변화를 걱정하지 않고) 사용할 수 있게 한다.

2. ESLint 사용하기

ESLint는 코딩 컨벤션에 어긋나는 코드나 안티 패턴을 자동 검출해 준다. 이를 통해 좋은 코딩 스타일과 코드 품질을 만들 수 있다. 나중에 팀으로 작업할 때 ESLint를 활용하면 좋은 룰을 만들 수 있다는 생각이 들었다.

3. 인수 테스트 통과하기

인수 테스트를 작성해 놓으면 기능의 추가, 수정, 삭제 후 검수의 시간을 단축시킬 수 있다.

느낀 것(Feelings) 🙏

1. 코드리뷰

2년간 직장생활을 하면서 내가 작성한 코드에 자신감이 없었다. 그동안 코드리뷰가 없어 내 코드의 품질이 어떤지 알지 못해 답답했다.

이번 코드숨의 코드리뷰를 통해서, 내가 어떤 생각으로 코드를 작성했는지 또 어떤 습관을 지니고 있었는지 진단을 받을 수 있었다. 그리고 내 상태를 알게 되면서 무엇을 고치고 보완해야 하는지 깨달았다. 앞으로 열심히 배우고 피드백을 받아 발전해야겠다.

2. 리팩토링

리팩토링은 기존 기능을 그대로 유지하면서 내부 구조를 개선하는 것이라고 배웠다. 그리고 리팩토링을 해본 적이 없었다. 그렇게 2년만에 처음으로 코드숨을 통해 리팩토링해보았다. 사실 리팩토링이라고 불리는 것도 부끄러운 수준이지만 어느 누가 처음부터 만족하랴. 앞으로 남은 시간동안 열심히 해보자.

3. 인수 테스트

개발자 서적에 인수 테스트 혹은 TDD에 대한 개념을 보았는데, 글로 읽을 때는 ‘아 이런 개념이 있구나’ 정도였다. 그런데 이번에 코드를 추가, 수정, 삭제할 때마다 처음부터 수동으로 확인해보지 않고 간단하게 인수 테스트를 해보면서 정말 빠르고 편하다는 것을 느꼈다. 앞으로 배울 인수 테스트가 궁금하고 기대된다.

4. 좋은 Git commit 습관 기르기

좋은 commit을 작성하면 commit 메시지를 확인하는 것만으로 내용을 쉽게 파악하고 코드를 예측할 수 있게 한다. 자세한 내용은 좋은 Git Commit 메시지 작성하기 포스팅을 참조하자.

배운 것(Findings) 📚

1. inline variable 리팩토링하기

변수명을 잘 짓는 것도 중요하지만, 우변의 식이 명확한 의미를 가진다면 그대로 대입하는 것이 더 좋은 방법이 있다.

예를 들어 하단 코드를 살펴보면

const handleNumberClick = (numeral) => {
  const addNumber = numeral + (number * 10);
  render({
    ...state,
    number: addNumber
    displayNumber: addNumber
  });
};

여기서 addNumber의 변수명보다는 우변의 식이 더 명확한 의미를 보여준다.

그래서 하단 코드처럼

const handleNumberClick = (numeral) => {
  render({
    ...state,
    number: numeral + number * 10,
    displayNumber: numeral + number * 10,
  });
};

좀 더 명시적으로 보이게 수정할 수 있다.

2. 화살표 함수를 사용할 때 중괄호를 고려하기

화살표 함수를 한 줄로 작성할 때는 중괄호를 생략할 수 있다. 하지만 작성한 코드가 반환하는 값이 없을 때는 중괄호를 포함해야 한다.
아래의 작성 코드는 render(number + 1)의 결괏값을 리턴하는 것처럼 보인다.

const handleClick = (number) => {
  return render(number + 1);
};

그러나 실제 코드의 의도는 render(number + 1)의 작업을 진행한 후 종료하는 것이다.
그래서 이렇게 수정했다.

const handleClick = (number) => {
  render(number + 1);
  return;
};

이제 의도가 더 명확하게 보인다.

3. 이름 짓기

명확하고 간결한 변수함수명은 코드를 쉽고 빠르게 이해할 수 있도록 도와준다.
변수명을 지을 때는 최대한 단순하고 명확하게 짓자.

하지만 무조건 단순한 게 좋은 것은 아니다.
예를 들어 계산기에서 숫자를 누를 때 변수명을 data로 짓는다면 단순하지만 어떤 의미인지 명확하지 않다. number처럼 작성하자.

함수명을 지을 때는 행동, 행위를 고려하자. 주로 동사형으로 이름 짓는 케이스가 많았다. 함수 내부의 변수명을 지을 때는 함수 내에서만 작동하기 때문에 독립적인 이름을 생각하자.

4. 매개변수 관리

매개변수가 많아지면 object로 변경하여 담자.

매개변수가 3개 이상이 되면 object로 변경하는 것이 좋다고 생각한다.

함수의 매개변수를 넘길 때 어떤 것이 존재하는지, 그리고 어떤 값이 변경되는지 더 명확하게 알 수 있다.

수정 이전(As-is)

function render(operator = '', count = 0, tempCount = 0, viewCount = 0) {
  // ...
}

수정 이후(To-be)

function render(state) {
  const { operator, number, memoryNumber, displayNumber } = state;
  // ...
  const handleNumberClick = (numeral) => {
    const addNumber = numeral + number * 10;
    render({
      ...state,
      number: addNumber,
      displayNumber: addNumber,
    });
  };
  // ...
}

얻은 장점1 : 기존 유지된 값은 …state로 보존하고 나머지 변경되는 값을 구분.
얻은 장점2 : 변경된 값이 어떤 것이 변경되었는지를 명시적으로 알 수 있다(displayNumber: addNumber - 보이는 숫자 : 더해진 숫자).

5. 조건문

조건문을 작성할 때는 if만 사용하자. 보호 구문(Guard Clause)을 사용하는 이유는 이해하기 쉽고 함수가 하고 싶은 일을 명확하게 표현할 수 있다.

예를 들면 로그인이 필요할 때.

하단의 보호 구문(Guard Clause)을 사용하여

if (auth) {
  alert('Not logined');
  return;
}
// Do something

처럼 표현하는 것과

하단의 else를 사용한 것을

if (auth) {
  alert('Not logined');
} else {
  // Do something
}

비교해보자.

이 함수에서 하고 싶은 것은 사실 Do something이다. 이런 경우에는 if만 사용하는 것이 더 명확해 보인다. 같은 맥락으로 조건문에서 부정문보다 긍정문을 사용하는 것이 더 명확해 보인다.

자기 선언(Affirmation) 📋

  1. 현재는 코딩하는 시간보다 생각하고 정리하는데 시간을 더 소비하고 있다.

    • 생각하고 정리하는 시간을 단축(효율성을 올리도록)하도록 노력하자.
  2. 자바스크립트 서적 읽기.

    • 읽지 않고 미루었던 자바스크립트 서적을 읽자.
    • 읽고 후기도 올리기(09.27까지).
  3. 생각하기보다 하자.

    • 궁금한 게 있을 때 생각하지만 하지 말고 일단 코드를 올려라.
  4. 이번 주에 얻은 경험을 습관으로 만들 수 있도록 의식하며 코딩하자.
  5. 역시 코딩은 즐겁다.

얻은 꿀팁(Tip) 🏆

HEADLESS=ture npm run test를 사용하면 브라우저의 창 띄움 없이 테스트를 진행할 수 있다(juunini님 꿀팁).
변수나 함수의 이름을 작성할 때 영어사전(물론 책이다!)을 참조하자(아샬님 꿀팁).

  • 정말 오랜만에 영어사전을 찾아보았다.
  • 내가 고민했던 것은 number이었는데 영어사전을 참조하며 numeralnumbering을 얻었다!

👋


Written by@davidyang2149 (About me)
Hello World! This is David Yang Dev Blogs.

GitHub