분류 전체보기
-
[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..
-
컴활 1급 필기 합격!오늘뭐했지 2018. 4. 2. 00:12
3월 31일 필기시험을 보고 다음날 확인 결과 합격했다! 예에!~!!~아직 실기 시험이 남아있지만 넘나 신나는 것 ㅠㅠ >공부법1. 시나공 컴활 1급 summary 구매 (인터넷에서 만원 후반대)2. 1주일 정도 시간 두고 하루에 1~2시간 정도 summary 훑어봄3. 1주일 정도 부록(기출문제) 풀어보기 -처음엔 당연히 엄청나게 틀린다. 문제 밑에 문제와 관련된 summary 번호가 적혀있어서 틀린 부분만 다시 한번 읽어봄 -개인적인 공부를 따로 하느라 3~4일 정도밖에 집중 못했음..4. 책에 실린 기출문제 풀면서 cbt 기출문제도 함께 풀어보기 (http://www.comcbt.com/) -앱도 있다. 이동할 때 등등 시간 날 때마다 풀어보기 이렇게 하다 보면 어느새 과목당 1~2문제 정도 틀리는..
-
자격증 공부중오늘뭐했지 2018. 3. 30. 23:08
정말 뜬금없이 컴활1급을 도전하고 있다!컴활2급 이상을 따면 2학점을 준다길래 ... 그래도 2급보다는 1급이지! 하고 공부중이다. 내일은 필기 시험날! 이게 뭐라고 괜히 게임도 못하겠고 다른 공부도 못하겠다..ㅋㅋㅋ아침에는 몰래하는 기분으로 자바복습을 했다.. 몰래하는 공부 짱잼빨리 따버리고 공부하고싶어 ㅠㅠㅠ 흑흑 사실 운전면허 다음으로 첫 자격증이당... 깔끔하게 따버리고 정보처리기사도 도전해야지~! 리액트 공부하고싶어 ㅠㅠㅠ엉엉 ... 기출문제도 다 풀었으니까 새벽에 잠깐 해도 되겠지?...