메인 프로젝트 (LUXMEAL) 회고

4주동안 진행한 프로젝트가 끝나고 회고글을 남깁니다.

• 프로젝트에서 긍정적인 부분은?
• 개선할 부분은?
• 무엇을 배웠는가? 
• 무엇을 느꼈는가?

프로젝트의 잘했던 부분

1. 회원가입없이 체험하기 기능

 문제 - 기획할 때, 사용자를 고객이라고 생각하며 로그인 후에 관리자 페이지를 사용 할 수 있도록 만들었다.
           하지만 이 웹페이지의 주 목적은 면접관이 기능을 테스트 하는 점이다.

 해결 - 로그인을 하지 않아도 기능을 테스트 할 수 있는 "체험 기능"을 추가했다.

 결과 - 데모데이 때, 로그인을 하지 않고 이용해 볼 수 있어 편리하다는 코멘트 받음

2. 비회원 장바구니 기능 이용 가능

문제 - 비회원도 장바구니에 상품을 넣을 수 있어야 함

           만약 서버에 저장하게 된다면? 누구의 장바구니인지 파악하기 위한 로그인 과정이 필요하고 
           로그인을 하지 않으면 장바구니 기능을 사용할 수 없다.

해결 - 상품 목록을 서버에 저장하는 것이 아닌 로컬스토리지를 사용하여 구현

결과 - 비회원, 테스트 계정으로 장바구니 기능을 이용할 수 있다.

3. 반응형 구현

문제 - AI 사료 추천 컴포넌트가 수정 전 반응형 불가능한 디자인임

해결 - 반응형을 생각하여 전체 디자인 수정

결과 - 모든 페이지 반응형이 구현되어 어떤 기기든 상관없이 웹 사이트를 이용할 수 있다.

 

프로젝트의 개선할 부분

1. Hard Delete 가 아닌 Soft Delete (back-end)

- 회원이 탈퇴하면 데이터를 삭제하는 것이 아니라 탈퇴한 계정으로 정보를 변경해야 한다. 

  현업에서도 회원 가입 시, 동의에 따라 회원 정보를 몇 년 동안 가지고 있는다.

 

- 판매 상품 삭제 시, 판매 페이지에서 삭제되는 것이 아닌 판매 중지된 상태로 변경되어야 한다.
  배송, 주문 목록에서 상품이 사라지지 않도록 해야 한다. 

  판매 중지된 상품은 상품 페이지에서 판매 중지된 상품이라고 보여주어야 한다.

 

- 판매자가 구매한 유저의 주문, 배송을 취소, 사용자가 구매한 상품을 취소, 배송 내역을 삭제하지 않고 취소된 상품으로      표시 되도록 하기  &  주문 배송 취소 사유도 함께 넣어주면 훨씬 좋다고 코멘트 받음

 

- 사용자가 등록한 리뷰, 문의가 판매자에 의해 삭제될 수 있기에 리뷰 삭제가 아닌 상태 변경하고 판매자에 의해 보이지

   않는 리뷰, 문의 등으로 표시하기

2. 스켈레톤을 데이터를 받아오는 동안 보여주기

• 서버의 문제, 인터넷 문제 등으로 데이터를 받아오는 데 오랜 시간이 걸릴 수도 있다.
• 이 경우에 해당 페이지는 비어있게 되고 UX에 영향을 미치게 되는데 스켈레톤을 보여줌으로써 UX를 개선할 수 있다.
  • 비동기 함수 처리 전 Loading state를 true 변경해주기
  • true 가 되면 스켈레톤 컴포넌트가 보인다.
  • 비동기 함수가 끝나게 되면 비동기 함수 안에서 Loading state를 false로 변경하기
  • 받아온 데이터가 보이게 된다.

3. 자바스크립트의 동시성

• 서버와 통신할 때 대부분 비동기로 데이터를 주고 받게 된다.
• 비동기 함수가 처리되기까지 어느 정도의 시간이 소요가 되는데 해당 요청이 여러번 실행 될 수도 있다.
  • EX) 구매하기 버튼 광클
• 따라서 버튼이 클릭 되고 비동기 함수가 실행되는 순간 버튼의 클릭 요청을 막고 해당 통신이 끝나면 버튼의 클릭 요청을 풀어주는 방식으로 동시성을 해결할 수 있다.
• 모든 비동기 로직에 적용하지는 못하더라고 결제, 회원 정보 수정 등 중요한 부분에선 꼭 사용하도록 하자.

4. 장바구니 갯수 표시

•  장바구니에 상품을 담았을 때, 알람을 통해 알 수 있지만 알람 후 몇 개의 상품이 담겨 있는지 모른다.
   상품의 갯수를 헤더 장바구니 아이콘 위에 표시한다면, 사용자는 상품이 잘 담겨져 있는 한눈에 볼 수 있어 편리하다.

5. 최적화를 위한 404페이지 만들기

• 유효하지 않은 페이지로 이동이 되었을 경우, 오류 페이지를 사용자에게 보여줌으로써 "메인으로 이동" 또는 "이전 페이지"로 이동할 수 있도록 한다.

무엇을 배웠는가?

• 비동기 함수 , asyc await 링크 컴포넌트 파일 분리하기
• 프론트엔드 & 백엔드의 최적화
• 반응형 웹

무엇을 느꼈는가?

• 이론과 실전의 차이
• 팀과의 협업
• 어떤 분위기에서 내가 효율을 낼 수 있는지
• 소통의 중요성

드디어 이론 과정이 끝나고 프로젝트 팀 결정의 날이 왔다.

페어활동을 통해 내가 가장 닮고 싶은 페어분에게 먼저 프로젝트 함께 할 수 있는지 제안을 했다.

마침 팀이 만들어지지 않아 함께 할 수 있었고 다른 팀원 역시 실력자셨다.

기대반 걱정반으로 프로젝트가 시작되었다.

 

6개월 배우고 프로젝트에 모든 것을 적용시킬 수 없었다. 이론과 프로젝트의 실전은 차이가 컸다.

프로젝트는 마감기한이 정해져 있기에 내가 하고 구현하고 싶다고 구현해보겠다고 시간을 계속 끌 수는 없었다.

먼저 당장 할 수 있는 것에 먼저 집중하여 상품 관련 페이지 마크업을 모두 했다. 장바구니 기능 구현에서 막혔고 주말까지 해보겠다며 의지를 다졌지만 결국 팀원에게 도움을 요청했고 팀원분께서 "3시간이면 할 수 있어요!" 라는 말씀에 나는 무너졌다. 계속 하겠다고 끌 수 없는 상황이기에 팀원분께 부탁드리고 푸터 작업과 전체 css수정 작업을 시작했다.

어떻게 해서든 하나의 구현을 마무리 해보고 싶었으나 스스로 실력이 부족한 탓에 하지 못한 아쉬움 + 속상함이 너무 컸다.  이 프로젝트가 끝나고 꼭! 코드를 리뷰하며 공부를 해야겠다는 다짐을 여러번 했다.

 

아이디어가 생각나면 적극적으로 의견을 내보았다. (AI상품 반응형)

내가 할 수 있는 것이 무엇인지 먼저 생각하고 제안하고 팀원들에게 수정한 부분은 꼭 DM에 남겨 소통했다.

하고 싶은 부분이 있을 때, (404페이지) 이야기하며 시간이 얼마 남지 않은 상황 어떤 선택이 더 효율적인지 의견을 나누었다. 내 의견이 받아들여지지 않았더라도  결정된 사항으로 작업하고 진행 상황을 알렸다. 이런 과정을 통해 팀원들과의 소통을 하며 무엇이 최선의 선택인지 배울 수 있었다. 팀원들 덕분에 이 프로젝트를 잘 마무리 할 수 있음에 너무 감사했다.

 

나는 부족한 점도 많고 배워야 하는 점도 많았다. 이번 프로젝트에서 어떤 부분에서 내가 할 수있는지를 스스로 생각하고 실천하려고 노력했다. 또 프로젝트에 관한 의견을 다양하게 제시하고 팀원들 또한 자유롭게 의견을 내며 소통을 했다. 작은 일(상품 이미지 찾기, 데모데이 대본, 각 종 글쓰기)이라도 감사하며  적극적으로 참여했었다. 아쉬운 점은 기능적인 부분이였다. 구현하고 싶은 부분이 공부가 부족하여 구현하지 못하는 아쉬움이 너무 컸다. 프로젝트가 꼭 리뷰하며 혹시 질문을 해도 되는지 물어보자 팀원 모두가 흔쾌히 당연하다고 답변해주셨다. 다음에 서울에서 만나자며 서로의 취업을 응원하며  프로젝트가 끝이 났다.