JudithHopps JudithHopps

문제점 : 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을 처음부터 그리지 않아 빠르다.

npx create-react-app movie 명령어 실행 단계에서 아래와 같은 오류가 발생했다. In most cases you are behind a proxy or have bad network settings. 위 문장을 보니 proxy 또는 네트워크 환경 문제가 있을 것 같다. proxy환경을 수정하려고 이것저것 노력해봤지만... 해결되지 않았다. 결국 node.js 파일 삭제 후 새로 설치했다

1. npmjs에서 리액트 다운로드 횟수 확인하기 react React is a JavaScript library for building user interfaces.. Latest version: 18.2.0, last published: 3 months ago. Start using react in your project by running `npm i react`. There are 92216 other projects in the npm registry using react. www.npmjs.com 2022년 9월 13일 기준 매주 1500명이 넘게 리액트를 다운로드 받고 있습니다. 2. state of JS의 설문조사 The State of JavaScript 2019: Front End Fr..