프로젝트
-
[weather_app_1] react-native 와 expo프로젝트/[react]weather_app 2018. 4. 14. 19:01
날씨를 불러와 표시해주는 어플리케이션 제작 제목이 멋지지만 f word는 빼고 작업해야겠다..ㅎㅎㅎ react native, expo, node.js, npm 이 사용된다. react native네이티브 웹 어플리케이션을 빌드하게 도와주는 ui라이브러리jsx/javascript로 작성하고 컴파일링 할때 각각 ios(objective-c)/android(java) 네이티브 코드로 실행됨페이스북의 기술에 의하여 js-objective-c 의 브릿지 혹은 js-java가 연결됨 장점1. 자바스크립트를 활용할 수 있다는것2. 커뮤니티가 크다는것3. 많은 회사가 리액트 네이티브를 쓴다는것 (ex. 인스타그램,에어비앤비,페이스북,디스코드) expohttps://expo.io/tools리액트 네이티브로 앱을 만드는 ..
-
[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..