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' : 특정 기능이 들어간 페이지들을 ..

Node.js 에서의 MyBatis 주변 지인들에게 NodeJS를 권유하면서 스터디를 하다 MyBatis에 대해 조심스럽게 묻길래 답변을 해줬던 기억이 있다. Spring Framework 를 기반으로 한 Restful API 를 자주 사용했던 MyBatis, 최근에도 관련 질문이 들어왔고, 분명 누군가는 궁금해 하실 것이기에! 그 분들을 위해 공유한다. 설치 $ npm install mybatis-mapper 선언 const mysql = require('postgresql'); //RDBMS const mybatisMapper = require('mybatis-mapper'); //설치한 Mybatis lib 맵핑 //별도로 설정을 빼주는게 좋으나, 예시를 위해 한 곳에 선언. const connec..

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 가 된다