* 영화 추천 페이지 라우트 추가하기 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 페이지 컴포넌트를 ..

import React, { useState } from 'react' import { useNavigate } from 'react-router-dom' import { Input, Button } from 'components' import './Register.css' const Register = () => { const [id, setId] = useState('') const [password, setPassword] = useState('') const navigate = useNavigate() const handleChange = (e) => { const { name, value } = e.target name === 'id'? setId(value) : setPassword(value..

* 검색 구현하기 import React, { useState, useEffect } from 'react' import { Movie, Loading } from 'components' import { Input } from 'components' import './Home.css' const Home = () => { const [loading, setLoading] = useState(true) const [movies, setMovies] = useState([]) const [query, setQuery] = useState('') useEffect( () => { fetch('https://yts.mx/api/v2/list_movies.json?limit=20') .then( res => re..

* 글로벌 스타일 설정하기 src 폴더에 해당 파일을 추가한다. body{ margin: 0; padding: 0; } index.css 파일을 위와 같이 생성하자! import './index.css' src 폴더의 index.js 파일에 위 코드를 추가하자! * 로딩화면 스타일링하기 components 폴더에 아래 파일을 추가한다. .loading-container{ width: 100%; height: 100vh; overflow: hidden; } .loading-img{ width: 100%; height: 100%; } Loading.css 파일을 위와 같이 작성하자! import React from 'react' import loadingImg from 'assets/images/loadin..

* 프로젝트 폴더 생성하기 npx create-react-app netflix * 리액트 라우터 설치하기 cd netflix npm install react-router-dom 리액트 라우터 URL 주소 이동하기 how to use history instance while using react routers v6? I'm using react-router v6 and I have to use history instance. I've installed it using yarn add history react-router-dom@next One way of using history instance I guess it must be with v5 is to use stackoverflow.com * 라우터 기..

* 루트 폴더생성하기 CMD 창을 열고 아래와 같이 명령어를 입력한다. netflix 라는 루트 폴더를 생성하고 해당 폴더로 이동한다. mkdir netflix cd netflix * 보일러플레이트 코드 내려받기 루트 폴더 내부에서 아래와 같이 명령어를 입력한다. git clone https://github.com/sssssqew/react-webpack.git 그런 다음 dir 명령어를 입력하면 react-webpack 이라는 폴더가 생성된다. react-webpack 이라는 폴더 이름을 client 로 변경하자! 그런 다음 명령창에서 client 폴더 내부로 이동한다. * 패키지 설치하기 >npm install client 폴더 내부에서 위와 같이 명령어를 입력하면 package.json 폴더에 기술..

import './App.css'; import React, { Component } from 'react'; import Word from './Word' class App extends Component { state = { words: [] } componentDidMount(){ const BASE_URL = 'https://dictionary-search.herokuapp.com/api/words' fetch(BASE_URL, { headers: { "Content-Type": "application/json", // "Access-Control-Allow-Origin": "*" // 이 코드 때문에 CORS 에러가 발생한것임. 이 코드 주석처리하면 프론트엔드에서 곧바로 외부 API 접근가능하다..

참고 블로그 '프로젝트/할일목록(TODO) 앱' 카테고리의 글 목록 syleemomo.tistory.com 해당 프로젝트는 할일목록 앱 프로젝트의 연장선에 있다. 그래서 서버 구조나 서버 설정은 할일목록 앱 프로젝트를 참고하면 된다. * 모델 구현하기 const mongoose = require('mongoose') const wordSchema = mongoose.Schema({ r_seq: { type: String, trim: true }, r_word: { type: String, trim: true }, r_link: { type: String, trim: true }, r_chi: { type: String, trim: true }, r_des: { type: String, trim: true..

프로젝트 구조 food-recipe-app ___ index.html |___ style.css |___ app.js 프로젝트 구조는 간단하다. food-recipe-app 이라는 루트폴더 아래 HTML, CSS, JAVASCRIPT 파일 3개가 있다. 웹페이지 레이아웃 설계 프로토타이핑을 참고하여 웹페이지 레이아웃을 간단하게 설계하였다. 네모 박스는 모두 div 요소(element)를 가리킨다. 우선 헤딩(heading)과 검색창이 들어가는 상위 div 요소와 사진 리스트가 들어가는 하위 div 요소로 분리하였다. 그 다음은 상위 div 안에 헤딩과 검색창을 화면 중앙에 정렬하기 위한 div 요소가 들어간다. 그리고 중앙에 정렬된 div 안에 헤딩을 담기 위한 div 요소와 검색창을 담기 위한 div ..