식초의 지식보관소

영화 앱 전체 모습 수정하기 만들 영화 앱은 다음과 비슷하다. 왼쪽 위에 살짝 튀어나온 느낌의 영화 포스터 이미지가 있고, 오른쪽에는 제목, 장르, 평점(별로 표시), 시놉시스 등이 있다. 색은 회색, 흰색을 많이 사용했다. 회원가입 기능이 없다. -영화 포스터 이미지 -제목 -개봉 연도 -장르 -등급 -시놉시스 (영화 줄거리) App.css 내용 모두 지우기 노마드 코더 영화 API에서 장르 키 살펴본다 아직 추가하지 않은 영화 데이터는 장르이다. genres 키를 영화 앱에 추가한다. Movie 컴포넌트에 genres props 넘겨주기 App 컴포넌트에서 Movie 컴포넌트에 genres props를 넘겨준다고 가정하고 Movie 컴포넌트를 수정해보자. Movie 컴포넌트 인자에 genres를 추가..

영화 API 사용해 보기 영화 데이터를 로딩하려면 자바스크립트의 fetch()함수가 필요하다. fetch()함수 대신 axios 도구 사용해서 영화 앱을 만든다. axios 설치하기 터미널에 입력한다. > npm install axios YTS 영화 데이터 API 살펴보기 주소창 yts.lt/api 입력 → YTS 영화 데이터 API 사이트 → 'List Movies API' 기능 사용 API는 특정 주소를 입력하면 그 주소에 맞는 결과 보내준다. 추가로 특정 주소에 조건을 붙여 입력하면 그 조건까지 고려한 결과 보내준다. Endpoint의 가장 위에 있는 주소 사용할 것이다. 이 주소는 최신 영화 20개에 대한 데이터를 기본으로 보내준다. 영화 목록 데이터 확인하기 주소창에 Endpoint의 주소 중 ..

리액트 앱 실행 리액트 앱 다시 실행하기 터미널 -> 리액트 앱의 루트 폴더 -> npm start 명령어 입력 -> 자동으로 리액트 앱 실행 이때 터미널을 종료하면 안 된다. 코드 수정하기 App.js 파일에서 App( )함수의 반환값이 많아지면 소괄호로 감싸야한다. ↓ 컴포넌트 컴포넌트 정의 (by. App.js ) App( ) 함수가 정의되어 있고, HTML을 반환한다. 컴포넌트 사용 (by. index.js ) 을 ReactDOM .render( ) 함수의 첫번째 인자로 전달한다. = App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. App 컴포넌트가 그려질 위치는 ReactDOM .render( ) 함수의 두번째 인자로 전달한다. -> App 컴포넌트는 아이디가 root인 엘리먼트에 그려..