본문 바로가기

IT_Developers/Node.js41

Node.js - form 전송 post로 받아 josn으로 출력/ 기본 예제 form을 이용한 기본 예제 안녕하세요. 고코더 입니다. 이전에 라우터와 뷰단에 소스를 만들고 어떻게 사용하는지 아주 기초적인 방법을 배웠습니다. 이번 시간에는 form으로 전송한 데이터를 node.js에서 받아 간단하게 josn으로 출력하도록 코딩을 해보겠습니다. ● 1. views에서 form 태그를입력 ● 1-1. form.ejs 에 아래 HTML을 추가 합니다. 이전에 입력되어 있는 HTML 밑에 추가합니다. 소스는 폼태그를 이용해서 이름,블로,홈페이지를 입력하는 input 박스에 입력을 받게 됩니다.1234567891011121314151617181920 이름 블로그 홈페이지 전송 ● 1-2. 코드 리뷰 14라인 : action 값은 /form 입니다. 이전 시간에 만든 라우터로 전송할 것 입니.. 2019. 7. 31.
Node.js - views 기본 생성 예제 views 개발 기초 안녕하세요. 고코더 입니다. 이전 시간에 라우터를 생성 하였습니다. 이제 라우터와 맵핑하여 프론트에게 보여줄 뷰단을 생성 해보겠습니다. ● 1. ejs 파일 만들기 ● 1-1. views 폴더에서 new 그리고 file을 누릅니다. ● 1-2. 그리고 form.ejs 로 입력하고 확인을 누릅니다. ● 1-3. ejs 안에 내용을 아래처럼 채우겠습니다. 1234567891011121314 기본 예제 테스트 이름 블로그 홈페이지 cs ● 2. 라우터 파일 form.js 수정 하기 ● 2-1. 그리고 전 시간에 개발하였던 form.js 를 수정 해보겠습니다.1234567891011var express = require('express');var router = express.Router(.. 2019. 7. 29.
Node.js - routes 기본 생성 예제 routes 파일 생성, 라우터 app.js에 추가 안녕하세요. 고코더 입니다. 지루한 설정은 끝내고 이제 재밌는 실습에 들어가보겠습니다. 노드 express로 소스 코딩에 본격적으로 해보겠는데요. 오늘은 views, routes 파일을 추가하여 기본 예제를 해볼려고 합니다. 어떻게 노드를 작성해야 하는지 기초 구조를 알 수 있는 시간입니다. ● 1. routes 폴더에 .js 파일을 추가 ● 1-1. routes 폴더에서 마우스 오른쪽 버튼을 눌러 New을 클릭해 JavaScript file을 추가 합니다. 노드는 자바스크립트 문법이기에 .js가 프로그래밍 확장자 입니다. 파일명은 form.js 입니다. ● 1-2. 생성된 파일안에 소스 내용을 이렇게 채워보겠습니다. var express = requi.. 2019. 7. 29.
Node.js - nodemon 설치, 실행방법 / webstorm 연동 노드몬 설치 후 웹스톰으로 연동 하기 안녕하세요. 고코더 입니다. 이번 시간에는 개발시에 편의성을 위해 소스 수정시 자동 반영을 도와주는 nodemon을 설치 하고 webstorm과 연동하는 방법을 배워 보겠습니다. ● 1. nodemon(노드몬)이란? ● 1-1. node.js 사용시에 꼭 필요한 모듈중 하나 입니다. 쉽게 말하면 소스 코드를 수정하면 이걸 감지하여 서버를 자동으로 재시작 해줍니다. 자바 개발시에 사용하던 비슷한 설정이 있죠? 거의 같은 역할을 해줍니다 -> eclipse 소스 수정시 톰캣 자동 재시작 / Auto reloading enabled ● 1-2. 설치 명령어는 아래와 같습니다. npm install nodemon -g ● 1-3. 글로벌 옵션이기에 제 컴퓨터 폴더 기준으로는.. 2019. 7. 29.
Node.js - Webstorm으로 express 프로젝트 ejs로 생성하기 Webstorm으로 Node.js Express 개발환경 셋팅 안녕하세요. 고코더 입니다. 오늘은 이전 시간에 배운 ejs로 -> Node.js - ejs 와 jade를 비교 살펴보기 프로젝트를 다시 생성합니다. 하지만 복습은 아닙니다. 개발툴를 활용해 node를 생성할 것 입니다. 세상에서 가장 훌륭한 메모장으로 개발하진 않을 것 입니다. 노드를 개발할때 가장 많이 사용하는 도구는 이클립스와 webstorm 입니다. 둘에 차이는 무료와 유료 입니다.기능은 당연히 인텔리제이가 훨씬 낫습니다. 이클립스는 다른 분들이 많이 다루고 강의해주시니 저희는 더 최신화된 인텔리제이에 웹스톰을 이용해 실습해보겠습니다. ● 1. 웹스톰을 다운로드 받아주세요. 저와 동일한 버전으로 실습하실려면 2017.2.5 버전을 다운.. 2019. 7. 29.
Node.js - ejs 와 jade를 비교 살펴보기 view 템플릿 ejs 그리고 jade 차이 안녕하세요. 고코더 입니다. 프로젝트 설치부터 서버 실행 까지 실습을 마무리 했습니다. -> Node.Js - express 서버 실행 / hello Express(node) / Port 변경 오늘은 잠깐 코드 실습에 들어가기 전에 꼭 알아야 할 view 모듈인 ejs와 jade를 알아 보는 시간을 갖겠습니다. ● 1. jade 란? ● 1-1. 이전 시간까지 따라온분들은 해당 폴더로 이동해서 index.jade 파일을 열어보세요. D:\node\gocoder\views\index.jade 이게 뭔가 싶은 생각 듭니다. express 기본 옵션을 사용하여 프로젝트를 생성하면 view 모듈은 .jade(제이드)가 기본입니다. ● 1-2. jade란? 노드에서 만.. 2019. 7. 28.
Node.Js - Express 서버 실행 / hello Express(node) / Port 변경 서버 실행, 웹 접속, 포토 변경 안녕하세요. 고코더 입니다. 익스프레스 프로젝트를 완료 했습니다. -> Node.Js - Express 프로젝트 생성하기 / package.json 설치 아주 천천히 자세히 강의 하고 있어서 따로오기 어렵지 않을거라 생각 됩니다. ● 1. 이제 서버를 실행해보겠습니다. 우리가 설치하고 있는 노드 폴더는 D:\node\gocoder 입니다. 해당 폴더로 이동후에 ● 2. CMD 창에서 해당 명령어를 실행해보세요. 서버를 실행하는 명령어입니다. node .\bin\www ● 3. 그리고 브라우저에서 아래 URL로 접속합니다. 간단한 명령어로 쉽게 서버가 실행 되었고 학습 환경이 구성 되었습니다. http://localhost:3000/ ● 4. 해당 URL로 접속시마다. 로.. 2019. 7. 28.
Node.Js - Express 프로젝트 생성하기 / package.json 설치 익스프레스 프로젝트 만들디 안녕하세요. 고코더 입니다. 이전 시간에는 express 프레임워크를 설치를 했습니다. -> Express 프레임워크 설치하기 이젠 이 도구를 통해 프로젝트를 생성해보겠습니다. ● 1. 프로젝트를 생성하고 싶은 폴더까지 커맨드로 접속해서 아래 명령어를 입력 합니다. 프로젝트를 생성하는 express 명령어 입니다. 해당 폴더 하위에서 프로젝트 폴더가 생성 됩니다. express gocoder ● 2. 생성한 프로젝트 이름 폴더 안에 필요한 폴더들와 파일들이 설치 되는 LOG를 확인 가능합니다. ● 3. 폴더에 접근해보면 이렇게 파일들이 생성 되어 있습니다. 많이 보던 구조이죠? ● 4. 아직 끝난게 아닙니다. 생성된 디렉토리로 접근 합니다. cd gocoder ● 5. 루트에 .. 2019. 7. 27.
Node.js - Express 프레임워크 설치하기 Express FrameWork Setup 안녕하세요. 고코더 입니다. 저번 시간에는 Node.JS를 게시판 만들기를 시작하기 위해 노드를 설치하였습니다. ->윈도우에서 학습을 위한 최신 버전 설치 / 12.x.x / 첨부파일 이번 시간에는 npm엔진을 통해 익스플레스를 설치하는 법을 배워 볼텐데요. 간단한 명령어 만으로 모든 설정이 완료된 엔진을 쉽게 설치 가능 합니다. ● 1. Express 프레임워크를 설치해보겠습니다. ● 1-1. 명령프롬프트(cmd)를 실행합니다. 그리고 아래 명령어를 입력해보세요. 제 강의에서 사용할 익스플레스 기본 설치 명령어 입니다. npm install -g express-generator ● 1-2. 설치 명령어에 옵션에 대한 설명 입니다. npm install - np.. 2019. 7. 27.

티스토리툴바