프론트엔드 개발자

이예찬

회사에 필요한 일을 하는 개발자입니다. 해야만 하는 일뿐만 아니라 미래에 필요한 일까지도 하고 싶습니다.

책임감

Pixell

leo12

퍼블리싱및 기능구현
<ul>
<li>jest, react-testing library를 사용하여 단위 테스트 및 ui 테스트 작성</li>
<li>백엔드의 api 개발을 기다리지 않기 위해 msw를 사용하여 api 모킹</li>
<li>nextjs를 사용하여 ssr 구현</li>
<li>api의 데이터를 정의하고 변환하기 위해 zod로 스키마 정의</li>
<li>비개발자도 개발 중에 컴포넌트를 미리보게 하기위해 storybook을 사용하여 컴포넌트를 만들고 chromatic을 통해 배포</li>
<li>ssr로 바뀐 Nextjs를 위해 docker로 이미지를 빌드하고 aws codepipeline으로 배포자동화 구현</li>
<li>react-query의 useMutation을 래핑하여 api의 응답에 따른 결과를 처리</li>
<li>recoil을 사용하여 클라이언트 상태를 관리</li>
<li>suspense와 react-errorboundary를 사용하여 선언적으로 로딩과 에러처리를 구현</li>
<li>사용하는 모달을 직관적으로 알기 위해 @toss/use-overlay를 사용하여 선언적으로 구현</li>
</ul>

퍼블리싱 및 기능구현
<ul>
<li>기존 프로젝트에서 api 중복요청을 하지 않기 위해서 props drilling 형태로 코드를 작성했지만 rtk-toolkit을 사용하여 api요청이 필요한 컴포넌트에서 바로 요청하도록 변경</li>
<li>기존에는 웹소켓을 사용하는 컴포넌트에서 연결을 관리하는 구조에서 rtk-toolkit의 streaming update를 사용하여 api에서 연결을 관리하는 구조로 변경</li>
<li>react-grid-layout를 사용하여 자유로운 위젯 ui 구현</li>
<li>css 변수를 사용하여 라이트 다크 모드 구현</li>
</ul>

vegabit

퍼블리싱 및 기능 구현
<ul>
<li>javascript에서 타입 안정성을 확보하기 위해 typescript 도입</li>
<li>css에서 반복되는 부분을 재사용하기 위해 scss의 mixin을 사용</li>
<li>기존 도커로 이미지를 빌드하고 배포하는 방식에서 webpack으로 번들링 후 s3에 업로드하여 cloudfront로 배포하는 방식으로 변경</li>
<li>yarn berry를 사용하여 zeor-install 구현</li>
<li>webpack4 =&gt; 5로 마이그레이션</li>
<li>react17 =&gt; 18로 업데이트</li>
<li>정적인 스타일링을 더 빠르게 하기 위해 tailwindcss 도입</li>
<li>미디어쿼리를 사용하여 반응형 웹사이트 구현</li>
</ul>

프론트개발자가 저뿐이여서 전반적인 개발을 담당했습니다. 퍼블리싱부터 api 연동, 기능 구현, 배포 자동화를 진행했습니다. 코인거래소 솔루션의 거래페이지, 자산페이지, 로그인 및 회원가입 페이지 등을 개발하였습니다.