굿즈 스토어 프로젝트

프로젝트 배포 : Google FirebaseReact.js, Redux 사용 능력의 증진을 목적으로 게임 '원신'을 주제로 하여 제작한 웹 개발 프로젝트. 회원기능과 온라인 쇼핑몰 기능을 포함하고 있음.이전 프로젝트와 기존 구조는 동일하고, Redux 사용에 관련하여

계정을 생성하고 로그인해야 할 대상이 나 밖에 없던블로그 프로젝트와 달리, 굿즈 스토어 프로젝트는 나 이외에도 다른 사용자가 계정을 생성할 수 있어야 한다. 따라서 프로젝트의 첫 기능은 회원 기능. 그 중에서도 회원 가입 기능을 먼저 구현하였다.아무리 공부용 목적이 강

여러 홈페이지의 회원가입 UI를 참고했었을 때의 일이다. 정상적인 회원가입 UI에서는 필수 입력값이 존재하지 않을 때 경고창을 출력하거나, 매 입력마다 유효성 검사를 실행하여 결과를 출력해주거나, 입력값에 대한 중복 검사를 실행하는 것 등등.. 입력값에 대한 부가적인

다음은 로그인 기능의 구현이다.입력값을 받아서 함수를 호출 할 때 인자로 넘긴다는 기본적인 구조는 회원가입 기능과 동일하다. 가입할 때 중복 검사를 실시했으니 로그인 할 때에는 유효성 검사만 실행해주면 된다.하나 달라진 것은 이전까지 언제나 미흡했던 에러 처리에 대한

기본 구조는 이전 프로젝트와 동일하지만, 여기서 발전이 없으면 다음 프로젝트라고 할 수가 없다.이번 프로젝트에서는 다음과 같은 기능을 추가해보았다.자동 로그인.이메일 찾기 / 비밀번호 재설정.기능 자체는 파이어스토어에서 제공해주고 있다. 내가 할 일은 로그인 UI에서

모든 사용자는 자신의 회원 정보를 조회하거나 수정, 탈퇴할 수 있는 권리가 있다. 이를 위해서는 이들이 가능한 UI와 기능을 만들어주어야 한다. 거창하지는 않지만 그래도 회원 마이 페이지를 한번 만들어보았다.우선 가장 먼저 해야하는 것은 회원 정보를 조회하는 기능 구현

우선은 UI를 구현해야 한다. 다른 페이지나 컴포넌트를 만들기는 아깝고, 좀 코드가 지저분해 보이긴 하지만 플래그 변수로 수정 상태를 제어하고 회원 정보 조회 창의 UI가 부분적으로 변경되도록 구현하였다.수정하기 버튼을 클릭하면 플래그 변수가 전환되고 이에 따라 버튼의

이 글에서는 이번 프로젝트의 핵심 기능 중 하나인 굿즈 스토어 기능에 대한 설명을 하려고 한다.굿즈 스토어의 UI는 네이버 쇼핑을 참고하여 내가 할수 있는 선에서 네이버의 것을 따라하는 것을 목표로 구현하였다.우선 스토어의 메인 페이지. 여기서는 등록된 상품들을 등록일

온라인 굿즈 스토어의 메인 페이지. 일반적인 온라인 쇼핑몰의 구성을 참고하되 내가 할 수 있을 만큼의 간단한 기능만을 구현하였다. (정확하게는 내가 원래 하려던 것들에서 이건 못하겠다, 안되겠다 싶어서 내용이 계속 빠졌지만..)슬라이드쇼에 대한 내용은 내용이 너무 길어

상품의 데이터를 리스트 형태로 가져와서 화면에 렌더링하는 것은 이전 포스트에서 다루어보았다. 상품 목록 페이지에서는 이 기능에 검색어를 통해서 제품을 검색하는 기능과, 특정 카테고리에 속하는 제품만을 조회하는 기능, 그리고 특정 조건대로 데이터를 정렬하는 기능을 더해보

상품의 상세 정보를 출력하는 기능은.. 전역 변수를 관리하는 라이브러리가 달라졌다는 것 이외에는 이전 프로젝트에서 크게 변화한 점은 없다. 이전에는 DB 문서의 ID값을 URL Param으로 보내서 데이터를 조회하는데 사용하였다면, 이번에는 제품 이름을 기준으로 사용한

상품 상세 페이지에서 제품 옵션을 선택하고, 수량을 조절한 뒤 구매하기 버튼을 누르면 필요한 데이터와 함께 상품 결제 페이지로 이동된다. 이 데이터는 상세 페이지에서 결제 페이지로 이동하기만 하면 되므로 Redux 등을 사용하지 않았다.필요한 데이터?상품을 결제하는데

상품을 결제하는 기능을 구현할 때, 결제 내역과 포인트 사용 내역을 저장하는 기능도 같이 구현하였다.스토어 마이페이지에서는 이렇게 저장된 결제 내역과, 포인트 사용 내역을 조회하는 기능을 구현하였다. 스토어 마이 페이지를 중심으로 상황에 맞게 결제내역 조회 컴포넌트와

이번 순서는 스토어의 상품을 등록하고, 관리하는 기능이다. 이 기능은 스토어 마이 페이지에서 조건부 렌더링 기능을 이용하여 로그인한 사용자의 권한을 구별하여 일반 사용자는 마이 페이지가, 관리자는 관리 페이지가 출력되도록 구현하였다. {!isAdminLogin

장바구니 기능은 결제 기능와 거의 흡사한 구조를 가지고 있다. 제품 페이지에서 옵션과 수량을 선택하면, 옵션 데이터 배열이 생성되고 이걸 결제 페이지로 넘기느냐 혹은 장바구니 페이지로 넘기느냐의 차이만 존재하기 때문.

국비지원학원을 다녔을 때, 파이널 프로젝트를 진행하면서 당시 강사분은 이런 조언을 해주셨다.여러분이 이 프로젝트에서 구현하고 싶은 모든 것을 기획서에 넣으세요. 여러분의 힘으로 도저히 감당이 불가능하다고 생각될 정도의 분량이 들어가야 합니다.감당을 할 수 없는 분량까지

이전에 진행했던 굿즈 스토어 프로젝트에서 관리자가 제품을 등록할 때의 로직을 구현했던 적이 있었다. 그런데 그 당시에 Redux Store와 DB의 구조를 어떻게 만들어야하는지에 대한 이해가 부족하여 기능을 구현하면서 새로운 구조를 추가하거나 기존에 존재하던 구조를 지