개발새발 개발자/ReactJS (17) 썸네일형 리스트형 [ReactJS] 8-1. Building for production 깃허브 페이지는 static file을 올릴 수 있는 사이트다. static file이란 자바스크립트, css, html같은 프론트엔드 파일을 말한다. 백엔드는 안된다. 이 파일을 공짜로 호스팅해주는 기능이다.이걸 사용하려면, 먼저 깃허브 계정이 필요하고, 깃허브 프로젝트가 필요하며, 깃허브 프로젝트의 브랜치를 만들어야 한다. 그 이름은 gh-pages여야 하고. gh-pages로 올라간 파일은 웹사이트에 내 프로젝트명, 유저 이름과 함께 보이게 된다.깃허브는 코드를 보여주지, 실행은 하지 않는다. gh-pages는 코드를 실행하고 웹사이트로 보여준다. 1. yarn build 터미널에 yarn build를 하면 css를 압축하고 build라는 public 폴더에 넣는다. 우리가 로컬 호스트에 있을 때 .. [ReactJS] 7-2. Giving some CSS to Movie 1. App.css 123456789101112131415.App { padding: 50px; display: flex; justify-content: space-around; flex-wrap: wrap; font-size: 14px;}.App--loading { display: flex; justify-content: center; align-items: center; height: 100%;} Colored by Color Scriptercs 2. App.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263import React, { C.. [ReactJS] 7-1. Updating Movie Component 1. 불러올 데이터 추가 포스터, 제목, 장르, 평점, 설명을 json 목록에서 찾아온다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import React, { Component } from "react"import "./App.css"import Movie from "./Movie" //Movie.js에서 여기로 export한 컴포넌트를 import class App extends Component { state = {} // 삭제하면 'movies' property를 읽을 수 없음 componentDidMount() { this._getMovies(.. [ReactJS] 6-3. Async, Await in React 이번 시간에는 Await과 Async를 배운다. 지난 시간에 작성한 fetch-then-catch 라인들을 좀 더 분명하게 작성하도록 도와준다. 123456789101112componentDidMount() { fetch("https://yts.am/api/v2/list_movies.json?sort_by=download_count?sort_by=rating") .then(potato => potato.json()) .then(json => { this.setState({ movies: json.data.movies }) .then(() => .then()) // CALL BACK HELL!!!! }) .catch(err => console.log(err)) }Colored by Color Scripte.. [ReactJS] 6-2. Promises promise는 새로운 자바스크립트 컨셉이다. 비동기식 프로그래밍 덕에 cool한 기능이다. 동기식먼저 실행된 것이 끝나지 않으면 다음 것도 실행되지 않음. 영화를 불러오면서 setState, component 불러오기 등이 불가한 게 단점. 첫번째 라인이 끝날 때까지 실행할 수 없음. 만약 먼저 실행된 서버가 느리다면? 계속 기다려야 한다. 이럴 때 promise를 사용한다. 프로미스는 비동기식. 비동기식promise 방식. 첫 번째 라인이 끝나든 말든 두 번째 라인이 작업을 시작한다. 계속 다른 작업을 스케줄링 할 수 있다. promise좋은 혹은 나쁜 시나리오를 만들어준다. 예를 들어, 애인과 토요일에 영화보러 가기로 약속을 했다. 두 가지 케이스가 가능하다. 첫 번째는 내가 약속을 지켜서 영화를 .. [ReactJS] 6-1. Ajax in React Ajax: Asynchronous Javascript and XMXML보다는 JSON을 많이 쓰니 기억해두기. JSON: Javascript Object Notation오브젝트를 자바스크립트로 작성하는 기법. 1. Ajax 적용 전 사전 작업 Fetch 덕분에 쉽게 적용할 수 있다. 우리가 만든 fetch request는 url로 갈 것이다. fetch를 이용해서 get방식 사용하는 법을 배울 것이다. 사용할 url은 API - YTS 토렌트 영화 데이터베이스에서 가져올 것이다. 가져올 urlhttps://yts.am/api/v2/list_movies.json?sort_by=download_count 참고 parametershttps://yts.am/api#movie_details sort_by로 정렬해.. [ReactJS] 5-1. Smart vs Dumb Components 모든 컴포넌트가 state가 있는 것은 아니다. stateless functional component도 존재한다. state가 없고 필요하지도 않기 때문에 dumb component 라고 한다. 반대로 state가 있는 컴포넌트는 smart component라고 부른다. 1234567_renderMovies = () => { const movies = this.state.movies.map((movie, index) => { // 괄호 넣는 것 잊지 말기 return //key prop으로 index를 작성 }) return movies }Colored by Color Scriptercsstate가 없고 props밖에 없을 때는 위처럼 클래스 컴포넌트를 쓰는 대신에 그들을 functional 컴포넌트로.. [ReactJS] 4-3. Loading States 데이터가 나타나는 과정: 데이터 없이 컴포넌트가 로딩 -> 데이터를 위해 API를 호출 -> API가 데이터 전송 -> 컴포넌트 state 업데이트API 콜을 타임아웃 기능으로 유사하게 구현해보겠다. 1. 영화 리스트를 function으로 이동하기 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263import React, { Component } from "react"import "./App.css"import Movie from "./Movie" //Movie.js에서 여기로 export한 컴포넌트를 import class App extends .. 이전 1 2 3 다음
