본문 바로가기

IT-사이드 프로젝트

(30)
쇼핑몰 사이트 만들기16(체크 박스 필터 만들기2) 요번엔 onChange function을 만들어줄 차례인데요. 저희가 위에 있는 checkbox를 컨트롤해주려면 checked라는 속성을 이용해주셔야하는데요. 위처럼 true일 경우에는 체크 박스가 다 체크가 되어있고 false일 경우에는 다 체크가 안되어있다. 저희가 체크박스를 이미 checked가 되어있는 것을 클릭해주면 false로 해주고 checked가 안되어있는 것을 클릭해주면 true로 바꿔줄 것입니다. 사진 업로드 부분에서 업로드 과정에서 사진을 제거하는 것과 추가하는 기능과 매우 유사합니다. 그리고 currentIndex가 -1일 경우에는 Checked안에 누른 value가 없다는 것입니다. 결과: 이제 중복으로도 체크가 가능한 것을 확인할 수 있습니다.
쇼핑몰 사이트 만들기14(더보기 버튼 만들기2) 저희가 저번에는 더보기를 누르지 않은이상 기본적으로 최대 8개의 아이템을 화면에 보여줬는데용. 요번에는 그 더보기 버튼을 눌렀을 경우 최대 8개의 아이템을 추가적으로 보여주는 부분을 처리해주겠습니다 . 그 함수에서 axio.post 부분은 똑같이 해줄거고 그리고 body 부분은 일단 전과 똑같이 동일하게 8개를 가져오는거니 limit은 똑같이 해주고 실행 시점이 다르기 대문에 skip을 다르게 해줍니다. 결과: 더보기 버튼을 눌렀을 경우에 저렇게 그 다음 더 있는 아이템 최대 8개중있는 것들이 뜹니다. 그런데 전 아이템들은 안뜨죠. 전 아이템 아래에 추가적으로 아이템들이 뜨게 설정을 해줄 것입니다. 원래 그전에 있던 8개의 Product를 넣고 그 이후에 추가적으로 넣습니다. 결과: 이제는 그 전 아이템..
쇼핑몰 사이트 만들기13(더보기 버튼 만들기) 요번에는 더보기 버튼을 만들어볼건데요. Mongo DB를 이용해서 저 기능을 만들어줄건데요. MongoDB에서 제공해주는 메소드가 SKIP이랑 LIMIT이 있는데요 그것들을 활용해서 기능을 만들어주겠습니다. 처음에 LIMIT에 대해서 설명을하자면 처음에 데이터를 가져올 때 얼마나 많은 데이터를 한번에 가져오는지와 그리고 가져온다음에 더보기 버튼을 눌렀을 때 또한 몇개까지 가져올 수 있는지입니다. 그래서 LIMIT은 최대한 가져올 수 있는 아데이터 크기를 말합니다. 저희는 처음에 최대한 8개를 가져오고 더보기 버튼을 누를 때마다 최대한 8개의 아이템들을 더 가져올 수 있게 해줄 것입니다. 그리고 SKIP은 어디서부터 데이터를 가져오는지에 대한 위치입니다. 처음에는 0부터 시작을 합니다. 만약 LIMIT이 ..
쇼핑몰 사이트 만들기12(이미지 슬라이더 만들기) 요번에는 만약 저희가 상품 등록할 때 이미지를 2~3개 등록했을 경우에 하나의 사진만 보지 말고 다른 사진도 볼 수 있게 슬라이드를 통해서 볼 수 있게 설정을해줄 것입니다. ant design 중에서 Carousel이라는 것을 사용해줘서 설정 해줄 것입니다. https://ant.design/components/carousel/ Carousel - Ant Design Timing of scrolling to the next card/picture. ant.design 위에 있는 url에 들어가서 예제를 통해서 더 자세히 carousel에 대해서 알 수 있습니다. 그냥 LandingPage.js에다가 만들면 지저분하니까 새로운 컴포넌트에 만들어주겠습니다. utils 폴더 안에 ImageSlider.js를 ..
쇼핑몰 사이트 만들기11(카드 만들기) 상품 목록을 보여주는 카드 부분을 만들어준 코드입니다. ㅎ 결과: 위 사진처럼 카드를 추가할 수 있는데 그런데 이렇게 저희가 일일히 수동적으로 추가할 수는 없잖아요. 그러기 때문에 모든 데이터를 가져온 다음에 그것들을 useState으로 Products에 저장한 다음에 접근하게 만들어줄 것입니다. 결과: 제가 등록해놓은 상품이 두개가 있는데 그 개수만큼 화면에 출력되는 것을 알 수 있습니다. 그런데 그 등록해놓은 상품이 정상적으로 오는지 확인해주겠습니다. 등록해놓은 상품들에 관한 정보가 정상적으로 출력되는 것을 볼 수 있습니다. 상품에 해당하는 첫번째 이미지만 나오게 설정해줬습니다. 그리고 상품 제목이랑 상품에 해당하는 가격을 보이게 설정해줬습니다. 그런데 저희 지금 상품은 세로로 한줄로 생겨서 크기도 ..
쇼핑몰 사이트 만들기10(데이터베이스에 들어 있는 모든 상품을 가져오기) 일단 지금 처음으로는 저희가 전에 상품을 업로드했었는데 그것들이 데이터베이스에 저장이 되잖아요. 그래서 데이터베이스에 있는 모든 상품들을 랜딩 페이지에 나열해주는 것들을 먼저 해주겠습니다. 그러면 일단 몽고디비에 저장되어 있는 데이터들을 가져와야합니다. 저희가 먼저 데이터베이스에 저장된 상품 데이터들을 가져와볼 것입니다. 그리고 원래라면 body를 줌으로써 필터 나눠서 보여줄건데 지금은 일단 모든 상품들을 보여줄 거여서 body 없이 코드를 짜줄 것입니다. 그리고 product.js에서 라우팅해주는 부분을 또 만들겠습니다. find라는 메소드를 사용해서 product collection안에있는 정보를 찾는 것입니다. 그리고 하나 더 해줄 것이 있는데 그것은 populate()인데요. populate()을..
쇼핑몰 사이트 만들기9(모든 상품 정보를 데이터베이스에 저장하기) 요번에는 상품 업로드 페이지를 마무리해보겠습니다. 먼저 일단 Product Model을 만들어야합니다. 왜냐하면 저희가 모든 정보를 갖고있는 다음 확인 버튼을 누를 때, 서버로 보내줘서 서버에서 이제 데이터베이스를 저장해줘야하잖아요. 그 때 mongodb collection이 필요해서 Product Model을 만들어주겠습니다. models 폴더안에 product.js라는 파일을 생성해주시면 됩니다. Product.js 그리고 timestamps 부분에 관해서 말하자면 자동적으로 등록시간이나 업데이트 시간 같은 것들이 등록됩니다. 그리고 Upload File Component 가져오고 파일 데이터를 uploadFile 컴포넌트에서 부모 컴포넨트로 업데이트를 해줘야하는데 그 부분에서는 아래처럼 해주시면 됩..
쇼핑몰 사이트 만들기8(이미지 지우기, 이미지 State을 부모 컴포넌트로 업데이트하기) 인덱스 개념을 이용해서 이미지를 지울 것입니다. 예를 들어서 두번째 이미지를 지우고 싶으면 index 1번째 부분을 삭제해주는 것처럼요. 일단 저희가 클릭하는 이미지에 해당하는 인덱스를 출력하는 부분을 짜줄 것입니다. 결과: 지정된 위치에서 한개 삭제한거라고 생각하시면 됩니다. 이제 클릭하면 삭제하는 것을 볼 수 있습니다. 그런데 지금 저희가 파일 업로드라는 컴포넌트는 UploadProductPage에 자녀 컴포넌트로 들어가있는겁니다. 부모 컴포넌트에서 이미지 정보를 가지고 있어줘야하거든요. 그래야지 submit 버튼을 누를 때, 모든 정보들을 한 곳(UploadProductPage라는 컴포넌트)에서 이제 백엔드에 한꺼번에 보내줘야하는데요. 하지만 이미지 정보는 FileUpload에 있습니다. 이제 그것..