세미나 3 과제 공통 피드백

[woohm402]

다들 수고 많으셨습니다!

과제 내용 자체는 그냥 "데이터 서버에서 관리하도록 변경 + 자잘한 피쳐 몇 개" 였는데, 비동기가 사실 굉장히 어렵기 때문에 감을 빨리 잡은 분들께는 지금까지 과제 중 가장 쉬웠을 거고, 비동기 감을 잡지 못하신 분들께는 가장 어려운 과제였을 것 같습니다.

공통 피드백 하겠습니다!

라우트

로그인 / 로그아웃 리디렉션 로직 등을 구현하기 위해 HOC 등 고급 기술을 쓰신 분이 많으셨습니다. render prop 사용하시고.. 아마 이 블로그 참고하신 분이 엄청 많은 것 같았습니다.

저는 특별한 기술 없이 그냥 우리 세미나에서 배운 내용만 이용해서 이렇게 짰는데 어떠신가요?

const App = () => {
  const { token } = useAuthContext(); // string | null | undefined

  if (token === undefined) {
    return null;
  }

  if (token === null) {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/login" component={LoginPage} />
          <Redirect to="/login" />
        </Switch>
      </BrowserRouter>
    );
  }

  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/students" component={StudentListPage} />
        <Route exact path="/student/:id" component={StudentDetailPage} />
        <Redirect to="/students" />
      </Switch>
    </BrowserRouter>
  );
};

비동기 로직

여긴 피드백이랄 건 없고, 그냥 대부분 분들은 비동기가 처음이실 테니 아마 상당히 어색하실 거예요. 생각하는 대로 잘 돌아가지 않고, 원하는 디자인대로 잘 되지도 않고요. 저도 처음엔 그랬는데 잘하시는 분들 코드 계속 보고 혼자 만들어낸 버그들 계속 고쳐가면서 어느 정도 감을 잡았던 것 같습니다! 꾸준히 하시다 보면 자유롭게 비동기를 다루실 수 있을 거라고 생각합니당

불필요한 api 콜

가끔 그냥 아무 이유 없이 GET api를 두 번 호출한다거나 하는 결과물들이 좀 있었습니다. 불필요한 호출은 불필요한 비동기 작업을 늘리게 되고, 성능상 문제가 생기고, 서버가 힘들어합니다. 서버가 힘들어하니까 서버를 증설해야 하고 돈이 더 들게 되겠죠?

실제로 우리 서버는 무려 11,598,834회 라는 엄청난 양의 리퀘스트를 받았습니다. (때문에 비용도 좀 나갔더라고요) 아마 개발 과정에서 실수로 API 콜 무한루프를 돌리신 경우들이 좀 있으실 텐데, 그 상황을 방치하셨을 경우 엄청난 양의 API 콜이 지속적으로 쏟아지게 되었을 거예요. 아마 그 결과 이런 현상이 나타났지 않나 싶습니다. 만약 네트워크 탭을 켜 봤는데 뭔가 심상치 않다, 뭔가 잘못되었다, 엄청난 양의 요청이 날아가고 있다, 정답 사이트랑 뭔가 다르다 싶으시다면 이런 케이스는 무조건 최우선적으로 해결해 주시기 바랍니다! 질문 막 주셔도 돼요 :)

마지막으로

어려운 과제였을 텐데 정말 다들 존경합니다 💯

질문 좀더 편하게 주셔도 되고, 늦은 시간이어도 막 질문하셔도 큰 상관 없습니다.. 못 해내는 것보다는 어떻게든 해내는 걸 항상 더 높게 평가하고 있습니다! 질문을 얼마나 많이 하시든 상관없어요 👍