Github
Blog
JavaScript, React, TypeScript, HTML/CSS
모아모아(MOAMOA)
2022.07 ~ 2022.12
스터디 개설 및 운영을 도와주는 서비스입니다. 스터디 내용을 기록하고, 함께 학습할 수 있도록 도와줍니다.
팀원 : FE 2명, BE 4명
역할 : 기획, 디자인, 프론트엔드 개발, 유지 보수, 배포
TypeScript 기반으로 런타임에 서버 API 응답값 타입을 확인하여 디버깅 효율 향상
TypeScript의 function overloading, type predicates, generic을 활용한 checkType 함수를 구현했습니다. unknown 타입의 value와 타입 확인 함수를 인자로 받아 해당 타입인지 확인하고, 타입이 다르면 에러를 발생시킵니다. API마다 에러 메세지를 다르게 설정하여 개발 단계에서 빠르게 디버깅할 수 있도록 구현했습니다.
API 응답값을 컴포넌트에 전달하기 전에 타입을 확인하여, 컴포넌트와 API 사이의 interface역할로 두 영역간 독립성을 확보했습니다. API 명세가 바뀌어도 데이터를 사용하는 컴포넌트를 수정할 필요 없이 interface 내부에서 수정하면 되어 변경에 대한 빠른 피드백이 가능해졌습니다.
협업 효율과 컴포넌트 재활용성을 높이기 위한 컴포넌트 시스템 구축
Storybook으로 50개 이상의 공통 컴포넌트 및 페이지 컴포넌트 테스트를 했습니다. 이와 동시에 중복된 컴포넌트를 분리하며 리팩터링을 진행했고, 그 결과 약 2000줄 정도의 코드가 감소했습니다.
Flex, Card, Skeleton 등 30개의 공통 컴포넌트를 구현했습니다. 새로운 기능을 개발할 때 미리 구현한 공통 컴포넌트를 활용해서 빠르게 개발할 수 있도록 기반을 마련했습니다.
사용자 피드백을 기반으로 더 나은 사용자 경험과 보안을 제공하는 JWT 기반 인증 구현
Axios의 interceptors를 활용하여 인증 로직을 구현했습니다. 로그인이 자주 풀린다는 사용자 의견을 받고, 사용자가 웹페이지 활동을 할 때 토큰의 만료기간이 얼마 남지 않았을 경우 토큰을 연장하는 방식을 택했습니다. Axios request interceptor에서 만료 기간을 확인한 후 서버에 refresh 요청을 보내고 access token을 재발급합니다. 새 access token을 이용하여 원래 요청을 하도록 구현했습니다.
session storage에 저장했기 때문에 XSS 공격에 의한 토큰 탈취를 방지하기 위해 토큰의 만료기간을 짧게 잡았고, HTTP 메시지 데이터 암호화를 위해 HTTPS를 적용했습니다.