실용주의 프론트엔드 개발 리뷰 1


실용주의 프론트엔드 개발을 읽고 느낀점을 써봤습니다.


서문

이해하기 쉬운 코드를 작성하는 것은, 프론트엔드 개발 뿐만 아니라 모든 개발자에게 요구되는 덕목이라 생각한다.

코드를 작성하는 것은 CRUD와 똑같다 생각한다. 기능 개발을 위해 창조하고, 코드를 이해하고(읽고), 더 좋은 사항이 있으면 수정하고, 필요가 없어지면 삭제하는 것처럼.

만드는 것은 쉽다. 그러나 유지하는 것은 더욱 어렵다 라는 말이 있다. 입으로는 유지보수를 좋게 해야한다 논하지만, 손이 그렇지 못할 때가 종종 있었다. 지금껏 내가 코드를 작성한 코드를 돌아보고, 앞으로는 어떻게 해야할 지 고민하고 적용해야겠다.

1. 이해하기 쉬운 코드 작성법

1. 네이밍을 명확히 하자

  • 루프백 확인은 괜찬은 것 같다. 이전에 짠 코드들을 보다보면 “이 네이밍이 맞는건가?” 싶은것들이 종종 보인다.
  • 구체적으로 적는 것 또한 좋다고 생각한다. 다만, 적다보면 이름이 길어지는 경우가 부지기수인데, 영어를 그리 잘하지 못하다 보니 단어 선택이 항상 어렵고 길어진다.

2. 코드 외관도 아름답게 하자

  • 사실 Lint같은 좋은 게 많아서 큰 고민을 하지 않았던 부분이였다. 하지만 읽다보니 import하는 곳 부터 해서 마구잡이식으로 import된 것을 다시 보니, 음… 보기 좋지 않았다.
  • index.ts를 이용해서 더 깔끔하게 정리해야겠다.

3. 조건문을 단순화 하자

  • 조건문에서 긍정을 먼저 체크할 지는 취향 차이인듯.. 하지만, 기왕이면 긍정적으로 생각하면 좋겠지?
  • 거대한 구문을 쪼개는 것은 생각보다 어렵다. 처음 기능을 만들때에는 이것 저것 고려해서 만들었을 때 비대해지는 경우가 종종 있는데, 중복들을 하나씩 지워나가면 될 것 같다.

  • 이전 레거시 코드들 중에, 이런 코드가 있었다.
function check(type) {
  if(type === a) return ...
  if(type === b) return ...
  if(type === c) return ...
  if(type === d) return ...
}

이런 것 보다는, switch 문을 이용해서 더 깔끔하게 정리하는게 더 좋지 않나 싶어서 바꿔버렸다.

function check(type) {
  switch(type) {
    case a:
      return ...
    case b:
      return ...
  }
}

4. 코드를 작게 만들자

  • 함수를 만들어서 기능 구현을 할 때, 중복되는 코드가 종종 보였다. 이런 것들을 따로 빼서 작은 함수로 만들어서 필요한 곳에서 불러 쓰고 있다. 이러한 생각이 나만 하는 것은 아니구나.

5. 선언형으로 대체 가능한 문법들 정리

  • 앞서 나왔던 내용들과 더불어 선언형 함수들이 있다. 함수형 프로그래밍 방법들에 대해 예제들이 있는데, Pick함수나 filterObject는 기발하면서도 재미있었다.





© 2017. by isme2n

Powered by aiden