[원티드 프리온보딩] TIL - (1)

5월 3일

Session - Wanted_Pre_Onboarding 사전 과제 코드 리뷰

regx101 사이트

regx101은 정규식이 입력한 예시 문구들과 match()가 되는지 확인해 볼 수 있는 사이트이다.

classnames 라이브러리

classnames는 class 혹은 className을 효율적으로 입력하고 관리할 수 있도록 하는 라이브러리이다.

function Button() {
  let btnClass = "btn";
  if (this.state.isPressed) btnClass += " btn-pressed";
  else if (this.state.isHovered) btnClass += " btn-over";
  return <button className={btnClass}>{this.props.label}</button>;
}

처럼 조건문으로 인해 복잡한 코드를

const classNames = require("classnames");

function Button() {
  const btnClass = classNames({
    btn: true,
    "btn-pressed": this.state.isPressed,
    "btn-over": !this.state.isPressed && this.state.isHovered,
  });
  return <button className={btnClass}>{this.props.label}</button>;
}

처럼 직관적으로 수정할 수 있다.

들여쓰기는 2칸

웹 생태계에서는 들여쓰기 2칸이 일반적이다.

Ref, QuerySelector 등을 통한 값 수정은 지양한다.

<input> 태그 등에 있는 value 속성은 직접 수정하게 될 경우 버그가 발생할 수 있다. 예를 들어, 어떠한 state가 이 value를 똑같이 참조하고 있다면 state가 참조하는 value와 직접 수정된 value가 달라져 오류가 발생하게 된다.

<input type='email'> 유효성 검사를 위한 정규식

다양한 정규식표현을 활용할 수 있지만, 그 중 전반적으로 W3C에서 제공하는 것이 많이 쓰인다.

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

CSS를 위한 선택자는 ID? Class?

CSS를 위한 선택자는 되도록이면 ID를 사용하지 않는 것이 좋은데, 이는 웹 개발 전반적으로 퍼져있는 convention이라고 볼 수 있다.
ID의 경우 어떠한 요소의 고유한 상태를 나타내며, 단 하나만 존재할 수 있다 보니 재사용성과 탄력성이 굉장히 떨어진다. 반면에 Class는 중복해서 사용할 수 있기 때문에 ID와는 반대된다고 볼 수 있다.
뿐만 아니라, 개발자들 간에 코드의 공유가 이루어질 때 대부분 CSS를 위한 선택자를 Class라고 인식하고 있기 때문에 코드를 읽을 때 CSS를 위한 속성을 확인하고 싶을 때 Class를 먼저 찾게 된다. 이러한 경우 CSS 선택자로 ID를 사용했다면 가독성이 떨어지고 효율성이 떨어지게 되는 것이다.

이미지를 public 폴더와 src 폴더 중 어디에 넣어야할까?

앱 전반에 컴파일 과정에서 필수적으로 사용되는 이미지나 아이콘은 public 폴더가 아닌 src 폴더에 넣어줘야 한다.
public 폴더에는 컴파일 과정에서 필수적이지 않은 favicon 등을 넣어주면 된다.

SVG 파일을 효율적으로 사용하는 방법

SVG 파일은 컴포넌트화 하여 사용하면 색상 조정이나 크기 조정 등을 편리하게 할 수 있다.

react-use 라이브러리

react-use는 React Hooks에서 사용할 수 있는 다양한 커스텀 훅들을 모아둔 라이브러리이다. 이를 활용하면 코드의 가독성이나 재사용성을 향상할 수 있다.

State 변경 시 Previous State 활용

React에서 state는 set이 이루어질 때, 인접해있거나 동시에 실행되는 환경이라면 비동기적으로 실행된다. 그렇기 때문에

const [number, setNumber] = useState(1);

setNumber(number + 1); // result 2
setNumber(number + 1); // result 2
setNumber(number + 1); // result 2

와 같은 상황이 발생하게 되는데, 이를 방지하기 위해선 previous state를 활용해주면 된다. 즉,

const [number, setNumber] = useState(1);

setNumber((prev) => prev + 1); // result 2
setNumber((prev) => prev + 1); // result 3
setNumber((prev) => prev + 1); // result 4

와 같이 작성해주면 된다.