유연함

자기 주도적

문제 해결사

열정적

리더십

최익

다양한 사람들의 취향과 선호도에 따라 짤(이미지) 컬렉션을 추천하고, 좋아요 및 업로드 한 이미지를 따로 제공하여 블로그 작성 및 PPT 제작, SNS에서 짤을 활용하는 작업 효율성을 증가 시켜주는 서비스입니다.Link: <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://zzalmyu.asia/">배포 링크</a>(잠시 중단) / <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/zzalmyu/zzalmyu-frontend/commits?author=choi-ik">Github</a><h4>총 인원</h4><ul><li>FE 5인 / BE 3인</li></ul><h4>주요 기여 사항</h4><ul><li>번들 사이즈 최적화 및 초기 로딩 속도 향상<ul><li>서빙되는 JavaScript 파일의 크기가 704KB로 늘어나 초기 페이지 로딩 속도가 저하</li><li>팀원들의 러닝 커브를 고려하여 SSR로의 전환 대신, Chunk 분할 기법을 활용하여 Dynamic import, Lazy loading를 사용</li><li>JavaScript 번들 사이즈를 <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://choi-ik.tistory.com/19">704KB → 567KB로 감축</a>하여 초기 로딩 속도 개선</li></ul></li><li>데이터 캐싱 및 UX 향상<ul><li>이미지의 좋아요 버튼 클릭 시, 버튼의 변경 사항이 바로 적용되지 않고 버벅이는 현상이 빈번하게 나타나 사용자 경험이 저하되는 문제 발생</li><li>TanStack Query 데이터 캐싱 및 낙관적 업데이트 기법을 통해 QueryClient에 캐시를 동기화하고, setQueryData, getQueryData를 활용</li><li>데이터가 실제로 서버에 반영되기 전에 UI를 미리 업데이트 함으로써 사용자 경험 개선</li></ul></li><li>파일 기반 라우팅으로 직관적인 라우팅 구조 구축<ul><li>기존 코드 기반 라우팅 방식은 페이지 수가 증가할수록 라우팅 구조의 복잡성이 심화되어 관리가 어려워지는 문제가 존재</li><li>라우팅 구조 관리를 쉽게 할 수 있도록 TanStack Router 도입하여 TanStack Router의 파일 기반 라우팅으로 직관적인 라우팅 구조 구축</li><li>Type 정보를 활용한 Route 자동 생성을 통해 코드 작성 과정에서의 Human Error 감소로 동료 개발자들의 생산성 향상에 기여</li></ul></li><li>OAuth 인증 관리 중앙 집중화<ul><li>API 호출 시 개발자가 인증 토큰을 개별적으로 관리하고, 에러 처리 및 인증 헤더 삽입을 수동으로 처리 함으로써 비일관성과 중복 코드로 인한 비효율성 발생</li><li>따라서 해당 비효율성을 해결하기 위해 <a target="_blank" rel="noopener noreferrer nofollow" href="https://choi-ik.tistory.com/13">axios Interceptor를 활용해 인증 관리 중앙 집중화</a></li><li>모든 API 요청에 대해 일관된 방식으로 토큰을 갱신하고, 만료 시간을 체크하여 코드의 재사용성과 개발 생산성에 기여</li></ul></li></ul>협업<ul><li>프론트엔드 팀 리더<ul><li>매일 간단한 스몰토크를 통해 적극적인 참여를 유도하고, 지속적인 소통으로 팀원간의 갈등을 해결</li><li>오픈 / 마무리 스크럼 회의를 체계적으로 운영하고, 일정 관리 및 회의 내용을 문서화하여 중복 작업 방지</li><li>이러한 접근 방식으로 주어진 일정보다 5% 빠르게 완성하여 확보된 시간을 리팩토링 및 사용성 개선에 활용</li></ul></li></ul><h4>기술 스택</h4><code>TypeScript</code> <code>React</code> <code>TanStack Router</code> <code>TanStack Query</code> <code>Jotai</code> <code>TailwindCSS</code>

SNS 기반 익명/기명 편지 서비스입니다. 프로젝트의 익명성과 비공개성의 특징을 활용하여 부트캠프 내에서 선뜻 마음을 전하기 어려운 동료에게 자유롭게 마음을 전할 수 있습니다.<a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://jackpot-letter-daebak.vercel.app/">배포 링크</a>(서버 중단) / <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/prgrms-fe-devcourse/FEDC5_jackpot_letter_Donguk/commits?author=choi-ik">Github</a><h4>총 인원</h4><ul><li>FE 4인 / BE 1인</li></ul><h4>주요 기여 사항</h4><ul><li>preFetching을 통한 UX 향상<ul><li>유저가 편지 목록 페이지로 이동하는 클릭 패턴 예상하여 preFetch를 구현.</li><li>다양한 네트워크 환경(Fast/Slow 3G)에서 preFetch의 효과를 분석 하였고, 일반적인 상황에서의 성능 차이는 미미함을 인지</li><li>대신 사용자가 느끼는 대기 시간 감소에 초점을 맞추어 TanStack Query의 prefetchQuery를 활용해 필요한 데이터를 미리 요청 후 캐시에 저장</li><li>이후 유저가 실제로 데이터를 요청할 때, 네트워크 요청을 생략하고 캐시에 저장된 데이터를 즉시 제공하여 유저의 대기 시간을 개선</li></ul></li><li>이미지 및 폰트 최적화<ul><li>Safari에서 폰트가 로드 되기 전까지 텍스트가 보이지 않는 FOIT 현상으로 인해 사용자 경험이 저하</li><li>용량이 큰 png 이미지들로 인해 페이지 로딩 성능이 저하되는 문제 발생</li><li>font-display 속성을 활용해 폰트가 로드되기 전에는 시스템 폰트를 사용하고, 로드 후에는 자동으로 지정된 폰트로 변경 되도록 설정</li><li>vite 설정을 통해 이미지 압축 및 png에서 webp로의 확장자 변환을 자동화하여 이미지 총 용량을 2406KB → 662KB로 대략 72% 감소시켜 이미지 로드 시간을 개선</li></ul></li><li>리액트 디자인 패턴을 통한 컴포넌트 재사용성 향상<ul><li>컴포넌트의 UI 요구사항의 변경됨에 따라 기존의 컴포넌트의 유지보수가 복잡해지는 문제가 발생</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://choi-ik.tistory.com/10">Compound Component 패턴</a>을 사용하여 하나의 공통 컴포넌트를 여러 개의 서브 컴포넌트로 나누어 필요에 따라 서브 컴포넌트만 선택적으로 합성하여 사용할 수 있도록 설계</li><li>결과적으로 컴포넌트 재사용성 향상 및 각기 다른 요구 사항에 유연하게 대응할 수 있는 기반 마련</li></ul></li><li>Query Factories 패턴을 사용한 query key 관리<ul><li>서비스가 고도화 되면서 사용되는 쿼리가 증가하고, 많은 쿼리키와 옵션이 여러 위치에 분산되어 있어 유지보수성과 관리 효율성이 저하되는 문제 발생</li><li>Query Factory 패턴을 사용해 재설계하여 쿼리키와 옵션을 관심사에 따라 분리하고, TanStack Query의 queryOptions를 사용하여 쿼리키를 중앙 집중화</li><li>이를 통해 중복을 최소화하고, 동료 개발자들의 생산성 향상에 기여</li></ul></li></ul>협업<ul><li>프론트엔드 팀 리더<ul><li>팀원들의 강점과 요구 사항을 파악하여 최적화된 역할 분리</li><li>프로젝트 진행 상황을 문서화하여 가시성을 높이고 이를 통해 팀원들과 신속하게 정보를 공유 함으로써 중복 작업을 방지하고 효율성 증대</li><li>정기적인 회고를 통해 팀원들이 마주한 문제를 조기에 식별하여 이를 해결하기 위한 전략을 짜는 것에 기여</li></ul></li></ul><h4>기술 스택</h4><code>TypeScript</code> <code>React</code> <code>TanStack Query</code> <code>Jotai</code> <code>Emotion</code> <code>SCSS</code> <code>Reac-Hook-Form</code>

졸업

사설 교육

대학교(학사)

완료됨