Portfolio

공통 코드리뷰 안내사항

코드리뷰 요청 전 불필요한 코드는 모두 제거해주세요.

console, 불필요한 변수..

회사에 들어가서 누군가에게 코드 리뷰를 요청하는 상황이라면 기본적인 내용으로 알아두시면 좋습니다!

prettier를 통해 코드 포맷팅을 자동화하세요.

손으로 할 수 있다고 믿지 마세요! 도구를 사용합시다.

실무에서도 필수적으로 사용하고 있는 도구입니다.

본인 스타일에 맞춰 규칙을 수정해도 괜찮습니다. 대신 획일화된 코드를 작성해주세요.

vscode를 사용한다면 패키지를 받아 사용할 수 있습니다. format on save도 꼭 활용하세요!

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

npm을 통해 설치해서 스크립트를 통해 실행할 수 있습니다.

혹시 npm에 익숙하다면 설치해서 사용해도 괜찮습니다!

자신이 작성하고 있는 코드 스타일이 안티패턴일까 고민이 된다면 eslint를 도입하는 것 또한 추천합니다.

https://ui.toast.com/fe-guide/ko_STATIC-ANALYSIS

이 가이드를 참고해서 수정해보면 좋을 것 같습니다.

만약, 도입한다면 굳이 airbnb룰을 사용할 것 없이 recommended 규칙만 사용해도 충분합니다.

prettier와 eslint는 코드 작성단계에서 버그를 유발시키는 코드를 줄이고 많은 사람들이 한 프로젝트를 개발할 때 한사람이 개발한 것 같은 스타일을 유지하게 합니다. 이 두 도구는 안사용하는 곳이 없다고 봐도 무방하니 미리미리 익숙해지세요!

매직넘버(https://en.wikipedia.org/wiki/Magic_number_(programming))는 상수화 해서 어떤 의미인지 꼭 나타내주세요


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

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


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

그 외..

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

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


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;
}

저는 참조를 통해 값을 수정하는 것이 아니라면 최대한 깊은 뎁스 까지 디스트럭처링을 해서 바로 사용하는 것을 선호합니다.

객체값에 두 번이상 접근해서 사용한다면 변수에 담아서 사용하는 편입니다. 한 번 사용되는 경우라면 불필요하게 변수에 할당하지 않고 직접 접근해서 사용합니다.

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

조건문에 작성된 내용이 너무 복잡하거나 정보가 부족하다면 변수로 할당해 어떤 조건인지 명시해줍니다.

불필요한 할당일 지라도 코드상으로 명시적으로 나타내줘야 하는 조건이라면 나타내 줍니다.


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

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

-> 이럴땐

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

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

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

일반 변수가 아니라 $로 jQuery객체를 구분해둬서 jQuery의 여러가지 메서드를 사용하기 위해서 구분했던 거죠. 과거에 private(#) 키워드가 없었을 때 _를 붙였던 것이랑 비슷한 느낌일거에요.(실제로 레거시 그 자체인 네이버 뉴스의 코드를 보면 변수명 앞에 s, n 이런식으로 prefix를 붙여서 타입을 명시하던것도 비슷한 케이스입니다.)

이후에 vue나 앵귤러의 경우에도 $ prefix를 붙이는 경우가 많이 있었지만 그런 경우 모두 각각의 사용하는 특별한 경우가 있었던 것으로 알고 있습니다.

개인적으로는 앱에서 prefix를 붙일 정도로 의미가 있다면 변수명에 드러내거나 제공하는 키워드로 명시하는 것이 좋을 것 같다는 생각입니다.

코드리뷰 전..

공통 코드리뷰 안내사항

그 외..