미리보기
기본 정보
안녕하세요, "서비스의 가치를 프론트엔드가 구현한다"는 믿음을 가슴에 품고 성장해가는 프론트엔드 개발자 강민수입니다.
자기소개
창의적인 작업에 매료되어 개발자의 길을 걷기로 했습니다. 사용자에게 가치를 전하는 코드 한 줄 한 줄을 심사숙고하며 작성합니다. 배운 내용을 나만의 언어로 정리해 지식을 축적하고, 이를 통해 지속적인 성장에 주력하고 있습니다.
최근에는 프론트엔드 아키텍처와 디자인 패턴에 관심이 많고, 다양한 주제(개발 + ɑ)로 논의하는 걸 좋아합니다.
개발이 아닌 시간에는 헬스, 달리기, 영화 감상, 예능 시청 등 다채로운 활동을 즐기며 삶과 일의 균형을 추구합니다.
기술 스택
경력
주식회사에이아이포펫
팀원 • 프론트엔드 개발팀
피어프리 어드민
https://admin-web.fearfree.kr/
2024.10 ~ Now
피어프리 쿠폰 전송 및 재고 관리 사내 어드민 사이트
주요 기여 및 성과
API 타입 자동화 시스템 구축
문제: 반복적인 타입 정의와 수동 핸들러 작성으로 인한 개발 비효율성 및 오류 발생 가능성.
해결
openapi-ts 활용 OpenAPI 스펙(open-api.json)으로부터 TypeScript api 타입 자동 생성.
openapi-fetch, openapi-react-query 활용 fetch 설정 및 쿼리 키 옵션 등 자동화 처리.
성과: 타입 정의 시간 대폭 절약, 자동화로 인한 오류 감소로 코드 안정성 향상.
Open API 파일 타입 자동 변환 스크립트 개발
문제:파일 업로드 시 multipart form type이 string으로 추론되어 발생하는 타입 불일치.
해결
openapi-ts의 Node.js API와 TypeScript AST(Abstract Syntax Tree) 활용 파일 타입을 File로 변환하는 자동화 스크립트 개발.
성과: 파일 업로드 관련 타입 추론 문제를 해결함으로써 개발 효율성을 향상 및 타입 안정성 강화.
Vanilla Extract 도입을 통한 스타일링 개선
Sprinkles 활용 공통 스타일 파일화 및 css type 자동 추론으로 개발 편의성 향상
성과: 기존 대비 생산성과 스타일 일관성 개선
컴포넌트 재사용성 및 UI 최적화
구현: Tenstack Table과 Context API로 컴포넌트 구조화 및 유연성 강화
성과: UI 재사용성을 극대화하여 유지 보수성 향상
로딩 및 에러 처리 개선
구현: Suspense와 Error Boundary로 로딩과 에러 관리 구조 통일화
성과: 사용자 경험 및 오류 관리 효율성 강화
CI/CD 파이프라인 자동화
GCP Cloud Build 및 Cloud Run 기반, Docker 배포 자동화 설정
성과: 안정적 배포 환경 조성 및 배포 효율성 증대
피어프리 웹
2024.08.30~ Now
국내 FearFree 공식 홈페이지 반응형 웹 사이트 개발(현재 내부 사정으로 아임 웹으로 전환)
가입부터 결제까지 전체 프로세스 프론트엔드 개발 담당
주요 기여 및 성과
쿼리 키 관리 효율성 개선
문제: 반복되는 쿼리 키 관리의 비효율성
해결: 쿼리키팩토리 도입으로 쿼리 키 관리 효율성을 크게 향상
결과: 코드 중복 제거 및 쿼리 키 충돌 방지, 유지보수성 개선
인증 및 인가 시스템 보안 강화
문제: 인증, 인가 시스템의 보안 취약점
해결
httpOnly 쿠키 및 Secure 속성 설정을 적용한 웹 서버 API 활용으로 보안 강화
Next.js 14의 App Router Layout을 활용해 인증 필요 여부에 따른 페이지 처리를 일원화
결과: 보안성 향상 및 인증 시스템의 일관성 제공, 사용자 로그인 오류 20% 감소
모바일 웹 상태 유지 및 팝업 이슈 해결
문제: 모바일 웹에서 뒤로 가기 시 상태 유지 문제 및 팝업 이슈
해결: window popstate event 활용으로 팝업만 닫히도록 수정, 상태 유지를 위해 zustand 전역 상태 관리 도입
결과: 사용자 경험 개선 및 모바일 환경에서의 불편함 감소
페이플 SDK 결제 문제 해결
문제: 첫 결제 마운트 시 SDK 오류 및 스크립트 순서 문제
해결: 페이플 SDK의 JQuery 의존성 문제 해결, Next.js 스크립트 태그의 strategy와 onReady 속성 사용하여 스크립트 동기화
결과: 결제 시스템 안정성 향상 및 결제 성공률 증가
약관 iframe 내부 CSS 제어 문제 해결
문제: iframe 사용으로 인한 약관 내부 CSS 제어 어려움
해결: Dompurify를 활용한 HTML sanitize 후, dangerouslySetInnerHTML로 안전하게 주입하여 CSS 제어 가능하게 개선
결과: 약관 페이지의 디자인 일관성 유지 및 보안성 강화
티티케어 앱
https://www.ttcareforpet.com/ko-kr
2023.09 ~ Now
AI 기반 반려동물 기록, 및 홈 케어 앱
역할: 앱 내 웹뷰 개발 및 유지 보수
주요 기여 및 성과
비즈니스 로직 복잡도 문제 해결
월별 데이터 분석 UI에서 비즈니스 로직 복잡도가 상승.
Adapter 패턴 도입으로 로직을 분리하여 유지보수 효율성 증대.
Adapter 클래스로 API 데이터 가공 및 디버깅 용이성 확보.
화면 깜빡임 문제 해결
날짜별 기록 API 호출 시 발생하는 화면 깜빡임 문제.
useQuery의 PlaceHolderData 옵션을 활용하여, 첫 렌더링 후 이전 데이터 유지로 깜빡임 현상 제거.
불필요한 API 호출 최적화
불필요한 API 호출로 성능 저하 발생.
QueryClient의 낙관적 업데이트와 Debounce 적용으로 API 호출 최적화.
인터랙티브 애니메이션 구현
Framer Motion을 활용하여 인터랙티브 애니메이션 구현.
UI의 반응성 증대로 사용자 경험 개선..
전문가 웹 사이트
2023.10 ~ Now
비대면 진료 및 실시간 상담 관련 수의사가 사용하는 전문가 admin 사이트
역할: admin 사이트 신규 기능 개발 및 유지 보수
주요 기여 및 성과
SVG 차트 커스텀 툴팁 랜더링 문제
문제: SVG 차트에서 커스텀 툴팁이 제대로 렌더링되지 않음.
해결: Chakra UI 모달 내부 소스 코드를 참조하여, React Portal 개념을 활용해 툴팁 렌더링 문제 해결.
버튼 색상 렌더링 이슈 (선택된 날짜 범위에 따른 문제)
문제: 선택된 날짜 범위에 따라 버튼 색상이 제대로 렌더링되지 않음.
해결: 컴포넌트 외부 변수를 컴포넌트 내부로 이동하여, CSR(Client-Side Rendering) 시점에서 변수 선언이 올바르게 판단되도록 수정 후 해결.
병원용 앱
2024.04 - 2024.05
FE 2명(본인 포함), BE 1명, 디자이너 1명, 안드로이드 1명.
수의사용 안드로이드 전용 환자 기록 앱
역할: 어플 내 웹뷰 유지 보수 및 개발
주요 기여 및 성과
다국어 지원 효율화
Redux와 미들웨어를 활용하여 Locale 정보 관리 체계화.
다국어 설정의 일관성을 유지하고 효율적인 데이터 흐름 구현.
재사용성 향상
공통 모달, 팝업, 인풋 컴포넌트 개발로 UI 요소의 재사용성 극대화.
유지보수와 개발 속도 개선.
네이티브 통신 개선
다양한 브릿지 통신을 위해 유틸 함수를 개발하여 통신 구조 간소화 및 안정성 강화.
검색 기능 고도화
• Fuse.js를 활용하여 환자 검색 기능을 구현.
검색 정확도와 성능 향상.
사내 Admin 관리 사이트
2024.03 - 2024.04
게시판 및 진료, 정산 관리등의 사내 통합 admin 사이트
주요 기여 및 성과
역할 기반 컴포넌트 분리
역할에 맞게 컴포넌트 분리하고 FormProvider를 활용하여 불필요한 재렌더링을 줄임.
성능 최적화와 유지보수 용이성 향상.
React-query SSR 구조 개선
PrefetchQuery와 dehydrate를 사용하여 queryClient 구조 개선.
서버사이드 렌더링(SSR) 시 데이터 페칭 성능을 최적화하고 초기 로딩 시간을 단축.
사용 기술
Frontend: TypeScript, Next.js, Emotion
State Management: Redux-toolkit
Data Fetching: Tanstack Query v5
Package Management: Yarn Berry, Pnpm
기타: React-Hook-Form, Husky, Recharts, Framer Motion
(1년 9개월 | 정규직)
주식회사 스톤아이 (Stone-I Co. Ltd.)
팀원 • 개발팀
다짐(da-gym)
2022.06 - 2023.05
FE 1명(본인), BE 1명, 디자이너 1명
50만 유저, 1,500 개 이상의 체육시설과 함께하는 회원권 판매 O2O 서비스
역할: 다짐 웹사이트 및 앱 내 웹뷰 페이지의 프론트엔드 개발과 전체 운영
주요 기여 및 성과:
웹사이트 현대화 및 통합
Next.js 전환
기존 Angular 기반 홈페이지를 Next.js로 전환하여 성능 개선 및 최신 기술 스택으로 업그레이드.
반응형 웹 구현
PC, 모바일, 태블릿 모든 디바이스에 호환되는 반응형 웹 구현.
리소스 비용 절감
단일 레포지토리 관리 및 통합 디자인 시스템 도입으로 개발 및 유지보수 비용 절감.
성능 최적화 및 개선
SSR 최적화
SSR(서버사이드 렌더링) 개선으로 페이지 로딩 시간을 3초에서 1초로 단축.
Prefetch Query, Hydration, GetServerSideProps를 활용하여 성능 향상.
결제 에러 해결 및 UX 개선
영어 설정 아이폰 웹뷰에서 결제 무한 로딩 문제를 해결.
locale 설정 문제를 해결하기 위해 날짜 변환 유틸 함수 포맷팅 수정.
결제 관련 데이터 포맷 검증 테스트 코드 도입 및 에러 바운더리 구현으로 결제 프로세스의 안정성 확보.
1,000원 미만 카드 소액 결제 기능 신규 구현 및 결제 프로세스 현대화.
지도 API 문제 해결
네이버 지도 API에서 발생한 커스텀 마커 타입 제약 문제 해결.
React의 renderToString 메서드를 활용하여 커스텀 마커 컴포넌트를 string으로 변환해 문제 해결.
코드 리팩토링
2년 이상 방치된 JSP 기반 코드 리팩토링 및 불필요한 코드 제거로 코드 품질 향상.
Git Submodule을 이용하여 API 훅과 유틸 함수를 공통화해 재사용성 증대.
테스트 및 마케팅 지원
Storybook 활용
UI 테스트 환경을 Storybook으로 구축해 컴포넌트 테스트 및 품질 유지.
SEO 및 데이터 수집 지원
meta-tag 및 og 태그 설정으로 SEO 개선.
GA, Facebook, Naver 마케팅 로그 작업을 통해 데이터 수집 가시화 및 마케팅 효율성 향상.
사용 기술
Frontend: TypeScript, Next.js, Emotion
State Management: Recoil
Data Fetching: Tanstack Query v4
Package Management: Yarn Classic
기타: React-Hook-Form
(1년 | 정규직)
포트폴리오
교육
상명
대학교(학사) | 지적재산권학
2018.03. ~ 2020.02.
졸업
대외활동
토스
Toss es-toolkit
2024