axiso Axios 는 브라우저, Node.js 를 위한 Promise API 를 활용하는 HTTP 비동기 통신 라이브러리(return 을 promise 객체로 해주기 때문에, response 데이터를 다루기 쉬운 장점) axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 axios 기초문법 /* axios 파라미터 문법 예시 */ axios({ method: "get", // 통신 방식(GET/POST) url: "www.google.com", // 서버 headers: {'X-Requested-With..

axios 모듈화 axios는 통신으로 한 곳에서만 쓰이는 것이 아니기 때문에, 유지보수 및 가독성을 위해 모듈화가 필요합니다. 이전 글에서 작성한 프로젝트 디렉토리 구성에 따라, 'utils' 디렉토리에 api.js 라는 react.js 를 생성해서 여러 페이지에서 활용하였습니다. api.js 선언 import axios from 'axios'; const API =axios.create({ //baseURL: `http://localhost:8080/common`, timeout: 30000, headers: { "Content-Type" : `application/json;charset=UTF-8`, "Access-Control-Allow-Origin": "*", "Accept": "applicat..

프로젝트 디렉토리 구성 프로젝트를 구성할 때, 제일 먼저 선행되어야하며 누구나가 한 눈에 볼 수 있는 구조로 만들어야 합니다. 이는 주니어 개발자 뿐만 아니라 시니어 개발자들 역시 기존에 누군가 만들었던 프로젝트 룰에 따르다 보니, 실제로 디렉토리를 구성할 일은 없어서 중요도는 낮게 평가되지만, 설계를 하시는 분들에게는 굉장히 중요한 작업이 아닐 수 없습니다. 여기서는 React를 베이스로 설명하기 때문에 Web에서 사용되는 구조를 설명해 보겠습니다. 최상위 디렉토리 결국 마지막에 최상단(src 하위)에서 보게 될 디렉토리는 '3'개 또는 '4'개 입니다. 바로 'components', 'resources', 'views', ('utils') * 'components' : 특정 기능이 들어간 페이지들을 ..

localStorage 와 sessionStorage란? localStorage와 sessionStorage 두가지 방법 모두 애플리케이션 전역에 접근 가능하다는 공통점이 있다. 각 storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에 다른 타입의 데이터를 사용할 때에는 JSON 형태로 별도 가공이 필요하다. 두가지 방법의 차이점은 저장되는 데이터의 범위가 다르다는 점이다. localStorage는 동일한 pc안에서 동일한 브라우저를 사용했을 때에 사용한다. 데이터를 직접 삭제하지 않는 한 브라우저를 닫아도 저장된 데이터를 불러올 수 있는 장점이 있고, 주로 로그인 시 '아이디저장' 기능을 탑재한 모바일웹에서 자주 쓰인다. sessionStorage는 브라우저 창이 닫히면 세션이 종료되면서..

선언 ' 대신 ` 를 사용해야한다. ' 은 single quotation 이고 ` 는 Grave 키보드의 숫자1 왼쪽에 있는 기호이다. username의 value 가 'test' 라고 가정해보자. 'hello ${username}' 의 출력은 hello ${username} 로 모든 값을 String 그대로 출력한다. `hello ${username}` 의 출력은 hello test 가 된다

Chart.js 이번에 신규 프로젝트를 진행하게되어 시안을 받았다. 매출이나 현황 등 주로 대시보드에서 자주 쓰이는 차트를 사용 해보려고 한다. 아! 여기에서는 함수형 컴포넌트를 사용하고 있다 : ) Install $ npm install chart.js --save Import import Chart from 'chart.js/auto'; How to Use function ??? () { const canvasDom = useRef(null); // Dependency array 에 props 추가하고 return에 chart.destory() 추가 예정 useEffect(() => { const ctx = canvasDom.current.getContext("2d"); new Chart(ctx, {..