미리보기
기본 정보
안녕하세요, "서비스의 가치를 프론트엔드가 구현한다"는 믿음을 가슴에 품고 성장해가는 프론트엔드 개발자 강민수입니다.
자기소개
창의적인 작업에 매료되어 개발자의 길을 걷기로 했습니다. 사용자에게 가치를 전하는 코드 한 줄 한 줄을 심사숙고하며 작성합니다. 배운 내용을 나만의 언어로 정리해 지식을 축적하고, 이를 통해 지속적인 성장에 주력하고 있습니다.
최근에는 프론트엔드 아키텍처와 디자인 패턴에 관심이 많고, 다양한 주제(개발 + ɑ)로 논의하는 걸 좋아합니다.
개발이 아닌 시간에는 헬스, 달리기, 영화 감상, 예능 시청 등 다채로운 활동을 즐기며 삶과 일의 균형을 추구합니다.
기술 스택
JavaScript, TypeScript, HTML/CSS, React, Next.js, react-query
경력
주식회사에이아이포펫
팀원 | 프론트엔드 개발팀 | 재직 중
2023.09. ~ 재직 중 (1년 2개월)
피어프리 웹
https://fearfree.ttcare.co.kr/
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
주식회사 스톤아이 (Stone-I Co. Ltd.)
팀원 | 개발팀
2022.06. ~ 2023.05. (1년)
다짐(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
프로젝트
메타인지테스트
코드크루
2024.03. ~ 2024.05.
기획 의도
현대인들의 메타 인지 능력을 간단하고 재미있게 테스트 해 보기 위한 사이트
배포 주소
디자인 및 기획 내용
팀 구성
PO 1명, 프론트엔드 개발자 1명(본인), 백엔드 개발자 1명
레포지토리 링크
담당 역할 및 수행 작업
UI 및 프론트엔드 기능 1인 개발.
옵저버 및 싱글턴 디자인 패턴을 활용한 전역 상태 관리 개발.
DNS 설정 및 로드밸런서 설정을 통한 SSL 인증서 적용.
SEO 개선 작업
구글 서치 콘솔 및 네이버 서치 어드바이저 등록
배포 후, 28일 내 조회수 600회 달성, 현재 “메타 인지 테스트” 키워드로 구글 검색 최상단에 위치.
사이트 맵 설정 추가
Meta 및 OG 태그 설정
배포 프로세스 개선
도커 연동 문제 해결 후, 프론트 및 백엔드 도커 환경 구축
EC2 배포 및 GitHub Actions를 활용한 CI, CD 구축
Vercel과의 최종 배포 연동
DNS 및 SSL 설정
DNS 및 가비아 설정을 통한 프론트엔드·백엔드 로드밸런서 구성 및 SSL 인증서 설정
모바일 반응형 UI 작업.
기타 작업
Nest.js 기반 백엔드 API 수정 및 유지보수
AWS SES를 활용한 이메일 인증 서비스 추가
사용 기술
Next.js 14 (App Router), TailwindCSS, TanStack Query 등
맛잇팅
맛잇팅
2023.06. ~ 진행 중
기획 의도
현대 사회에서 혼밥과 혼술 문화가 자리 잡고 있지만, 여럿이서 모여 식사하는 것이 여전히 즐거운 경험입니다. 이러한 사회적 분위기를 반영하여, 같은 지역 내에서 맛있는 식사를 함께할 사람들을 연결해주는 위치 기반 매칭 서비스인 '맛잇팅'을 구상하게 되었습니다.
개발 현황
현재 서비스는 개발 중에 있으며, 프론트엔드 개발은 GitHub 레포지토리(링크)를 통해 진행되고 있습니다.
디자인 피그마 및 기획 내용
팀 구성:
프론트엔드 개발자 3명
백엔드 개발자 2명
담당 역할 및 수행 작업:
프론트엔드 및 전체 팀 리더십
팀원들 애로 사항 확인 및 처리 + 꼼꼼한 PR리뷰를 토대로 기술 논의 진행(대표 pr 링크).
전체 팀 회의를 주재하며 프로젝트 일정을 계획.
회의록 작성과 디스코드를 통한 회의 진행 방식을 정립.
작업 진행 상황을 점검하고 논의.
공통 컴포넌트 및 프로젝트 설정
DefaultText, Button, color, typography 등 공통 컴포넌트를 개발.
react-query 및 recoil 초기 셋팅 담당.
홈(메인) 페이지 UI 및 관련 기능 개발
사용자의 브라우저 위치를 기반으로 하여 네이버와 카카오의 API를 활용, 지도 및 주소 기능을 구현.
사용자의 위치에서 반경 5km 이내에 생성된 파티 목록 불러오기.
주소 검색으로 위치를 재지정 기능 개발.
Observer라는 고차 컴포넌트(HOC)를 활용하여 무한 스크롤 기능 처리.
useSuspenseQuery와 ErrorBoundary를 사용하여 로딩과 에러 처리 공통화.
검색 페이지 UI 및 관련 기능 개발
recoil-persist를 활용해 세션 스토리지 기반의 사용자 최근 검색어 리스트를 구현.
검색 쿼리에 따라 파티 생성 목록을 호출.
Observer HOC를 기반으로 한 무한 스크롤 기능 구현.
리뷰 페이지 UI 및 관련 기능 개발 중
프로젝트 기록 및 문서
사용 기술
Next.js 13 (페이지 기반 라우팅)
React 18, react-query v5, recoil, emotion 등
포트폴리오
교육
상명
대학교(학사) | 지적재산권학
2018.03. ~ 2020.02. | 졸업