프론트엔드 개발자

강민수

안녕하세요,
"서비스의 가치를 프론트엔드가 구현한다"는 믿음을 가슴에 품고 성장해가는 프론트엔드 개발자 강민수입니다.

성실함

책임감

협업 지향

커뮤니케이션

문제 해결사

<ul><li>array의 last 함수 구현 및 PR 승인 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/toss/es-toolkit/pull/149">PR 링크</a>)</li><li>array의 initial 함수 구현 및 PR 승인(<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/toss/es-toolkit/pull/188">PR 링크</a>)</li></ul>

Toss es-toolkit

<ul><li>라이브러리의 발전 방향성 논의 참여 (<a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://github.com/toss/es-hangul/discussions/176#discussioncomment-9994069">논의 링크</a>)</li></ul>

Toss es-hangul

<ul><li>열정적인 프론트엔드 개발자 모임 활동</li><li>기술 컨퍼런스에서 "객체 지향으로 접근하는 리액트 상태 관리" 주제 발표 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/742f800fcdc047bca26ab842bd43cff6?pvs=21">발표 자료</a>)</li><li>함수랑 크리틱이라는 다양한 주제의 토론 활동<a target="_blank" rel="noopener noreferrer nofollow" href="https://hamsurang.notion.site/48d713cdac644ae4a4b159a2662c88cf?pvs=4">(기록 링크)</a></li><li>커뮤니티 홈페이지 기여: GitHub 모티브 activityLogGraph 구현 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/hamsurang/origin/pull/20">PR 링크</a>)</li><li>다양한 스터디 및 해커톤 참여</li></ul>

기술 커뮤니티 활동

깃허브

개인 블로그

<h2>피어프리 어드민</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://admin-web.fearfree.kr/">https://admin-web.fearfree.kr/</a>2024.10 ~ Now<blockquote>피어프리 쿠폰 전송 및 재고 관리 사내 어드민 사이트</blockquote>주요 기여 및 성과<ul><li>API 타입 자동화 시스템 구축<ul><li>문제: 반복적인 타입 정의와 수동 핸들러 작성으로 인한 개발 비효율성 및 오류 발생 가능성.</li><li>해결<ul><li>openapi-ts 활용 OpenAPI 스펙(open-api.json)으로부터 TypeScript api 타입 자동 생성.</li><li>openapi-fetch, openapi-react-query 활용 fetch 설정 및 쿼리 키 옵션 등 자동화 처리.</li></ul></li><li>성과: 타입 정의 시간 대폭 절약, 자동화로 인한 오류 감소로 코드 안정성 향상. </li></ul></li><li>Open API 파일 타입 자동 변환 스크립트 개발<ul><li>문제:파일 업로드 시 multipart form type이 string으로 추론되어 발생하는 타입 불일치.</li><li>해결<ul><li>openapi-ts의 Node.js API와 TypeScript AST(Abstract Syntax Tree) 활용 파일 타입을 File로 변환하는 자동화 스크립트 개발.</li></ul></li><li>성과: 파일 업로드 관련 타입 추론 문제를 해결함으로써 개발 효율성을 향상 및 타입 안정성 강화. </li></ul></li><li>Vanilla Extract 도입을 통한 스타일링 개선<ul><li>Sprinkles 활용 공통 스타일 파일화 및 css type 자동 추론으로 개발 편의성 향상</li><li>성과: 기존 대비 생산성과 스타일 일관성 개선 </li></ul></li><li>컴포넌트 재사용성 및 UI 최적화<ul><li>구현: Tenstack Table과 Context API로 컴포넌트 구조화 및 유연성 강화</li><li>성과: UI 재사용성을 극대화하여 유지 보수성 향상 </li></ul></li><li>로딩 및 에러 처리 개선<ul><li>구현: Suspense와 Error Boundary로 로딩과 에러 관리 구조 통일화</li><li>성과: 사용자 경험 및 오류 관리 효율성 강화 </li></ul></li><li>CI/CD 파이프라인 자동화<ul><li>GCP Cloud Build 및 Cloud Run 기반, Docker 배포 자동화 설정</li><li>성과: 안정적 배포 환경 조성 및 배포 효율성 증대 </li></ul></li></ul><h2>피어프리 웹</h2>2024.08.30~ Now<blockquote>국내 FearFree 공식 홈페이지 반응형 웹 사이트 개발(현재 내부 사정으로 아임 웹으로 전환)</blockquote>가입부터 결제까지 전체 프로세스 프론트엔드 개발 담당주요 기여 및 성과<ul><li>쿼리 키 관리 효율성 개선<ul><li>문제: 반복되는 쿼리 키 관리의 비효율성</li><li>해결: 쿼리키팩토리 도입으로 쿼리 키 관리 효율성을 크게 향상</li><li>결과: 코드 중복 제거 및 쿼리 키 충돌 방지, 유지보수성 개선 </li></ul></li><li>인증 및 인가 시스템 보안 강화<ul><li>문제: 인증, 인가 시스템의 보안 취약점</li><li>해결<ul><li>httpOnly 쿠키 및 Secure 속성 설정을 적용한 웹 서버 API 활용으로 보안 강화</li><li>Next.js 14의 App Router Layout을 활용해 인증 필요 여부에 따른 페이지 처리를 일원화</li></ul></li><li>결과: 보안성 향상 및 인증 시스템의 일관성 제공, 사용자 로그인 오류 20% 감소 </li></ul></li><li>모바일 웹 상태 유지 및 팝업 이슈 해결<ul><li>문제: 모바일 웹에서 뒤로 가기 시 상태 유지 문제 및 팝업 이슈</li><li>해결: window popstate event 활용으로 팝업만 닫히도록 수정, 상태 유지를 위해 zustand 전역 상태 관리 도입</li><li>결과: 사용자 경험 개선 및 모바일 환경에서의 불편함 감소 </li></ul></li><li>페이플 SDK 결제 문제 해결<ul><li>문제: 첫 결제 마운트 시 SDK 오류 및 스크립트 순서 문제</li><li>해결: 페이플 SDK의 JQuery 의존성 문제 해결, Next.js 스크립트 태그의 strategy와 onReady 속성 사용하여 스크립트 동기화</li><li>결과: 결제 시스템 안정성 향상 및 결제 성공률 증가 </li></ul></li><li>약관 iframe 내부 CSS 제어 문제 해결<ul><li>문제: iframe 사용으로 인한 약관 내부 CSS 제어 어려움</li><li>해결: Dompurify를 활용한 HTML sanitize 후, dangerouslySetInnerHTML로 안전하게 주입하여 CSS 제어 가능하게 개선</li><li>결과: 약관 페이지의 디자인 일관성 유지 및 보안성 강화</li></ul></li></ul><h2>티티케어 앱</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.ttcareforpet.com/ko-kr">https://www.ttcareforpet.com/ko-kr</a>2023.09 ~ Now<blockquote>AI 기반 반려동물 기록, 및 홈 케어 앱</blockquote>역할: 앱 내 웹뷰 개발 및 유지 보수주요 기여 및 성과<ul><li>비즈니스 로직 복잡도 문제 해결<ul><li>월별 데이터 분석 UI에서 비즈니스 로직 복잡도가 상승.</li><li>Adapter 패턴 도입으로 로직을 분리하여 유지보수 효율성 증대.</li><li>Adapter 클래스로 API 데이터 가공 및 디버깅 용이성 확보. </li></ul></li><li>화면 깜빡임 문제 해결<ul><li>날짜별 기록 API 호출 시 발생하는 화면 깜빡임 문제.</li><li>useQuery의 PlaceHolderData 옵션을 활용하여, 첫 렌더링 후 이전 데이터 유지로 깜빡임 현상 제거. </li></ul></li><li>불필요한 API 호출 최적화<ul><li>불필요한 API 호출로 성능 저하 발생.</li><li>QueryClient의 낙관적 업데이트와 Debounce 적용으로 API 호출 최적화.</li></ul></li><li>인터랙티브 애니메이션 구현<ul><li>Framer Motion을 활용하여 인터랙티브 애니메이션 구현.</li><li>UI의 반응성 증대로 사용자 경험 개선.. </li></ul></li></ul><h2>전문가 웹 사이트</h2>2023.10 ~ Now<blockquote>비대면 진료 및 실시간 상담 관련 수의사가 사용하는 전문가 admin 사이트</blockquote>역할: admin 사이트 신규 기능 개발 및 유지 보수주요 기여 및 성과<ul><li>SVG 차트 커스텀 툴팁 랜더링 문제<ul><li>문제: SVG 차트에서 커스텀 툴팁이 제대로 렌더링되지 않음.</li><li>해결: Chakra UI 모달 내부 소스 코드를 참조하여, React Portal 개념을 활용해 툴팁 렌더링 문제 해결.</li></ul></li><li>버튼 색상 렌더링 이슈 (선택된 날짜 범위에 따른 문제)<ul><li>문제: 선택된 날짜 범위에 따라 버튼 색상이 제대로 렌더링되지 않음.</li><li>해결: 컴포넌트 외부 변수를 컴포넌트 내부로 이동하여, CSR(Client-Side Rendering) 시점에서 변수 선언이 올바르게 판단되도록 수정 후 해결. </li></ul></li></ul><h2>병원용 앱</h2>2024.04 - 2024.05FE 2명(본인 포함), BE 1명, 디자이너 1명, 안드로이드 1명.<blockquote>수의사용 안드로이드 전용 환자 기록 앱</blockquote>역할: 어플 내 웹뷰 유지 보수 및 개발주요 기여 및 성과<ul><li>다국어 지원 효율화<ul><li>Redux와 미들웨어를 활용하여 Locale 정보 관리 체계화.</li><li>다국어 설정의 일관성을 유지하고 효율적인 데이터 흐름 구현.</li></ul></li><li>재사용성 향상<ul><li>공통 모달, 팝업, 인풋 컴포넌트 개발로 UI 요소의 재사용성 극대화.</li><li>유지보수와 개발 속도 개선.</li></ul></li><li>네이티브 통신 개선<ul><li>다양한 브릿지 통신을 위해 유틸 함수를 개발하여 통신 구조 간소화 및 안정성 강화.</li><li>검색 기능 고도화• Fuse.js를 활용하여 환자 검색 기능을 구현.</li><li>검색 정확도와 성능 향상. </li></ul></li></ul><h2>사내 Admin 관리 사이트</h2>2024.03 - 2024.04<blockquote>게시판 및 진료, 정산 관리등의 사내 통합 admin 사이트</blockquote>주요 기여 및 성과<ul><li>역할 기반 컴포넌트 분리<ul><li>역할에 맞게 컴포넌트 분리하고 FormProvider를 활용하여 불필요한 재렌더링을 줄임.</li><li>성능 최적화와 유지보수 용이성 향상. </li></ul></li><li>React-query SSR 구조 개선<ul><li>PrefetchQuery와 dehydrate를 사용하여 queryClient 구조 개선.</li><li>서버사이드 렌더링(SSR) 시 데이터 페칭 성능을 최적화하고 초기 로딩 시간을 단축.</li></ul></li></ul><h2>사용 기술</h2>Frontend: TypeScript, Next.js, EmotionState Management: Redux-toolkitData Fetching: Tanstack Query v5Package Management: Yarn Berry, Pnpm기타: React-Hook-Form, Husky, Recharts, Framer Motion

<h2>다짐(da-gym)</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.da-gym.co.kr">https://www.da-gym.co.kr</a>2022.06 - 2023.05FE 1명(본인), BE 1명, 디자이너 1명<blockquote>50만 유저, 1,500 개 이상의 체육시설과 함께하는 회원권 판매 O2O 서비스</blockquote>역할: 다짐 웹사이트 및 앱 내 웹뷰 페이지의 프론트엔드 개발과 전체 운영주요 기여 및 성과:<ul><li>웹사이트 현대화 및 통합<ul><li>Next.js 전환<ul><li>기존 Angular 기반 홈페이지를 Next.js로 전환하여 성능 개선 및 최신 기술 스택으로 업그레이드.</li></ul></li><li> 반응형 웹 구현<ul><li>PC, 모바일, 태블릿 모든 디바이스에 호환되는 반응형 웹 구현.</li></ul></li><li>리소스 비용 절감 </li><li>단일 레포지토리 관리 및 통합 디자인 시스템 도입으로 개발 및 유지보수 비용 절감.</li></ul></li><li>성능 최적화 및 개선<ul><li>SSR 최적화<ul><li>SSR(서버사이드 렌더링) 개선으로 페이지 로딩 시간을 3초에서 1초로 단축.</li><li>Prefetch Query, Hydration, GetServerSideProps를 활용하여 성능 향상.</li></ul></li><li>결제 에러 해결 및 UX 개선<ul><li>영어 설정 아이폰 웹뷰에서 결제 무한 로딩 문제를 해결.</li><li>locale 설정 문제를 해결하기 위해 날짜 변환 유틸 함수 포맷팅 수정.</li><li>결제 관련 데이터 포맷 검증 테스트 코드 도입 및 에러 바운더리 구현으로 결제 프로세스의 안정성 확보.</li><li>1,000원 미만 카드 소액 결제 기능 신규 구현 및 결제 프로세스 현대화.</li></ul></li><li>지도 API 문제 해결<ul><li>네이버 지도 API에서 발생한 커스텀 마커 타입 제약 문제 해결.</li><li>React의 renderToString 메서드를 활용하여 커스텀 마커 컴포넌트를 string으로 변환해 문제 해결.</li></ul></li><li> 코드 리팩토링<ul><li>2년 이상 방치된 JSP 기반 코드 리팩토링 및 불필요한 코드 제거로 코드 품질 향상.</li><li>Git Submodule을 이용하여 API 훅과 유틸 함수를 공통화해 재사용성 증대.</li></ul></li></ul></li><li>테스트 및 마케팅 지원<ul><li>Storybook 활용<ul><li>UI 테스트 환경을 Storybook으로 구축해 컴포넌트 테스트 및 품질 유지.</li><li>SEO 및 데이터 수집 지원<ul><li>meta-tag 및 og 태그 설정으로 SEO 개선.</li><li>GA, Facebook, Naver 마케팅 로그 작업을 통해 데이터 수집 가시화 및 마케팅 효율성 향상.</li></ul></li></ul></li></ul></li></ul><h3>사용 기술</h3>Frontend: TypeScript, Next.js, EmotionState Management: RecoilData Fetching: Tanstack Query v4Package Management: Yarn Classic기타: React-Hook-Form