미리보기
기본 정보
- 작업에 대해서 투명하게 공유하는 것을 좋아하고 문서화를 통해 기록하는 것을 중요시합니다 - 사용자의 경험을 중요시 하며 UI/UX와 DX에 대해서 이야기하고 개선해 나가는 것을 좋아합니다 - 문제에 대해서 함께 이야기하고 해결해나가는 과정을 좋아합니다 - 배운내용을 공유하여 함께 성장하는 것을 좋아해서 블로그를 운영하고있습니다
기술 스택
JavaScript, HTML/CSS, React, TypeScript, Next.js, Gatsby, zustand, react-query
경력
피에로컴퍼니
Frontend Developer | 프로덕트 | 재직 중
2023.10. ~ 재직 중 (1년 3개월)
폰고는 리퍼비시 기기들을 렌탈하는 서비스를 제공하고 있습니다
장고 기반에서 프론트엔드와 백엔드 분리를 주도로 개발하고 있습니다.
시작 단계에서 부터 참여하여 기획/디자인에 참여하여 의견을 제시하여 유저에 좋은 경험을 줄 수 있도록 기여하였습니다.
전반적인 프론트작업 뿐만이 아니라 백엔드, 이슈 문서화, 슬랙 알림 봇등을 만들어 팀원들에게 도움이 되고 함께 성장하고 협업 가능한 환경을 만들기 위해 노력했습니다.
프로젝트
프론트엔드 리빌딩
피에로컴퍼니
2023.11. ~ 진행 중
장고로 되어있는 서비스를 리액트를 기반으로 마이그레이션 작업을 진행합니다.
프론트는 혼자서 주도적으로 모든 환경을 구축하였습니다.
프론트, 백엔드, 데브옵스 모두 작업을 진행하고 주력으로는 프론트엔드를 개발하였습니다.
사용 기술TypeScript
React
Nextjs
styled-components
zustand
Pandacss
Tanstack-query
jest
react-testing-library
Django
Python
EKS
argoCD
helm
프론트 로드맵 수립
단기전략
장고 템플릿 기반 서비스를 리액트로 전환하는 단계적 전환 주도
미납 관리,마이 페이지를 시작으로 핵심 페이지 마이그레이션 완료
부분적으로 빠르게 적용하여 유지보수성,성능, 즉각적인 UX 개선
장기전략
새로운 프로젝트로 NextJS로 전환하여 장고 환경 분리와 서비스 개선
어드민 시스템 개선
모노레포를 통해 통합적으로 서비스/패키지 관리
서버 문제 개선
API 설계 주도로 불필요한 API 30% 감소, 프론트 로직 간소화
기존 API 문제점 발견하여 문서화 후 해결 방안 PR과 작업내용 공유
팀원들이 겪고있는 문제에 대한 현재의 문제점, 해결방안, 앞으로 방향 문서화 공유
신용인증 시 필요한 정보를 계속해서 API마다 프론트에서 보내고 있던 부분을 보안 향상을 위해 1개의 API로 통합하여 작업할 수 있도록 개선 제안
장고에서 리액트 파일을 서빙하기 위해 CI/CD 작업 중 Docker Image에서 빌드된 리액트 정적 파일을 S3에 업로드 될 수 있도록 자동화
디자인 시스템 개발
aria태그와 키보드 지원하여 접근성 향상
overlay되는 요소들의 위계 정의하여 시각적 및 사용성 향상
PR에 코멘트를 트리거하여 원하는 시점에만 스토리북 s3에 배포
Slot를 이용하여 컴포넌트의 기능과 디자인을 다른 컴포넌트로 삽입하여 재사용성 극대화
Tab 컴포넌트 value, onValueChange를 통해 외부에서 컨트롤 할 수 있도록 기능 확장
기존 컴포넌트를 직접 개발 부담을 줄이기 위해 headless 기반 UI를 바탕으로 마이그레이션 재구성 예정
FSD 아키텍처 적용
FSD아키텍처를 적용하여 모듈화와 유지보수성을 강화하고, 기능 단위로 독립적인 개발 환경 제공
아키텍처를 표준화하여 가독성 향상
모노레포 환경 구성
pnpm-workspace를 이용한 모노레포 환경 구축
pnpm-filter와 jq를 이용하여 변경된 패키지를 추출하고 연관된 서비스만 추출하여 matrix로 병렬적으로 빌드 하여 배포
서비스별 Dockerfile 생성하여 빌드 이후 ECR에 업로드
개별적 배포와, 변경된 모든 서비스 배포 github workflow 제작
EKS환경에서 ArgoCD workflow를 작성하여 배포자동화
EKS환경에서 ArgoCD PR generator를 이용하여 PR에 달린 서비스명 태그 preview 기능 제작
SEO 최적화
SPA환경에서
react-helmet
, prerender.io 서비스를 이용하여 임시적으로 적용하고 서비스에 크롤러 접근 시 prerender.io로 향하게 하여 동적으로 변경된 값을 얻을 수 있게 적용하였습니다.
코드 리팩토링 재사용성 향상
추가 기능으로 인한 중복 코드를 제거하고, 동일한 동작을 하는 부분을 컴포넌트로 분리하여 재사용성을 높였습니다. 추가 작업은 props로 전달받아 실행하는 구조로 변경하여 확장성을 확보하였습니다.
확장성을 고려한 컴포넌트 기반 아키텍처 설계 중복된 기능에 쉽게 추가할 수 있도록 컴포넌트 기반의 구조를 설계하고 개발하여 유지보수성과 확장성을 향상시켰습니다.
보안을 위한 쿼리 파라미터 암호화 적용 특정 값을 쿼리 파라미터로 받아 동작하도록 변경하였으며, 쿼리 파라미터의 변경 가능성에 따른 보안 이슈를 해결하기 위해 암호화를 적용하였습니다.
문서화 작업
프론트엔드 구조, 툴, 컨벤션, 이슈 내용, 백로그 등 문서화하여
작업 내용을 쉽게 추적하고 접근할 수 있으며 서비스에 대해 파악하기 쉽도록 개선로컬에서 github workflow 테스트하는 방법 문서화 하여 공유
특정 기능에 대한 시퀀스 다이어 그램 등을 작성하여 기능에 대한 전체적인 흐름을 파악할 수 있도록 노력
EKS 환경으로 넘어가면서 EKS를 적용하는데 같이 사용한
helm
,argoCD
k8s
에 대해서 간단한 설명과 프론트엔드 배포/preview 환경 설명 문서 작성
스타일링 라이브러리 선정
Nextjs App router를 대응하기 위하여 기존 styled-components대체하기 위해 tailwindcss
stylex
vanila-extract
pandacss
중 PoC를 진행하여 기존 DX를 사용할 수 있고 디자인 토큰, 확장 가능한 기능들의 장점으로 pandacss 선정 적용 후 평균 번들 크기 8% 감소
서비스 개선
UI/UX 개선을 위해 기존 서비스에서 불필요한 부분과 필요한 기능에 대해 의견을 피력하여 개선하였습니다
페이지로만 계속해서 넘겨지는 부분들을 바텀시트나 모달을 통해서 페이지 이동없이 한 곳에서 동작할 수 있도록 변경하였습니다.
너무 많은 설명과 단계로 인한 유저의 피로감을 고려하여 상세한 설명과 체크후 이동 최소화하였습니다.
인터렉션이나 마우스 호버 이벤트등이 없어 유저가 느끼는 사용감이 부족할 수 있기에 반응성 추가 작업을 하였습니다.
AWS 최적화를 진행하였습니다
기존 AWS S3 비용이 많이 청구되어 CDN 적용을 통해 비용 최적화와 로딩 속도를 높였습니다.
마이 페이지 개선
피에로컴퍼니
2024.07. ~ 2024.08.
기존 마이페이지를 리액트로 변경하며 제공되지 않던 기능들을 파악하고 제공될 수 있도록 수정과 유저의 사용성을 향상 시키기위한 작업입니다
사용기술
Django
Python
Typescript
React
Pandacss
Vite
html2pdf
마이페이지 개선
결제 방식에 따라 결제 정보가 보이지 않는 경우가 있어 변경을 권장하도록 유도와 변경 시스템 구축
유저가 계약서를 다운로드 할 수 있도록 기능 제공
마이페이지에서 유저가 확인해야할 렌탈 정보, 미납 정보, 결제 정보 제공
계약서 템플릿
html2pdf 라이브러리를 이용하여 템플릿을 다운로드 할 수 있도록 하였습니다.
useImperativeHandle를 이용하여 서명 추출, pdf다운로드 매서드를 제공하여 계약서 서명과, 계약서 조회에서 사용할 수 있도록 기능 제공하였습니다
미납 관리 프로젝트
피에로컴퍼니
2024.07. ~ 2024.07.
미납을 하고 계시는 분들이 많아 미납의 현황을 볼 수 있으며 고객이 직접 원하는 미납금액을 납부할 수 있는 기능 제공하자고 제안하여 시작한 프로젝트입니다.
고객은 렌탈한 상품에 대한 미납금의 상태를 볼 수 있고 미납금을 분할/일시 납부할 수 있는 기능을 제공합니다.
사용 기술
Django
, React
, Vite
, Pandacss
, Axios
장고 사용
미납 관리 페이지를 리액트로 빌드하고 장고에서 서빙하도록 하여 개발기간 단축
미납금 수취율 0% -> 26% 증가
장고에서 정적 파일 서빙을 위한 vite 설정과 장고 collectstatic 정적 파일 배포 자동화
페이플 링크 결제 확인 시스템
결제 시스템 플로우 설계
hook으로 분리하여 결제 상태, 링크생성 매서드 제공하여 재사용성 향상
팝업을 띄어 결제를 하는 방식인데 모바일 팝업 차단으로 인하여 팝업을 비동기로 실행하여 모바일 환경 대응
쿠키 에러
www, non-www 모두 서비스 접근이 가능하고 로그인 세션 쿠키의 도메인은 접속한 도메인에 따라 발급되어 생기는 이슈 문서화 후 해결방안 공유
AWS ALB 수정하여 모두 non-www 연결되도록 수정
FIgma Plugin
피에로컴퍼니
2023.11. ~ 2023.11.
React에서 아이콘을 사용하기 위해 svg 컴포넌트를 아이콘이 추가 될 때 마다 작성해주어야해서 자동화를 하기 위해 figma plugin을 만들게 되었습니다.
사용 기술Figma API
Github API
Figma Public Plugin 배포 현재까지 사용 인원 2700명
아이콘 생성 작업 시간 단축
아이콘의 관리 측면과 커질수록 JSON 파일 크기 증가로 추후엔 라이브러리나 시스템 개선이 필요
포트폴리오
교육
우아한 테크코스
사설 교육 | 프리코스
2022.11. ~ 2022.12. | 졸업
엘리스
사설 교육 | 엘리스AI트랙
2022.06. ~ 2022.12. | 졸업
오산대학교
대학교(전문학사) | 자동차과
2017.02. ~ 2020.12. | 졸업