🙋♂️ About Me
- 안녕하세요! 프론트엔드 개발자 고준혁입니다.
- 기록과 꾸준함의 중요성을 알기에, 배운 것들을 기록하고, 함께 공유하고자 노력하고 있습니다.
- 프로젝트에 애정이 가득하며, 어떻게 하면 좋은 방향으로 개선할 수 있을지 고민하고, 실천합니다.
🛠️ Skills
TypeScript, JavaScript(ES6), HTML, CSS, React
🔬 Projects
WooriMap(우리맵)
2022.07~
팀 프로젝트
Github
https://github.com/mrbartrns/WooriMap
Website
https://woorimap.vercel.app
회고
https://velog.io/@mrbartrns/team-2-project
지도로 한눈에 커플 간 추억을 확인할 수 있는 커플 SNS입니다.
[ 사용 기술 ]
Next.js, TypeScript, Storybook, Kakao Map API
[ 수행 역할 ]
- 프로젝트 전반적인 환경 세팅
- 로그인 및 로그아웃 인증 로직 구현
- 카카오 맵 컴포넌트 및 검색 로직 구현
- 실시간 알림을 구현
커스텀 hook을 활용하면서 로직과 뷰를 분리하여 재사용성 및 가독성을 높일 수 있음을 직접 느꼈습니다.
[ 세부 사항 ]
1. 로그인/로그아웃/인증 로직
- 로그인 응답으로부터 전달받은 access token과 쿠키로 전달받은 refresh token을 이용하여 인증을 처리
- 서버 요청 중 access token이 만료되어 401에러가 발생하는 현상을 방지하기 위해 refresh token이 유효한 동안 access token을 자동 갱신하도록 axios interceptor를 구현
- Recoil 전역 유저 상태와 인증 로직을 연동하기 위해 axios instance를 커스텀 hook으로 구현
- 관심사를 분리할 수 있도록 고차 함수로 라우팅 처리
- 로그인 페이지 컴포넌트를 구현
2. 카카오 맵 컴포넌트와 검색 로직
- 카카오맵 api 스크립트가 완전히 로딩된 후 사용할 수 있도록, useEffect로 로딩 처리
- 카카오맵의 검색 기능을 재사용할 수 있도록 커스텀 hook으로 구현
3. 알림 기능
- 다양한 곳에서 server sent events api를 사용할 수 있도록 커스텀 hook으로 구현
- initial load 시 읽지 않은 알림을 서버에서 받아온 뒤, 사용자가 활동 중에는 실시간 알림을 받도록 구현
- 알림에서 사용할 드롭 다운 메뉴 컴포넌트 구현
- 드롭다운, 모달의 외부를 클릭 시 상호작용이 가능하도록 커스텀 hook을 구현
체퀴즈(Chequiz)
2022.06~
팀 프로젝트
Github
https://github.com/mrbartrns/CheQuiz
Website
바로가기
회고
https://velog.io/@mrbartrns/team-1-project
📚 Education & Activities