목차

• 😄 프론트엔드 개발자 양승찬입니다.

• 📝 개발 경력

  • 매드업

    • 개발 환경 개선을 위한 프론트엔드 모노레포 마이그레이션
    • 공통 디자인 시스템 개발
    • 아이콘 에셋 라이브러리 개발
    • 마이크로프론트엔드 웹 어플리케이션 개발

• 🗂️ 프로젝트

  • 개발 블로그
  • 먹팟

• 🎓 교육

  • 성균관대학교
  • 네이버 커넥트재단 부스트캠프

😄 프론트엔드 개발자 양승찬입니다.

• “무엇이 더 나은 서비스 사용 경험을 이끌어낼까?“ 라는 질문에 대해 함께 고민해보고 이를 기술적 요소로 구현해내며 사용자 중심의 서비스로 발전 시키는 것을 선호합니다.
• “보다 나은 개발자 경험은 서비스의 사용자 경험 향상에도 기여한다“ 라는 믿음을 가지고 조직 내에서 보다 생산적인 개발 환경이 조성되도록 기여해왔습니다.
• 개발하면서 겪은 문제 상황에 대한 고민과 이를 풀어가는 과정을 기록하며 임팩트 있는 개발 경험들을 공유할 수 있도록 블로그 활동을 지속하고 있습니다.

📝 개발 경력

매드업

디지털 마케팅 자동화 솔루션 Lever Xpert 프론트엔드 개발

Integration Engineering Team, Frontend Developer (2023.09 ~ ing)

개발 환경 개선을 위한 프론트엔드 모노레포 마이그레이션

webpack swc pnpm turborepo github actions

• 기존의 환경에서는 공통 모듈들을 관리하기 위해 패키지를 제작하면 환경 구성이 까다롭고, 반복되는 빌드 시간 소요로 인하여 비효율적인 요소가 반복되었습니다. 이를 해소하고자 Turborepo 기반의 모노레포로 마이그레이션 했습니다.
  • 패키지 환경 구성 시간을 최소화 하고자 코드 제너레이터를 CLI 형태로 사용할 수 있게 제작하여 누구나 3초 내외로 손쉽게 패키지 개발 및 배포 환경 구성을 완료할 수 있도록 하였습니다.
  • Turbo cache을 통해 내부 패키지들의 반복적인 빌드 시간을 최소화하여 어플리케이션 전체 개발 서버 구축 시간을 최소 5초 이내로 단축시켜 개발 생산성 향상에 기여했습니다.
  • github actions 환경에서의 빌드, 타입 체크 및 테스트 과정 시의 소요시간을 Turbo cache를 이용해 최소화 하여 1분 내외로 전체 모노레포 코드의 지속적인 통합이 가능하게 했습니다.
• 결과적으로 10개의 내부 공통 패키지를 기반으로 4개의 어플리케이션을 통합하는 모노레포를 구성하여 안정적인 마이크로 프론트엔드 환경을 운영할 수 있도록 하였습니다.

공통 디자인 시스템 개발

vite vitest storybook vanilla extract radix primitive changeset chromatic

• 기존 styled components를 이용한 스타일링은 런타임 인젝션으로 인한 오버헤드와 타입 안정하지 못한 css 코드를 작성해야하는 등 여러 문제점들이 있었고 이를 해소하고자 팀원들을 설득해 vanilla extract을 활용하는 스타일링 방식으로 개편하였습니다.
• 원시 컴포넌트를 기반으로 높은 확장성과 생산성을 가지는 디자인 시스템을 구성했습니다.
  • sprinkles 모듈을 기반으로한 atomic css 기법을 적용하여 css 코드의 중복은 최소화 하면서도 스타일링 로직을 인라인 형태로 빠르게 작성할 수 있도록 하였습니다.
  • 다형성 컴포넌트 패턴을 적용하여 같은 스타일링을 여러 태그에서도 사용할 수 있게 했습니다. 이러한 요소들을 Box라는 원시 컴포넌트로 추상화하여 높은 재사용성을 보장하고 다른 고차원의 컴포넌트 제작에도 쉽게 활용되도록 하였습니다.
• 디자인시스템의 규모가 커짐에 따라 사용하는 어플리케이션 번들사이즈가 불필요하게 커지는 문제가 발생했습니다. 이를 해결해보고자 디자인 시스템이 사용하는 컴포넌트만 import 될 수 있게 만들었습니다.
  • vite 내부 rollup option을 설정해 모듈구조를 유지하며 빌드될 수 있도록 하였습니다. 또한 번들러가 모듈 구조 분석을 보다 잘 할 수 잇도록 sideEffect와 순환 import를 하는 코드들은 제거하였습니다.
  • 이를 통해 treeshaking 되는 라이브러리로 만들어내면서 사용되는 코드만 import 되도록 하였습니다.
• actions와 chromatic 을 이용해 PR 마다 storybook을 자동으로 배포 및 공유하도록 workflow를 구성하여 컴포넌트에 대한 개발자의 리뷰 경험을 향상시키는데 기여했습니다.
• changeset과 actions 이용해 패키지의 버전 범프 및 릴리즈 작업을 workflow로 자동화 하여 패키지 버전 관리 과정의 복잡성을 간소화 시켰습니다.
• 다양한 인터페이스 요구사항들을 안정적으로 처리할 수 있는 57개의 컴포넌트들이 갖추어져 있으며 3개의 서로 다른 웹서비스에서 같이 사용되는 공통 디자인 시스템으로 발전시켰습니다.

아이콘 에셋 라이브러리 개발

rollup babel svgr github actions storybook

• 기존의 경우 사용하지 않는 에셋도 같이 import되는 문제가 있었습니다. 이를 해결하고자 rollup 의 manualChunks 를 활용해 트리셰이킹이 적용되는 라이브러리를 제작하여 사용되는 아이콘 에셋만 불러올 수 있도록 하였습니다.
• 아이콘 에셋의 변경 사항을 반영하는데 있어서 개발자가 직접 에셋을 추가하고 버전을 관리하는 일련의 과정들이 무수히 많이 반복되었습니다. 이를 해소하고자 에셋 업로드부터 패키지 업데이트 및 배포 까지 이어지는 일련의 과정들을 자동화하였습니다.
  • figma api와 github action을 이용하는 workflow를 매일 실행되도록 하여 피그마 내 아이콘 에셋의 업데이트 내역을 불러오고 이를 커밋으로 추가하는 PR을 자동으로 생성하게 했습니다.
  • 이러한 자동화를 통해 개발자의 불필요한 리소스 투입 및 디자이너와의 소통으로 인한 시간을 최소화하여 조직의 생산성 향상에 기여할 수 있었습니다.

마이크로프론트엔드 웹 어플리케이션 개발

webpack vite react react query react hook form zustand ky

• 사용자 입력값에 대한 유효성 및 에러 로직을 다루는 코드가 다소 복잡하고 관리하기 어려운 측면이 있었습니다. 이를 위해 팀원들을 설득해 react hook form을 도입하는 방식으로 개편하였습니다.
  • useForm 훅에서 제공되는 추상화된 상태를 사용함으로써 에러 및 유효성 상태를 정의하고 이를 제어해야 했던 반복적인 로직의 코드들을 제거할 수 있었습니다.
  • 동일한 형태로 여러개를 입력받아야 하는 필드들은 useFieldArray를 이용해 처리하여 필드의 추가 및 삭제로 인해 복잡했던 상태관리를 보다 단순하게 처리할 수 있었습니다.
  • 이를 통해, 사용자 입력값에 대한 다양한 요구사항들을 구현하는데 있어서 복잡도는 낮추고 코드의 일관성도 높여 전체적인 코드의 유지보수성을 높이는데 기여할 수 있었습니다.
• FE와 BE가 서로 다른 변수명 표기법을 사용하다보니 api 인터페이스 코드 작성 시 서로 다른 표기법을 변환하는 로직이 항상 수반 되어야 했습니다. 이를 해결하고자 API 인터페이스의 파라미터 및 타입의 표기법을 변환하는 로직을 삽입 및 추상화 하였습니다.
  • http client인 ky에 hook 옵션들을 추가해 요청 직전에는 파라미터를 snakecase로 바꾸고, 응답 직후에는 응답의 key값들을 camelcase로 바꾸는 작업을 수행하였습니다.
  • openapi generator의 설정을 변경해 snakeCase로 주어지는 API의 모델의 타입을 camelCase로 자동 변환하도록 하였습니다.
  • 이를 통해 표기법 변환 로직 없이 동일한 표기법으로 변수를 작성 및 사용할 수 있도록 하여 코드의 일관성과 가독성을 높이는데 기여했습니다.
• 즐겨찾기 기능에서 빠른 응답을 통해 사용자 경험은 향상시키고 불필요한 api 반복 호출을 줄이기 위해 react query의 cache를 이용한 낙관적 업데이트 기능을 적용하였습니다.
• webpack module federation을 이용해 9개의 리모트 앱을 런타임에 통합하는 마이크로 프론트엔드 어플리케이션을 구성하고 운영하였습니다.

🗂️ 프로젝트

개발 블로그

블로그 링크

레포지토리 링크

모노레포와 디자인 시스템을 관련 내용을 학습하며 만든 블로그 프로젝트 (2024.01 ~ ing)

Next(v14) Notion API vanilla extract turborepo zapier

• 노션에 업로드 된 이미지는 1시간 이내로 만료되는 문제가 있어 블로그에서 이미지가 제대로 서빙되지 못하는 문제가 있었습니다. 이를 해결하고자 노션 이미지를 외부 저장소에 저장하는 프로세스를 도입하였습니다.
  • 블로그 빌드 시점에 노션 이미지를 외부 저장소의 이미지로 변환하는 로직을 추가하여 노션 에디터의 편리한 이미지 업로드 경험은 살리면서도 이미지들이 영구적으로 보존되게 했습니다.
• 블로그 빌드 시점에 노션 이미지를 외부 저장소의 이미지로 변환하는 로직을 추가하여 노션 에디터의 편리한 이미지 업로드 경험은 살리면서도 이미지들이 영구적으로 보존되게 했습니다.
  • 노션 페이지 수정 시점에 revalidation 을 진행하는 NextJSroute API을 호출하도록 하는 프로세스를 webhook으로 연동하여 정적 컨텐츠가 자동으로 업데이트 될 수 있게 했습니다.
• 향후 추가적인 어플리케이션 개발에 용이할 수 있도록 모노레포를 도입하여 블로그 앱과 디자인 시스템 패키지 및 아이콘 패키지를 독립된 형태의 레포지토리로 개발하였습니다.

먹팟

레포지토리 링크

직장인들의 점심시간을 네트워킹의 기회로 만들기 위한 커뮤니티 서비스 (2023.05 ~ 2023.08)

Next(v13) react query vitest testing library react hook form

• 모달, 토스트 등 overlay 영역에 띄워지는 컴포넌트들을 보다 쉽게 사용할 수 있는 공통 훅을 만들어 가독성과 생산성을 높였습니다.
• 기존에 흩어져 있던 비동기 상태 관련 query 로직들을 관심사 별로 묶는 형태로 바꾸어 사용성과 가독성이 높은 코드로 발전시켰습니다.
• 단위 테스트 환경을 구성하고 이를 자동화해 검증 가능한 비즈니스 로직을 작성하도록 하였습니다.

🎓 교육

성균관대학교

소프트웨어대학 소프트웨어학과 졸업

2017.03 ~ 2023.08

네이버 커넥트재단 부스트캠프

7기 웹풀스택 과정 수료

2022.06 ~ 2022.12