👋 안녕하세요.
주도적으로 서비스의 문제를 찾고 개선을 멈추지 않는 개발자 김진근입니다.
React, Next.js를 사용해 웹 서비스를 개발, 유지보수 해보았습니다. React Native를 사용해 크로스 플랫폼 앱 개발을 해보았습니다.
'어제의 나보다 성장한 오늘의 나'가 되기위해 노력합니다. 뛰어난 사람이 되기 위해 끊임없이 공부합니다.
개발하며 마주한 문제를 해결하는 것을 즐깁니다. 처음 겪어보는 문제를 해결할 때 성장한다고 생각하고, 문제를 피하지 않습니다.
Skill
깊이 이해하고, 실무에서 사용해본 적 있어요.
다루어본적 있어요.
Work
매월, 매년마다 결제되는 구독기능을 개발하였습니다. 안드로이드와 iOS 로직 통일을 위해 react-native-iap을 사용하였습니다. react-native-iap로 구독 상품을 가져오고 가져온 상품을 웹뷰에서 보여주고, 결제를 구현했습니다.
서비스의 타겟 유저는 동남아시아의 유저인데, 유저 대부분은 느린 기기와 느린 네트워크를 사용하는 유저였습니다. 기존의 CSR 방식은 유저가 첫 화면을 볼 수 있을때 까지 많은 시간을 기다려야 하는 문제가 있었습니다. 예전부터 팀 내에서 이를 해결하고, 개발 경험 개선을 위해 Next.js로 마이그레이션을 하자는 이야기가 꾸준히 나왔습니다. 하지만 코드 베이스 전부를 마이그레이션 하기에는 리스크와 많은 개발 시간이 필요했고, QA 시간도 필요했습니다. 빠르게 실행하는 현재 상황에 맞지 않는 방법이여서 번번히 뒤로 미루어졌습니다.
그래서 제가 기존 코드를 유지한 채 Next.js로의 마이그레이션을 할 방법을 찾아서 개발팀에 공유 드렸고, 마이그레이션 작업을 리딩하여 성공적으로 마이그레이션 하였습니다.
SSR을 적용해서 First Contentful Paint를 개선하여 유저 경험을 개선하였고, 기존보다 빠른 로컬 실행 속도, 빌드 속도로 개발 경험이 개선되었습니다.
Create React App에서 Next.js로 점진적 마이그레이션 하기
웹 서비스에서 앱 서비스로 전환하기로 결정되어서 React Native로 앱 개발을 하였습니다. 프론트엔드 개발자 분들이 모두 React 경험이 있으셔서 적은 러닝커브와 빠른 실행을 위해 React Native를 사용하기로 결정했습니다.
React Native 사용 경험이 팀 내 저 밖에 없어서 제가 앱 개발을 리딩하였습니다. 웹뷰와 앱 사이의 로그인 세션 관리와 인앱 결제를 개발하였습니다.
웹의 초기 로딩이 느리다는 피드백을 받고 원인 분석을 하여 해당 페이지에 필요없는 코드들도 가져오고 있는 문제를 발견했습니다. 라우터 기반 코드 분할을 통해 빠른 3G 기준 로딩 파일의 크기를 11MB에서 0.4MB로 줄이고 로딩에 걸리는 시간을 1.1분에서 6초로 약 90% 속도 개선을 하였습니다.
다양한 캐싱 옵션과 많은 기능이 있는 개발 툴, Suspense와 Error boundary 사용을 위해 React Query 도입을 팀원들께 제안드렸습니다. React Query 도입을 리딩하여 팀원 분들이 빠르게 사용하실 수 있도록 기존 apollo client의 개발 경험과 비슷하도록 커스텀 훅을 작성하여 도입하였습니다.
앱 전환 전 개발적 검증과 사전 작업을 진행하고 리딩하였습니다. 기존 웹 서비스가 앱의 웹뷰 환경에서 잘 실행이 되는지, 어떤 방식으로 개발을 하면 좋을지 실험하였습니다. 웹 서비스가 웹뷰 환경에서 잘 동작되었고, 빠른 배포를 위해 모든 페이지를 웹뷰로 제작하기로 결정했습니다. 실험 중 웹과 앱 사이의 통신할 때 작성된 코드가 가독성이 좋지 않고 정해진 규칙이 없어서 휴먼 에러가 발생할 수 있는 문제를 타입 지정과 Promise 사용을 통해 해결하였습니다. 통신하는 코드를 훅으로 작성해 재사용성을 높였습니다.
입사 후, 코드 리뷰 과정에서 리뷰이는 정해진 템플릿이 없어 무엇을 작성하면 좋을지 고민하는 시간 낭비와 코드 리뷰의 우선순위를 알기 힘든 문제가 있었습니다. 이를 해결하기 위해 Pn룰 도입을 제안드렸고, 적용되어서 코드 리뷰 시간을 줄일 수 있었습니다.
그동안 React Native를 사용해 모두닥 앱 개발과 바닐라JS를 사용해 Django 프론트엔드 웹 개발을 하였습니다.
모두닥 웹의 검색 Flow를 개선했습니다.
모두닥 앱의 예약 상태 화면을 개선했습니다.
웹/앱의 버그, 이슈를 해결했습니다.
스프린트에 참여해 빠르게 문제를 찾고 문제를 해결할 수 있는 아이디어를 실험하고 결과를 내는 과정을 경험해보았습니다.
Project
저의 개성을 담은 개발 블로그를 만들고 싶어 프로젝트를 시작했습니다.
글을 저장하는 서버가 필요없는 블로그를 제작하기 위해 글은 MDX로 작성하고 저장하면 자동으로 작성된 파일 기반으로 페이지가 만들어지도록 구현했습니다.
블로그에서 중요한 것은 빠른 로딩, 가독성, 접근성, 검색엔진 최적화, 반응형 UI로 정하고 개발하였습니다.
Lighthouse를 사용해 웹 성능 측정을 하여 점수가 낮게 나오는 부분을 개선했습니다. SSR을 사용해 FCP를 개선하고, metadata를 추가해 SEO 작업을 하였습니다. 이미지 최적화, 폰트 최적화를 통해 에셋을 줄여 로딩 시간을 개선하였습니다.
NextUI의 컴포넌트를 사용하여 개발 시간을 줄이고 TailwindCSS를 사용하여 빌드 시에 스타일을 생성하도록 해 런타임 코드를 줄였습니다.
프론트엔드 2명, 백엔드 1명 구성으로 진행한 프로젝트입니다.
학교장 인증제중 하나인 ‘프로젝트 보고서 작성’을 위해 프로젝트를 진행한 후 보고서를 작성하여 선생님께 제출해야 하는데 모든 과정이 오프라인으로 진행 되어서 불편하였습니다. 이런 불편함을 고치기 위해 온라인 상에서 보고서 작성의 모든 과정을 진행 할 수 있도록 서비스를 기획하였습니다.
React Query를 사용하여 캐싱과 개발 툴로 개발 경험과 유저 경험을 개선하였고, custom hook을 작성하여 중복되는 코드를 최소화했습니다. 노션과 같은 사용자 경험을 위해 비슷한 마크다운 입력과 이미지 삽입 기능도 구현하였습니다.
Education
Activity
학교에서 지방기능경기대회에 참여할 수 있는 기회를 가지게 되어서 정보기술 분야에 참여하였습니다.
Java와 MySQL을 사용하여 주어진 응용 프로그램을 개발하는 것이 목표였습니다. 대회 준비를 하며 Java와 MySQL을 공부한것이 개발자로서 많은 도움이 되었다고 생각합니다.
많은 노력끝에 동상을 타게 되었습니다.
지방기능경기대회에서 메달권에 들어가서 전국기능경기대회에 참여할 자격을 얻게 되었습니다.
끝까지 가보자는 마음으로 정보기술 분야에 참여하게 되었습니다.
아쉽게도 상을 타진 못했지만 많은 사람과 경쟁하며 배운 Java와 MySQL의 지식이 개발자로서의 좋은 경험이 되었다고 생각합니다.
다른 소프트웨어마이스터고등학교 팀원들과 연합 해커톤을 진행하였습니다.
거의 모르는 사람과 프로젝트를 진행하는 경험이 특별하였습니다.
안드로이드 앱과 웹뷰를 처음 연결해보는 것이여서 좋은 경험이 되었습니다.