* 호텔 룸 정보 화면 * 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..

* 사용자 입력 이벤트 처리하기 index.html 파일을 위와 같이 작성하자! 사용자 입력을 처리하기 위한 input 요소와 배경색상을 변경하기 위한 div 요소를 정의한다. body{ margin: 0; padding: 0; background: #0e1111; } .color-box{ background-color: #0e1111; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } #color-input{ all: unset; width: 300px; height: 50px; border: 2px solid lightgreen; padding: 10px; border-radius: 15px; color: lightgreen; fo..

* 호텔 목록을 보여주기 위한 가짜 데이터 저장하기 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..

이벤트 처리하기 참고문서 이벤트 입문 - Web 개발 학습하기 | MDN 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주 developer.mozilla.org * 이벤트의 개념 이벤트는 특정 사건이나 행동을 의미한다. 브라우저에서의 이벤트는 사용자가 버튼을 클릭한다든지 입력창에 뭔가를 입력하는 등의 사건을 가리킨다. * 이벤트핸들러 함수 사용자가 버튼을 클릭한더던지 입력창에 뭔가를 입력했을때 이를 처리하는 로직을 이벤트 핸들러 함수라고 한다. * 이벤트핸들러와 이벤트루프 (비동기 처리) 이벤트핸들러 함수는 자바스크립트 엔진에 의하여 이벤트루프에..

참고 사이트 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 에 기록된 모든 패키지들을 설치한다. * 초..

* 404 페이지 라우터 추가하기 import React from "react" import ReactDOM from "react-dom" import { BrowserRouter, Route, Routes } from "react-router-dom"; import { Register, Login, Home, Detail, Recommendation, NotFound } from 'pages' import './index.css' const App = () => { return ( ); }; ReactDOM.render( , document.getElementById("app")); index.js 파일을 위와 같이 수정하자! import { Register, Login, Home, Detail, Re..