본문 바로가기

WEB

 (60)
검색 기능 만들기 #1 SearchFeature Component 만들기 Search 기능을 위한 UI 만들기 onChange Function 만들기 search Data를 부모 컴포넌트에 업데이트 하기 LandingPage/Sections/SearchFeature.js 파일을 만든 후에 LandingPage.js에 임포트 해오자. https://ant.design/components/input#inputsearch Input - Ant Design When Input is used in a Form.Item context, if the Form.Item has the id and options props defined then value, defaultValue, and id props of Input are autom..
라디오 박스 필터 만들기 라디오 박스 필터는 CheckBox 필터 만드는 과정과 거의 비슷하기 때문에 복습할 땐 CheckBox 필터 글을 보자. #1 RadioBox 리스트 데이터 만들기 Datas.js 더보기 const continents = [ { "_id": 1, "name": "Africa" }, { "_id": 2, "name": "Europe" }, { "_id": 3, "name": "Asia" }, { "_id": 4, "name": "North America" }, { "_id": 5, "name": "South America" }, { "_id": 6, "name": "Australia" }, { "_id": 7, "name": "Antarctica" } ] const price = [ { "_id": 0, ..
체크 박스 필터 만들기(2) 일단 중간에 강사님이 실수하신 부분이 있다. Product Model을 만들 때 continents도 넣어줬어야 됐는데 이걸 깜박하고 안넣으셨다고 한다. 그래서 필터링 된 continents들이 랜딩 페이지에 뜨질 않는다. Product Model 코드를 수정하고 파일들을 다시 업로드 해주자. server/models/Product.js 더보기 const mongoose = require('mongoose'); const Schema = mongoose.Schema; const productSchema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref: 'User' }, name: { type: String, maxlength: 50 }, d..
체크 박스 필터 만들기 CheckBox 리스트 만들기 & CheckBox를 위한 UI 만들기 continent 값들이 너무 많다보니까 LandingPage에 넣으면 코드가 너무 길어진다. LandingPage 폴더에서 Sections 폴더를 만들고 Datas.js 파일을 만들어서 continent 값들을 저장하여 따로 구현해주자. LandingPage/Sections/Datas.js 더보기 const continents = [ { "_id": 1, "name": "Africa" }, { "_id": 2, "name": "Europe" }, { "_id": 3, "name": "Asia" }, { "_id": 4, "name": "North America" }, { "_id": 5, "name": "South America" }..
더보기 버튼 만들기 SKIP이란? 어디서 부터 데이터를 가져오는지에 대한 위치 ex) 처음엔 0부터 시작. LIMIT이 6이라면 다음 번엔 0+6부터 LIMIT이란? 처음 데이터를 가져올 때 와 더보기 버튼을 눌러서 가져올 때 얼마나 많은 데이터를 한 번에 가져오는지 지정 더보기 버튼 onClick Function 구현 & SKIP과 LIMIT을 위한 STATE 구현 & Route 수정(1) & AXIOS 중복 코드 제거 및 loadMoreHandler function 구현(1) import axios from 'axios'; import React, { useEffect, useState } from 'react' import {Icon, Col, Row, Card, Carousel} from 'antd' import M..
이미지 슬라이더 만들기 이미지를 여러개 업로드 했을 때 LandingPage에서 자동으로 여러 개 업로드 했던 이미지들을 슬라이더처럼 보여주도록 구현하자. https://ant.design/components/carousel Carousel - Ant Design A carousel component. Scales with its container. When To Use When there is a group of content on the same level.When there is insufficient content space, it can be used to save space in the form of a revolving door.Commonly used for a group of pictures/car ant.de..
카드 만들기 카드를 만들기 전에 틀을 조금 짜주자. 밑에 코드는 LandingPage.js의 return 부분이다. return ( Let's Travel Anywhere {/* Filter */} {/* Search */} 더보기 ) 카드 컴포넌트를 사용할 때 저런식으로 넣어주면 되지만, 여러 개를 사용할 경우 일일이 컴포넌트를 계속해서 추가해 줄 필요가 없다. 그래서 useState를 이용하여 서버로부터 받은 product들을 state로 저장해서 map함수를 이용하여 간결하게 코드를 구현해 줄 수 있다. 강의에서는 해당 구현 파트를 따로 함수로 구현해서 더욱 간결하게 코드를 구현했다. import axios from 'axios'; import React, { useEffect, useState } from '..
데이터베이스에 들어있는 모든 상품을 가져오기 import axios from 'axios'; import React, { useEffect } from 'react' function LandingPage() { useEffect(() => { // 원래라면 필터 기능을 위해 axios에 요청할 때 body 객체를 함께 보내주는데 현재 단계에선 모든 // 상품을 갖고오기 때문에 아직까진 필요없다. axios.post('/api/product/products') .then(response => { if(response.data.success){ console.log(response.data) }else { alert('상품들을 갖고오는데 실패') } }) }) return ( LandingPage ) } export default LandingPage..

티스토리툴바