JudithHopps JudithHopps

1. ts파일을 js파일로 변환 방법 터미널에 tsc main(파일명)을 입력합니다. 2. 주요 타입 string - 문자열 boolean - T/F number - 숫자 symbol - symbol 생성자를 호출해 생성된 고윳값 any - 모든 타입을 허용하는 타입. 코드를 쓰는 동안 정해지지 않은 변수를 지정할 수 있음 unknown - any와 비슷하나 먼저 타입을 지정하거나 좁히지 않으면 조작이 허용되지 않음 never - 도달할 수 없는 코드 boid - 값이 없음 3. 열거타입(enum) 일정 수의 상수로 구성된 집합을 만든다. 월요일을 1로 초기화했고, 나머지 값은 자동으로 1씩 증가된 값이 할당된다. 기본적으로 열거 타입은 0부터 시작한다. 예시는 아래와 같다. enum Weekdays {..

배포를 했는데 제대로 작동이 되고 있지 않다. 문제를 해결해야 한다 해결방법 : package.json 페이지 "homepage"의 링크를 확인해준다. 꼭 https://judithhopps.github.io/movie_correct/ 이런 형식이여야 한다. npm run build 후에 npm run deploy를 해준다. 그 결과 아래와 같이 화면을 볼 수 있다. https://judithhopps.github.io/movie_correct/ Youflex judithhopps.github.io

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..