정말 유익했던 원티드 프리온보딩 1주차 세션2 회고

프리온보딩 프론트엔드 챌린지 1월 | 원티드

 

Typescript에 관해

타입스크립트는 쭉 사용해오고 있던터라 주제에 대해 완전히 느끼는 점은 없었지만 왜 타입스크립트를 써야하는지에 대해 기술적인 생각을 해보는 부분에 대해서는 완전히 공감했다.

 

물론 이것이 타입스크립트를 사용하는 당연한 이유겠지만 이러한 이유를 스스로 생각하고 공학적으로 혹은 비즈니스적으로 생각해 볼 수 있다면. 다시말해 단순히 개발을 넘어서 가치를 생각해볼 수 있다면 훨씬 더 일 잘하는 엔지니어로써 발전할 수 있지 않을까 생각된다.

 

내 코드에 대해

오늘 피드백해주신 내용들을 보면서 개인적으로 코딩을 잘하는 사람은 글을 매우 잘 쓰고 잘 읽는 사람이 아닐까 생각이 든다.

 

스스로 자신의 코드를 보면서 리팩토링하는 것이 정말 까다롭고 어렵고 불편한 느낌이 들었는데 그냥 내가 글을 못써서 그런거라고 오늘 깨달아버렸다.

 

대표적으로 변수명이라던가, 문맥이라던가 그런 부분들이 되게 깔끔하게 하신 분들의 코드를 읽어보면 아무리 영어라도 잘 읽힌다. 

그리고 내 코드를 읽어보면 재밌다. 뭔가 넌센스 퀴즈를 하는 느낌이 든다. 한번 보면 이해 못하고 두번 보면 아~ 했던 느낌이 든다.

 

대표적으로 아래 2가지 예시가 있다.

 

외부에 위임

아래 코드에선 함수명이 removeToken, storageToken이다. 그냥 이름만 보면 토큰을 제거하고, 저장해주는 함수같지만 navigate와 alert까지 띄워준다. 

const removeToken = (msg = "로그인이 필요한 서비스입니다") => {
  if (history.location.pathname !== "/auth") {
    localStorage.removeItem("token");
    history.replace("/auth");
    window.alert(msg);
  }
};

const storageToken = (response: AuthResponse) => {
  localStorage.setItem("token", response.token);
  history.replace("/");
};

 

조금 더 명확하게, 짜임새 있게 작성한다면 호출해주는 곳에서 어떠한 로직을 수행할지 전달해준다면 어떤 함수인지 더 이해하기 쉽고 깔끔해진다. 

const removeToken = (callback?: () => void) => {
  localStorage.removeItem("token");
  if(callback) callback()
};

const storageToken = (response: AuthResponse, callback?: () => void) => {
  localStorage.setItem("token", response.token);
  if(callback) callback()
};

 

무지성 구현

로그인된 유저를 확인하고 로그인하지 않았다면 home에 접근할 수 없고 로그인 페이지로 이동시켜야한다.

 

그런데 이렇게 구현하게 된다면 만약 유저가 home에 접근하게 된다면 home의 있는 로직들이 실행된 뒤 /auth라는 로그인 페이지로 이동하게 된다.

 

이러한 문제들은 비용적으로, 보안상으로 문제가 될 부분이 있었기 때문에 신경쓰지 못한게 아쉽다.

const Router = () => {
  const location = useLocation();

  React.useEffect(() => {
    const token = localStorage.getItem("token");
    if (token === null && location.pathname !== "/auth")
      history.replace("/auth");
  }, [localStorage.getItem("token")]);

  return (
    <Routes>
      <Route path="" element={<Home />} />
      <Route path="/auth" element={<Auth />} />
      <Route path="/auth/signup" element={<SignUp />} />
    </Routes>
  );
};

export default Router;

 

굳이 구글링을 하지 않더라도 라이브러리를 보면 루트를 보호해주는 기능들이 있었는데 문서를 볼 생각을 못했다

계속 사용하면서 익숙했기 때문에 정말 스스로 생각해볼 부분이 많았다. 조금 놀랍기도 했다 ㅎ

회고

개인적으로 나는 스스로 베운 것들을 잘 활용할 수 있는 타입은 아니라고 생각한다. 그렇기 때문에 사고력이 부족하다고 생각하는데 아무래도 내가 공부하는 방식이 좋은 방향은 아니라서 그런게 아닐까 생각이 든다. 그래서 라이브러리가 됐든 다른 개발자의 코드가 됐든 좋은 포스트/아티클이 됐든 좋은 것들을 많이 읽어보고자 한다

 

내가 생각하는 좋은 개발자가 글 잘쓰는 사람인 만큼 앞으로는 글을 꾸준히 읽기 쉽게 써보고 꾸준히 읽어봐야겠다는 생각을 많이했다.

정말 재밌는 시간이었다 ㅎ