React Native 이번 시간에는 React Native 설치하는 방법에 대해 진행해보겠습니다. (*nodejs가 설치되어있다고 가정 후, 진행합니다.) 1. React-Native-Cli 설치 $ npm install -g react-native-cli 커맨드 창에 에 위와 같은 명령어를 입력하면 React-Native-Cli를 설치할 수 있습니다. 여기서 -g 옵션은(global) 전역범위 설치(사용)를 의미합니다. npm으로 설치한 모듈은 기본적으로 해당 프로젝트 안에서만 효력을 발휘하는데, cli는 전역 범위에서 일어나야 하기 때문에 -g를 붙여줍니다. 2. React-Native 프로젝트 생성 아래 명령어를 사용하여, 프로젝트를 생성합니다. $ react-native init project ..

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..

모듈화를 하는 이유? 확장성(extensibility) 확장성을 고려하지 않은 코드는 시스템의 규모가 커질수록 문제가 생길 확률이 높다. (차세대를 진행하는 대표적인 이유 중 하나이다.) 재사용성(reusability) 반복되는 로직을 함수로 분리하는 코드상의 재사용성 뿐만 아니라, 우리가 설계한 구조가 재사용 되어야 한다. 유지-보수 가능성(maintability) 여러 로직이 뒤엉켜 있는 코드는 유지 보수가 안된다. (당시 최신 기술을 현재 최신 기술로 변경 시 용이하다.) 가독성(readability) 어려운 로직 일수록 더 가독성이 높아야 한다. 어려운 로직을 쉽고 간단하게 구현하는 것이 좋은 코드다. 프로젝트의 구조 또한 한 눈에 그려져야 하며, 초보 개발자가 봐도 이해할 수 있어야한다. 테스트..

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