미리보기

백오피스 개발

• 백오피스 스쿼드에서 내부 직원들의 업무 효율화를 위한 기능을 개발하는 프로젝트에 참여하였습니다.

이커머스 플랫폼 개발

• 글로벌 팬을 대상으로 하는 MAU 400만의 K-POP 이커머스 플랫폼에서 새로운 기능을 추가하는 프로젝트에 참여하였습니다.

DX 개선

• 프론트엔드 개발팀의 개발 생산성을 높이기 위한 개발자 경험 개선 프로젝트에 참여하였습니다.

• 기존의 C#으로 개발돼있던 레거시 백오피스 툴은 세금 처리, 배송비 절감 등의 새로운 비즈니스 문제를 풀기에는 적합하지 않은 환경이었기 때문에 React와 GraphQL을 사용한 새로운 프로젝트로 재개발하며 기존 기능의 개선은 물론 새로운 기능을 붙일 수 있게 됨

• 상품 관리 업무의 효율화와 배송비 절감 등의 비즈니스 문제를 풀기 위해 기존에 사용하던 레거시 상품 구조를 새로운 상품 구조로 이관하는 스쿼드에 참여함

• Formik과 MUI를 조합하여 사용하는 방식을 선택하여 거대한 폼의 코드 복잡도를 줄임

• graphql-codegen을 활용하여 잦은 요구 사항 변경에 따른 API 스펙의 변화에도 유연하게 대처함

• 내부 사용자가 백오피스 툴을 잘못 사용하여 발생하는 휴먼 에러를 최소화할 수 있도록 폼의 유효성 검사를 강화하고 유저 플로우를 직관적으로 개선함

• 이커머스 플랫폼을 사용하는 사용자들의 상담원을 통한 직접적인 CS 유입을 줄이기 위하여 채널톡이라는 Saas를 도입하는 프로젝트를 리딩함

• 고객의 정보를 외부 Saas에는 최소한으로 노출하는 것을 목표로 플랫폼과 통합하는 개발을 진행함

• 실제 CS 업무를 담당하는 직원들의 요구 사항을 받아 챗봇을 통해 직접 유입된 CS를 빠르게 처리할 수 있는 별도의 페이지를 개발함

• 결과적으로 직접 유입되는 CS의 양이 약 65퍼센트 정도 감소함

• 기존에는 프론트엔드 팀에서 관리하는 프로젝트가 여럿 있었음에도 불구하고, 프로젝트에 필요한 설정 파일들이 각각 작성돼 있어 프로젝트마다 컨벤션이 조금씩 다른 문제가 발생함

• 또한 중복되는 코드가 많아지고 요구 사항이 변경되었을때 변경 사항을 모든 프로젝트에 일일이 반영하는 것이 개발자 경험을 떨어뜨렸음

• 이러한 문제를 해결하기 위해 흩어져 있던 모놀리식 레포지토리를 모노레포로 통합하는 프로젝트를 진행함

  • ESLint, TypeScript, 테스트 설정 파일 등을 패키지로 분리하여 모노레포 안의 모든 프로젝트들이 이를 공동으로 사용할 수 있도록 함

  • 공통 UI 컴포넌트, 커스텀 훅, 유틸 함수 등 또한 패키지로 분리함

• 기존의 테스트 코드는 일부 기능들에 대해서만 개발이 완료된 이후에 일회성으로 안정성을 점검하기 위한 용도로 사용됐음

• 코드의 안정성을 확보하기 위해 개발하고자 하는 기능에 따라 알맞은 테스트 전략을 선택할 수 있도록 환경을 세팅함

  • 단위 테스트(vitest): 공통 컴포넌트, 커스텀 훅, 유틸 함수 등

  • 시각적 회귀 테스트(storybook): 공통 UI 컴포넌트의 스타일 변경 사항 추적

  • 통합 테스트(vitest): 컴포넌트들이 결합되어 상호작용하는 기능

  • e2e 테스트(playwright): 실제 사용자가 특정 기능을 사용하는 전체적인 프로세스

• GitHub Actions workflow에 테스트를 세팅하여 PR을 merge하기 전에 최소한의 프로덕트 안정성 확보

• Notion API와 Next.js를 사용하여 Notion에서 작성한 글을 HTML로 렌더링하는 기술 블로그를 개발함

• Notion Image Link의 유효기간 이슈를 해결하기 위해 Notion 데이터를 파싱하는 과정에서 Image를 발견하면 supabase에 업로드하도록 함

• 상황에 맞는 Next.js App Router의 렌더링 전략을 사용함

• 건국대학교 프론트엔드 엔지니어가 활동하는 슬랙의 내용을 아카이빙하기 위한 웹 서비스를 개발함

• 슬랙 봇을 사용하여 구성원들이 공유하는 채용공고, 아티클을 supabase에 업로드하고 이를 Next.js에서 불러오도록 함

• '글쓰는 또라이가 세상을 바꾼다'라는 모토를 가진 개발자 글쓰기 모임 글또에서 테크니컬 라이터로 활동하였습니다.

• 모든 글은 개발자 신원세에 기고하였습니다.

• 4명의 팀원들과 함께 프리온보딩 인턴십에 참가한 기업들의 과제를 수행하였습니다.