* 자동완성을 실험하기 위한 가짜 데이터 저장하기 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..

* 파이어베이스 가입하기 파이어베이스 사이트 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 파이어베이스에 가입한 다음 콘솔로 이동한다. * 프로젝트 추가하기 프로젝트 추가 및 생성한다. * 웹앱에 파이어베이스를 추가하여 시작하기 - 앱 등록 웹 앱에 파이어베이스를 추가한다. (또한 이 앱의 Firebase 호스팅을 설정하세요 선택) * 파이어베이스 CLI 설치하기 npm install -g firebase-tools CMD 명령창에서 위 명령어를 입력한다. * 파이어베이스 로그인 하기 firebase login CMD 명령창에서 위 명령어를 입력한다. * 파이어베이스 프로젝트 초기..

* 모달창 컴포넌트 추가하기 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: 100vh; background: black; /* opacity: 0.98; */ position: absolute; display: none; top: 0; left: 0; } .Modal { width: 500px; box-..

* 사용자 정보 유무에 따른 페이지 접근제한 하기 - Home import React, { useState, useEffect } from 'react' import { Link, useNavigate } from 'react-router-dom' import { Movie, Loading, Input, Button, Menu } from 'components' import './Home.css' const Home = () => { // 사용자 정보 유무에 따른 페이지 접근 제한하기 const navigateToRegister = useNavigate() const user = JSON.parse(sessionStorage.getItem('user')) if(!user){ useEffect ( () =..

* 영화목록 전체보기 기능 구현하기 import React, { useState, useEffect } from 'react' import { Link, useNavigate } from 'react-router-dom' import { Movie, Loading, Input, Button, Menu } from 'components' import './Home.css' const Home = () => { const [loading, setLoading] = useState(true) const [movies, setMovies] = useState([]) const [query, setQuery] = useState('') const [isSorted, setIsSorted] = useState(-1..

* 영화 삭제 구현하기 import React, { useState, useEffect } from 'react' import { Link, useNavigate } from 'react-router-dom' import { Movie, Loading, Input, Button, Menu } from 'components' import './Home.css' const Home = () => { const [loading, setLoading] = useState(true) const [movies, setMovies] = useState([]) const [query, setQuery] = useState('') const [isSorted, setIsSorted] = useState(-1) const..

* Movie 컴포넌트에 좋아요 속성 추가하기 import React from 'react' import './Movie.css' const Movie = ({ title, genres, cover, summary, year, rating, likes }) => { return ( {title} ({year}) {genres.join(" ")} {rating} / ❤️ {likes ? likes : 0} ) } export default Movie Movie.js 파일을 위와 같이 수정하자! likes 속성을 추가하고 화면에 렌더링한다. * 홈화면에 좋아요 업데이트 기능 추가하기 import React, { useState, useEffect } from 'react' import { Link, useN..