노드와 리액트를 연동시키기 위한 세팅을 알아보겠다. 프로젝트 생성 터미널에서 하단의 내용들을 순서대로 입력해준다. Node.js 서버 생성 $ mkdir node_react $ cd node_react $ npm init node_react 파일을 만들고 들어간다. $ npm install mongoose --save $ npm install express --save $ npm install nodemon concurrently --save-dev 몽고 DB 연동을 위한 mongoose Node.js의 웹앱 프레임워크인 Express 여러 개의 명령어를 동시에 실행하는 nodemon concurrently. 변경될 때마다 자동으로 재실행되게 한다. React App 생성 $ npm create reac..

Props 'props'는 properties를 의미한다. 부모 컨트롤러에서 자식 컨트롤러로 값을 전달할 때 사용한다. 매개변수에 각각의 변수들을 미리 입력해줌으로써 변수명을 그대로 가져올 수 있다. props 비구조 할당 매개변수에 각각의 변수명을 넘겨주지만 이를 비구조 할당으로 넘기려면 const {title,name,age,addr,tel,color,done} = props 로 입력해주면 된다. 또한 제일 기본적인 것은 const Test6Sub = (props) => { 의 경우, props.name 또는 props.age처럼 앞에 props로 붙여줘야 한다. propType - 데이터 유형 정의 Test6Sub.propTypes = { name: PropTypes.string.isRequired..

리액트를 사용할 툴인 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고 ES6(ecmascript) 문법에 대해서 살펴보겠다! React 리액트란 UI를 구현하는 자바스크립트 라이브러리다. 페이스북에서 제공해주는 프론트엔드 라이브러리로 사용하는 큰 기업들이 많다. 자바스크립트 친화적인 es6기반이며 성능 최적화와 유지보수가 쉽다. 공식 라이브러리가 없고 자유도가 높다. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debug..

LBS(Location Based Service)는 위치기반으로 제공하는 서비스 서버이다. 데이터베이스로 특정 위치의 정보를 제공 또는 조회할 수 있다. 위도와 경도를 기준으로 위치를 확인한다. 특히 위치 정보를 저장 혹은 조회할 때 공간 인덱싱(Spatial Indexing) 방법을 통해 인덱스를 만들어 조회하는 속도를 빠르게 할 수 있다. 이는 몽고 DB에서 GeoSpatial Indexing라고 불린다. 위치 정보 조회 방법 - 사용자 위치에서 가장 가까운 지점 - 사용자가 보고 있는 범위 안의 지점 - 사용자가 있는 곳에서 일정 반경 안에 있는 지점 위치 데이터 종류 종류가 다양하지만 대표적인 3가지가 있다. Point : 현재 위치처럼 특정한 지점 LineString : 도로와 같이 이어진 위치..

Node.js에서 Express 서버를 연결하고, DB를 연동하며, 라우터 함수를 생성하기 위해 각각의 기능별로 파일을 분리하는 코딩을 알아보겠다. 게시판 만들기, 채팅 만들기 등 여러 기능을 만들 때 항상 필수적으로 있어야 하기 때문에 일일이 모든 글에 쓰지 않고 이렇게 따로 글을 작성하기로 하였다. 그럼 바로 살펴보자! 서버 연결 - app.js require("dotenv").config(); var express = require("express"); var http = require("http"); var path = require("path"); var serveStatic = require("serve-static"); var expressErrorHandler = require("expre..

MVC 패턴에서 V(View)는 결과가 나타나는 화면이다. 모델을 통해 얻은 데이터와 뷰 템플릿을 통해 클라이언트에게 응답할 결과를 보여준다. 웹 문서의 기본 형태를 뷰 템플릿으로 두어 사용하며 템플릿도 여러 가지 종류가 있지만 그중에서도 오늘은 'ejs'를 알아볼 것이다. 자바스크립트 파일 내에서 html 코드를 입력하지 않고 따로 각각의 파일을 만들어서 데이터를 웹 화면에 출력시킬 수 있다. EJS https://ejs.co/ EJS -- Embedded JavaScript templates Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you..

Semantic-Ui html 페이지의 화면을 Semantic-Ui로도 간단하게 꾸밀 수 있다. 사이트에서 제공되는 코딩을 통해 버튼, 입력창 등 원하는 곳에 맞춰서 사용하면 된다. 설치 방법과 사용 예제를 알아보겠다. Semantic UI 다운로드 https://semantic-ui.com/ Semantic UI Shipping Choose your shipping options semantic-ui.com 위의 사이트에서 알집 파일을 설치받는다. 그다음 이클립스 내에서 semantic.min.js 와 semantic.min.css를 'data'라는 폴더에 넣어주었다. 이는 밑에 파일 경로를 통해 확인할 수 있다. cmd 창 - 모듈 등록 npm install semantic --save cmd창에서 ..

암호화 비밀번호를 데이터베이스에 저장할 때, 클라이언트가 입력한 값 그대로 저장하게 되면 노출될 위험이 당연히 크기 때문에 테스트용이 아닌 이상 암호화는 필수이다. 따라서 DB에 저장할 때에는 암호화된 비밀번호를 저장해야 한다. 단방향 암호화란, 입력받은 비밀번호를 암호화하지만 다시 복호화하여 되돌릴 수는 없는 것이다. 양방향 암호화란, 암호화된 비밀번호를 복호화하여 기존에 입력한 비밀번호를 알 수 있다. 몽구스 모듈은 단방향으로 암호화를 하며 사용자가 입력한 값을 암호화하여 기존의 암호화 비밀번호와 비교하는 작업을 한다. 따라서 몽구스와 virtual 함수, crypto모듈 등을 통해 로그인하는 예제를 알아보겠다. crypto 모듈 설치 npm install crypto --save cmd창에서 cry..

mongoose 모듈이란? 데이터베이스를 테이블이나 엑셀처럼 쉽게 다룰 수 있도록 하는 모듈이다. 특히 몽고 db에는 없는 'Schema(스키마)'를 가지고 있기 때문에 몽구스 모듈을 통해 몽고 db에 넣어서 관계형 db처럼 사용할 수 있다. Schema란? 관계형 데이터베이스처럼 조회 조건을 공통적으로 적용하도록 정해진 규칙으로 문서를 저장하게 하는 것이 스키마이다. 예를 들면 String, Number, Boolean 등 데이터 타입을 의미한다. 어떤 문서에는 name이 있고 또 다른 문서에는 name이 없을 수도 있기 때문에 일정한 조건으로 적용이 어렵다. 이에 따라 스키마로 수월하게 가능하다. 몽구스 모듈 설치 npm install mongoose --save 먼저 cmd창에 위의 내용을 입력하여..