초보 개발자

react-router-dom을 활용해서 react에서 간단히 router를 만들어 줄 수 있다. 여러 종류가 있지만 우리는 gh-pages에 최적화된 HashRouter를 사용할 것이다. npm i react-route-dom App.js에서 아래와 같은 Route를 만들 것이다. / /home /about 각 url에 구분을 해주려고한다. /은 home으로 영화List를 보여주고 /about은 그냥 소개페이지이고 /movie/:id는 각 영화를 누르면 그 영화가 나오도록 해주었다. 여기서 /에는 exact={true}옵션을 주었는데 이것을 주지 않게되면 겹치는 URL전부다 component가 실행이 된다. 예를들어 '/'는 '/' + 'about'에도 들어가있기 때문에 /의 component가 abo..

전에 axios를 async await을 사용하여 비동기로 정보를 가져온 적이 있다. 이제 이 정보를 가지고 영화제목 및 정보를 나타내려고한다. 가져온 값을 콘솔에 찍어보면 objetct가 출력이 되는데 obj.data.data.movies안에 20개의 영화들이 들어있다. componentDidMount가 되면 이 정보들을 가져와서 setState를하는 함수를 만들어 집어 넣었다. 이로인해 App component의 state에는 20개의 movie가 들어있다. 그리고 정보를 받아오면 isLoading은 false로 바꿔주자. 각 movie에 많은 정보들이 담겨있지만 우리가 이번에 써볼것은 아래와 같다. 따라서 Movie.js에 Movie component를 만들어준다. 이번에는 class compone..

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터, 생기고 사라지고 변경되는 데이터.... 지금까지 해왔던 것은 function component이었다. 이제는 class component를 사용해 보려고 한다. function이 아니기 때문에 return이 없다. 대신 render를 써주면 된다. function component는 function이고 뭔가를 return한다 그리고 screen에 표시가 된다. class component는 class이다. 하지만 react component로부터 기능을 상속받아 screen에 표시가 된다. 그걸 render method안에 넣어야한다. react는 자동적으로 모든 class component의 re..

map함수를 활용하여 배열에 있는 요소를 수정해주려고한다. map은 array의 각 item에서 function을 실행하는 js function이며, function의 result를 갖는 array를 우리에게 다시 준다. 예를들어 아래와 같은 경우 배열은 [1,2,3,4] 에서 [0,0,0,0]으로 바뀌고 console.log에는 1 2 3 4가 각각 찍혀있는 것을 확인할 수 있다. 쉽게말해서 map함수안에 함수가 있고 그 함수의 인자로 각 배열의 요소가 들어온다. 그리고 return값이 그 요소의 값으로 바뀐다. ( return이 없으면 undefined를 반환함 ) 하지만 원래의 값에는 영향을 주지 않는다. const array = [1,2,3,4] array.map((current) => { con..

react를 활용하여 영화 웹 서비스를 만들어 보려고한다. 먼저 npx create-react-app movie_app_2021명령어를 사용하여 CRA를 만들어준다. npm은 현재 최신 버전의 노트 패키지를 데스크톱에 설치해 주는 도구이고, npx는 최신 버전의 노드패키지를 사용하게 해주는 도구이다. npx는 설치할 노드 패키지를 최신 버전으로 다운로드해서 설치한 다음 데스크톱에 남기지 않고 삭제한다. 한번 사용하고 말 노드 패키지를 굳이 데스크톱에 남길 필요는 없을 것이다. git에 repository를 만들고 git remote add origin 주소를하여 연동해주자!! 이제 npm start를 하면 CRA가 실행이된다!!! 오우야 App.js에서 이렇게 html을 return하는 함수를 만든다. ..