미리보기

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

퍼블리싱및 기능구현

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

퍼블리싱 및 기능구현

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

퍼블리싱 및 기능 구현

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