Hỏi & Đáp
로직이 떠오르지 않습니다...
where 조건문을 서버쪽에서 사용합니다!! 현재 코드는 다음과 같습니다 서버쪽 코드는 전체 코드가 아닌 조회로직에 사용되는 코드들로 올려보았습니다! 문제점이 메인페이지에서 사용자의 입력값을 셀렉트하고 검색을 눌렀을 때, 해당 조건에 맞는 방이 출력되는 것이 아닌 디비에 있는 모든 방들이 출력이 됩니다. F12버튼을 눌러 콘솔창을 확인해본 결과 디비에 있는 모든 방들이 찍히는 것이 지금의 문제점 같습니다. window . location . href = " /search " ; 하지만 해당 코드가 문제인건지 search 페이지에서 이 코드를 주석처리를 하고 사용자의 입력값을 셀렉하고 검색버튼을 눌렀을 땐 사용자가 입력한 내용들이 콘솔에 찍힙니다. 서버상에 찍히는 콘솔입니다. Executing (default): SELECT `id`, `address1`, `address2`, `address3`, `address4`, `datein`, `dateout`, `roomtype`, `people`, `price`, `description`, `imageurl` FROM `Rooms` AS `Rooms` WHERE `Rooms`.`address1` = '인천' AND `Rooms`.`address2` = '미추홀구' AND `Rooms`.`datein` = '2021-04-25' AND `Rooms`.`dateout` = '2021-04-28' AND `Rooms`.`roomtype` = '2' AND `Rooms`.`people` = '2' ORDER BY `Rooms`.`createdAt` DESC; { address1: '인천', address2: '미추홀구', datein: '2021-04-25', dateout: '2021-04-28', roomtype: '2', people: '2' } Rooms : [ { id: 17, address1: '인천', address2: '미추홀구', address3: '용현동', address4: '용현동 12-345', datein: '2021-04-25', dateout: '2021-04-28', roomtype: '2', people: '2', price: 50000, description: '야경이 멋진 방', imageurl: '/roomImages/s1.png' } 단, 이 코드를 주석으로 풀었을 때는 검색버튼을 누르는 동시에 콘솔에는 사용자가 입력한 값이 찍히지 않고 디비에 있는 모든 방들이 찍히고 화면에 출력됩니다. 메인페이지에서 사용자의 입력값을 셀렉하고 검색버튼을 눌렀을 때 해당 콘솔이 서버쪽에 찍힙니다. 서버에 찍힌 콘솔은 쿼리를 하나도 가져오지 못하는 것을 확인하였고 간단한 테스트를 진행해봤습니다. location . href = " /search?addr1= " + values . addr1 + " &addr2= " + values . addr2 ; 이렇게 하였을 때 값을 제대로 전달해주지 않았더라면 addr1=undefined이 찍혀야지 맞지만 유저가 입력한 값 그대로 URL에 송출이 됩니다. 하지만 서버 콘솔에는 유저가 입력한 값은 하나도 나오지 않습니다. {} Executing (default): SELECT `id`, `address1`, `address2`, `address3`, `address4`, `datein`, `dateout`, `roomtype`, `people`, `price`, `description`, `imageurl` FROM `Rooms` AS `Rooms` ORDER BY `Rooms`.`createdAt` DESC; Rooms : [ { id: 30, address1: '인천', address2: '미추홀구', address3: '용현동', address4: '백호오피스텔', datein: '2021-04-12', dateout: '2021-04-13', roomtype: '2', people: '2', price: 80000, description: '문화의 거리 7분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s9.png' }, { id: 25, address1: '인천', address2: '부평구', address3: '용현동', address4: 'State오피스텔', datein: '2021-04-27', dateout: '2021-04-28', roomtype: '2', people: '2', price: 80000, description: '문화의 거리 8분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s8.png' }, { id: 24, address1: '인천', address2: '동구', address3: '용현동', address4: '베스트오피스텔', datein: '2021-04-27', dateout: '2021-04-28', roomtype: '2', people: '2', price: 80000, description: '문화의 거리 5분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s7.png' }, { id: 23, address1: '인천', address2: '연수구', address3: '용현동', address4: '케이오피스텔', datein: '2021-04-29', dateout: '2021-04-30', roomtype: '2', people: '2', price: 80000, description: '문화의 거리 3분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s6.png' }, { id: 22, address1: '인천', address2: '서구', address3: '용현동', address4: '제이오피스텔', datein: '2021-04-28', dateout: '2021-04-29', roomtype: '2', people: '2', price: 80000, description: '인하대역 2번 출구 10분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s5.png' }, { id: 21, address1: '인천', address2: '부평구', address3: '용현동', address4: '마로오피스텔', datein: '2021-04-27', dateout: '2021-04-28', roomtype: '2', people: '2', price: 80000, description: '인하대역 2번 출구 15분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s4.png' }, { id: 20, address1: '인천', address2: '중구', address3: '용현동', address4: '헬마빌오피스텔', datein: '2021-04-27', dateout: '2021-04-28', roomtype: '2', people: '2', price: 80000, description: '논현역 2번 출구 3분거리 최적의 오피스텔입니다.', imageurl: '/roomImages/s3.png' }, { id: 19, address1: '인천', address2: '남동구', address3: '문학동', address4: '문학동 77-777', datein: '2021-04-26', dateout: '2021-04-28', roomtype: '2', people: '2', price: 30000, description: 'ㅇㅁㄴㅇㅁㄴ', imageurl: '/roomImages/s2.png' }, { id: 17, address1: '인천', address2: '미추홀구', address3: '용현동', address4: '용현동 12-345', datein: '2021-04-25', dateout: '2021-04-28', roomtype: '2', people: '2', price: 50000, description: '야경이 멋진 방', imageurl: '/roomImages/s1.png' } const express = require ( " express " ) ; const cors = require ( " cors " ) ; const app = express () ; const models = require ( " ./models " ) ; const port = 8090 ; const multer = require ( " multer " ) ; const addroom = multer ( { storage : multer . diskStorage ( { destination : function ( req , file , cb ) { cb ( null, " addroom/ " ) ; // 이미지 저장 경로 }, filename : function ( req , file , cb ) { cb ( null, file . originalname ) ; // 이미지 파일 이름 설정 }, } ) , } ) ; app . use ( express . json ()) ; app . use ( cors ()) ; app . use ( " /addroom " , express . static ( " addroom " )) ; app . get ( " /search " , ( req , res ) => { console . log ( req . body ) ; //console.log(req.query); // 사용자의 입력을 바탕으로 검색 기능 필터 로직 const whereOption = {}; if ( req . query . address1 && typeof req . query . address1 === " string " ) { whereOption [ " address1 " ] = req . query . address1 ; } if ( req . query . address2 && typeof req . query . address2 === " string " ) { whereOption [ " address2 " ] = req . query . address2 ; } if ( req . query . datein && typeof req . query . datein === " string " ) { whereOption [ " datein " ] = req . query . datein ; } if ( req . query . dateout && typeof req . query . dateout === " string " ) { whereOption [ " dateout " ] = req . query . dateout ; } if ( req . query . roomtype && typeof req . query . roomtype === " string " ) { whereOption [ " roomtype " ] = req . query . roomtype ; } if ( req . query . people && typeof req . query . people === " string " ) { whereOption [ " people " ] = req . query . people ; } models . Rooms . findAll ( { order : [[ " createdAt " , " DESC " ]] , // 방 조회 정렬 (오름차순) 로직 -> 최근에 등록한 방이 먼저 보이게끔 설정하기 위해서 attributes : [ " id " , " address1 " , " address2 " , " address3 " , " address4 " , " datein " , " dateout " , " roomtype " , " people " , " price " , " description " , " imageurl " , ] , // 가져오고 싶은 데이터만 받아올 수 있는 로직 where : { ... whereOption , }, raw : true , } ) . then ( ( result ) => { console . log ( " Rooms : " , result ) ; res . send ( { Rooms : result , } ) ; } ) . catch ( ( error ) => { console . error ( error ) ; res . status ( 400 ) . send ( " 에러 발생 " ) ; } ) ; } ) ; app . listen (port , () => { console . log ( " airtrace 서버가 돌아가고 있습니다 " ) ; models . sequelize . sync () . then ( () => { console . log ( " DB 연결 성공! " ) ; } ) . catch ( ( err ) => { console . error ( err ) ; console . log ( " DB 연결 에러 " ) ; process . exit () ; } ) ; } ) ; import " ./index.css "; import { Link } from " react-router-dom "; import { Button , Form } from " antd "; import { API_URL } from " ../config/constants "; import axios from " axios "; function MainPage () { const onSubmit = ( values ) => { console . log ( values ) ; axios . post ( `${ API_URL } /search ` , { //서버통신 params : { address1 : values . addr1 , address2 : values . addr2 , datein : values . datein , dateout : values . dateout , roomtype : values . roomtype , people : values . people , price : values . price , imageurl : values . imageurl , }, } ) . then ( ( result ) => { console . log ( result ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; location . href = " /search " ; }; return ( div > div id = " header " > div id = " logo " > Link to = " / " > img src = " ../images/logo.png " id = " logo " alt = " logo " /> Link > div > Form className = " formcss " name = " 방검색 " onFinish ={ onSubmit } > div id = " searchbox " > div > h4 > 도시선택 h4 > Form.Item name = " addr1 " > select className = " searchboxselect1 " > option > 시 option > option value = " 서울 " > 서울 option > option value = " 인천 " > 인천 option > option value = " 경기 " > 경기 option > option value = " 강원 " > 강원 option > option value = " 대전 " > 대전 option > option value = " 대구 " > 대구 option > option value = " 충청 " > 충청 option > option value = " 전라 " > 전라 option > option value = " 경상 " > 경상 option > option value = " 제주 " > 제주 option > select > Form.Item > div > div > h4 > 구선택 h4 > Form.Item name = " addr2 " > select className = " searchboxselect2 " > option > 구 option > option value = " 남동구 " > 남동구 option > option value = " 미추홀구 " > 미추홀구 option > option value = " 부평구 " > 부평구 option > option value = " 중구 " > 중구 option > option value = " 서구 " > 서구 option > option value = " 동구 " > 동구 option > option value = " 연수구 " > 연수구 option > select > Form.Item > div > div > h4 > 체크인 날짜 h4 > Form.Item name = " checkIn " > input className = " searchboxcheckin " type = " date " /> Form.Item > div > div > h4 > 체크아웃 날짜 h4 > Form.Item name = " checkOut " > input className = " searchboxcheckout " type = " date " /> Form.Item > div > div > h4 > 방 타입 h4 > Form.Item name = " roomtype " > select className = " searchboxroomtype " > option > 방타입 option > option value = " 1 " > 1룸 option > option value = " 2 " > 2룸 option > option value = " 3 " > 3룸 option > select > Form.Item > div > div > h4 > 방 인원 h4 > Form.Item name = " people " > select className = " searchboxpeople " > option > 인원 option > option value = " 1 " > 1명 option > option value = " 2 " > 2명 option > option value = " 3 " > 3명 option > select > Form.Item > div > div > div id = " searchclick " > Form.Item > Button id = " searchbutton " size = " large " htmlType = " submit " > 검색 Button > Form.Item > div > Form > div className = " joinbutton " > Link to = " /login " > input type = " button " id = " login " value = " 로그인 " /> Link > Link to = " /members " > input type = " button " id = " signup " value = " 회원가입 " /> Link > div > div > div id = " main " > div id = " maindescription " > img id = " mainimg " src = " ../images/main2.jpg " /> div id = " maincaption " > h1 className = " mainh1 " > 도시별 바로가기 h1 > div > div id = " mainboxtop " > div id = " seoul " > button > 서울 button > div > div id = " incheon " > button > 인천 button > div > div id = " gyunggi " > button > 경기 button > div > div id = " gangwon " > button > 강원 button > div > div > div id = " mainboxbottom " > div id = " chungchung " > button > 충청 button > div > div id = " junra " > button > 전라 button > div > div id = " gyungsang " > button > 경상 button > div > div id = " jeju " > button > 제주 button > div > div > div id = " mainbottomimg " > div > div > div > div > ) ; } export default MainPage ; import " ./index.css "; import { Link } from " react-router-dom "; import { Button , Form } from " antd "; import { API_URL } from " ../config/constants "; import axios from " axios "; import React from " react "; import ReactDOM from " react-dom "; import { useState , useEffect } from " react "; function searchPage () { const [ rooms , setRooms ] = useState ([]) ; useEffect ( function () { axios . get ( `${ API_URL } /search ` ) . then ( function ( result ) { setRooms ( result . data . Rooms . map ( ( data ) => { return data ; } ) ) ; } ) . catch ( function ( error ) { console . error ( " 에러 발생 : " , error ) ; } ) ; }, []) ; const onSubmit = ( values ) => { //console.log("hi!"); console . log ( values ) ; axios . get ( `${ API_URL } / ` , { params : { address1 : values . addr1 , address2 : values . addr2 , datein : values . datein , dateout : values . dateout , roomtype : values . roomtype , people : values . people , price : values . price , imageurl : values . imageurl , }, //서버통신 } ) . then ( ( result ) => { console . log ( result ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; // window.location.href = // "/search?addr1=" + values.addr1 + "&addr2=" + values.addr2; }; return ( div > div id = " header " > div id = " logo " > Link to = " / " > img src = " ../images/logo.png " id = " logo " alt = " logo " /> Link > div > Form className = " formcss " name = " 방검색 " onFinish ={ onSubmit } > div id = " searchbox " > div > h4 > 도시선택 h4 > Form.Item name = " addr1 " > select className = " searchboxselect1 " > option > 시 option > option value = " 서울 " > 서울 option > option value = " 인천 " > 인천 option > option value = " 경기 " > 경기 option > option value = " 강원 " > 강원 option > option value = " 대전 " > 대전 option > option value = " 대구 " > 대구 option > option value = " 충청 " > 충청 option > option value = " 전라 " > 전라 option > option value = " 경상 " > 경상 option > option value = " 제주 " > 제주 option > select > Form.Item > div > div > h4 > 구선택 h4 > Form.Item name = " addr2 " > select className = " searchboxselect2 " > option > 구 option > option value = " 남동구 " > 남동구 option > option value = " 미추홀구 " > 미추홀구 option > option value = " 부평구 " > 부평구 option > option value = " 중구 " > 중구 option > option value = " 서구 " > 서구 option > option value = " 동구 " > 동구 option > option value = " 연수구 " > 연수구 option > select > Form.Item > div > div > h4 > 체크인 날짜 h4 > Form.Item name = " datein " > input className = " searchboxcheckin " type = " date " /> Form.Item > div > div > h4 > 체크아웃 날짜 h4 > Form.Item name = " dateout " > input className = " searchboxcheckout " type = " date " /> Form.Item > div > div > h4 > 방 타입 h4 > Form.Item name = " roomtype " > select className = " searchboxroomtype " > option > 방타입 option > option value = " 1 " > 1룸 option > option value = " 2 " > 2룸 option > option value = " 3 " > 3룸 option > select > Form.Item > div > div > h4 > 방 인원 h4 > Form.Item name = " people " > select className = " searchboxpeople " > option > 인원 option > option value = " 1 " > 1명 option > option value = " 2 " > 2명 option > option value = " 3 " > 3명 option > select > Form.Item > div > div > div id = " searchclick " > Form.Item > Button id = " searchbutton " size = " large " htmlType = " submit " > 검색 Button > Form.Item > div > Form > div className = " joinbutton " > Link to = " /hostroom " > input type = " button " id = " login " value = " 방관리 " /> Link > Link to = " /cusroom " > input type = " button " id = " signup " value = " 예약관리 " /> Link > div > div > div className = " roomListBox " > { rooms . map ( ( room , index ) => { console . log ( room ) ; return ( div className = " roomBox " key ={ index } > Link className = " room-link " to ={ ` /reservation/ ${ room . id }` } > img className = " roomBoxImg " src ={ room . imageurl } /> div className = " roomInfo " > strong > 주소 : { room . address1 } { room . address2 } { room . address3 } strong > p > 가격 : { room . price } 원 (1박) p > p > 기준 인원 : { room . people } 명 p > div > Link > div > ) ; } ) } div > div > ) ; } export default searchPage ;
- Lượt thích
- 1
- Số bình luận
- 3
- Lượt xem
- 472