- 장고 기반 웹 페이지에서 nextjs 웹 페이지로 리뉴얼 작업
- next, react-hook-form, react-query, tailwindcss, zustand, radix-ui, typescript, ts-pattern, zod
- Jira, Confluence를 이용한 협업 및 업무 진행
- next-i18next 도입으로 locale 국제화 작업
- Intl용 컴포넌트를 만들어 국제화 및 Rich Text를 간편하게 처리
- Rich-Text-Intl-Message.tsx
- pnpm 및 turbo를 이용한 monorepo 도입을 통한 모듈 분리 및 추가 플랫폼을 빠르게 개발
- 프로젝트 사이즈가 커지면서 분리할 필요성이 생김
- 플랫폼, core, ui, config, i18n, utils, constants 등을 분리하여 개발 진행
- API 상품용 웹뷰어를 모노레포를 통해 단기간에 적은 리소스로 추가 개발할 수 있었음
- 관련 링크드인 포스팅 -> 두 배로 늘어난 프로젝트를 2명의 개발자가 관리하는 방법
- 빌드 및 배포 시스템 개선
- aws cli 기반 script 배포에서 github action을 통한 docker 빌드 및 배포 자동화
- 이후 배포시스템 통합을 위해 현재는 jenkins로 전환
- GPT4를 이용한 평판 요약 정보 기획 및 개발
- 복잡한 formData 관리를 위해 context api와 zustand, react-hook-form을 결합하여 사용
- context api와 zustand를 이용해 provider 내부의 상태를 손쉽게 관리
- react-hook-form을 이용해 제출할 formData를 관리
- context provider, form provider, form 컴포넌트의 분리를 통해 코드관리가 매우 단순해짐
- Context-Provider-Form 패턴
- 이후 평판 질문 데이터를 클라이언트가 아닌 서버에서 관리하여 확장성 및 유지보수에 용이하도록 개발
- 위와 관련해서 블로그 포스팅 -> 서버에서 관리하는 FormData
- Mobile Application의 필요성을 느껴 개인프로젝트로 React Native App 개발 진행
- 초안을 작업하여 앱의 필요성을 알리고 추후에 진행할 수 개발을 있도록 기반을 마련
- Monorepo로 진행하여 core 및 ui 모듈을 분리하여 개발 진행
- 이후 면접봇 프로젝트가 진행되어 모노레포 내에서 추가 프로젝트로 작업을 진행할 수 있도록 보조
프로필
- 2023년 3월 - 재직중SpecterFrontend Developer
- 2019년 11월 - 2022년 12월아티스츠카드Frontend Developer
1. Artists`Card
- 앨범 및 포토카드 등의 굿즈 E-commerce 서비스
- React, Apollo, GraphQL, Mux 사용
- Apollo Client를 이용해 network cache 적극 활용
- GraphQL Generator를 이용해 type을 자동 생성
- Admin 시스템 개발 (상품 등록, 배너, 메뉴, 관리 기능)
- 기획자가 없었고, 개발자가 직접 필요한 기능을 디자인 없이 개발
- 실제 필요한 기능들을 커뮤니케이션을 통해 요구사항을 정리
- 상품 구매 및 판매 기능 추가
- 유저들이 직접 판매를 올릴 수 있도록 셀러 기능 추가
- 실제 구매할 수 있는 상품과 연동되도록 서비스 개발
- URL 기반의 복잡한 필터 기능 검색 개발 -> 링크
- 즉시 배송, 나중 배송 기능 개발
- 저렴한 상품들을 배송비를 절약하여 한번에 받을 수 있도록 나중 배송을 개발팀에서 기획
- 실제로 결제한 상품들의 상태를 관리하고, 추가로 배송비 결제를 통해 배송 상태로 변경
- Payletter 결제 시스템 연동
- 라이브 콘서트 플레이어 개발
- Mux기반 Live Streaming 서비스
- 멀티뷰 화면 (세 개의 화면을 전달받아 화면을 분할하여 3가지 구도로 콘서트 장면을 보여줌)
- 스트리밍을 위한 어드민 서비스 개발 (OBS KEY 연동 및 스트림 상태 제어)
- 실시간 채팅 서비스 개발 (채팅, 좋아요, 유저 밴 기능)
- 이벤트 기획 및 개발 (쇼츠, 럭키드로우, 랜덤팩 등)
- 유튜브 업로드 컨테츠를 이용해 직접 기획하여 유튜브 쇼츠와 같은 쇼츠 서비스 개발
- 개발팀에서 기획한 럭키드로우 기능 개발 (잘 팔리지 않던 재고를 포함한 럭키드로우 포토카드 100% 판매성공)
- 특정 시점에 열릴 수 있도록 어드민에서 이벤트 생성, 시간 설정, 상품 등록, 수정, 삭제 기능 추가
- https://artistscard.com
2. CoverLala & Studio
- SoundCloud와 비슷한 음원 업로드 및 음원 듣기 서비스
- 음원 플레이어 및 라이브 스트리밍 플레이어 개발
- React, GraphQL, HLS.js, Mux (Streaming) 사용
- Mux기반 Radio, Video Streaming 서비스 개발
- 유저 커뮤니티 서비스 개발 (글 업로드, 댓글, 대댓글, 수정 등의 기능)
- 실시간 채팅 서비스 개발
- 반응형 웹 구현 (Mobile, PC)
- Admin 시스템 개발 (아티스트 음원 업로드 및 관리자 기능)
- https://coverlala.com [서비스 종료] -> 관련 기사
3. DMS (Data Management System)
- Data management system 개발 및 유지보수
- React, Graphql 사용
- 앨범, 트랙, 상품 데이터 등의 원본 데이터 생성, 편집, 삭제 기능 개발
- 데이터가 80만개가 넘어, 검색 및 필터링 시스템 추가
- 다중 업데이트를 위한 편집 기능 개발
- 멀티 업로드 기능 개발 (음원, 이미지 등)
- 계정 별 접근 및 사용 권한 별도 부여 기능 개발
- RWX 권한과 비슷하게 4+2+1 조합을 이용해 각 data 별 접근권한을 계정에 부여할 수 있도록 개발