기술 특장점 - dltmdrbtjd/HANG GitHub Wiki

기술 특장점

TypeScript

협업 증대 오류 및 버그 방지

개발과정에서 컴파일 단계에서 오류를 포착할 수 있어서 신뢰성 있게 개발을 할 수 있었습니다

명시적인 정적 타입 지정을 통해서 알 수 있어서 팀원 작성한 코드들의 흐름과 목적 이해하는데 매우 도움이 되었습니다.

이러한 부분들로 처음 MVP단계에서 JS로만 개발을 진행할때 보다 생산성을 더 높혀서 개발과 리팩토링을 진행할 수 있었습니다.

Redux + Redux-Toolkit

간편한 상태관리 상태의 중앙화

store를 통해서 여러 페이지에서 공통적으로 사용하는 상태를 관리하기에 매우 유용했습니다.

기존에는 redux-action을 사용했지만 타입스크립트를 통한 리팩토링 과정에서 redux-toolkit을 사용함으로써

action type이나 action creator를 따로 생성하지 않아도 되고 immer가 내장되어 있고 thunk가 내장되어있어 비동기를 지원하는 장점이 있었고

또한 타입스크립트 지원이 잘되어서 코드도 더 간결하고 보기편해지고 좀 더 깔끔하게 리팩토링을 진행할 수 있었습니다.

Axios

편리한 서버통신

JSON데이터를 자동 변환해주어서 .json()을 사용할 필요 없이 편하게 사용했습니다.

에러들을 reject로 response를 전달해 catch로 잡아내서 편하게 에러 핸들링을 했습니다.

instance.interceptors.response.use(
  (response) => {
    return Promise.resolve(response);
  },
  (error) => {
    const path = window.location.pathname;

    if (error.response.status === 307) {
      setToken(error.response.data.newAccessToken);
      setUserInfo('userInfo', jwtDecode(getToken()));
      history.go(0);
    } else if (
      error.response.status === 401 &&
      !['/signup', '/signin', '/onboarding'].includes(path)
    ) {
      window.alert('토근이 만료되었습니다. 다시 로그인해주세요.');
      delToken();
      delUserInfo('userInfo');
      history.push('/signin');
    }
    return Promise.reject(error);
  },
);

Styled-Component

CSS-in-JS

컴포넌트 기반으로 CSS를 작성할 수 있어서 매우 편하게 사용하였습니다.

CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경쓸 필요가 없어서 사용하기 좋았습니다.

JWT + Cookie를 사용한 유저 인증

JWT Cookie

jwt만을 사용한 인증방식이 아닌 cookie도 함께 인증을 통하여 2중 검증을 통해서 안전성을 높였습니다.

서버와 요청 때마다 JWT와 쿠키를 통하여 유저 권한을 확안하였습니다.

LocalStorage를 활용한 데이터 유지

데이터 유지

필터링 정보를 로컬 스토리지에 저장하여 항상 필터링 결과를 유지하도록 만들었습니다.

서버에서 받아온 기본적인 정보들을 저장하여 새로 고침시 api를 호출하지 않고 정보를 사용할 수 있도록 하였습니다.