본문 바로가기
만족스러운 개발/React

원티드 프리온보딩 프론트엔드 리뷰

by 재봉팔 2023. 12. 16.

프론트엔드 개발자 2년차가 되어 가면서 직장에 사수가 있어본 적 없이 혼자 개발을 하고 있다.

혼자 개발을 하면서 내가 만들고 있는 코드의 질에 대해 고민하게 됐다. 누구와 함께 같이 고민하지 못하고 혼자 만들기만 하니 내 실력이 정체되어 있는 것 같고 길을 잃은 느낌이었다.

그러던 중 원티드에서 눈에 띄는 주제가 보이길래 바로 신청하게 되었다.

그 주제는 바로 비즈니스 로직 완정 정복하기! 

 

커리큘럼은 아래와 같다.

 

오종택님의 비즈니스 로직 완전 정복하기

1. 컴포넌트가 복잡해지는 원인에 대해 고찰해보기

2. 비즈니스 로직을 제압하는 개발자가 퇴근을 한다

3. SOLID한 컴포넌트 만들기

4. Logic First, React Later

 

강의이다 보니 강의의 내용을 블로그에 적을 수 없다. 강의를 들으면서 제일 크게 감명깊었던 것을 하나로 정리하면

바로 이 예시이다.

const fetchPaymentMethods = async () => {
  const response = await fetch(".../api/payment-methods?countryCode=AU");
  const methods: RemotePaymentMethod[] = await response.json();

  if (methods.length === 0) {
    return [];
  }
  return methods.map(
    (method) => new PaymentMethod(method)
  ).concat(payInCash)
};

 

이 전의 내 코드들은 컴포넌트에서 온갖 작업들을 수행하는 코드들이 복잡하게 얽혀있었다.

하지만 위의 코드를 보면 fetch한 데이터를 받아서 클래스로 만들어 다시 리턴한다.

그러면 컴포넌트에서는 저 데이터에 필요한 메소드만 실행시켜서 화면을 그려주기만 하면 되는 것이다.

저 예시를 보고 지금까지 써왔던 코드들이 얼마나 한심한지를 느낄 수 있었다.

화면과 비즈니스 로직을 완전히 분리한다면 유지보수에도 크게 도움이 되며 초보자가 코드를 파악하기에도 훨씬 수월하다.

 

정말 중요한 것같다. 리액트는 화면을 쉽게 그려주기 위한 라이브러리일 뿐 너무 의존하지 말자.

아주 중요한 아하! 모먼트가 된 것 같다.