* 스크롤 이벤트 스크롤 이벤트는 마우스 휠을 스크롤할때 발생하는 이벤트이다. 해당 이벤트를 사용하면 웹페이지에서 유용한 효과나 애니메이션을 보여줄 수 있다. * 가로 스크롤링 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 index.html 파일을 위와 같이 작성한다. 리스트 아이템이 20개가 있다. body{ background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg); } .container{ display: flex; width: 80%; height: 200px; margin: ..

* 호텔 객실 정보를 보여주기 위한 모달창 추가하기 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..

* 사용자 입력 이벤트 처리하기 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..