React - Gagu Store

Preview :

사이트방문 :

https://gagustore.netlify.app/

개발목표

가구 이커머스 사이트를 구현하는것을 목표로 하였습니다. React-Router-dom을 이용하여 각각 페이지를 나누고 auth0웹 서비스를 이용하여 로그인 기능을 추가하였습니다. 상태관리는 context / reducer을 사용하였습니다. 여러 페이지에 들어가는 공통된 로직들을 한곳에 모아 관리 했습니다.

구현기간 :

2021-06- 28 ~ 2021-07-07

Skills :

React, HTML, CSS , JavaScript(ES6)

배포 :

Netlify

시연영상:

https://youtu.be/eJQh8qo2u6c

Code :

https://github.com/bellcastle88/ReactGaguStore

프로젝트 소감 :

프로젝트를 진행하면서 API가 영어로된 상품리스트라서 이걸 한국어로 변환하여 표현하는것이 어려웠습니다. 예를들어 미국달러 환전을 javascript함수를 이용하여 환전하여 가격을 표시하는데 이 함수를 이해하고 적용하는 공부를 하였습니다.

큰 프로젝트를 진행하면서 사이트가 어떻게 만들어지는지 큰 흐름을 파악할 수 있었고 실제 이커머스 사이트를 참고하면서 어떻게 기능이 구현되는지 그 안에 코드를 직접 공부할 수 있어서 좋았습니다. 또한 블로그에 그떄그때 공부한 내용들을 정리해서 앞으로도 참고할 수 있을꺼같아 뿌듯한 기분도 들었습니다.

공부한 내용 :

• API API를 제공 받아 사용했습니다. 서버역활을 대신하여 실제 서버에서 보내는 것과 똑같은 API를 받아왔습니다.
• Error 잘못된 주소 입력시 에러화면이 표시됩니다.
• 쿠폰 메일 주소를 입력하면 20% 할인 쿠폰을 지급합니다. https://formspree.io/ 해당 웹사이트의 서비스를 이용하여 제작하였습니다. 고객이 보낸 이메일은 관리자 메일로 전송되어 확인할 수 있습니다.
• context cart, filter,product 페이지에 들어가는 공통되는 로직을 한곳에 모아서 import하여 사용, reducers도 같은 역활을 합니다
• index.js App을 감싸고 있는 CartProvider import { CartProvider } from './context/cart_context' 에서 impot하여 App전체에 적용하도록 감싸줍니다. 이렇게 싸진 App안에서 어 페이지든 원하는 것만 가져와서 사용 할 수 있습니다.
• App.js 화면 페이지를 표시하는 파일입니다 각각 페이지를 분리하기위해여 react-router-dom을 install하여 사용합니다. 각각 페이지를 나눌때는 Switch를 사용하여 분리하고 모든페이지 공통으로 표시해야할때는 Router를 사용합니다.
• index.css 색상을 :root에 변수에 담아서 사용합니다. var(변수)로 담아 처음 css파일을 만들에 원하는 색상을 미리 변수에 세팅하면 작업할때 굉장히 편리한것 같습니다 @media부분은 반응형으로 화면이 (800px, 900px)일때 어떻게 다르게 화면을 구성할 것인지 설정하는것입니다,
• Page 페이지를 보시면 안에 component로 구성되어있는걸 보실 수 있습니다. HomePage.js 홈파일을 보면 단순히 component로 구성되어있는걸 보실수 있습니다.
• styled-components styled-components를 사용하여 css파일을 JS파일 안에 작성하도록 하였습니다. 글로벌css파일과 각각 JS파일안에 css파일이 분리되어 있습니다. 변수명을 페이지 안에서만 쓰기떄문에 중복될 일이 없어요.글로벌css와 겹치면 스타일컴포넌트 먼저 적용됩니다.
• component 페이지안을 구성하는 요소들 입니다. 한페이지 안이라도 여러개의 component로 구성되어 있습니다. component를 사용하는 가장큰 이유는 재사용이 가능하고 수정할때 모든페이지를 다 수정하지 않고 컴포넌트만 수정하면 모든페이지가 한번에 관리 때문입니다. 공통으로 사용되는 nav,cart,foot등 페이지 안에 모든요소가 component입니다.
• Cart localStorage를 사용하여 저장했습니다. 장바구니에 담은 상품목록은 localStorage에 저장됩니다
• 로그인 auth0.com사이트를 이용하여 로그인 기능을 추가하였습니다. 로그인했을때만 결제페이지를 용할 수 있도록 하였고 로그인을 하지 않으면 결제페이지는 표시되지 않습니다.
• Check out 로그인 시에만 checkout을 사용할 수 있습니다. 비로그인 상태에서는 구매버튼을 누르면 로그인창으로 동이로 이동하게됩니다. 주소창으로 주소를 바꿔 접속하는것을 막기위해 privite router를 이용하여 보안을 하였습니다