프론트엔드 정복하기

Server(localhost:5000) Client(localhost:3000) 서로 포트가 다를 때 '어떤 설정을 각각에 하지 않으면' req를 전송할 때 CORS 보안 정책에 의해 막힌다. 해결법은 많다. 1) 개발자 도구 이용 (Chrome Cors Extension) : 개발자만 사용하므로 제한적 2) 프론트엔드 부분만 수정 (Json p 방식 이용 - 모든 req를 get req로 변경) : 제한적 3) 백엔드-프론트 모두 컨트롤 하고 싶다 : 서버에 Client에서 오는 걸 받을 수 있게 해주고.. 등 4) Proxy 설정하는 법 ///////// 1. 프록시 라이브러리 활용 http://create-react-app.dev/docs/proxying-api-requests-in-develop..

import from : import 하는 법 1) import 모듈 : 모듈 전체를 불러온다. 2) import 변수 or 함수 from 모듈 : 모듈 중 필요한 것을 가져옴 3) import { 변수1, 함수1, 함수2... } from 모듈 exports -Named exports : 여러 값을 export하는 데 유용 ex) export { x1 } -Default exports : 모듈 당 딱 한 개의 default export만 있어야 함 / '메인'이라고 할 수 있는 것에 많이 쓰임. import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; : & 도 있음 -BrowserRouter : HTML5의 his..

React 라이브러리 설치 npx create-react-app . npm vs npx npm은 node package manager npx는 한마디로 npm에서 업그레이드된 것. 원래는 컴퓨터에 저장(global)해서 사용했는데, 굳이 다운 받지 않고도 사용 가능. node 라이브러리를 설치 or 설치하지않고 실행만 시킬수도 React Router DOM react-router란? 클라이언트 사이드에서 주소값의 변경에 따라 페이지 or 컴포넌트의 변화를 제공하는 라이브러리 router vs router-dom react-router :코어까지 들어있는 라이브러리 / react-router-dom : DOM이 인식할 수 있는 것들만 있음 react-router = react-router-dom(웹에 쓰이..

React란? 1) 2013년에 페이스북에서 만든 라이브러리다. 2) components로 이루어져, 재사용성이 뛰어나다. 3) Virtual DOM 형식이다. ( 리스트가 10개 있는데 1개만 변화가 있을 때 > -Real DOM : 전체를 업데이트해야 한다. -Virtual DOM : 한개만 업데이트 하면 된다. 4) 과거와 달리 최근엔 Babel과 Webpack이 자동으로 설정되어 설치된다. (예전에는 Babel과 Webpack을 따로 설정해 주어야 했다.) ** Webpack이 설치된 react 패키지 중 [ src파일 ]을 관리해 준다. (public 파일은 x) >> 따라서 이미지 등을 저장하고 싶으면 src 파일에 저장해야 webpack이 bundle 한다. Babel이란? : 최신 자바스크..