본문 바로가기

전체 글

 (96)
쇼핑몰 사이트 만들기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에 있습니다. 이제 그것..
쇼핑몰 사이트 만들기7(multer를 이용하여 이미지 저장) 요번에는 Front End에서 파일을 전달하잖아요. 그걸 백엔드에서 받은 다음에 그거를 multer라는 라이브러리를 이용해서 파일을 저장 해주는 것을 해줄텐데요. 이게 multer를 사용해주는 부분인데요. destination 부분은 어디에 파일이 저장이 되는지 얘기를 해주는 부분이고요. filename 부분은 파일을 저장할 때 어떠한 이름으로 저장할지에 관한 부분인데요. 이렇게 백엔드에서 프론트엔드로 파일 정보를 전달하는 부분까지 해결해줬습니다. 그리고 정상적으로 전달이 되었는지 확인하기 위해서 백엔드에서 프론트엔드로 정상적으로 데이터를 받았는지 확인하기 위해서 출력을 해주도록 하겠습니다. 결과: FileUpload.js 결과: 이제는 정상적으로 이미지 올리는 것을 확인할 수 있습니다. 다음에는 이미지..
쇼핑몰 사이트 만들기6(이미지 파일을 서버로 보내기) 요번에는 저번에 Drop Zone을 통해서 파일을 보내는 부분을 만들었는데. 그 파일의 정보를 프론트엔드로 가져오는 부분을 처리할건데요. 그래서 저희가 할 것은 Dropzone을 통해서 파일을 올리는데 그런 다음 그 파일을 백엔드(Node 서버)에다가 전달을해주고요. 그리고 백엔드에 파일을 저장해줘야하는데요. 보낸 파일을 저장하는데 multer라는 라이브러리를 사용해야합니다. 그것을 이용해서 파일을 저장해주고 그 다음에 그 파일 저장된 위치나 이름 같은 정보들을 프론트엔드에 전달해주는 부분을 onDrop Function에 만들겠습니다. 프론트에서 할거를 처리해줬는데 이제는 백엔드에서 처리해주는 것을 하겠습니다. index.js product.js 이제 백엔드에서 처리해주기 위해 사용되는 multer라는 ..
쇼핑몰 사이트 만들기5(Drop-Zone 적용하기) 일단 components 폴더 안에 utils라는 폴더를 만들건데요. utils에 들어갈 파일들은 한 군데에서만 사용하는 것이 아니라 파일 업로드처럼 한 페이지 말고 다른 페이지들에서도 사용할 수 있게하는 파일들을 utils에 넣어줍니다. FileUpload.js라는 파일을 만들어주고 rfce를 작성함으로써 함수 컴포넌트를 작성해줄 것입니다. 일반적으로 아무 설정을 안 해줬을 경우에 rfce를 누르면 위처럼 함수 컴포넌트가 안 생깁니다. 저렇게 나오게 하기 위해서는 아래 사진처럼 따로 설정을 해주셔야하는데요. 확장 프로그램에서 ES7 React 저거를 다운 받아주시면 됩니다. FileUpload 파일을 import 해준다음 FileUpload부분을 가져와서 실행을 시켜주면 결과: FileUpload.js..

티스토리툴바