미리보기

팝업스토어 관련 건물 웹사이트 개발

website / github / portfolio

팀 구성: 4명 (프론트엔드 2명, 백엔드 1명, 디자이너 1명)

목적: 디지털 전환 사업을 위한 웹사이트 기획 및 개발

기술스택: Next.js (Page router), Typescript, React-query, Axios, TailwindCSS, Github actions

액션

• 서울시 공공 데이터 내 지역 데이터 API를 사용하여 팝업 스토어에 필요한 다양한 정보를 제공

• 다양한 형태의 매거진을 쓸 수 있는 관리자용 에디터를 React-quill으로 제작

• UX를 개선하기 위해 React-query의 옵티미스틱 업데이트를 이용한 찜하기 기능을 구현

• React-hook-form을 이용한 폼 유효성 검사를 통해 서비스의 안정성 향상

• 여러 가지 형태의 슬라이드를 만들기 위해 React-swiper를 이용하여 확장성을 고려한 컴포넌트 제작

• 페이지별 메타 태그를 컴포넌트화하여 검색 엔진 최적화(SEO)와 재사용성 향상

성과

• 기획, 개발, QA 등과 같은 프로세스를 거쳐 MVP에 맞는 웹사이트 배포

• 재사용성과 유지보수성을 고려한 컴포넌트 개발

website / github / portfolio

팀 구성: 4명 (프론트엔드 4명)

목적: 프로젝트 자동화 프로세스 도입과 테스트 코드에 대해 학습

기술스택: Next.js (App router), Typescript, React-query, TailwindCSS, Jest, React Testing Library, Github Actions, Jira

액션

• 프로젝트 자동화를 고려하여 Github actions으로 CI/CD를 구축하면서 DX와 개발 생산성을 향상

• 페이지 로드 성능 향상을 위해 App router의 서버 액션과 서버 컴포넌트를 사용하여 리뷰 페이지를 구현

• query-key-factory 패턴을 통해 React-query의 쿼리키를 따로 관리할 수 있는 폴더 구조로 유지보수성을 향상

• 안정성 개선하기 위해 Jest, React Testing Library을 통해 컴포넌트 렌더링, 유틸 함수, 커스텀 훅에 관한 유닛 테스트 추가

• 코드 리뷰에 관한 컨벤션 (Pn 규칙, Review Time)을 정해 활발한 코드 리뷰 문화를 조성

성과

• Lighthouse를 통해 모든 페이지 내 성능, 접근성, 권장사항, SEO에서 95점 이상의 점수을 기록

• Jira와 Github actions으로 작업 프로세스를 자동화시켜 개발자 경험(DX)과 생산성 향상

github / portfolio

팀 구성: 7명 (프론트엔드 4명, 백엔드 2명, 디자이너 1명)

목적: 다양한 직무를 가진 사람들과 협업하며 MVP에 맞는 웹사이트 개발

기술스택: Next.js (App router), Typescript, React-query, TailwindCSS, Zustand, React-hook-form

액션

• React-hook-form으로 비제어 컴포넌트로 form을 관리하여 렌더링 성능과 안정성을 개선

• Pangea/dnd를 이용하여 게시물 작성 중에 사진 순서 변경 기능을 구현

• React-query의 옵티미스틱 업데이트를 사용하여 좋아요 기능, 팔로우 기능을 구현하여 사용자 경험(UX) 향상

성과

• 프론트엔드, 백엔드, 디자이너와 적극적으로 소통하며 개발

• 사용자 경험을 향상할 수 있는 기능을 만들도록 다양한 라이브러리들을 활용