우리는 API에서 data를 가져왔다. console.log를 통해 데이터를 확인해보자. console.log(movies); movies라는 object가 콘솔창에 표시된다. 여기서 우리는 data를 원한다. data를 클릭해보면 그 안에 또 data가 있고 그 안에 movies가 있는 것을 확인할 수 있다. 따라서 우리는 movies.data.data.movies를 사용할 수 있다. 또한 movies.data.data.movies보다는 다음과 같은 방식을 사용하자. getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get('https://yts.mx/api/v2/list_movies.json'); console..

일반적으로 javascript에서 data를 fetch하는 방법은 fetch()를 사용하는 것이다. 하지만 더 좋은 방법이 있는데, 바로 Axiod이다. 좋다, 우리는 axios를 사용할 것인데, 왜냐면 많이 사용되고 좋은 방법이기 때문이다. axios는 매우 쉬운 개념인데, 마치 fetch 위에 있는 작은 layer(층)라고 개념을 잡으면 편하다. 예를 들어서, axios는 땅콩 주위를 감싸고 있는 멋진 초콜릿이라고 생각하면 쉽다. 하지만 axios를 사용하려면, 우선 우리는 axios를 설치해야한다. 설치하는 방법은 매우 쉽다. npm i axios 위 코드를 터미널에 입력하면 끝이다. 이제 우리가 쓸 API에 대해서 알아보자. 우리는 YTS에서 만든 API를 사용할 것이다. 우선 axios를 imp..

자 이제 우리는 component life cycle을 알게 됐다. 이제 movie component를 구성해 보자. import React from 'react'; // import PropTypes from 'prop-types'; class App extends React.Component { state = { isLoding: true, }; componentDidMount() {} render() { const { isLoding } = this.state; return {isLoding ? 'Loading...' : 'We are ready'}; } } export default App; 자 우선 application이 mount(알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 것..

Goal : Figma의 그리드 시스템을 이해하자 우선 왼쪽 상단의 메뉴를 눌러 검색 기능에서 layout을 쳐준다, 그리고 show layout grid를 체크해주자. show layout grid를 체크하면 위 이미지의 모습에서처럼, 시안에 적용된 그리드 시스템을 볼 수 있다. 앞으로 그리드를 껐다 켰다하는 것은 정말 많이 쓰이기 때문에, 단축키 ctrl+shift+4를 기억해서 자주 이용하도록 하자. 자 그래서 그리드 시스템이 무엇이냐, 디자이너가 디자인 작업을 할 때 화면에 아무것도 없이 완전 빈 화면에다가 레이아웃을 배치하고자하면 되게 힘들 것이다. 어디다가 레이아웃을 배치해야할지도 모를 것이고 배치를 한다 하더라도 일관성을 지키기가 어려울 것이다. 그리드 시스템이 하는 역할은 마치 우리가 노트..