노드와 리액트를 연동시키기 위한 세팅을 알아보겠다. 프로젝트 생성 터미널에서 하단의 내용들을 순서대로 입력해준다. 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 : 도로와 같이 이어진 위치..

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

내장모듈 - path 파일 경로 정보 내장 모듈은 추가적인 npm 설치없이 require로 불러와서 사용할 수 있다. var path = require("path"); var dir = ["users","happy","docs"]; var docDir = dir.join(path.sep); console.log(docDir); var curPath = path.join("/users/happy","notepad.exe"); console.log(curPath); dir에 먼저 제이슨 형태로 데이터를 넣었다. 대괄호[]는 데이터를 배열로 넣는다는 의미이다. path.sep : 경로의 구분자(seperator)로 구분자를 찾아 연결한다. 배열 속의 데이터들이 자동으로 구분자를 통해 연결된다. var file..

스프링 부트는 jsp를 사용하지 않고 html을 사용한다. 내장되어 있는 톰캣 서버도 jsp를 파싱하지 않기 때문이다. 하지만 jsp파일을 사용하여 스프링부트를 쓸 수 있는 방법이 있다. 오늘은 그 방법에 대해 알아보겠다! pom.xml javax.servlet jstl org.apache.tomcat.embed tomcat-embed-jasper 먼저 메이븐에서 필요한 라이브러리이다. 버전은 지웠으며, 버전을 지우면 최신 버전으로 자동 다운받아진다. jasper는 JSP를 파싱시켜주는 기능을 지닌다. 따라서 추가로 dependecy를 통해 의존성을 주입해준다. application.properties server.port=8080 spring.datasource.driver-class-name=orac..