미리보기
기본 정보
자기소개
문제 해결에 대한 열정을 가지고 있으며, 해결 과정을 기록하고 공유하는 것을 중요하게 생각합니다. 사내 스터디와 블로그를 통해 지속적으로 학습하고 성장하며, 코드 리뷰와 기술 공유를 즐깁니다.
사이드 프로젝트를 통해 아이디어를 실체화하는 과정을 즐기며, 다양한 해커톤에 참여해 여러 직군과 협업하며 실전 경험을 쌓았습니다. SEO 최적화를 통해 지표를 8배 향상시키며, 네이버 검색 결과에서 최상위권에 제품을 노출시킨 경험이 있습니다. 또한, 급변하는 비즈니스 요구사항에 대응하기 위해 변경에 유연한 코드를 학습하고, 컴포넌트를 리팩토링하여 확장성과 유지보수 효율성을 75% 개선한 경험이 있습니다.
협업 과정에서는 반복적인 작업을 자동화하고 프로세스를 최적화하여 사내 생산성을 80% 증가시킨 경험이 있습니다. 새로운 기술 도입과 최적화에 관심이 많으며, 개발 환경 개선을 통해 더욱 효율적인 협업을 이끌어 내는 것을 중요하게 생각합니다.
경력
플렉스이엔엠
팀원 | 개발팀
2022.05. ~ 2024.12. (2년 8개월)
- 모니터링 백 오피스 프로젝트
- 모니터링 팀원들의 불편을 해결하기 위해 HLS.js를 활용한 실시간 모니터링 도메인을 개발하였으며,
프론트엔드 영역 전반을 담당 - Socket.io를 활용하여 팀원들이 시청 중인 방송 및 접속 상태를 실시간으로 확인할 수 있도록 구현
- Recoil-persist를 활용하여 로컬 스토리지에 과거 시청한 채널의 아이디를 저장하여 브라우저를 껐다 켜도 다시 볼 수 있도록 개선
- 각종 성능 이슈 파악 및 개선
- 디자인 팀과 효율적인 작업 및 매번 이미지 수정이 필요한 상황을 해결하기 위해 디자인 팀이 직접 테스트할 수있도록 테스트 툴 개발
결과 : 이미지 수정 요청 80% 감소 - 부모 컴포넌트에서 받은 props를 자식 컴포넌트에서 계산하는 레거시 코드→ 계산하는 코드를 부모 컴포넌트의 커스텀 훅으로 이동, 자식 컴포넌트는 렌더링만 집중하도록 리팩토링 진행
결과 : 유지 보수 시간 단축(약 20분 → 5분), 코드의 가독성 및 확장성 향상 - _app.js에 불필요한 라이브러리를 최적화하여 통해 모든 페이지의 번들 사이즈 13% 개선
- 웹뷰 환경에 대응하기 위해 User-Agent를 파싱하여 적절한 API를 제공
- 신규 개발
- Axios Interceptors를 활용하여 AccessToken가 만료될 때 RefreshToken를 이용
새로운 AccessToken을 받을 수 있도록 개발(토큰 인증 방식 JWT → OAuth2.0 변경) - Modal 상태를 새로 고침 시에도 유지하기 위해 URL로 관리하여 개발
- Tailwind CSS 브랜드 색상과 구성을 재정의하고 기존 Module CSS → Tailwind CSS로 마이그레이션
- 웹뷰로 표시되는 Modal에 부자연스러운 모션을 transition을 적용하여 개선
어글리어스
팀원 | 개발팀
2021.12. ~ 2022.03. (4개월)
- 성장이 빠른(입사 전 대비 400%성장)
- 초기 팀에서 전반적인 프론트엔드 개발을 담당
- 프론트엔드 유지 보수 및 비즈니스의 요구에 맞는 다양한 새로운 기능 개발
- 모든 페이지 개발 시 사용자 경험을 위해 반응형 웹 개발
- 메인 페이지 및 메뉴바 UI 개편
- 레시피 페이지 리뷰 기능 개발
- 주문내역 페이지 개발
- 미션 페이지,이용방법 페이지 개발
- 못난이 상점(List, Detail, Cart, Payment 페이지) 개발
프로젝트
내일전시
개인
2022.07. ~ 진행 중
- 검색 노출을 향상시키기 위해 Sitemap, Robots.txt, Semantic Tag, 구조화된 데이터, 백 링크, 각각 다른 Title, Description 등 다양한 방법으로 SEO 개선
결과 : SEO 지표 약 8배 향상시켜 네이버,구글 검색 결과에서 최상위권으로 올라가는 경험 - Tailwind CSS를 활용하여 웹사이트의 전반적인 디자인을 구축하였으며 반응형 웹 구현
- CLS를 개선하기 위해 next/image 및 Skeleton UI 사용
- SEO 개선을 위해 SSR을 사용하고 탭 영역은 API 호출 성능 최적화를 위해 useSWR을 활용하여 캐싱 처리
- 수익을 위해 AdFit(카카오 광고), AdSense(구글 광고)를 적용
- Google Analytics을 연동하여 방문 경로 및 유저 유입을 분석
- 서울시에서 받은 데이터를 가공하기 위해 MySQL 구축
- 서울시 데이터의 매일 업데이트에 대응하기 위해 cron 작업을 활용하여 매일 자정에 데이터베이스 갱신 기능
- 클라이언트 측에서 발생한 에러를 에러 바운더리로 처리하고, 서버에서 발생한 에러에 대해 500 에러 페이지로 리다이렉션 설정
서피
개인
2023.03. ~ 2023.10.
- Code Deploy를 이용한 배포자동화 구축
- soket.io를 이용한 실시간 채팅 구현
- 카카오 로그인 구현
기술 스택
React, Next.js, tailwind-css, TypeScript, HTML/CSS
