미리보기

현재 레브잇에서 프론트엔드 개발을 하고 있습니다.

• 비마이프렌즈는 글로벌 팬덤 비즈니스 sass 서비스를 하고 있는 플랫폼이며, commerce domain에서 프론트엔드 개발을 담당하였습니다.

• 입사 전 화사에서는 테스트를 작성하지 않아 테스트를 작성하는 문화를 전파하고 싶었고 그 동안의 경험을 바탕으로 테스트에 대한 세미나를 두차례 진행하였습니다. 그 결과로 사내 디자인시스템 bspoke에 사용하고 있는 공통 컴포넌트 대상으로 단위테스트 작성 및 공통 코어 유틸 함수 단위테스트를 작성하게 되었고, 사내 테스트 문화를 개선시킬 수 있었습니다. 또한, 전체 프로젝트에 공통 테스트 세팅 적용 및 swc를 사용하여 테스트 성능 개선을 하였습니다.

• 사내에서 사용하고 있는 eslint 컨벤션 개선 및 sort import, unused import등을 추가로 도입하여 npm에 배포하여 모든 프로젝트에서 사용하도록 개발 생산성을 향상시켰습니다.

• 각 프로젝트별 husky 및 lint-staged를 사용하여 eslint, stylelint, jest 검증 후 commit이 가능하도록 플로우를 개선하였습니다.

• App Router로 사용한 프로젝트에서 router별 loading, error관련한 처리를 Suspense를 사용한 Concurrent mode 도입하여 선언적인 코드와 UX를 개선 후 세미나를 통해 코드를 공유하여 긍정적인 피드백을 받았습니다.

세미나

• 팀내에 테스트 도입 및 테스트 컨벤션 정의를 위해 두 차례의 사내 세미나를 진행하였습니다.

• Mnet Plus 엔터프라이즈 프로젝트에서 개발한 경험을 바탕으로 Next.js App Router 적용기 및 달라진 점에 대한 세미나를 진행하였습니다.

프로젝트

[Admin] 주문원장(매출내역) 프로젝트 (2023. 04)

• PM 1, PD 1, BE 1, FE 1, QA 1

• 클라이언트 별도 요청 시, customer success 및 ECO에서 건별로 Dev 측 요청하여 대응해주고 있는 상황이었고, 클라이언트가 늘어나는 시점에 사용자가 원할 때 마다 Admin에서 주문원장(매출내역)을 다운로드 받을 수 있도록 지원해주기 위해서 진행하게되었던 프로젝트입니다.

• 앞으로 통화가 추가되거나 PG사가 추가되어도 코드 한줄로만 추가할 수 있도록 구현하여 개발 생산성을 높였습니다.

• 기존에 사용하고 있던 Board 테이블 컴포넌트에 추가적인 기능인 Header column에 대한 부분에 대한 요구사항에 대해서 추가 기능을 구현하였습니다.

[User/Admin] 팝 전용 이용권 프로젝트 Phase 1 / Phase 2 (2023. 04 - 2023. 07)

• PM 2, PD 2, BE 3, FE 3, QA 2

[User/Admin] Global localization 프로젝트 (2023. 08 - 2023. 09)

• PM 1, PD 1, BE 1, FE 1, QA 1

• 글로벌 서비스를 지원하기 위한 사전 localization 작업을 진행였습니다.

• 앞으로 더 넓혀갈 글로벌 서비스 개발을 위해 기존에 파편화 되어있던 다국어 관련 공통화 작업을 진행하였습니다.

• 각 나라 및 도시별 코드를 스크립트를 만들어 스프레드시트에서 가져와 공통화 후 라이브러리화 시켜 개발 생산성을 향상시켰습니다.

• 앞으로 지원할 통화 추가로 인한 중복 작업을 없애도록 DRY원칙을 지킬 수 있도록 코드 리팩터링 작업을 진행하였습니다.

[User/Admin] Japan localization 프로젝트 (2023. 09 - 2023. 10)

• PM 1, PD 1, BE 2, FE 1, QA 1

• 비스테이지, 일본으로 팬덤 비즈니스 전파..."현지 맞춤 팬덤 비즈니스로 성과 입증"

• 일본 글로벌 진출을 위해 PG 엔화 통화 설정 추가, 일본 국내 배송 지원 및 일본어 지원을 하기 위한 프로젝트였습니다.

• 파편화 되어있던 배송 관련 코드를 공통화하는 리팩터링을 진행하였습니다.

• 샵 개설부터 통화 설정, 배송, 결제, 주문까지의 전반적인 결제관련 플로우에 대한 커머스에 대한 도메인을 이해할 수 있게 되었습니다.

• ex) flank japan stage

[User/Admin] 현장수령 프로젝트 (2023. 11 - 2023. 12)

• PM 2, PD 2, BE 2, FE 3, QA 2

• 줄서기 없이 굿즈를 내 손에! ‘비스테이지 현장수령’

• 오프라인에서 콘서트/행사시 기다리는 시간을 최소화하고 QR코드로 인증 후 현장에서 빠르게 수령할 수 있도록 해주기 위해 개발된 프로젝트였습니다.

• 현장수령기능을 사용하여 2023 T1 CON 및 여러 콘서트에서 이슈없이 성공적으로 행사가 마무리될 수 있었습니다.

• 기술적으로 어려웠던 점은 QR코드 입장권을 이미지로 저장해야하는 기능이 있었는데, 사용한 라이브러리가 모든 브라우저와 디바이스에서 정상적으로 동작하지않아 스타일이 깨지는 경우가 많았습니다. 이 과정에서 스타일을 하나씩 찾아가며 수정해나가는 과정과 문제가 발생하는 라이브러리 대체 및 github issue에 질문 등을 통해서 해당 이슈를 해결할 수 있었습니다.

[Admin] Mnet plus enterprise TF (2023. 12 - 2023. 02)

• PM 3, PD 2, BE 6, FE 3, AND 2, IOS 2, QA 2

• 기존에 타 서비스에서 제공하고 있던 mnet plus를 bstage의 엔터프라이즈 형태로 mnet plus v2.0으로 전부 마이그레이션했던 프로젝트였습니다. 그 중 새롭게 엔터프라이즈 형태로 제공되어야하는 어드민 서비스가 따로 필요했고, 처음부터 어드민을 개발하는 작업을 담당하게 되었습니다.

• 프로젝트 초기 세팅 작업부터 개발하였고, Next.js App Router를 도입하였습니다.

• 기존에 사용중이던 내부 디자인시스템 App Router 사용으로 인해 마이그레이션 진행 및 공통으로 사용할 신규 컴포넌트 디자인 시스템 반영하였습니다.

• client side에서 제공해주던 다국어 파일을 server side에서 제공하여 화면깜빡임 및 불필요한 호출을 없애도록 개선하였고, 쿠키로 관리해주던 다국어를 path(/ko, /en)로 관리해주도록 개선하였습니다.

• 버전이 오래된 다국어 스크립트를 마이그레이션하였습니다.

• Page router형식으로 사용중인 내부 fetch 라이브러리를 App router에서 사용가능하도록 fetch v2로 신규 fetch 기능 개발하였습니다.

• ex) mnet stage: zerobaseone bstage

[User/Admin] Eximbay 일본결제대응 (2024. 03)

• PM 1, PD 1, BE 1, FE 1, QA 1

• 고객사의 요청으로 PG사 Eximbay에 일본 결제를 추가로 대응하기위한 프로젝트였습니다.

• 일본 결제 추가로 카드 결제 및 콘비니(편의점) 결제를 위한 PG사 대응 작업을 진행하였습니다.

[User] 디지털 멤버십 카드 프로젝트 (2024. 03 - 2024. 04)

• PM 2, PD 2, BE 1, FE 3, QA 2

• 사용자(팬)가 멤버십을 구매했을때 디지털 멤버십 카드를 얻어 고객의 만족과 더 구입을 위해서 진행했던 프로젝트였습니다.

• 멤버십 카드는 어드민에서 고객사가 직접 모든 커스텀이 가능하도록 구현하기 위해 design schema로 데이터를 관리하여 구현하였으며, 어드민/유저의 두 프로젝트에서 사용하기 위해서 멤버십 카드를 공통으로 컴포넌트화하여 작업하였습니다.

주요 사용 기술: react, zustand, react-query, next.js, typeScript, sass, jest, react-hook-form, yarn berry, gitlab

kasa.co.kr (2021. 12. ~ 2022. 11)

• PO 1, PD 1, BE 1, FE 1, QA 1

• [회고] 주니어 프론트엔드 개발자의 좌충우돌 웹 거래소 런칭기

• 카사 코리아 웹 거래소의 프론트엔드 메인 개발자로 담당하였습니다.

• 프로젝트 초기 세팅부터 개발을 진행해왔으며, 베타 서비스 오픈 및 v1.0 서비스 오픈하였습니다. (4월 베타 서비스 오픈 / 11월 v1.0 서비스 오픈)

• 웹 거래소(WTS)에 주요 기능의 전반적인 프론트엔드 개발을 담당하였습니다.

  • 사용자들의 거래를 위한 차트 구현, 호가창, 실시간 및 일별 거래내역을 구현하였고 전반적인 트레이딩뷰와 관련된 부분을 개발하였습니다.

  • 주문 및 매수, 매도등 전반적인 주문 플로우 개발을 담당하였습니다.

  • 로그인, 회원가입과 관련한 Oauth(카카오) 인증 토큰 관리와 휴대폰 인증에 대한 회원 인증 플로우을 구현하였습니다.

  • My Page와 자산 페이지, 예치금과 관련한 부분을 개발하였습니다.

• Yarn berry의 PnP 및 zero install 사용으로 의존성 검증과 관리의 향상과 CI 단계에서 의존성 설치하는 시간을 감소(Install 시간 30초)시킬 수 있었습니다. (Yarn berry 세팅 내용 정리)

• CI 단계에서 5가지의 검증을 수행하는 과정에서 불필요하게 중복으로 발생되는 Install과 Build시 캐시를 적용해 CI시간을 감소시켜 개발 생산성을 향상시켰습니다. (Install 약 17초, Build 약 1분 소요) 또한, main 브랜치와 비교하여 수정된 부분만 테스트 및 Lint를 검증하도록 개선하였습니다. (hot-fix PR인 경우에는 테스트는 약 11초, Lint 검증은 약 7초 소요)

• Next.js에서 babel을 compiler SWC로 변경 후 빌드 속도 개선(약 40초 감소) 및 React 18 release에 따른 React 18로 마이그레이션 작업을 진행하였습니다.

• 기존에 사용중이던 react-query v4가 릴리즈됨에 따라서 마이그레이션을 진행하였습니다.

• 에러 트레킹을 위해 production 환경에서 sentry를 적용 후 발생하는 이슈들을 지속적으로 개선하였습니다.

• 중복되어 사용되는 코드를 유틸리티 함수 및 custom hook을 구현하여 DRY(Don't Repeat Yourself)원칙을 지키려고 노력하였으며 재사용성 향상을 위해 합성 컴포넌트 사용 및 추상화시킨 공통 컴포넌트를 구현하여 사용했습니다.

• TDD(Test Driven Development)를 통해 테스트를 작성하여 요구 사항 변경 시 코드 리팩터링을 안심하고 진행할 수 있었으며, 테스트가 설계에 포함되어 단일 책임 원칙을 지키는 구조로 코드를 작성할 수 있었습니다.

• 스토리북을 사용하여 공통으로 사용되는 컴포넌트, typography, color 등 디자인 시스템을 정의하여 시각적으로 확인 할 수 있는 문서를 통해 디자이너와 소통에 더 원활하게 진행할 수 있었습니다.

• 사용자 경험을 향상시키기 위해 로딩 스켈레톤 적용 및 모달 애니메이션을 주도적으로 개선하였습니다.

• Lighthouse를 사용하여 웹페이지 품질을 측정 후 얻은 피드백 반영하여 퍼포먼스 향상 및 웹 접근성을 개선하였습니다.

• CI 단계에서 lint 검증, unit & e2e test 검증, UI test(storybook), bundle size를 검증을 하였습니다.

• 아쉬웠던 점

  • 단위 테스트 작성 시 API를 호출하는 react-query hook을 jest mocking을 통하여 검증하였는데, MSW를 도입하여 API 함수를 mocking 할 준비 작업없이 테스트를 작성하도록 리팩터링을 진행하지 못해서 아쉬웠습니다.

  • 신규 피쳐 및 빠르게 MVP 구현에 치중하였고 데브옵스 및 백엔드의 의존성이 존재하여 많은 양의 E2E 테스트를 작성하지 못한 점이 아쉬웠고 앞으로 지속해서 개선해야 할 점이라고 생각하였습니다.

  • 현재 분기 처리하여 로딩 상태관리 및 에러를 관리하고 있는데 React Suspense를 사용하여 concurrent mode 도입을 하지 못한 점이 아쉬웠습니다. react-query를 사용하여 API를 호출하고 있는 부분과 해당 컴포넌트를 점진적으로 concurrent mode를 도입할 예정입니다.

  • 프로젝트를 진행해오면서 점점 테스트 커버리지를 지표 그 자체로 보기보단, 특정 수치로 목표를 잡고 개발했던 점이 아쉬웠습니다.

• 2022년 10월 31일 기준: Test Coverage 100% (Test Suites: 397, Tests: 1,460)

주요 사용 기술: react, recoil, react-query, next.js, typeScript, emotion, chart.js, d3.js, jest, cypress, yarn berry, storybook, husky, Github Action, sentry

Operation Center

• 내부 운영 시스템으로 시스템 점검, 수익자 총회, 웹 거래내역 개발을 했습니다.

• 기존에 중복적으로 사용되는 로직을 유틸리티 함수로 분리해 재사용하도록 리팩터링을 진행하였습니다.

• 기존에 테스트가 없는 레거시 코드에 그대로 로직을 따라가며 테스트 코드를 작성하기에는 무리가 있다고 판단하여 유틸리티 함수와 사이드 이펙트가 발생하는 API를 호출하는 부분에 테스트 코드를 점진적으로 작성하였습니다.

주요 사용 기술: vue 2, vuetify, vuex, jest, typeScript, axios, Github Action

brand site

• 기존에 테스트 코드가 없던 레거시 코드들을 테스트 환경 구축 및 테스트코드 작성과 리팩터링을 진행하였습니다. (코드 커버리지 0%에서 약 76.77% 달성)

• 브랜드 사이트의 이벤트 페이지를 구현하였습니다.

주요 사용 기술: react, next.js, typeScript, emotion, axios, firebase, jest, react-testing-library, yarn berry, Github Action

• 관세청의 통관업무 체계개편을 위한 시스템 개선 정보화 사업 프로젝트를 진행하였으며, 신규 관리자 모니터링 개발 및 P/L(PaperLess) 부서 신규 화면 담당하여 성공적으로 프로젝트를 마무리했습니다.

• 신입 개발자로 입사하였지만, 개발 업무에 많은 담당을 했을 뿐만 아니라 Git을 통한 협업을 위해 신규 메뉴얼을 작성하게 되었습니다.

주요 사용 기술: Spring Framework, Oracle SQL, Java, JQuery, JavaScript(ES3)

Github Repository: https://github.com/DNDACADEMY/dnd-academy-v2

URL: https://dnd.ac/

2024.03 ~ 06.

• 기존에 레거시 코드인 vue.js로 구현되어있는 홈페이지를 Next.js로 마이그레이션하였습니다.

• 브랜딩 홈페이지 특성상 잘 변하지 않아 Next.js generateStaticParams을 사용하여 ISR로 구현하였습니다.

• aws의 비용 이슈로 인해 image를 제외한 JSON 정적 데이터를 S3에서 제거하였고, 로컬에 저장 및 vercel의 blob storage를 사용하였습니다.

• turborepo를 사용하여 모노레포를 구축하였고, admin, web에서 두 곳에서 사용하기 위해서 공통 ui 패키지를 적용하여 컴포넌트, 스타일 및 hook를 공통하여 프로젝트를 구성하였습니다.

주요 사용 기술: react, next.js, typeScript, sass, jest, react-testing-library turborepo, storybook, vercel

Github Repository: https://github.com/mbti-nf-team/birth-tunes-frontend

URL: https://birth-tunes.nfteam.dev/

팀원: 사승민(Front-end Developer), 주세영(Product Designer), 박은정(Back-end Developer)

2023.

• 내 생일 국내 1위 노래를 찾기위한 서비스로 하루만에 서비스를 만들었던 좋은 기억이 있던 프로젝트였습니다.

Github Repository: https://github.com/mbti-nf-team/offbeat-frontend

URL: offbeat.place

팀원: 사승민(Front-end Developer), 주세영(Product Designer), 박은정(Back-end Developer)

• 전세계의 로컬 맛집 K-장소를 찾기 위한 서비스로 현재 개발 진행중입니다.

• google map api와 naver search api를 사용하여 api의 사용법 및 성능, 비용에 최적화시키는 방법도 고민해본 프로젝트였습니다.

• App router의 parallel, Intercepting routes 기능을 활용하여 URL에 직접 접근과 path 이동에 따른 접근에 따라 bottom sheet 및 페이지 이동을 분리하여 보여주도록 구현하였습니다.

주요 사용 기술: react, zustand, react-query, next.js, typeScript, sass, jest, react-testing-library, google maps api, storybook, vercel

Github Repository: https://github.com/mbti-nf-team/soople

URL: soople.io

팀원: 사승민(Front-end Developer), 주세영(Product Designer)

2021. 12. ~ (진행중)

• 기존에 개인 프로젝트로 진행했던 스터디 모집 사이트(ConStu)를 version 2로 디자이너와 함께 사이드 프로젝트로 개발하고 있습니다.

• 기존에 redux-toolkit으로 상태관리가 이뤄지던 전역 상태 관리를 recoil과 react-query로 마이그레이션을 진행하였습니다. (Github Issue)

• Next.js에서 babel을 compiler SWC로 변경 및 React 18 release에 따른 React 18로 마이그레이션 작업을 진행하였습니다. (Github Issue)

• Storybook을 사용하여 디자이너와 함께 soople 서비스에서 사용중인 디자인 시스템을 적용하였습니다. (storybook)

• CI 단계에서 Install과 build시 캐시를 적용하였고, lint 검증, unit & e2e test 검증, UI test(storybook), bundle size를 검증과 lighthouse로 성능을 측정하였습니다. (ci.yml)

• 기존에 사용중이던 react-query v4가 릴리즈됨에 따라서 마이그레이션을 진행하였습니다. (Github Pull Request)

• React Suspense를 사용하여 API가 호출되는 컴포넌트를 Concurrent Mode를 적용해 불필요한 분기 처리와 테스트를 제거하였고 리팩터링을 진행하였습니다. (Github Issue)

• 기존에 불필요하게 모든 부분에서 toast 메시지로 에러를 처리하던 부분을 ErrorBoundary를 사용하여 선언적이게 에러를 처리하도록 리팩터링하였습니다.

• 앞으로 개선할 점이나 아쉬웠던 점

  • firebase auth의 의존성으로 인해서 E2E 테스트를 작성하지 못해서 아쉬움이 남는데 지속해서 해결 방법을 찾고 있습니다.

주요 사용 기술: react, recoil, react-query, next.js, typeScript, emotion, jest, react-testing-library, firebase, storybook, vercel

Github: https://github.com/CodeSoom/ConStu

URL: https://sweet-1cfff.firebaseapp.com

• 코드숨 2기에서 진행된 개인 프로젝트로 혼자서 공부할 당시에 혼자 하기에는 벅찬 부분이 있어서 스터디를 모집하는 사이트를 찾다가 활성화되어있는 사이트가 없었고, '스터디를 모집할 수 있는 사이트를 한 번 만들어보는 건 어떨까?'라는 계기로 주제를 선정 후 시작한 프로젝트입니다.

• TDD 사이클에 맞춰 개발하였으며 테스트를 작성하여 리팩토링 시 이점을 명확하게 알게 된 계기가 되었습니다.

• Firebase의 사용법을 익히기 위해 많은 고민을 하게 되었고 firebase를 사용한 백앤드 구현을 할 수 있을 뿐만 아니라 겪었던 고민을 블로그에 작성할 수 있게 되었습니다.

• Github Action을 사용하여 CI/CD를 해봄으로써 지속적인 배포, 통합이 피드백을 얻는 데 있어서 많은 이점이 있는지를 일깨워 준 프로젝트였습니다.

• 이 프로젝트를 통해 TDD 사이클을 토대로 테스트를 작성하는 법에 조금은 익숙해질 수 있게 되었으며, 이를 통해 기간 내에 230개 정도의 테스트 케이스를 작성하였고 코드 커버리지는 96% 정도를 유지할 수 있었습니다. 또한, E2E 테스트를 작성하는 방법을 알게 되었습니다.

주요 사용 기술: React, Redux-toolkit, JavaScript, Firebase, jest, Github Action, CodeceptJS

SIPE 3기 운영진

2024. 07. ~ (진행중)

현직 개발자들과 함께 경험을 쌓으며 성장하는 IT 커뮤니티 SIPE에서 3기 부회장으로 행사를 기획하고 운영을 준비중에 있습니다.

SIPE 2기

2024.03. ~ 2024. 07

• [회고] IT 커뮤니티 동아리 SIPE 2기를 마무리하며...

• 현직 개발자들과 함께 경험을 쌓으며 성장하는 IT 커뮤니티 SIPE에서 2기로 참여하였습니다.

• 1차 미션으로 rustlings를 바탕으로 러스트의 기본적인 동작 원리와 문법에 대한 부분들을 학습하였고, 1차 미션에서 1등으로 마무리하였습니다.

  • https://github.com/sipe-team/2-1_rust

• 2차 미션으로는 rust를 더 깊게 활용해보고 이해해보고 싶어서 rustlings의 mini grep 만들기를 진행했습니다.

• SIPE에서 1박 2일동안 해커톤을 진행했었고, 코인과 관련된 전략 테스트 결과 Dashboard 제공해주어 더 나아가 낙폭 과대에 따른 시세차익을 내기 위한 주제로 진행하였습니다.

  • https://github.com/sipe-team/sipethon-2_2

  • 디자이너가 없는 프로젝트로 진행했었고, vercel의 v0.dev를 활용하여 UI를 작업했으며, 빠른시간에 결과물을 내야하는 해커톤이였기 때문에 @next/ui를 사용하여 컴포넌트를 구성하였습니다.

  • 주요 사용 기술: @nextui, tailwind css, next.js, lightweight-charts

• IT 현직자들과 함께하는 네트워크 행사에 운영진 TF으로 참여해 행사 운영에 함께 참여하였습니다.

DND 운영진

2023.06. ~ ing

• 사이드 프로젝트 커뮤니티 동아리에서 개발 담당 운영진을 맡고 있습니다.

• DND 9, 10기 프론트엔드 개발 담당 운영진 활동하였으며, 각 기수 8주간 멘토링, 코드리뷰, 세미나를 진행했습니다.

• 오프라인 행사 운영 기획를 맡아 진행하고 있으며, 현재는 11기 개발 담당 운영진을 맡아 활동하고 있습니다.

• DND 홈페이지 개선 작업 및 프론트엔드 담당 개발을 하고 있습니다.

  • 기존에 레거시 코드인 vue.js로 구현되어있는 홈페이지를 Next.js로 마이그레이션하였습니다.

  • 현재는 홈페이지 업데이트 자동화를 위해 어드민 페이지를 개발중에 있습니다.

2024.03. ~ 2024.05.

• 2024.05.17 ~ 2024.05.18에 DND에서 주최하는 해커톤을 운영하였습니다.

DND 7기

2022.07.03 ~ 2022. 08. 28.

• 현업과 병행하며 다른 직군과 사이드 프로젝트를 해보고 싶어서 신청하게 되었습니다.

• DND(Developer and Designer) IT커뮤니티에서 진행한 7기 3조 팀장으로 활동하였습니다.

• 8주의 기간 동안 현업자인 팀원들과 함께 프로젝트를 진행하면서 결과에 집착하기보단 과정에서 재미있게 하는 모토로 진행하였습니다.

• 여러 가지 사정으로 인해 결과물을 못 만들어서 아쉬웠지만, 그 과정에 있어서는 여느 팀보다 가장 즐겁게 해서 짧지만 커뮤니케이션 및 팀장으로서의 책임감을 느낄 수 있어서 의미 있던 활동이었습니다.

우아한 테크러닝 3기

2020. 09.

• 우아한 형제들에서 주최한 React와 TypeScript 기반의 웹앱 개발 교육

• JavaScript의 커링, 클로저, 값, 프로미스 등에 대해서 자세히 알 수 있던 계기가 되었습니다.

• 구현에 의존해 사용만 하던 리액트와 리덕스를 직접 JavaScript로 구현해 봄으로써 어떻게 동작이 되는지와 이를 통해 흐름을 알 수 있게 되었습니다.