공통 코드리뷰 안내사항

1. 코드리뷰 요청 전 불필요한 코드는 모두 제거해주세요.
   • console, 불필요한 변수..
   • 회사에 들어가서 누군가에게 코드 리뷰를 요청하는 상황이라면 기본적인 내용으로 알아두시면 좋습니다!
2. prettier를 통해 코드 포맷팅을 자동화하세요.
   • 손으로 할 수 있다고 믿지 마세요! 도구를 사용합시다.
   • 실무에서도 필수적으로 사용하고 있는 도구입니다.
   • 본인 스타일에 맞춰 규칙을 수정해도 괜찮습니다. 대신 획일화된 코드를 작성해주세요.
   • vscode를 사용한다면 패키지를 받아 사용할 수 있습니다. format on save도 꼭 활용하세요!
     • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
   • npm을 통해 설치해서 스크립트를 통해 실행할 수 있습니다.
     • 혹시 npm에 익숙하다면 설치해서 사용해도 괜찮습니다!
3. 자신이 작성하고 있는 코드 스타일이 안티패턴일까 고민이 된다면 eslint를 도입하는 것 또한 추천합니다.
   • https://ui.toast.com/fe-guide/ko_STATIC-ANALYSIS
   • 이 가이드를 참고해서 수정해보면 좋을 것 같습니다.
   • 만약, 도입한다면 굳이 airbnb룰을 사용할 것 없이 recommended 규칙만 사용해도 충분합니다.
   • prettier와 eslint는 코드 작성단계에서 버그를 유발시키는 코드를 줄이고 많은 사람들이 한 프로젝트를 개발할 때 한사람이 개발한 것 같은 스타일을 유지하게 합니다. 이 두 도구는 안사용하는 곳이 없다고 봐도 무방하니 미리미리 익숙해지세요!
4. 매직넘버(https://en.wikipedia.org/wiki/Magic_number_(programming))는 상수화 해서 어떤 의미인지 꼭 나타내주세요

if(text.length === 20) { ... } // 그래서 이 20이 뭔데?

1. 문자열 형태로 비교하는 것도 오타에 의해 충분히 버그를 유발할 수 있는 요소입니다. 상수화 시켜서 사용해주세요!

case 'offical': // official 아닌가?
case 'trade':
   ... 

그 외..

1. 디스트럭처링은 언제할까? 반복되는 코드는 언제 변수에 할당할까?

이건 저의 개인적인 규칙인데요. (제 맘대로 정했단 뜻입니다.)

const obj = {
  a: {
    b: {
      c: 10
    },
    arr: [1, 2, 3]
  },
  other: 20,
};

function A() {
  if(obj.a.b.c === 10) {
    return 10;
  } else if(obj.a.arr.length === 3) {
    return obj.a.arr.length;
  }
}

function A() {
  if(obj.a.b.c === 10 && obj.a.arr.length === 3) {
    return 1;
  } else if(obj.a.arr.length !== 3) {
    return 2;
  }
  return 3;  
}

-> 요렇게

function A() {
  const { b, arr } = obj.a;
  const arrLength = arr.length;

  if(b.c === 10 && arrLength === 3) {
    return true;
  } else if(arrLength !== 3) {
    return 
  }
  return 3;
}

• 저는 참조를 통해 값을 수정하는 것이 아니라면 최대한 깊은 뎁스 까지 디스트럭처링을 해서 바로 사용하는 것을 선호합니다.
• 객체값에 두 번이상 접근해서 사용한다면 변수에 담아서 사용하는 편입니다. 한 번 사용되는 경우라면 불필요하게 변수에 할당하지 않고 직접 접근해서 사용합니다.

1. 불필요하게 할당하지 말라면서 왜 또 할당하라는 걸까?

• 조건문에 작성된 내용이 너무 복잡하거나 정보가 부족하다면 변수로 할당해 어떤 조건인지 명시해줍니다.
  • 불필요한 할당일 지라도 코드상으로 명시적으로 나타내줘야 하는 조건이라면 나타내 줍니다.

const 내재산 = 1;
const 자가유무 = false;
const 아파트가격 = 12;
const 신용대출 = 3;
const 담보대출 = 2;

if(자가유무 === false && 내재산 + 신용대출 + 담보대출 >= 아파트가격) { ... } // 조건이 복잡하다.

-> 이럴땐

const 집을살수있나 = 자가유무 === false && 내재산 + 신용대출 + 담보대출 >= 아파트가격;
if(집을살수있나) { ... }

1. $ prefix의 관한 개인적인 생각..

• 저의 개인적인 의견에 의하면.. $ prefix의 경우 과거 jQuery를 사용할 때 많이 사용했던 표기법이라고 알고 있습니다.