미리보기
기본 정보

사내 프론트엔드 프로젝트의 설계와 개발을 리드하며 개발했으며, 다른 개발자들과의 협력시 화이트보드,그래프와 같은 시각 도구를 사용해 원활한 소통을 하며 작업을 진행하였습니다. 항상 새로운것들이 필요했고 새로운것들을 배워나가며 작업했습니다. 빠른 프로토타입작성, 이를 타직군과의 협업을 통해 리펙토링을 하는것에 익숙합니다.
기술 스택
JavaScript, React, AWS, TypeScript, React Native, GitHub, Next.js, express.js, react-query, zustand, redux-toolkit, cloudflare, tailwind-3, Docker, Cypress
경력
주식회사금성인터내셔널
대리 | 개발팀
2023.03. ~ 2025.03. (2년 1개월)
React 기반의 프론트엔드 설계 및 개발을 단독으로 진행했고 서비스를 위한 간단한 랜딩 페이지 , 복잡한 웹앱, 웹뷰에 대비한
적응-반응형 설계 웹앱, 모바일 애플리케이션을 경험했고 여러 문제들을 기술에 기반하여 해결하였습니다.
레이아웃 설계 부터 상태 조작 , 자동 배포까지 개발,운영했습니다.
css- styled component - tailwind 3 - vanilla extract 까지 다양한 스타일 도구를 사용해왔습니다.
리액트 라이프 사이클에 대한 명확한 이해를 가지고 작업해왔습니다.
핀옵스를 신경쓰며 스케일 조정가능한 배포 작업을 경험해보았습니다.
다양한 경험을 바탕으로 약간 더 신경쓰는 습관은 제가 프로젝트를 완성시키는대 큰 역할을 하였습니다.
팀원과 각자 프로젝트 진행시 겪는 어려운 사항들을 공감하며 협력할 수 잇는점을 찾아서 해결하곤 했습니다.
서비스 작성시 어떤게 문제이고 어디가 프로젝트 내의 함정일지 항상 염두하며 행동했습니다.
다양한 경험들은 어떤 sw를 만들지라도 올바른 문제 정의와 정확한 탐색만 한다면 웹개발에 있어서 불가능은 없다 생각합니다.
(주)토당건설
직영반장 | 시공팀
2021.03. ~ 2021.09. (7개월)
아르바이트 경험을 바탕으로 현장 관리 및 시공 실무자로 삼부르네상스 더 퍼스트 시공 현장에서 지하층 시공을 진행하였습니다.
관리직들과 함께 먹고자고 생활하면서 일은 현장직들과 같이하였습니다.
책임감있게 지시사항을 완수 하고 인원들을 관리,감독 하는 역할을 하였고 시공사 공무들과의 친분으로 현장일 전반에 대한 경험, 이해를 쌓았습니다.
프로젝트
실시간 가격변동 커머스 마이그레이션 프로젝트
금성인터내셔널
2023.09. ~ 2025.01.
프로젝트 개요
수천개의 데이터가 실시간으로 변경되며, 뷰포트 한 화면에 최소 250개 이상의 상품을 노출 , 반응형,적응형 웹을 모두사용해야하는 ui 였습니다. 초기 빠른 프로토 타입작성으로 인한 높은 프로젝트 복잡도를 시간이 지나고 리펙토링을 진행하여 많은 부분들을 개선시켰습니다.
많은 컴포넌트를 자주 변경함에도 사용자의 경험에 문제가 없어야하는 도전적인 과제였으며, 런타임환경에서의 복잡한 데이터처리 로직과, 상태관리를 기술적으로 해결하였습니다.
B2B 중심의 커머스 플랫폼 마이그레이션
데이터 처리 , 실시간 가격 변동 기능을 포함한 프로젝트 설계
디자인 패턴을 사용한 클라이언트 사이드에서의 복잡한 데이터 처리
백오피스 설계 및 작성 ( 인사 정보 관리 , 데이터 aggregation , 파일 관리 등 )
사용한 기술 스택
Next.js 12.3.4 , React 17, MUI Data Grid, Zustand, React Query, i18n
AWS Lambda, Cloud Flare Image, AWS SNS, AWS WAF, Vercel , etc..
주요 구현 및 성과
실시간 가격 변동 및 대용량 데이터 처리 최적화
250개이상에 달하는 상품컴포넌트를 뷰포트내에서 쾌적하게 처리되게 해본 경험이있습니다.
클라이언트 런타임환경에서 복잡한 정렬, 여러단계의 어려운 유효성검사를 처리해본 경험이있습니다.실시간 데이터 수신·처리
4초 간격 최대 10,000개(페이로드 5~25 MB) 상품 정보를 HTTP 통신으로 수신받아 처리
서버 처리 제약 보완을 위해 클라이언트 사이드에서 수신·파싱·정렬·검색·필터링 처리 작업 수행.
정렬 알고리즘 개선 및 FCP(초기 컨텐츠 페인팅) 최적화
정렬 알고리즘 개선 (N³ → N log N)으로 전체 정렬 시간 대폭 단축 ( 평균 정렬 시간 70 ms → 6~10 ms 단축)
복잡한 프로토타입 컴포넌트를 데이터 처리 영역,UI영역으로 나눈 다음 단순한 컴포넌트로 리펙토링해여 렌더링 시간 개선.
선택 유효성 검증을 위한 Rule Engine 적용
최소 5개 이상의 복합 조건(카테고리, 국가, 여러 시간 단위,브랜드 ,브랜드,국가별 제한 등 ) 충족 시 장바구니에 담게 하는 로직 구현
zustand store에서 엔진 생성 및 동작 위임.
rule engine을 사용함으로서 해당 로직의 코드 구조 개선, 재사용성 확보.
우선순위 기반의 정렬 기능 추가
복잡한 정렬 조건을 키워드·수식어 기반 동적 상세정보 우선순위 정렬을 통한 성능 확대. ( n^2 => n log n )
공통 모듈화
다양한 리액트 디자인 패턴을 사용해 팀원간 기능 이식 및 사용을 용이하게 작성.
context api · custom hook 를 사용해 컴포넌트간 결합력을 줄이고 유지보수성 및 확장성 확보
프로젝트 전반의 레이아웃,스타일 설정,파일 구조 설계
백오피스 웹앱 작성
100개 이상의 통계,HR 기능 등 B2B를 위한 백오피스 웹앱을 효율적으로 작업
여러페이지에서 등장하는 컬럼의 경우 컴포넌트화 시켜 재사용 가능하도록 설계
React 16 fiber 도입 이전 버전에 맞게 작성된 오픈소스 위지윅 에디터를 fiber 구조를 포함한 라이프 사이클에 맞게 에디터 생성 후 재구성 해 사용.
새로운 cdn변경 작업( 기존 aws s3기반 cdn=>cloud flare image 로 변경)
busboy를 사용해 다중 파일 업로드 기능 구현.
소리 알람 기능을 위한 브라우저 Notification API 를 통한 권한 처리 , 자연스러운 사용자 인터렉션을 통한 권한 획득 기능 추가
백엔드와 많은 회의를 통해 데이터 처리 영역 조율
제한적 영역에서 i18n 국제화 도구 적용
제품의 특정 영역의 키워드에 한해 국제화 기능 지원.
유저 커뮤니티 마이그레이션 프로젝트
금성인터내셔널
2023.05. ~ 2023.07.
Next.js 기반 유저 커뮤니티 마이그레이션 프로젝트
다음 해외 b2b 프로젝트를 위한 사전 단계였으며, 프로젝트의 서비스 아키텍쳐 설계 부터 기능 구현까지 직접 구현했습니다.
FFmpeg와 pre-signed url을 통해 대용량 파일을 처리하였습니다.
프로젝트 개요
동영상 롱,숏폼 공유 및 운영자 관리
기존 앵귤러로 작성된 커뮤니티 사이트를 Next.js 12로 마이그레이션
핵심 기능 및 서비스
CloudFront + S3 + next api 를 활용한 동영상 숏폼/롱폼 업로드 및 관리 대시보드 구축 (s3 pre-signed URL 사용 )
nextjs SSR 기능과 middleware를 사용한 유저 단계별 권한 처리 ( 관리자, 유저 등 )
서비스 품질관리에 대한 많은 경험 획득. 유저,클라이언트 피드백을 통한 편의성 강화
다양한 인터렉션에서 발생하는 개별 에러메시지 처리를 통한 UX 개선 경험 ( 사용자의 의도되지않은 행동, 다양한 에러 메시지 핸들링 등 )
서버내 정보를 즉시 반영
RTK를 사용한 상태관리.
배포 및 인프라
AWS Beanstalk을 활용한 배포 환경 구축
소규모 회사 랜딩 페이지 개발
금성인터내셔널
2023.03. ~ 2023.04.
소규모 회사 랜딩 페이지 개발 및 SEO 최적화 경험
프로젝트 개요
소규모 회사의 간단한 소개를 위한 랜딩 페이지 개발
차기 마이그레이션 프로젝트가 Angular로 작성되어 Angular 15 기반으로 진행
SEO 최적화 및 검색 엔진 노출
시멘틱 태그 활용 및 사이트맵 구성
Google Domains, 네이버 서치 어드바이저 설정
AWS 기반 앵귤러 유니버설 웹앱 배포
CodeCommit + pipeline을 사용한 자동 배포
Beanstalk의 롤링 배포 방식 지원으로 안정적인 배포 환경 구축
클라이언트 맞춤형 안드로이드 문자 모니터링 어플리케이션
금성인터내셔널
2023.09. ~ 2023.11.
프로젝트 개요
문자 전달 및 알람 서비스.
클라이언트 요구사항으로 작성한 모바일 앱 개발
지정된 조건의 문자 중 특정 내용만 서버로 전송 → 대시보드에서 모니터링 가능 및 비즈니스 로직에 적용.
Android API 30~33 시기 개발 , React Native 및 Java로 개발
핵심 기능
은행에서 전달받은 특정 문자열에 한 해서 재처리 후 서버로 전송.
포그라운드 서비스로 24시간 상시 동작하는 애플리케이션.
안드로이드 보안 정책 대응 → 디바이스 내 저장장치 미사용으로 변경, 안드로이드 api가 권장하는 방식의 전송방식 사용
포트폴리오
교육
동의대학교
대학교(학사) | 컴퓨터 공학
2013.03. ~ 2021.03. | 졸업
대외활동
리액트 딥다이브 그룹 스터디
기타
2024
약 한달간 진행되었으며,
리액트 코어 코드 해석과 리액트에서 렌더링을 동작시키는 순서에 대해 깊게 알아보는 그룹 스터디를 진행하였습니다.
리액트 Fiber 도입 이전과 후를 알아보고 hook, 렌더링 과정에 대해 상세히 알아보고 발표를 진행하였습니다.
리액트의 모든 코드를 들여다 보는것이 아니라 hook 동작, 렌더링 순서에서 필요한것들, 리액트의 렌더링 방식에서 동작하는 코드들에 대해 리액트 core의 실제 코드를 해석하여 이해하는 방식으로 공부하였습니다.
외국어
영어
일상 회화 가능
일본어
비즈니스 회화 가능
자기소개
문제 해결에 수단과 방법을 가리지않습니다. 오픈소스 프로젝트와 같은 타인의 코드, 다른 회사의 클라이언트 페이지,
인터넷에 펼쳐진 작업일지, 다른 회사 선임개발자 조언 얻기 등과 같은 다양한 정보를 바탕으로 힌트를 얻어 문제를 해결해왔습니다.
클라이언트와 조직내의 상급자, 백엔드 개발자와 직접 소통하며 요구사항을 이해하고 타협하며 개발을 진행했습니다.
독단적인 진행보다는 조직내 협의가 우선이라 생각합니다. 필요하다면 의견을 나누는것에 거리낌없습니다.
웹 개발을 함에 있어 해결 못 할 문제는 없습니다. 시간이 얼마나 걸릴지가 관건입니다.
기술적인 측면과 프로젝트 진행의 현실적인 측면 양쪽 다 신경써서 작업해왔습니다.
코드로 해결할 수 있는 문제는 코드로 해결하되, 결국 가장 중요한 것은 아키텍처라고 생각합니다.