차근차근 배움터

5/26 - 프로젝트 설치 react-movie-list라는 이름으로 설치했다 $ npx creat-react-app react-movie-list - Navbar.js 생성 네비게이션 바 먼저 만들고 싶어서 Navbar.js 파일을 components 폴더를 생성해서 그 안에 만들었다 App.js에 Navbar.js 파일을 import 하고 출력 성공 - SCSS 사용 이번에는 React에서 css가 아닌 scss를 사용하고 싶다 npm을 이용해서 설치 왜 다 다른 설치 코드인 것인지는 모르겠으나.. Adding a Sass Stylesheet | Create React App Note: this feature is available with react-scripts@2.0.0 and higher. c..

React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다 react-dom은 library, package인데 모든 React element 들이 HTML body에 둘 수 있게 해 준다. React JS는 엔진 같은 역할 => 암기하지 말고 이해해보려 해라 ReactDOM.render(); render() 유저에게 보여주는 것 브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다 이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 컴포넌트를 re-rendering하고 싶지 않..

#7.10 Next Steps breaking change 버전 1에서 코드를 작성했는데 버전이 올라가면서 깨지는 현상 새로운 버전에 맞춰서 코드를 수정해야 하는 일이 발생한다 그러나 React js 에서는 breaking change 현상이 없다 예전 버전의 코드 방식을 그대로 갖다 써도 React.js에서는 깨지는 현상이 없다 useState()와 useEffect()가 최고의 조합이라고 생각한다 구버전의 리액트 코드들도 배우는 강의가 있지만 나는 일단 패스 영화 웹사이트 완성 React App yujinkimkr.github.io 일단 완성 및 배포했고 나머지 수정 사항들은 아래로 정리할 수 있을 것 같다 그리고 다른 리액트 강의들을 또 찾아서 들어보려고 한다 1) Detail.js에서 Descri..

gh-pages 라는 툴을 설치한다 $ npm i gh-pages gh-pages란? 결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지 package.json에 있는 scripts를 먼저 확인 script의 build를 실행하면 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 웹사이트의 production ready code를 생성하게 된다 production ready란 => 코드가 압축되고 모든 것이 최적화된다는 뜻 $ npm run build 아래 명령어를 실행하고 나면 ..

영화 목록 상세 내용을 불러올 수 있었다 다른 분들이 만든 멋진 화면들을 공유해본다 React App mascaradee.github.io https://brilliant-froyo-4c6888.netlify.app/ 이분은 예고편까지 넣으셨다 React App brilliant-froyo-4c6888.netlify.app Detail.js import { useParams } from "react-router-dom"; import { useEffect, useState } from 'react'; function Detail() { const { id } = useParams(); const [movie, setMovie] = useState([]); const getMovie = async () =..

먼저 React Router 를 사용하기 위해서 몇 가지 import 해야 함 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; Switch는 Route를 찾는 것 Route는 웹브라우저 상에 입력된 url을 말한다 route를 찾으면 컴포넌트를 Rendering한다 App.js 강의가 조금 옛날 꺼라서 프론트엔드가 슉슉 바뀌는 것도 감안해서 강의에서 설명하던 Switch라는 기능은 Routes로 변경되었다. import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './routes/Home'; funct..

{movie.title} {movie.summary} {movie.genres.map((genre) => {genre})} medium_cover_image 자바스크립트에서는 왼쪽보다 오른쪽처럼 작성 mediumCoverImage import PropTypes from "prop-types"; Movie component의 proptype 설정 Movie.propTypes = { coverImg: PropTypes.string.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, genres: PropTypes.arrayOf(PropTypes.string).isRequired, } React Router ..

기본 틀에서 다시 로딩 구현 부분과 API Fetch 부분을 연습해 본다 영화 목록을 가져온다 import { useState, useEffect } from 'react'; function App() { return ( ); } export default App; api url https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { console.log(json); setM..

https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 이 영화 api 정보들을 가지고 만들어본다 then 보다 자주 사용하는 최신 async-await useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { setMovies(json.data.movies) setLoading(false); }); }, []); 아래와 같이 변경할 수 있다 흠... 외워야 하나 const getMovies = async () => { const ..

기존 코드 ※ 숙제 삭제 기능 구현하기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); } const onSubmit = (event) => { event.preventDefault(); if (toDo === "") return; setToDos((currentArr) => [toDo, ...currentArr]); setToDo(""); } const deleteItem = (event) => { console.log..