세컨드 라이프(Second Life Project)

(2022년 8월 18일)

프론트엔드 리드를 처음 해본 프로젝트였습니다. 협업하는 프론트엔드 팀원들의 기술 스택을 고려하여 프로젝트 환경을 설정했습니다. 토큰 관리와 같은 처음 해보는 부분이 많아 걱정이 컸습니다. 그래서 인터넷에서 자료를 조사하면서 선배 개발자들이 진행한 '한강 프로젝트'를 많이 참고하게 되었습니다.

• 프로젝트 명: Second Life

• 프로젝트 목표: 의류 재사용과 환경 보호를 위한 중고의류 거래 쇼핑몰 제작

• Live Demo 에서 서비스를 확인해 볼 수 있습니다. ( id: test | pw: mapo1234 )

• 팀원 구성 및 이름
• 기획 & 디자인 : 이진희, 최연정
• 프론트 : 추홍규(@chuhongkyu), 민지원(@Gwonie), 이경은(@ke-leee),
• 백앤드 : 김대희

• 이 프로젝트는 마포구 청년 일자리 사업단의 지원으로 제작되었습니다.

화면구성 및 기능구현

• 홈

• 로컬 로그인, 간편 로그인(구글, 카카오)

• 로컬 회원가입

• 간편 회원가입

• 픽업신청

• 마이페이지

• 상품 더보기

• 카테고리별 상품 조회

• 상품 상세

프론트엔드 기술스택

• ReactJS

• Redux-Toolkit

• Style-Components

• React Router

사용툴 및 협업툴

• Visual Studio Code

• Git, Github

• Figma

• Slack, Notion

이슈

• 완성도 높은 사이트를 위해 기획과 디자인의 빈번한 변경이 발생. 따라서 프로젝트의 개발환경과 레이아웃 및 기능을 자주 변경

• Netlify배포환경에서 배포페이지 안정성을 위해 Github-page로 배포변경

• 잘못된 HTTP Method 백엔드와 다시 조율

• SPA 특성상 페이지 이동시 스크롤 위치가 그 전 페이지 위치와 동일한 현상이 생김. 따라서 컴포넌트에 window.scrollTo(0, 0) 적용

• 프로젝트 후반 백엔드 부재발생. 따라서 데이터베이스를 직접 조작하여 데이터 수정

성장경험

• Theme provider를 이용한 공통 스타일 속성 관리를 통해 재사용성을 높이고 시간 효율 향상

• Prettier Extension을 사용함으로써 코드 통일성을 높임

• npm ci 를 사용하여 패키지 버전을 통일

• Figma와 WBS작성을 기반으로 팀원 간 작업내용과 기간을 공유함으로써 애자일한 프로세스 경험

• JWT 토큰 인증 방식을 이용하여 로그인, 회원가입 등의 기능을 구현함으로써 보안성을 높임

• redux-toolkit store에 Access Token, 회원정보를 저장하여 전역 상태를 효율적으로 관리

개선사항

• 추후 반응형 디자인을 통해 반응형 페이지 제작

• Usememo ,Usecallback 과 같은 리액트 훅이나 ReactQuery 라이브러리를 사용한 최적화 필요

• 효율적인 코드작성을 위한 팀원들 간의 코드리뷰 및 효율적인 협업을 위한 깃 커밋 메세지 규칙 준수

• jira와 같은 협업툴과 위클리 스프린트를 통해 보다 자세한 개발현황을 공유