미리보기
- 직업
- 프론트엔드 개발자
- 이름
- 최익
- 간단소개
- 저는 "강한 실행력"을 가지고 생각을 빠르게 실천하는 개발자입니다. 무언가 배우고 싶거나, 도전해보고 싶은게 있다면 "시작이 반이라고 생각하며 일단 해보자"라는 마인드로 주저 하지않고 시도하며, 동기부여를 잃지 않기 위해 노력합니다. 현재는 10명 정도의 인원으로 구성된 스터디 그룹의 주최자로서, 모두의 성장을 위한 학습 여정을 이끌고있습니다.
기술 스택
- 기술 스택
- JavaScript
- TypeScript
- React
- tailwind-css
- react-query
- Git
프로젝트
- 프로젝트명
- 짤뮤니티
- 소속/기관명
- 프로그래머스 데브코스
- 프로젝트 기간
- 프로젝트 설명
FE 5인 / BE 3인
기존에 진행했던 React 프로젝트는 코드 기반 라우팅을 사용했었습니다. 설정이 코드에 분산되어 있다 보니 페이지가 많아질수록 흐름을 이해하기 어려워 Route 구조를 파악하고 관리하기 어렵다는 단점이 존재 했었습니다.
이를 해결하기 위해 짤뮤니티 프로젝트에서는 라우팅 관리를 쉽게 할 수 있도록 파일 기반 라우팅을 지원하는 TanStack Router를 도입하였습니다. Type 정보를 활용하여 파일 구조에 따라 자동으로 Route를 생성해 주어 코드를 작성하는 컴파일 단계에서 Human Error를 감소할 수 있었고, 파일 기반 라우팅을 통해 직관적이고 일관성 있는 파일 구조를 구축하여 저를 포함한 동료 개발자들의 생산성을 향상할 수 있었습니다.
JWT를 이용한 OAuth 인증 및 로그인 프로세스를 사용할 때, 각 개발자가 API를 호출할 때마다 인증 토큰을 직접 관리하고, 오류를 처리하며 인증 헤더를 삽입 함으로써 토큰 관리의 비일관성, 중복 코드 발생, 오류 처리의 비효율성을 야기하였습니다.
이러한 비효율성을 해결하기 위해 Axios Interceptor를 활용하여 OAuth 인증 로직을 중앙화하였습니다. 이를 통해 모든 API 요청에 대해 중앙에서 인증 토큰을 관리하여 일관된 방식으로 토큰을 갱신하고 만료 시간을 체크하여 코드의 재사용성과 생산성을 높일 수 있었습니다.
프로젝트가 고도화되면서 서빙되는 메인 JS 파일의 크기가 점점 커져 685KB까지 늘어났으며, 정상적인 네트워크 상태에서는 문제가 되지 않았지만, 캐시 되지 않은 상태에서 Fast 3G부터는 초기 로딩이 오래 걸려 유저의 이탈이 염려되었습니다.
SSR로 전환하기에는 팀원들의 러닝 커브가 존재했고, 이를 빠르게 해결하기 위해 Chunk를 나누는 것으로도 충분하다고 판단하여 Dynamic import, Lazy를 사용하여 658KB → 128KB로 메인 JS 번들 사이즈를 약 81% 감소시켰습니다. 이에 따라 불필요한 모듈 로딩을 방지하여 Fast 3G 기준 초기 로딩 속도를 1.7초에서 1.4초로 단축 할 수 있었습니다.
유저가 짤 이미지를 클릭 후 좋아요 버튼 누를 때, 데이터 로딩 시간으로 인해 데이터 업데이트 후 서버 응답을 기다리는 동안 UI가 멈추는 현상이 빈번하게 나타나 사용자 경험이 저하되는 문제가 발생했습니다.
이러한 현상을 해결하기 위해 TanStack Query의 데이터 캐싱 및 낙관적 업데이트 기법을 활용했습니다. 캐시를 QueryClient에 동기화하고 setQueryData, getQueryData를 사용하여 낙관적 업데이트 방식을 활용해 데이터가 실제로 서버에 반영되기 전에 사용자 인터페이스를 미리 업데이트 함으로써 사용자 경험을 개선하고 업데이트 및 데이터 fetching 실패 시 작업을 되돌리는 과정을 더욱 선언적으로 작성할 수 있었습니다.
다양한 사람들의 취향과 선호도에 따라 짤(이미지) 컬렉션을 추천하고, 좋아요 및 업로드 한 이미지를 따로 제공하여 블로그 작성 및 PPT 제작, SNS에서 짤을 활용하는 작업 효율성을 증가 시켜주는 서비스입니다.
총 인원
개발 및 기여 내용 - 회원 관리, 짤 검색 및 제공 서비스 구현
[ 파일 기반 라우팅으로 직관적인 라우팅 구조 구축 ]
[ Axios Interceptor를 이용한 OAuth 인증 로직 중앙화 ] Link
[ 번들 사이즈 최적화 및 초기 로딩 속도 향상 ] Link
[ TanStack Query의 캐싱을 사용하여 UX 향상 ]
[ 팀원들의 적극적인 참여 및 효율성 촉진 ] Link
프론트엔드 팀 리더로 아이스 브레이킹을 통해 적극적인 참여 유도 및 자유로운 분위기 조성하고, 오픈/마무리 스크럼 및 일정 관리 문서화를 통해 주어진 일정보다 5% 빠르게 완성하여 남는 시간을 리팩토링과 사용성 개선에 활용
기술 스택
TypeScript
React
TanStack Router
TanStack Query
Jotai
TailwindCSS
- 프로젝트명
- 대박사건
- 소속/기관명
- 프로그래머스 데브코스
- 프로젝트 기간
- 2023.12. - 2024.01.
- (2개월)
- 프로젝트 설명
FE 4인 / BE 1인
포스트와 댓글에서 사용되는 Textarea 컴포넌트의 UI 요구사항이 자주 변경되는 문제가 발생하였습니다. 각각의 요구 사항에 맞추어 매번 컴포넌트를 수정하는 것은 매우 비효율적이며 코드의 복잡도를 증가시키는 결과를 초래했습니다.
문제 해결을 위해 Compound Component 패턴을 도입하여 Textarea 컴포넌트를 재설계 하였습니다. Compound Component 패턴을 사용해 여러 개의 서브 컴포넌트를 하나의 부모 컴포넌트로 묶어 필요한 서브 컴포넌트만 선택적으로 합성하여 사용할 수 있도록 설계하였습니다. 이를 통해 컴포넌트의 재사용성을 극대화하고, 각기 다른 요구 사항에 유연하게 대응할 수 있는 구조를 만들 수 있었습니다.
데이터 페칭을 위해 다양한 쿼리를 사용하고 있었지만, 각 쿼리의 키와 옵션이 여러 곳에 분산되어 있어 관리가 어려웠습니다. 특히 기존 쿼리에 변경이 필요할 때, 쿼리 키와 옵션을 찾기 어렵고 이에 따라 실수가 발생하는 일이 잦았습니다. 또한, 쿼리키의 중복도 발생하여 Human Error가 빈번하게 생겼습니다.
이러한 문제 해결을 위해 쿼리 키와 옵션을 관심사에 따라 분리하고, queryOptions를 사용하여 분리한 쿼리 키와 옵션을 관심사마다 한 곳에서 체계적으로 관리하기 위해 Query Factories 패턴을 도입하여 해결하였습니다. 이를 통해 중앙 집중화되어 쿼리의 변경 사항을 쉽게 반영하고, 집중화된 쿼리 키를 쉽게 확인하여 중복을 최소화해 동료 개발자의 생산성을 향상할 수 있었습니다.
네트워크가 환경이 느린 상황에서 페이지 로딩 시간이 길어지는 문제가 있었습니다. 특히, Fast 3G나 Slow 3G와 같은 느린 네트워크 환경에서는 사용자가 특정 데이터를 요청할 때 지연 시간이 길어지는 문제가 있었고 이는 유저의 이탈률이 증가할 우려가 있었습니다.
이를 해결하기 위해 TanStack Query의 prefetchQuery를 사용하여 특정 요소에 유저가 마우스를 올렸을 때 해당 데이터가 필요할 가능성이 높다고 판단 하였고, 마우스 hover 이벤트를 감지하여 필요 데이터를 미리 요청하고, 이를 캐시에 저장하였습니다. 이후 유저가 실제로 데이터를 요청했을 때, 네트워크 요청을 생략하고 캐시에 저장된 데이터를 즉시 제공하여 유저가 원하는 데이터를 빠르게 제공할 수 있게 되어 네트워크가 느린 상황에서도 유저의 경험을 높일 수 있었습니다.
Safari에서 폰트 로드가 완료되기 전까지 텍스트가 보이지 않는 FOIT 현상이 발생하여 사용자 경험이 저하되고 있었으며, 웹 페이지의 이미지 파일들이 최적화되지 않아 로딩 시간이 길어지고 있었습니다. 특히 용량이 큰 .png 확장자를 사용하는 이미지 파일들이 많아 페이지 로딩 성능 저하 문제가 있었습니다.
font 문제를 해결하기 위해 ‘font-display: swap’ 속성을 활용하여 폰트가 로드 되기 전까지 시스템 폰트를 사용하고 폰트가 로드되면 자동으로 지정된 폰트로 변경되도록 설정 하였습니다. 또한, 이미지 최적화 문제를 해결하기 위해 vite의 플러그인 viteImagemin을 사용하여 이미지를 압축하고 .png 확장자를 .webp 확장자로 변환 자동화하여 이미지 총용량을 2406KB → 662KB로 대략 72%가량 감소 시켰으며, 이미지 로드 시간을 최적화하여 유저에게 보다 빠르게 이미지를 제공할 수 있었습니다.
SNS 기반 익명/기명 편지 서비스입니다. 프로젝트의 익명성과 비공개성의 특징을 활용하여 부트캠프 내에서 선뜻 마음을 전하기 어려운 동료에게 자유롭게 마음을 전할 수 있습니다.
총 인원
개발 및 기여 내용 - 편지/댓글 작성 및 메세지 서비스 구현
[ 리액트 디자인 패턴을 통한 컴포넌트 재사용성 향상 ] Link
[ Query Factories 패턴을 사용한 query key 관리 ]
[ preFetching을 통해 빠른 데이터 제공 ] Link
[ 이미지 및 폰트 최적화 ]
기술 스택
TypeScript
React
TanStack Query
Jotai
Emotion
SCSS
Reac-Hook-Form
포트폴리오
교육
- 소속/기관
- (주)그렙
- 종류 | 전공명/전공계열
- 사설 교육 | 프로그래머스 데브코스(FE)
- 재학 기간 (재학 상태)
- 2023.09. - 2024.03. (졸업)
- 소속/기관
- 협성대학교
- 종류 | 전공명/전공계열
- 대학교(학사) | 컴퓨터공학과
- 재학 기간 (재학 상태)
- 2017.03. - 2023.02. (졸업)