본문 바로가기
반응형

Project/REACT23

19 - 영화 앱 다듬기 (2) 1. 영화 앱 멋지게 스타일링하기 - App.css 파일 수정 App.css 를 보자. 영화 앱 전체 글꼴, 배경색을 적용한다. * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: #eff3f7; height: 100%; } 색상과 글꼴이 바뀐것을 확인할 수 있다. 실시간으로 비교해보고 싶다면, Elements 탭에 아래쪽을 보면 css 가 보일 것이다. 거기서 체크 부분을 .. 2020. 12. 23.
18 - 영화 앱 다듬기 - 영화 정보 표시 영화 포스터 이미지 제목 개봉 연도 장르 등급 시놉시스 - App.css 내용 모두 삭제 App.css 에 있는 내용을 모두 삭제하자. - 영화 API 장르 키 살펴보기 - Movie 컴포넌트에 genres props 넘겨주기 App 컴포넌트 --> Movie 컴포넌트에 genres props 넘겨준다고 가정하고 작성한다. function Movie({ title, year, summary, poster, genres}) { // 여기 genres 인자 추가 return ( {title} {year} {summary} ); } Movie.propTypes = { year: PropTypes.number.isRequired, title: PropTypes.string.isRequired.. 2020. 12. 23.
17 - 영화 앱 만들기(4) 1. 영화 앱 스타일링 - 기초 - App 컴포넌트에 HTML 추가 render() 부분을 코드 블록처럼 수정한다. 복붙을 추천하지만 어디가 바뀌는지 알고 싶으면 직접 입력하자. 괄호에 유의하면서 입력하자. 천천히 코드를 이해하면서 진행하자. JSX의 바깥을 감싸고, 감싸고, movies.map()은 감싼다. render() { const { isLoading, movies } = this.state; return ( {isLoading ? ( Loading... ) : ( {movies.map(movie => ( ))} )} ); } } - Movie 컴포넌트에 HTML 추가 function Movie() 쪽을 수정해 준다. JSX를 로 감싸고, 그 안에 title, year, summary를 목적에 .. 2020. 12. 22.
16 - 영화 앱 만들기(3) 1. Movies 컴포넌트 만들기 - Movie 컴포넌트 만들기 src 폴더에 Movie.js 파일 생성. 코드 블록처럼 입력해준다. import React from 'react'; import PropTypes from 'prop-types'; function Movie() { return ; } Movie.propTypes = {}; export default Movie; Movie 컴포넌트는 state 필요 없다. 클래스형 컴포넌트가 아닌 함수형 컴포넌트로 작성한다. - 영화 데이터 다시 살펴보기 yts-proxy.now.sh/list_movies.json 에 접속해서 데이터 다시 보자. id, title, rating 등등 가져오자. - Movie.propTypes 작성하기 코드 블럭과 같이 입력.. 2020. 12. 21.
반응형

티스토리툴바