반응형 Project/REACT23 15 - 영화 앱 만들기(2) 1. 영화 데이터 화면에 그리기 - console.log() 로 영화 데이터 출력 axios.get()의 영화 데이터가 movies 변수에 있으니 console.log(movies)로 출력한다. getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } 앱 실행해서 개발자도구의 console 탭을 본다. data -> data -> movies 순서로 객체에 접근하면 데이터 추출 가능. - 객체에 있는 movies 키에 접근 코드로 돌아가서 console.log()를 수정해준다. getMovies = async () => { const mo.. 2020. 12. 21. 14 - 영화 앱 만들기 1. 영화 API 사용해 보기 - axios 설치하기 npm install axios 터미널에서 코드 블록에 있는 명령어를 입력하고 설치한다. - YTS 영화 데이터 API 살펴보기 크롬 브라우저 주소 입력 창에 yts.lt/api 입력하면 YTS 영화 데이터 API 사이트 접속한다. 여기서 List Movies API라는 기능을 사용한다. List Movies 를 클릭. 위 사진에 보이는 Endpoint를 사용한다. 20개에 대한 최신 영화 데이터를 보내준다. 해당 주소를 크롬에 붙여넣으면 코드들이 굉장히 지저분하다. json데이터를 정리하기 위해선 크롬 웹스토어에서 JSON Viewer를 설치한다. 설치하고 다시 Endpoint를 주소창에 넣으면 **************** 깔끔하게 정리되서 나온다.. 2020. 12. 20. 13 - 영화 앱 만들기 워밍업 - 준비 App 컴포넌트를 다 비워준다. import React from 'react'; class App extends React.Component { render() { return ; } } export default App; - 영화 데이터 로딩 상태 표시 isLoading state 를 추가하자. isLoading state는 컴포넌트가 마운트되면 true 여야 한다. import React from 'react'; class App extends React.Component { state = { isLoading: true, }; render() { return ; } } export default App; - 로딩 중, 로딩 완료 화면에 출력해주기 구조 분해 할당과 삼항 연산자를 사용한다. .. 2020. 12. 18. 12 - state와 클래스형 컴포넌트(2) 1. 클래스형 컴포넌트의 일생 알아보기 - constructor() 함수 알아보기 App.js 파일 실행, 기존에 있는 코드에 그래도 사용하면 된다. class App extends React.Component { constructor(props) { super(props); console.log('hello'); } . . . render() { console.log('render'); return ( The numbe.... 클래스형 컴포넌트에 constructor() 함수와 console.log()에 아무 문장이나 출력한다. render() 함수에도 console.log() 아무 문장이나 출력해보자. 어떤 함수가 먼저 실행되는지 본다. 개발자도구의 Console 탭을 보자. constructor().. 2020. 12. 18. 이전 1 2 3 4 5 6 다음 반응형
