* 호텔 객실 정보를 보여주기 위한 모달창 추가하기 components 폴더 하위에 아래 파일들을 추가한다. import React from 'react' import './Modal.css' function Modal({ open, children }){ return {children} } export default Modal; Modal.defaultProps = { open: false } Modal.js 파일을 생성하고 위와 같이 작성하자! .Modal-container{ width: 100%; height: 100%; background-color: rgba(77, 73, 73, 0.7); position: fixed; overflow: hidden; display: none; top: 0; l..

* 호텔 룸 정보 화면 * hotelItem 컴포넌트 변경 import React from 'react' import { Link } from 'react-router-dom' import { isArrayNull, handleNullObj } from 'lib' import './HotelItem.css' const HotelItem = ({ hotel, bookingInfo }) => { const { id, name, optimizedThumbUrls, starRating, address, landmarks, guestReviews, ratePlan, neighbourhood } = handleNullObj(hotel) const { srpDesktop } = handleNullObj(optimiz..

* 특정 호텔 선택시 상세페이지로 호텔 정보 전달하기 import React from 'react' import { Link } from 'react-router-dom' import { isArrayNull, handleNullObj } from 'lib' import './HotelItem.css' const HotelItem = ({ hotel }) => { const { id, name, optimizedThumbUrls, starRating, address, landmarks, guestReviews, ratePlan, neighbourhood } = handleNullObj(hotel) const { srpDesktop } = handleNullObj(optimizedThumbUrls) con..

* 호텔 목록을 보여주기 위한 가짜 데이터 저장하기 const hotelsData = { "header": "강남, 서울, 한국", "query": { "destination": { "id": "1665648", "value": "강남, 서울, 한국", "resolvedLocation": "NEIGHBORHOOD:1665648:UNKNOWN:UNKNOWN" } }, "searchResults": { "totalCount": 2972, "results": [ { "id": 106707, "name": "조선 팰리스 럭셔리 컬렉션 호텔, 서울 강남 (Josun Palace, a Luxury Collection Hotel, Seoul Gangnam)", "starRating": 5, "urls": {}, "a..

참고 사이트 Leaflet — an open-source JavaScript library for interactive maps Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. leafletjs.com

* 자동완성을 실험하기 위한 가짜 데이터 저장하기 const queryData = { "query": "서울", "moresuggestions": 10, "suggestions": [ { "group": "CITY_GROUP", "entities": [ { "geoId": "3124", "destinationId": "759818", "landmarkCityDestinationId": null, "type": "CITY", "redirectPage": "DEFAULT_PAGE", "latitude": 37.565994, "longitude": 126.982577, "searchDetail": null, "caption": "서울, 한국", "name": "서울" }, { "geoId": "6049712"..

* 사용자 입력을 위한 Input 컴포넌트 만들기 components 폴더를 생성하고 하위에 아래와 같은 파일들을 생성하자! import React from 'react' import './Input.css' const Input = ({ name, type, placeholder, value, onChange, width, min, max}) => { return ( ) } export default Input Input.defaultProps = { width: 'middle', min: 0, max: 0 } Input.js 파일을 생성하고 위와 같이 작성하자! input 요소를 렌더링한다. 클래스 이름에 width 속성이 전달되어 Input 의 너비를 설정할 수 있다. min, max 속성은 Inp..

* 프로젝트 루트 폴터 생성하기 mkdir hotelsCom cd hotelsCom CMD 명령창에서 위와 같이 입력하고 루트 폴더를 생성하고, 폴더 내부로 이동한다. * 프로젝트 기본 셋팅하기 - webpack git clone https://github.com/sssssqew/react-webpack.git CMD 명령창에서 위와 같이 입력하고 웹팩에 기본으로 설정되어 있는 보일러플레이트 코드를 내려받는다. 그런 다음 react-webpack 이라는 폴더명을 client 로 변경한다. * 기본 페키지 설치하기 npm install client 폴더 내부로 이동하고, package.json 이 위치한 곳에서 위와 같은 명령어를 입력해서 package.json 에 기록된 모든 패키지들을 설치한다. * 초..