IT-사이드 프로젝트 (30) 썸네일형 리스트형 고객 관리 시스템 만들기2(깃 허브를 이용해서 소스코드 관리하기) 요번에는 GIT을 이용해서 소스코드를 관리하는 방법에 대해서 알아보도록하겠습니다. 우리는 향후 프로젝트에 효과적인 관리를 위해서 GIT 저장소를 생성한 뒤에 해당 저장소에 소스 코드를 올리게 될 것인데요. 일단 GIT에 소스 코드를 올리기 전에 전체 소스 코드의 윤곽을 잡고나서 올리는 것이 좋겠죠. 따라서 간단히 소스 코드를 수정해서 프로젝트의 윤곽을 이해해보도록하겠습니다. 자 일단 먼저 App.js는 웹 사이트 화면에 대한 내용 출력을 담당하는 부분입니다 고객 관리 시스템 만들기1(리엑트 프로젝트 시작하기) 1. 폴더 이름 mkdir 사용함으로써 만들어주기 2. cd를 통해서 폴더 위치로 이동 3. npm install -g create-react-app을 통해서 react project 만들기 4. React app 만들기 5. management라는 폴더가 만들어진 것을 볼 수 있습니다. 6. react app 구동 결과: 쇼핑몰 사이트 만들기31(카트에 들어있는 상품들 가격 계산) 저번에 이어서 요번에는 카트 안에 있는 상품 총 금액 계산을 해보려고하는데요. 계산을 어떤 방식으로 해줄거냐면 item price x quantity 형태로 해줄 것입니다. 위에 순서대로 각 상품들 개수만큼 곱해서 더해주시면 되겠죠. 그리고 그전에 저희가 처리해줘야하는게 있는데요. 위 사진처럼 바꿔주셔야합니다. 아니면 오류가 뜨게 됩니다. 결과: 쇼핑몰 사이트 만들기30(데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기) 저번에는 뿌려준 데이터들을 가져오기만 하였는데요. 그래서 요번에는 상품 카트 페이지에 해당하는 UI를 보이게하고 거기에 데이터들을 뿌려주는 작업을 해주도록하겠습니다. 순서를 말하자면, 1. CartPage를 위한 UI 만들기 -> UserCardBlock Component 2. 데이터베이스에서 가져온 데이터를 브라우저에서 보여주기 3. 카트 안에 있는 상품 총 금액 계산 -> item price x quantity 4. 카트에서 제거하는 기능 만들기 일단 첫번째 단계인 UI에서 카트에 들어간 상품 정보들을 보이게하는 부분은 컴포넌트를 만들어서 보이게 해줄텐데요. 컴포넌트 이름은 UserCardBlock Component로 해주겠습니다. UserCardBlock.js 결과: 쇼핑몰 사이트 만들기28(카트에 담긴 상품 정보들을 데이터베이스에서 가져오기1) 저번에 이어서 카트 페이지에 상품들을 가져와보도록하겠습니다. 가져올 때 상품 카트에 넣은 개수를 확인해야하는데 데이터베이스를 보면 products 컬랙션에 quantity에 대한 정보가 없는 것을 알 수 있습니다. 그래서 ursers안에 있는 quantity 정보를 가져와서 products 컬랙션에 합해줘서 카트 페이지에 뿌려줘야합니다. 그 작업을 지금 해주도록하겠습니다. user_reducer.js types.js CartPage.js product.js 이렇게 productId를 이용해서 DB에서 productId와 같은 상품의 정보를 가져올 수 있습니다. 그래서 이렇게 가져온 다음에 user_actions에서 위처럼 처리해주는 것을 다음에 해주도록하겠습니다. 쇼핑몰 사이트 만들기27(Add to Cart 기능 개선 및 카트 Tab 만들기) 저번에 Add to Cart를 누름으로써 해당 상품을 카트에다가 넣는 기능을 만들었잖아요. 거기서 한가지 작업을 더 해주도록 하겠습니다. users.js에서 카트에 관한 작업 처리를 해주겠습니다. 그리고 history에 관해서 설명하자면 결제 내역에 관한 것입니다. 이렇게 Add to Cart 버튼을 통해서 user안에 카트필드랑 history 필드 넣는 것을 성공하였는데요. 이제는 카트 페이지 만드는 것을 해주도록하겠습니다. 일단 쇼핑 카트 페이지 만드는 순서를 말하자면, 1. 빈 쇼핑 카트 페이지 만들기 2. 카트 페이지 Route 만들기 3. Cart 페이지를 위한 탭을 만들기 4. 카트 안에 들어가 있는 상품들을 데이터베이스에서 가져오기 views 폴더 안에 CartPage라는 폴더를 만들고 그 .. 쇼핑몰 사이트 만들기26(Add to Cart 버튼 만들기2) 요번에는 위에 있는 부분들을 처리해주도록하겠습니다. server/routes/users.js client/src/_reducers/user_reducer.js 쇼핑몰 사이트 만들기25(Add to Cart 버튼 만들기1) 저번에 Add to Cart 버튼을 만들어줬는데요. 그래서 그 버튼을 클릭했을 경우에 그 해당하는 상품이 쇼핑 카트에 담기는 기능을 만들어주도록 하겠습니다. 그런데 생각을 해보면 상품이 카트에 들어간거에 대한 정보를 저희가 데이터베이스에 또 저장을 해야겠죠. 그래서 저희가 user model에다가 cart와 history 필드를 만들어주도록하겠습니다. 이 다음에는 Add to Cart 버튼을 눌렀을 때, 필요한 정보들을 Cart 필드로 넣어주는 작업을 해주도록 하겠습니다. 필요한 정보들에 대해서 말해주자면 상품에 대한 id가 필요하고 개수가 필요하고 그리고 그 상품을 카트에 언제 넣었는지에 대한 정보를 나타내는 date(날짜 정보)가 필요합니다. 그리고 요 작업은 그냥 전에 했던 것처럼 axios를 사용.. 이전 1 2 3 4 다음
