인프콘 2024

창의적

책임감

협업 지향

유연함

직관적

김찬우

<h3>Description</h3><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://mkt24.co.kr/">마케팅24</a></h5>일반 사용자와 기업에게 다양한 온라인 마케팅 상품을 판매하는 웹 서비스 입니다.<h3>Experience</h3><h5>프론트엔드의 서비스 개발 환경 구성</h5><ul><li>pnpm, turborepo, docker-compose를 통해 모노레포 기반의 일정한 개발 환경을 구성했습니다.</li><li>eslint, tsconfig 등 개발 환경을 설정했습니다. 디자인 시스템, libs 등과 함께 모노레포 환경에서 내부 패키지로 생성하고 관리했습니다.</li></ul><h5>디자인 시스템 개발</h5><ul><li>테마, styled, 타입, util 등 디자인 시스템의 기반을 설계하고 개발했습니다.</li><li>emotion styled의 타입을 매핑하여 styled 내부의 theme을 시스템에 맞게 사용할 수 있게 하였습니다.</li><li>styled 내부에서 사용가능한 유틸 함수들을 정의, 조합할 수 있게하고 props 통해 편리하게 스타일을 변경, 확장할 수 있게 하였습니다.</li><li>polymorphic type을 적용해 as를 통해 element를 변경하면 해당 element의 type을 기준으로 검증할 수 있게 하였습니다.</li><li>TextFiled, Checkbox, Radio 등 input 컴포넌트, Row, Column, Box 등 레이아웃 컴포넌트, Typography 등 base 컴포넌트 들을 담당하고 개발하였습니다.</li></ul><h5>Server Driven UI</h5><ul><li>다양한 디자인에 대응할 수 있는 컴포넌트 단위의 ui, ux 데 이터와, 주문 관련 데이터, 가격 관련 데이터를 아우르는 데이터 체계를 만들어 하나의 템플릿으로 다양한 26개의 상품에 대응할 수 있었습니다.</li><li>신규 상품 추가와 수정에 30분이내로 대응 가능하게 하였습니다.</li><li>zustand를 사용해, 주문 관련 client state를 전역에서 관리하고, SDI를 구성하는 컴포넌트 내부에서 react-hook-form의 전역 form state에 접근하여 로직을 처리하게 했습니다.</li><li>주문 도메인 속 가격계산, 주문 검증, 폼 구조 그리기 등 각 주요 기능을 custom hook을 패턴을 통해 분리해 수정과 확장에 유리하게 했습니다.</li><li>월 평균 10,000명의 사용자가 이용하는 프로젝트로 사용자가 제일 많이 이용하는 도메인이었지만, 클라이언트 기준으로 다른 도메인보다 5배 적은 버그 발생률을 기록했습니다.</li></ul><h3>Tech Stack</h3><code>turborepo</code> <code>typescript</code> <code>Next.js</code> <code>emotion</code> <code>@tanstack-query/react</code> <code>zustand</code> <code>react-hook-form</code>

<h3>Description</h3>자사 서비스들을 아우르는 베이스 디자인 시스템이 필요하다 느꼈습니다. 토스, 배달의 민족처럼 유사한 톤 앤 매너를 가지고 있는 서비스가 아니라 독립적으로 운영되는 서비스였기에, 각 서비스에서 공통적으로 사용하는 디자인 시스템이 아닌 각각의 서비스 별 디자인 시스템으로 확장할 수 있는 베이스 디자인 시스템을 개발하였습니다.<h3>Experience</h3>MUI 디자인 시스템 라이브러리를 참고하여 테마와 컴포넌트, 스타일의 확장, 네이티브를 모토로 개발을 시작했습니다.<ul><li>createTheme, themeComponent, defaultProps 기능을 통해 theme와 variant를 통한 스타일의 수정과 확장을 편리하게 하였습니다.</li><li>컴포넌트의 기능과 더불어 기존 element의 native한 형태로 사용할 수 있게 하였습니다. 외부에 주입하는 event handler를 내부에서 한번 더 override하고 기존의 element type을 기반으로 확장했습니다.</li><li>테마를 기반으로 한 스타일 props와 styled util 함수를 통해 간편하게 컴포넌트의 스타일을 외부에서 주입해 수정할 수 있게 했습니다.</li><li>emotion을 확장한 엔진과 스타일 관련 유틸 기능들, 디자인 시스템의 뿌리가 되는 base 컴포넌트들을 패키지로 분리하였습니다.</li><li>신규 프로젝트와 기존 프로젝트에 사용하여 성공적으로 디자인 시스템을 적용하거나, 기존의 디자인 시스템을 수정, 확장할 수 있었습니다.</li><li>turborepo와 clean package를 이용해 디자인 시스템을 내부 패키지로 사용하여 storybook 환경을 구성함과 동시에 외부 패키지로 배포할 수 있게 했습니다.</li></ul>프론트엔드 개발팀은 해당 베이스 디자인 시스템을 통해 신규 프로젝트를 성공적으로 진행했고, 기존 2개의 프로젝트의 서비스 디자인 시스템을 성공적으로 수정 및 확장하였습니다.<h3>Stack</h3> <code>turborepo</code> <code>typescript</code> <code>react</code> <code>emotion</code> <code>radix-ui</code> <code>usehooks-ts</code>

<h3>Description</h3><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://acct.iwest.co.kr/">한국서부발전 계좌등록 시스템</a> &amp; <a target="_blank" rel="noopener noreferrer nofollow" href="https://block.iwest.co.kr/">한국서부발전 평가방 시스템</a></h5>한국서부발전 사업 참가 기업의 계좌이체거래약정서를 관리하고, 사업 참여 기업을 선별하는 온라인 평가방 시스템<h3>Experience</h3><ul><li>사용자의 주소와 거래 은행을 검증하고, 신분증 사본과 통장 사본의 개인정보를 마스킹 해 계좌거래이체약정서를 발급하는 기능을 개발했습니다.</li><li>redux와 saga를 통해 client, server state를 함께 관리하던 부분을 recoil, react-query를 이용해 client state와 server state를 분리하여 컴포넌트 단위로 state를 면밀하게 관리할 수 있게 했습니다.</li><li>react state로 관리되고 있던 fromData를 react-hook-form을 통해 편하게 관리할 수 있게 했습니다.</li><li>프로젝트 목적에 맞추어 container presenter 패턴을 도입해 신규 라이브러리 기술 도입의 난이도를 낮추고 일정한 코드 경험과 관리 방법을 갖출 수 있게 했습니다.</li></ul><h3>Stack</h3><code>react</code> <code>react-query</code> <code>recoil</code> <code>react-hook-form</code>

<h3>Description</h3>마케팅24 프론트엔드 개발환경을 구성하면서, 반복적으로 eslint, tsconfig, libs 환경을 구성하는 것이 비효율적이라는 생각이 들었습니다. 해당 의견을 프론트엔드 팀원들과 공유하였고, 협의를 통해 front-base 프로젝트를 시작했습니다.<h3>Experience</h3>turborepo를 통해 모노레포 기반의 리포지토리를 생성하고 용도에 맞게 패키지로 분리했습니다.<ul><li>eslint, tsconfig, prettier 설정 파일을 패키지로 분리해 관리했습니다.</li><li>내부에서 사용되는 util, type 등을 묶어 libs 패키지로 관리했습니다. axios, react-query, dayjs 등 내부 기술 스택에 맞추어 라이브러리 관련 코드들도 관리했습니다.</li></ul>turborepo와 clean-package 이용해 내부 패키지와 외부 패키지를 동시에 관리하였습니다.<ul><li>내부적으로는 패키지들을 내부 패키지로 이용하여 테스트 및 개발에 용이한 환경을 구성했습니다.</li><li>clean-package와 vite를 이용해 패키지를 빌드하여 외부 패키지로 배포하였습니다.</li></ul><h3>Stack</h3><code>turborepo</code> <code>typescript</code> <code>react</code> <code>@tanstack/react-query</code> <code>axios</code> <code>dayjs</code>

<h3>Description</h3><h5><a target="_blank" rel="noopener noreferrer nofollow" href="https://viewup.co.kr/">뷰업</a></h5>sns 및 다양한 온라인 플랫폼 마케팅에 참여하는 온라인 부업 웹 서비스<h3>Experience</h3><ul><li>기존의 잘 못 사용되고 있던 react-hook-form의 사용 방식을 pr리뷰를 통해 개선하였습니다.</li><li>기존의 디자인 시스템을 개선하여 쉽게 레이아웃을 설정하고, 디자인 시스템 컴포넌트에 테마 기반의 스타일을 입히거나 확장할 수 있게 하였습니다.</li><li>어드민 페이지의 </li><li>월 평균 15,000명의 사용자가 이용하는 웹 서비스를 성공적으로 배포하고 버그 및 개선 사항에 대응하였습니다.</li></ul><h3>Stack</h3><code>typescript</code> <code>Next.js</code> <code>emotion</code> <code>@tanstack-query/react</code> <code>zustand</code> <code>react-hook-form</code>