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

!youtube[UUJKiTcnGK0]

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

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

Basics

  1. 안쓰는 코드면 기능 잘 돌아가나 확인하고나서 주석처리 남겨두지 말고 지우자.
  2. 공통 컴포넌트를 수정할 때는 해당 컴포넌트를 사용하고 있는 다른 컴포넌트에 영향이 없는지 꼭 확인하자.
  3. 콘솔로그 지우자.. 부끄러움은 너의 몫
// Bad
console.log('ㅓ애멀ㄷㄹ메ㅐㄷ러매왜안들어와 ㅠㅠㅠㅐㅓ먈');
console.log('===================안돼애애애ㅐㅐㅐㅐㅐㅐㅐㅐㅐ');

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

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;
  1. 컴포넌트를 만들 때 텍스트, 이미지, 크기 등의 기본값은 최대한 표준이 될 수 있는 것으로 잡자.
// Bad
<span>{more || '댓글 더보기'}</span>

// Good
<span>{more || '더보기'}</span>
  1. 변수명 항상 최선인가 고민하자.. 변수명 대충하는 사람, 인성에 문제있어?
isAbc // boolean
abcValue // string, number ...
  1. {} 중괄호 안쓸 수 있으면 최대한 사용하지 않는게 깔끔하다.
// That's nono
handleClick = () => { console.log(something) };

// Goood
handleClick = () => console.log(something);
  1. 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;
};
  1. 함수는 서로 상호작용하거나 공통되는 부분이 있는 것이 아니라면 따로 분리하자.

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;
`
  1. 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;
}
  1. interface, type 이름, enum의 이름과 키는 PascalCase로 작성한다.
// Bad
enum color {
  red = 0,
  blue = 1,
  green = 2
}

// Good
enum Color {
  Red = 0,
  Blue = 1,
  Green = 2
}
  1. interface 필수값 여부 체크하자. 물음표 살인마... 극혐이니까...
// Bad
interface Person {
  name?: string;
  age?: number;
  nationality?: string;
  job?: string;
}

// Good
interface Person {
  name: string;
  age: number;
  nationality: string;
  job?: string;
}
  1. 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;
}
  1. props 넘길때 파라미터 없다면 함수 또 만들지 말라고.. 제발..
// Noooo
<Input onChange={() => handleChange()} />

// Yes
<Input onChange={handleChange} />
  1. 자식 컴포넌트에게 setState를 넘겨주지 말고 handler를 만들자.
// Bad
<Tab setName={setName} />
<Tab setName={setName} />

// Better
const onClickTab = (t) => setName(t);
...
<Tab onClick={onClickTab} />
<Tab onClick={onClickTab} />
  1. 생각보다 많은 컴포넌트를 재사용할 수 있단다. 가능하면 무족권 조건문 처리하자!

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

profile
(~˘▾˘)~♫❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞•*¨*•.¸¸♪

21개의 댓글

comment-user-thumbnail
2021년 2월 25일

글이 너무 즐거워요 ㅎㅎ.. 잘보고 갑니다

1개의 답글
comment-user-thumbnail
2021년 2월 25일

Noooo~~~ 재밌네요 잘보고갑니다!😃

1개의 답글
comment-user-thumbnail
2021년 2월 26일

React에서 찔리는게 많네요..ㅎ 고쳐나가겠습니다 ㅠ

1개의 답글
comment-user-thumbnail
2021년 3월 2일

if 문 중첩은 bad와 good이 서로 다른 코드네요.
예시 수정이 필요해보입니다.
bad는 condition 만족할 경우 id 체크를 무조건 하게 되어 있는데.
good의 경우는 condition 만족만 하면 바로 true 리턴이라 다른 로직입니다.

1개의 답글
comment-user-thumbnail
2021년 3월 4일

좋은 글 잘 읽고 갑니다! ㅎㅎㅎ

1개의 답글
comment-user-thumbnail
2021년 3월 4일

몇가지 오류가 있어서 댓글 남깁니다!

Style Componenents

import Title as CommonTitle from '~/component/styleguide';

요게 아니라 이게 아니였을지..!?

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

default 로 불러오는건 as 를 사용 할 수 없고 다른 이름으로 그냥 불러와주면 되니까요~

import CommonTitle from '...';

불변성

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

저렇게 해도 복사되지 않아요.
immer 의 produce 를 사용하시거나

const popupStyle = {
  ...style,
  overlay: { ...style.overlay, opacity }
}

요렇게 하셔야 해요~

1개의 답글
comment-user-thumbnail
2021년 3월 7일

습관이 되있는 것들을 글이나 말로 표현하는 것이 어려울텐데 잘 정리해주셨네요 ㅋㅋ
코딩 스타일에 정답은 없지만 많은 사람들이 공감할 내용인 것 같아요.
eslint로 강제할 수 있는 것들도 있는 것 같네요.
잘 읽었습니다

1개의 답글
comment-user-thumbnail
2021년 3월 12일

잘보고 갑니다. ㅎㅎ

답글 달기
comment-user-thumbnail
2021년 3월 12일

좋은 글 감사합니다. 개인적인 바람이지만 오류가 있었던 내용은 기존내용 line-through로 남겨놓고 수정된 내용을 적어주시면 좋을 것 같아요. 어떻게 잘못알고 있었는지를 공유하는것도 좋은 것 같아서요 ㅎㅎ

답글 달기
comment-user-thumbnail
2021년 3월 12일

Good information https://ru.wikipedia.org

답글 달기
comment-user-thumbnail
2021년 3월 24일

Hi there. How can we talk? Do you have e-mail or another messenger for communication?

답글 달기
comment-user-thumbnail
2021년 4월 1일

칭..칭찬 받고 싶다..

답글 달기
comment-user-thumbnail
2021년 4월 3일

JavaScript의 4번은 취향 문제라고 생각합니다. 저는 한 줄 짜리 간단한 함수여도 꼭 중괄호를 사용하는 쪽을 지향하고 있어요. “함수” 로 작성되는 것들이 모두 같은 형태를 하고 있으면 인지하기 좀 더 편하다는 생각을 하고 있어서에요 🙂

리액트 1번의 경우에는 (물론 props를 직접 수정하는 것 보다는 말씀하신 방법이 훨씬 좋지만!) props를 복사해 수정하는 것 보다 자식 요소에서 부모 요소에 props를 수정해달라는 이벤트를 발생시키는 쪽이 좀 더 데이터를 추적하기 쉬워지는 방향이라고 생각합니다. props로 전달 된 데이터는 부모요소에서 정의되었을 테니 변경도 부모요소에서 이뤄지는 쪽이 개발자가 추적하기 쉬운 데이터 구조를 만든다고 생각해요!

답글 달기
comment-user-thumbnail
4일 전

공감하는 부분이 많네요 :) 다행히 저는 다 잘 지키고 있었군요!
좋은 글 감사합니다!

답글 달기