개인 프로젝트 회고

은채·2022년 8월 31일
2

회고

목록 보기
8/8
post-thumbnail

회고

코드캠프 개인 프로젝트 작업 (5월~6월), UI 수정 및 리팩토링 일부(8월) 를 마무리했다.
우선 1차적으로 배포까지 마무리해놓고, 추가 작업을 더 진행하면서 기능적인 부분에서 리팩토링을 더 해보려고 한다.

코드캠프에서

  • 코드캠프에서는 5월, 6월 (2개월) 학습을 진행하는 8주동안 매일 진도 나간 부분을 퀴즈 및 개인 포트폴리오에 적용할 수 있도록 커리큘럼을 구성한다. 이 개인 프로젝트는 진행 상황을 멘토들이 주 1회 기능 구현 부분에 대해서 체크를 한다. 나도 6월까지 기능 구현과 볼품없는 UI까지 완성한 채로 팀 프로젝트 작업을 시작했다.
    지금 생각해봐서 아쉬운 점은, 기능 처음 구현하고 해당 기능에 대해 자세히 포스팅을 해둘 걸.. 하는 생각. 처음 기능 구현했을 때와 리팩토링하면서 비교를 해볼 수 있었을 텐데 아쉽다. 그리고 내가 왜 이렇게 코드를 썼었는지, 무슨 의도로 했는지 알고 싶은데 2~3개월 지났다고 벌써 기억이 안나는 부분이 있었다.
    이렇게 기록의 중요성을 다시 한 번 느끼게 되었다.

수료 후

  • 아무튼, 6월까지 만들어놓은 기능을 토대로 8월에는 새롭게 UI부터 다듬기 시작했다. 수료 후, 동생과 다시 한 번 피그마 작업을 시작했다. 기존에는 디자인이랄 것도 없이 기능 구현에만 급급했었는데, 프로젝트의 기획 의도와 컨셉을 고려하면서 퍼블리싱을 진행했다.

  • 기존에 있던 api는 100퍼센트 활용하되, 팀 프로젝트에서 사용하지 못했던 혹은 구현하지 못했던 기능/UI를 해보고 싶었다.

카카오톡 채널에 밀렸던 챗봇

: 처음에는 챗봇 라이브러리를 사용하여 팀 프로젝트에 상담 시스템을 구현하려고 했었는데, 카카오톡 채널을 운영하게 되면서 개인 포트폴리오로 쫓겨나게 되었다 (ㅎㅎ) 라이브러리를 이용한 챗봇 기능이기 때문에 미리 정해놓은 응답만 가능하지만 간단하게 챗봇 기능을 구현해 보았다.
챗봇 내에서 이동할 수 있는 페이지 중 아직 끝까지 구현하지 못한 2페이지가 존재한다.

1)관리자에게 직접 문의를 하고 싶은 경우 사용할 페이지
 2)서비스 소개를 위한 랜딩 페이지
  • 1:1 문의의 경우 api가 따로 없어서, 다른 방법을 생각해보고 있는데 이미 이메일 문의나 채널 문의를 팀 프로젝트에서 사용해버려서 아예 다른 방법을 고민하고 있는데 적당한 아이디어가 없어서 멈춰있는 상황이다.
    파이어베이스를 활용해서 1:1 문의 게시판을 만드는 것을 가장 우선적으로 고려하고 있다.
  • 랜딩페이지의 경우, 스크롤하면서 서비스 소개가 나오는 페이지를 구성하고 싶어 스크롤 훅이나 라이브러리를 사용해서 작업을 하루 했었다. 내 의도대로 작업물이 나오지 않았는데, 스스로 약속한 마감 일정이 되어 이 파트도 잠시 멈춰진 상태. 다시 해볼 예정이다.

오늘 하루 닫기

  • 서비스 페이지에 이벤트 팝업이나, 공지사항 팝업이 있으면 꼭 오늘 하루 보지 않기, 30일동안 보지 않기 등의 기능이 있다. 예약페이지에서도 안내문을 하나 만들어서 이 기능을 구현하고 싶었는데, 예약 페이지에서 손 봐야할 것들이 계속 나오다보니 필수 기능이 아닌 부분이라 결국에는 구현하지 못했다. 그 아쉬움을 개인 프로젝트에서 구현해 보았다. 로컬스토리지에 닫기를 저장한 오늘 날짜를 저장하고, 다음에 접속했을 때 날짜를 비교하는 방법으로 구현해보았다.

아직 구현하지 못한 서브 페이지 부분, 얼른 해봐야지...

서비스 시연

Main

  • 로컬 스토리지를 이용한 오늘 하루 닫기 구현

login / Sign Up

  • react-hook-form / yup 을 활용한 검증 기능 구현
  • accessToken 만료 이후, refreshToken 활용해 로그인 유지 기능 구현

borads

  • Best Boards like 게시물 리스트 및 Boards 리스트 (무한스크롤) 구현

  • 상품명 검색 및 날짜 검색 기능 구현

Board Detail

  • react-slick을 활용한 캐러셀 구현
  • react-player를 활용한 동영상 기능 구현
  • 좋아요/ 싫어요 기능 구현

  • 게시물 댓글 기능 구현

Board Write

  • Daum Postcode React 를 이용한 주소 검색 기능 구현
  • 이미지 업로드 기능 구현

Goods

  • 판매중 / 판매완료 게시물 목록 및 무한스크롤 기능 구현
  • 검색 기능 구현

Good Detail

  • react awesome slider를 활용한 캐러셀 기능 구현
  • kakao api를 활용한 지도 기능 구현
  • 찜하기 기능 구현

  • 충전한 포인트로 굿즈 거래 기능 구현

  • 로컬스토리지 및 recoil (헤더 장바구니 배지) 을 활용한 장바구니 기능 구현

  • 댓글, 대댓글 기능 구현

Good Write

  • react-quill 을 활용한 텍스트 에디터 구현

  • 태그 기능 구현

  • react hook form 을 활용한 굿즈 작성 폼 구현

My Pages

  • 비밀번호 변경 기능 구현

  • 회원 닉네임 및 프로필 사진 변경 기능 구현

  • 거래 내역 및 포인트 목록 및 페이지네이션

  • react-share를 활용한 소셜 (트위터) 공유 기능 구현

  • 아임포트 및 백엔드 api를 활용한 포인트 충전 결제 기능 구현

공지사항 / 이벤트

profile
반반무마니

3개의 댓글

comment-user-thumbnail
2022년 9월 21일

구매목록에 나 등장! 후후
너무 잘했다 진짜

답글 달기
comment-user-thumbnail
2022년 9월 21일

내 아이디 이거구나...! 이걸로도 좋아요 좋아요

1개의 답글