한번 리뷰 받은 내용은 두번 다시 실수하지 말자!
사수한테 칭찬받고 싶은 신입 ESFJ 개발자의 기록

한줄로 짤 코드를 누가 열줄로 해놨어요...
클래스 구구... 코테에서 한줄로 푼다면 우와~ 하겠지만, 누구나 이해하고 수정해야 하는 코드라면..?

실제 업무에 들어가면 다른 개발자와 함께 파일을 다루게 된다. 때문에 혼자 이해하는 코드를 짜는 것만큼 이기적인 개발자가 없다..! 일하면서 리뷰받았던 내용을 간단하게 정리해봤다. 협업하는 프론트엔드 개발자라면 기본적으로 알아야 하는 것들. 사소하지만 중요한 것들!

Basics

1. 안쓰는 코드면 기능 잘 돌아가나 확인하고나서 주석처리 남겨두지 말고 지우자.
2. 공통 컴포넌트를 수정할 때는 해당 컴포넌트를 사용하고 있는 다른 컴포넌트에 영향이 없는지 꼭 확인하자.
3. 콘솔로그 지우자.. 부끄러움은 너의 몫

// Bad
console.log('ㅓ애멀ㄷㄹ메ㅐㄷ러매왜안들어와 ㅠㅠㅠㅐㅓ먈');
console.log('===================안돼애애애ㅐㅐㅐㅐㅐㅐㅐㅐㅐ');

// Good
...

4. 커밋 메세지 잘 남겨놓자. 한달 뒤 롤백할 수도 있다는 마음으로..

JavaScript

1. img path 변수에 담을때는 마지막에 / 붙이지 않고, 사용하는 부분에서 붙인다.

// Bad
const imgPath = `${URL}/icon/2.0/main/`
...
background: url(`${imgPath}logo_red_18.png`) center no-repeat;

// Good
const imgPath = `${URL}/icon/2.0/main`
...
background: url(`${imgPath}/logo_red_18.png`) center no-repeat;

2. 컴포넌트를 만들 때 텍스트, 이미지, 크기 등의 기본값은 최대한 표준이 될 수 있는 것으로 잡자.

// Bad
<span>{more || '댓글 더보기'}</span>

// Good
<span>{more || '더보기'}</span>

3. 변수명 항상 최선인가 고민하자.. 변수명 대충하는 사람, 인성에 문제있어?

isAbc // boolean
abcValue // string, number ...

4. {} 중괄호 안쓸 수 있으면 최대한 사용하지 않는게 깔끔하다.

// That's nono
handleClick = () => { console.log(something) };

// Goood
handleClick = () => console.log(something);

5. if문은 중첩하는 것보다 조건마다 return 시키는게 이해하기 편하다.

// Bad
const checkId = () => {
  if (condition) {
    if (!id.test(idCheck)) {
      setError(true);
      return false;
    }
    return true;
  }
  return false;
};

// Good
const checkId = () => {
  if (!condition) {
    return false;
  }

  if (!id.test(idCheck)) {
    setError(true);
    return false;
  }
  return true;
};

6. 함수는 서로 상호작용하거나 공통되는 부분이 있는 것이 아니라면 따로 분리하자.

Styled-components

1. 공통 컴포넌트를 import하여 사용하는 경우 as를 잘 활용하자. (styled-components)

// Bad
import Title from '~/component/styleguide';

const Title2 = styled(Title)`
  font-weight: bold;
`

// Good
import { Title as CommonTitle } from '~/component/styleguide';

const Title = styled(CommonTitle)`
  font-weight: bold;
`

2. css 추가가 없(어졌)다면 html 태그로 수정하자.

// Nooooooo
const Wrap = styled.div``;
...
<Wrap>...</Wrap>

// Yesssss
...
<div>...</div>

TypeScript

1. 타입스크립트에서 any 쓰지마 제발... 애니스크립트 아니라고...

// Bad
interface AnyScript {
  id: any;
  name: any;
  age: any;
  func: (e: any) => any;
}

// Good
interface TypeScript {
  id: number;
  name: string;
  age: number;
  func: (e: string) => void;
}

2. interface, type 이름, enum의 이름과 키는 PascalCase로 작성한다.

// Bad
enum color {
  red = 0,
  blue = 1,
  green = 2
}

// Good
enum Color {
  Red = 0,
  Blue = 1,
  Green = 2
}

3. interface 필수값 여부 체크하자. 물음표 살인마... 극혐이니까...

// Bad
interface Person {
  name?: string;
  age?: number;
  nationality?: string;
  job?: string;
}

// Good
interface Person {
  name: string;
  age: number;
  nationality: string;
  job?: string;
}

3. jsx 태그를 사용하지 않는 파일이라면 확장자명을 .ts로, 사용한다면 .tsx로 한다.
   .ts에서는 < 꺽쇠가 jsx 태그인지 타입을 지정하는 것인지 구분을 못하기 때문이다.

React

1. props는 immutable이다. 수정이 필요하다면 복사해서 수정하자.

// Nope
function Popup({style}: PopupProps) {
  const [opacity, setOpacity] = useState(0);
  style.overlay.opacity = opacity;
...

// Yep
function Popup({style}: PopupProps) {
  const [opacity, setOpacity] = useState(0);
  const popupStyle = {
    ...style,
    overlay: { ...style.overlay, opacity }
  }
  popupStyle.overlay.opacity = opacity;
}

2. props 넘길때 파라미터 없다면 함수 또 만들지 말라고.. 제발..

// Noooo
<Input onChange={() => handleChange()} />

// Yes
<Input onChange={handleChange} />

3. 자식 컴포넌트에게 setState를 넘겨주지 말고 handler를 만들자.

// Bad
<Tab setName={setName} />
<Tab setName={setName} />

// Better
const onClickTab = (t) => setName(t);
...
<Tab onClick={onClickTab} />
<Tab onClick={onClickTab} />

4. 생각보다 많은 컴포넌트를 재사용할 수 있단다. 가능하면 무족권 조건문 처리하자!

실수도 반복하면 실력, 리뷰를 받으면 가슴에 새기는 개발자가 됩시다!
PR에 🎉 👍 😄 🚀 ❤️ 만 달리는 그날까지~!~!~!~!~!~!