프로젝트/[react]movie_app
-
[movie_app_8] gh-pages로 배포하기프로젝트/[react]movie_app 2018. 4. 4. 02:22
github에서 제공하는 gh-pages로 무료 호스팅 터미널에서 yarn build 하고 시키는대로 하면 된당! package.json에 "homepage" : "http://myname.github.io/myapp", 추가하고 다시 yarn build "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "predeploy": "npm run build", "deploy": "gh-pages -d build" } 스크립트 추가하고 yarn run deploy 하면 링크가 나온다! 나의 링..
-
[movie_app_7] css프로젝트/[react]movie_app 2018. 4. 4. 02:15
props를 몇개 더 추가한다. [App.js] _renderMovies = () => { const movies = this.state.movies.map(movie => { return }) return movies; } [Movie.js] function Movie({poster,title,genres,synopsis}){ return( {title} {genres.map((genre, index) => )} {synopsis} )} function MoviePoster({poster, alt}){ return ( )} function MovieGenre({genre}){ return( {genre} )} Movie.propTypes = { title: PropTypes.string.isRequir..
-
[movie_app_6] ajax프로젝트/[react]movie_app 2018. 4. 4. 01:00
ajax(Asynchronous JavaScript and XML)-하지만 xml보다 json포맷이 중요하게 여겨진다-json(javascript object notation) : 오브젝트를 자바스트립트로 작성하는 기법 ajax를 리액트에 적용하는 방법 : fetch 덕분에 심플해졌다 fetch request 만들기 : url(from api) 을 통해 get하는 방식 메타데이터 대신 url을 불러올 수 있게 수정 componentDidMount(){ fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating'); } promise 새로운 자바스크립트 컨셉 : 비동기적 프로그래밍 비동기적? 전의 작업이 종료되지 않아도 다음 작업이 요청되고 전의 작업이 끝..
-
[movie_app_5] stateless functional components프로젝트/[react]movie_app 2018. 4. 3. 17:32
모든 컴포넌트에 state가 있는게 아니다! -반대로, state가 있는 컴포넌트는 smart component 라고 함 smart component dumb component state props class functional render(), lifecycleo x class MoviePoster extends Component{ render(){ return( ) }} ↓ function MoviePoster({poster}){ return ( )} class -> funtionrender()가 사라짐props로 받아옴 MoviePoster.propTypes = { poster: PropTypes.string.isRequired} class Movie extends Component{ static ..
-
[movie_app_4] loading state프로젝트/[react]movie_app 2018. 4. 3. 17:13
loading state 메타데이터를 api에서 불러오는것처럼 componentDidMount()를 통해 5초 뒤에 setState해줌.componentDidMount(){ setTimeout(() => { this.setState({ movies: [ { title: "500 Days of Summer", poster: "http://notefolio.net/data/img/7d/e1/7de135370df4e9402ae4ee8f26d881cbab0fe7485deb7ce6efaf404cd7969a73_v1.jpg" }, { title: "DeadPool", poster: "http://file.thisisgame.com/upload/tboard/user/2015/12/02/20151202103641_14..
-
[movie_app_3] 컴포넌트 Lifecycle과 state프로젝트/[react]movie_app 2018. 4. 2. 15:21
컴포넌트 lifecycle 이란? 컴포넌트는 여러 기능을 순차대로 실행한다. render cycle : 컴포넌트가 존재할 때 동작componentWillMount() //사이클이 시작render()componentDidMount() //데이터 작업 update cyclecomponentWillReceiveProps() //컴포넌트가 새로운 props를 받음shouldComponentUpdate() //이전 props과 새 props가 다르면 truecomponentWillUpdate() //spinner를 보여주는 등의 작업render()componentDidUpdate() //렌더가 되었으니, spinner를 숨기는 작업을 하면 좋을듯 state컴포넌트 안의 state가 변경 될 떄마다 render가 ..
-
[movie_app_2] 컴포넌트, props프로젝트/[react]movie_app 2018. 4. 2. 13:04
프로젝트를 시작하기 전에, 컴포넌트들을 만든다. react는 js 안에 html 이 존재하는 구조 -> jsx라고 한다. : 컴포넌트를 만들때 사용하는 언어 각 컴포넌트마다 다른 파일에 작업(을 선호) render() : 이 컴포넌트가 무엇을 보여주는지 알려주는 함수 js 파일에서 reactDOM을 사용해서 웹에 컴포넌트를 지정된 엘리먼트 자리에 렌더하는것! 작성된 컴포넌트를 다른 컴포넌트에 넣을 수 있고 import 하여 다른 파일의 컴포넌트 안에도 넣을 수 있다! react의 주요 컨셉 2개 - state, props props : 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달 array map을 사용 : 엘리먼트가 많을수록 key를 주어야함.movies.map((movie, index) => { r..
-
[movie_app_1] movie app 시작하기프로젝트/[react]movie_app 2018. 4. 2. 00:39
1년 전에 잠깐 리액트 강의를 본 적이 있지만 [중급] 수준의 강의였던 건지 코드만 따라 치기 바빴던 기억이 난다. 요즘 리액트가 너무 재밌어 보여서 노마드코더의 강의를 보기 시작했고, 복습 겸 블로그에 정리하려고 한다. git에 업로드도 해야지 ! npm, node.js는 설치되어 있었고 yarn을 설치brew를 설치한 뒤, yarn을 설치해야 했다.yarn은 자바스크립트 패키지 매니저react는 라이브러리프레임워크가 아니다!yts.agyify라는 토렌트 사이트에서 사용하는 api를 사용해서 영화에 대한 정보를 긁어오자.create-react-app을 사용해서 손쉽게 react app을 만들자npm install -g create-react-appcreate-react-app AppNamecd appN..