NOBAKERY

NO BAKERY : (상업목적X) 베이커리 온라인 주문 사이트

⭐️높은 애정을 갖고 도메인도 구매했습니다. 노베이커리(nobakery.xyz) 바로가기

현황

• 2022.8.30 / 아직 미비된 점이 있어서 정상 운영 중은 아닙니다.
• 2022.9.20 / 개인 정보 저장 방식에 대해서 이해하고 수정 예정입니다.

개요

• 베이킹이 취미인 본인의 빵, 구움과자, 음료 등을 지인들에게 제공해주기 위한 온라인 주문 사이트
• 토이 프로젝트
  • 개발 전 과정 개인 수행

이미지

화면캡처

기술 스택

• React.js
  • React를 배우고 모양이 잡힌 프로젝트를 진행해보고 싶었고, 쇼핑몰과 같은 형태의 주문사이트를 만들어보면 좋은 경험이 되겠다고 생각했습니다.
  • 프로젝트를 수행하면서 배운 내용도 많기 때문에 보완할 점이 많은 코드라고 생각합니다. 리팩토링하기 좋은 뼈대가 되었다고 생각합니다.
• Express.js
  • Express 조합의 경우 개발자들로부터 높은 점유율, 만족도로 평가받고 있어서 경험해보고자 택 했습니다.
  • 단순함이 장점이었지만 단점이 될 수도 있을 것 같습니다.
  • 여러가지 문제들을 만났지만 커뮤니티에서 비슷한 케이스를 많이 다루고 있어서 해결이 크게 어렵지 않았습니다.
  • client로 부터 전달되는 파일을 저장 관리하기 위해서 multer 라이브러리를 사용했습니다.
• MySQL
  • MongoDB를 사용해보고 싶었지만 프로젝트가 너무 길어지게 될 것 같아서 기존에 사용해봤던 MySQL을 택했습니다.
  • 기회가 된다면 MongoDB로 교체해보고자 합니다.
• EmailJS
  • 처음 사용해본 Email Service입니다.
  • 고객이 주문을 하고 관리자(본인)가 주문을 승인하고 배송날자를 확정하면 해당 날짜를 본문으로 전달하는 메일이 자동으로 전송되도록 하는데 사용했습니다.
• Netlify
  • client 파일을 배포하는데 사용했습니다.
  • 처음 사용해봤는데 개발과 배포가 자연스럽게 연결될 수 있도록 설정할 수 있어서 배포가 편리합니다. push -> build
• Heroku
  • server 파일을 배포하는데 사용했습니다.
  • client와 분리하여 배포해보고 싶었습니다.

기능 및 컨텐츠 소개

기본적으로 온라인 쇼핑몰의 형태를 하고 있습니다.

1. 회원가입, 로그인
   • 카카오톡 소셜 로그인을 구현했습니다.
2. 상품 주문 및 취소
   • 상품 탐색
   • 장바구니 담기
   • 구매 완료 : 재화 차감
   • 주문 취소 : 재화 환불
3. 관리자 페이지
   • 주문 관리
     • 주문 승인
     • 제품 배송일 확정 시 메일 발송
   • 회원 관리
     • 회원 재화 관리(현금이 아니라 ❤️라는 가상 재화)
4. 상품 추천
   • 근사한 알고리즘 없이 랜덤 추천입니다.
   • 주문 데이터가 쌓이면 추천 알고리즘을 구현해볼 수 있을 것 같습니다.
5. 회원 마이 페이지
   • 주문 내역 관리
   • 구매 통계 확인

배운 점

정말 많지만 기억나는대로..

• 꽤나 익숙해진 REACT
  • 얼마 전에 바닐라 자바스크립트로 웹 동작을 구현하다가 답답함을 느꼈습니다. 이제 어느정도 React 프레임워크(라이브러리)의 개념과 상태 관리 등이 손에 익고 익숙해진 것 같습니다.
• 배포 단계에서의 시행착오
  • 생각보다 많은 시간을 배포 단계에서 사용했습니다.
  • LocalServer에서 발생하지 않던 CORS를 해결하기 위해서 server프로젝트에 cors module를 설치했고 client에서 redirect url이 아니라 절대 주소를 입력하는 것으로 해결할 수 있었습니다. (redirect 주소가 동작하지 않는 것은 아직도 의문이지만 해결할 수 없었습니다.)
  • 정말 사소한 실수도 했습니다. express를 server프로젝트가 아닌 상위 프로젝트 폴더에 설치하는 바람에 배포 당시에 이를 모르고 굉장히 많은 시간을 허비했습니다. 워낙 사례가 없다보니 스스로 모든 부분을 점검하다가 일주일 정도만에 해결할 수 있었습니다.
• 도메인 구매 적용
  • 처음 도메인을 구매해봤고, 적용은 어렵지 않았습니다.

부족한 점

• 장바구니에 담긴 물품이 몇 개인지 표시하는 기능을 만들고자 했는데 제가 알고 있는 기능 선에서는 불가하다고 생각했습니다.
  • 현 시점에서는 Context API를 사용하면 되지 않을까? 생각합니다. (구현 예정)

- 버전관리를 하면서 서비스 업데이트를 해야하는데, 생각나는대로 기능을 추가하고 수정하곤 합니다. - *아직까지는 beta 버전이라 생각하고 정식 오픈 이후에는 릴리즈 노트를 써보고자 합니다.*
- 웹 디자인 전반 및 폰트 - *웹 기획자로 근무하는 지인으로부터 많은 지적을 받았습니다. 순서에는 어긋나지만 화면설계를 다시 해 볼 필요도 있을 것 같습니다.*
- 구글 로그인을 구현하고자 했으나 잘 안 되어 카카오 로그인으로 대체하였습니다. - *당시 원인을 찾지 못했는데 다시 시도해봐야겠습니다.*
- 로그인 유지 방식에 대해서 충분히 고민하지 못하고 localStorage로 구현하였는데, session과 cookie에 대한 이해를 갖고 수정하고자 합니다.