⏰ 오늘의 공부/기타
-
Proxy 설정⏰ 오늘의 공부/기타 2020. 1. 24. 18:36
React 내에서 proxy 설정 방법 src 폴더 내에서 setProxy.js 작성 const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/api', { target: 'http://localhost:3001/' }) ); }; http-proxy-middleware 로딩 '/api' 경로에 대한 프록시 설정 ( react app 에서 127.0.0.1/api/* 경로로 요청을 보내면 프록시가 동작하여 127.0.0.1:3001로 요청을 보내게 된다.)
-
AJAX⏰ 오늘의 공부/기타 2020. 1. 24. 18:31
AJAX ? javascript 를 사용한 비동기 통신 브라우저가 가지고 있는 HttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 라이브러리 : axios , fetch, request .... 나는 React 에서 axios 를 사용했기 때문에 axios 에 대해 정리하고자 한다. axios Promise 기반 -> async / await 문법 사용하여 XMLHttpRequest 요청 쉽게 할 수 있다. 브라우저와 Node.js 에서 동일하게 사용가능 사용이 간편하다. ( npm 설치 / cdn 불러서 사용) 요청 성공 시 then() 함수로 이동, 실패 할 경우 catch() 로 이동한다. HTTP 요청 방식 axios({ url: ..
-
React⏰ 오늘의 공부/기타 2020. 1. 24. 17:52
React 란 ? React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 Virtual DOM - React는 실제로 DOM을 제어하는 방식이 아니라 중간의 가상의 DOM 인 Virtual DOM 을 두어 DOM 을 직접 제어하지 않음으로써 편의성과 성능을 개선했다. - DOM 의 상태를 메모리에 저장하고 변경 전과 후의 상태를 비교한 뒤 최소한의 내용만 반영한다. -> 성능 향상 - DOM 에 업데이트 하는 절차 데이터가 업데이트 되면 전체 UI 를 Virtual DOM에 리렌더링 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교 바뀐 부분만 실제 DOM 에 적용 ( 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄짐) - 렌더링 cons..