이것저것

1. node가 나옴으로 javascript를 인터넷익스플로어가 아닌 다른 서버사이드에서 쓸수있게 됬다. 2. node가 자동차의 엔진이라고 하면 엔진과 바퀴 문짝등을 가지고 만드는 것을 express이다. 한마디로 node를 조금더 쉽게 이용할 수 있는 프레임워크라고 할수 있다. 설치. 터미널을 키고 node -v를 쳐서 버전이 나오면 있는거고 없으면 다운로드 구글에서 nodejs설치 폴더생성. document 폴더에서 폴더를 하나더 생성 mkdir boiler-plate npm init npm으로 패키지 생성 파일생성. index.js 파일 생성 index.js는 시작점이다. express.js 다운로드. vscode 내의 terminal npm install express --save package..

왜인지 주소값을 유동적으로 변경시키는 것이 어렵다는 생각이 들어서 정리하게 되었다. 라우트에서는 단순히 유동적인 값이 들어가게 되는 경우에 Detail컴포넌트를 렌더하도록 설정해두었다. Link 컴포넌트에서는 아래처럼 path대신 쓰이는(path를 써도 된다) pathname 속성을 사용해 id값을 props로 받아와 넣어주었다. 이렇게 하면 들어오는 id값을 주소로 해서 Route가 렌더되게 된다. 렌더에서는 state라는 이름으로 여러 값을 또 전달받기 때문에, 특정 페이지에 맞는 정보를 보여줄 수 있게 된다. 당연히 조건에 따라 리다이렉트 시켜버릴수도 있다.

movie-detail을 클릭없이 주소를 입력할 때 홈으로 보내버리는 것이 강의의 목표이다. 네비게이션 바에서 Link컴포넌트에 props를 보내는 방식을 사용했다. (참고로 영화제목에 링크태그를 걸었다) 예를 들어 Link를 클릭해서 영화 detail페이지로 넘어가게 할 경우 인수로 state값을 보낸다. (여기서 state는 우리가 아는 state가 아닌 것 같다) 그러면 state값의 undefined 유무에 따라서 값이 있을 경우 페이지를 로드해주고, state값이 없을경우 Home으로 리다이렉트 시키는 것이다. 리다이렉트 시킬때는 propsops로 history를 받아 온 뒤, history.push("/") 함수를 써서 홈으로 보내버렸다. (정확히 무슨 원리인지는 모르겠지만 한가지 확실한건 h..

axios란?? fetch를 더 쉽고 간결하게 사용하기위한 모듈 / 비동기방식으로 HTTP데이터 요청을 실행한다. axios 설치 npm install axios --save axios import import axios from 'axios'; axios 사용법 const 변수이름 = axios.get("경로이름") const 변수이름 = axios.post("경로이름",{보낼 데이터}) 이렇게만 하면 놀랍게도 끝이다. 이제 여기에 .then() .catch() .finally()와 같은 함수들을 붙여서 사용하면 된다. 큰 데이터를 받아올때 async라는 접두사를 함수앞에 붙여서 이 함수가 비동기함수이고, 기다려야 한다는 것을 알려주어야 한다. 그리고 그 함수의 내부에서는 무엇을 기다려야 하는지 알려주..