미리보기
기본 정보
영상 업계에서 3년간 근무하며 다양한 경험을 쌓았습니다. 영상 편집 / 디자인 업무를 수행하면서 매니저 역할을 맡아 팀원들의 스케줄 관리와 리더 업무를 수행했고, 다양한 영상 프로젝트를 진행하며, 함께 협업하는 작가, FD, 제작팀과 긴밀한 협업을 통해 정해진 기간 내에 결과물을 완성하는 것에 익숙하기 때문에 이런 직무 경험을 바탕으로 생각한 저의 강점은 협업 능력 / 프로젝트 관리 능력 이라고 생각합니다. 이러한 장점들을 토대로 현업에서도 다양한 직군과 소통하며 뛰어난 사용성을 지닌 프로젝트를 만들어 내는 개발자로 성장하고 싶습니다.
기술 스택
React, TypeScript, JavaScript, HTML/CSS, zustand, redux-toolkit, tailwind-css, react-query, react-router
프로젝트
별곰 (StarBear)
항해99 프론트엔드 부트캠프
2024.04. ~ 2024.05.
💡 말할 수 없는 고민이 많은 현대인들을 위한 1:1 익명 고민공유 서비스
랭킹 시스템 구현
- 고민을 해결하고 받은 답례의 개수대로 유저 랭킹을 도입하여 유저 경험 향상
- 경쟁 형식으로 서비스에 보다 적극적으로 참여할 수 있도록 유도
- 불필요한 요청을 줄이기 위해 tanstack-query 사용해서 staletime, gctime 사용한 캐싱 전략 채택
마이페이지 (세팅페이지) 닉네임 변경
- 서비스 회원가입 시 랜덤한 닉네임을 배정 (ex. 고민의 늪에 빠진 곰 01) → UX 향상을 위해 닉네임 변경 기능이 필요하다고 생각
- Zustand 사용해서 전역적으로 닉네임 상태를 관리
다크모드 기능 구현
- 모바일에서 사용하는 유저들의 UX 향상을 위해 다크모드 / 라이트모드 기능을 도입
- Zustand의 persist 문법으로 로컬스토리지에 다크모드 상태를 boolean 으로 저장 → 토글 작동 시 변경
- svgr 도입으로 svg 파일의 요소 변경이 가능하도록 구성
가이드북 페이지 구현
- 1차 유저피드백 이후 사용 방법을 직관적으로 알기 힘들다는 피드백을 해결하기 위해 가이드 페이지 구현
- 이미지 슬라이드 | “다음” 버튼 클릭으로 넘길 수 있도록 구현 → PC, 모바일 상관없이 사용이 편리하도록 구현
트러블슈팅 01) 닉네임을 변경 후 랭킹보드에 적용이 안 되는 이슈
- RankingBoard의 query 설정에 staleTime이 20초로 설정되어 있었던 것이 원인
해결 방법 - 닉네임이 변경되는 상태를 query로 관리
- 닉네임 변경 쿼리가 실행될때 invalidateQueries로 랭킹보드의 query를 무효화
트러블슈팅 02) 보관함에서 무한 스크롤 시 요청 간격이 너무 빠른 이슈
- 무한스크롤에서 IntersectionObserver의 인뷰 div = ref가 빠르게 지속적으로 닿을 때마다 요청하는 것이 원인
해결 방법 - 시간적인 제한을 걸어두면 어떨까 생각하여 Throttle, Debounce 기법을 서칭
- 일정 시간 동안 요청이 한 번만 수행되도록 Throttle 기법을 채택하고 이를 편하게 사용할 수 있는 lodash 라이브러리를 사용
