JudithHopps JudithHopps

2022년 9월 13일 부터 16일 4일동안 매달린 결과물이다. navigation은 책에 있는 코드를 수정해서 img(로고와 배경)을 삽입했다. Link 안에 div를 넣어 이미지를 클릭하면 홈화면이 뜬다. 영화를 클릭하면 아래 화면이 넘어온다. 영화 포스터와 제목, 연도, 장르 소개글이 뜬다. 링크는 아래와 같다. https://judithhopps.github.io/movie_correct/ Youflex judithhopps.github.io 코드는 여기서 https://github.com/JudithHopps/movie_correct 참고 바란다.

http://www.yes24.com/Product/Goods/90344496 Do it! 클론 코딩 영화 평점 웹서비스 - YES24 ‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다! 9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클론 코딩 www.yes24.com 내용 소개 p228부터는 route props의 값을 이용해 영화 데이터를 상세 정보 컴포넌트에 전달하는 기능을 사용하기 있다. ※ route props란 라우팅 대상이 되는 컴포넌트에 넘겨주는 기본 props이다. 문제점 About.js, Navigaion.js, Detail.js에 props값이 오지 않고 있다. 해결방법 위 문제점은 react가 v6로 업그레이..

문제점 : Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page. 문제 코드 : {/* Home */} {/* About */} 해결방법 1. component를 element로 수정한다. 2. {컴포넌트명}을 {}으로 수정한다. 코드는 아래와 같다.

문제점 : react는 실행되나 빈 화면이 출력된다. console창에 아래 문장이 뜬다. A is only ever to be used as the child of element, never rendered directly. Please wrap your in a 문제 코드 : function App() { return ( ); 해결방법 아래 코드로 수정한다. import { HashRouter, Routes,Route } from "react-router-dom"; function App() { return ( ); } export default App; 태그 안에 태그를 넣어야 한다. - react가 업그레이드 되면서 수정된 내용이다.

1. axios 설치하기 터미널에 npm install axios를 입력한다. 2. YTS 영화 데이터 API 살펴보기 API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx ListMovies를 눌러 아래 페이지로 들어간다. https://yts.mx/api/v2/list_movies.json 을 검색창에 뜨면 아래와 같이 나온다. ※ 크롭 웹 스토어에서 json viewer을 설치한 화면이다. 3. App.js파일에 API를 추가한다. ※위 YTS에서 제공한 API는 변경가능성이 있어 노마드코더가 제공한 ..

prop-types란?? 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해준다. props의 인자의 특징을 미리 기술해 잘못 사용될 경우를 예방한다. prop-types사용 예제 App.js(Food 컴포넌트가 쓰여진 파일)에 아래 내용을 추가해준다. Food.propTypes = { name: PropTypes.string.isRequired, picture : PropTypes.string.isRequired, rating : PropTypes.string.isRequired }; 후에 실행하면 console창에 아래와 같은 에러창이 뜬다. Warning: Failed prop type: Invalid prop `rating` of type `number` supplied to `Foo..

1. App.js 파일에 Food 함수를 생성해준다. function Food(props) { return I love {props.fav}; } 2. App 함수에서 food 컴포넌트를 사용해 함수의 인자를 넣어준다. function App() { return ( Hello! ); } 3. 결과화면

http://www.yes24.com/Product/Goods/90344496 Do it! 클론 코딩 영화 평점 웹서비스 - YES24 ‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다! 9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클론 코딩 www.yes24.com P 50 리액트 동작 원리 알아보기 리액트는 우리가 작성한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용해 해석한다. 해석한 결과물을 index.html에 끼워넣는다. 가장 왼 쪽은 빈 index.html이다. 오른쪽으로 갈수록 App.js를 해석하며 채워진다. 리액트는 화면에 표시될 모든 html을 처음부터 그리지 않아 빠르다.