* 프로젝트 루트 폴터 생성하기 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..

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

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