코딩 팁

Node.js 기본 프레임 워크 Express + nodemon

코딩 기록 vicddory 2020. 3. 8. 07:00
반응형


Node.js 란 무엇인가

Node.js는 간단하게 말하면 JavaScript를 서버 사이드에서 실행시켜주는 존재입니다. 프런트엔드, 백엔드를 하나의 언어로 실행할 수 있으며, WEB 서비스, 스마트 폰 앱, IoT 관련 개발에도 사용할 수 있습니다.


설치

우선 Nodejs를 설치하지 않은 분은 [Node.js 공식 사이트] (https://nodejs.org/en/)에서 LTS 버전을 다운로드하여 설치.

'node'에서 JavaScript를 실행하기

명령 프롬프트에서 index.js가 저장되어있는 폴더에 pwd로 이동, 해당 폴더의 index.js를 실행합니다.


node index.js


node에서만 Enter 누르면, JavaScript 콘솔에서 다양한 코드를 시험할 수 있습니다. 취소하려면 .exit를 입력하고, control + C를 두 번 눌러 종료할 수도 있습니다.


Node.js의 다양한 API

Nodejs는 다양한 기능이 있고, API 목록은 공식 사이트 documentation에서 볼 수 있습니다.

https://nodejs.org/dist/latest-v12.x/docs/api/


API 중 하나. "File System"

FileSystem은 로컬 파일 등에 액세스할 수 있는 API입니다.


이번엔 Node.js의 File System을 사용하여 로컬 파일의 복사본을 사용해 보려고 합니다.


FileSystem 로드 (읽고 가져오기)

//jshint esversion:6

const fs = require("fs");


※ const는 var와 같습니다. 그러나 var가 나중에 변경할 수 있는 반면, const는 변경을 못 합니다. 일단 데이터를 저장(대입)하면 해당 값은 계속 유지됩니다.


※ 코멘트가 없는 경우, "const" is available in ES6라는 오류 메시지가 나옵니다. 주석 // jshint esversion:6를 추가하여 오류 메시지를 가릴 수 있습니다.


파일 복사본 작성

//jshint esversion:6

const fs = require("fs");

fs.copyFileSync("file.txt","copyfile.txt");

//fs.copyFileSync("복사할 파일", "복사된 파일 이름");


※ file.txt 사본인 copyfile.txt를 만듭니다. 라는 의미죠. 덧붙여서, 이미 copyfile.txt라는 파일이 존재하면, 기존 파일을 덮어쓰기 하니깐 주의하세요.


커맨드라인에서 실행

node xxxx.js


※ 이번에는 xxxx.js라는 파일에 JavaScript 코드를 작성하고, 그 파일을 커맨드라인에서 실행합니다.

Express 프레임워크

node.js를 보다 쉽게 사용하라고 만들어진 것이 Express 프레임워크입니다. 굉장히 많은 기능을 싹둑 잘라냈지만 ...


Express 설치


retrieved from Express.jp 공식 사이트

https://expressjs.com/ko/starter/installing.html


마지막 부분은 "npm install express"만으로도 OK 입니다.


Express를 js 파일에서 사용해보자

아래는 require를 통해 Express를 로드하고, app에 대입하는 방법입니다.


const express = require("express");

const app = express ();


Express에서 서버 만들기

이 부분은 이해가 조금 어려웠습니다.


순서 단계

========================

(JavaScript에서)

1. 먼저 Express 로드

2. 액세스 되었을 때 Respond 생각 (페이지 별)

3. listen 서버 지정

(커맨드라인에서)

4.node server.js 실행

(브라우저에서)

5. http://localhost:3000/을 입력하고 서버 연결

6.respond 처리가 실행됨

(커맨드라인에서)

7.control + C 종료

========================


위 내용이 일단 흐름이고 다음이 실제 코드.


server.js
// jshint esversion:6

// express 로드
const express = require("express");
const app = express();

// localhost:3000에 연결되었을 때 Respond
app.get("/",function(requestrespond){
  //여기에 console.log(request);하면, request 내용 볼 수 있음
  respond.send("Hello World");
});


// localhost:3000/profile에 액세스 되었을 때의 Respond
app.get("/profile"function(requestrespond){
  respond.send("My name is kimleepark. I'm from Korea.");
});

//listen 대기 상태로
 app.listen(3000function(){
   console.log("Server started on port 3000");
 });


· Request

브라우저에서 서버로 요청하는 정보.


· Respond

서버에 요청(리퀘스트)이 왔을 때, 반응하고 실행하는 과정.

참고로 서버에는 스레드 모델(Apache 등)과 이벤트 루프(Node.js 등 단일 스레드라고도 함)가 있음.


· listen()

대기 상태에서 listen 상태로 변경됩니다. listen이 있어야 request를 받을 수 있습니다.

"res.sendFile"를 사용하여 HTML 파일에서 Respond

지금까지 "Hello world"라든가 문자열 Respond하고 있었습니다만, 이번에는 res.sendFile를 사용하여 HTML 파일에 Respond 해보겠습니다.


server.js
// 요청이 있으면 index.html 파일을 respond
app.get("/"function(reqres){

  // response로 file send
  res.sendFile(__dirname + "/index.html");
});


(__dirname + "/index.html")는 dirname을 받는 한편, index.html이 어떤 디렉터리에 저장되어 있는지를 가르쳐 줄 필요가 있습니다.



body-parser를 사용하여 form 데이터 얻기

HTML 파일에서 Form을 사용하여 사용자 데이터를 입력합니다. 이런 방법은 데이터를 사용하여 뭔가 처리할 때 사용합니다.


먼저 body-parser를 설치.


npm install body-parser


HTML 폼 코딩.


index.html

<h1>Calculator</h1>
<form class="" action="/" method="post">
  <input type="text" name="num1" placeholder="First Number">
  <input type="text" name="num2" placeholder="Second Number">
  <button type="submit" name="submit">Calculate</button>
</form>


이 Form에는 태그에 action = "/", method = "post"가 있고, 태그에 type = "submit"이 있습니다. 또한 app.post() 위치에 <input 태그의 name="">을 사용하며, 데이터를 끌어오는 name도 있습니다.


이 폼은 서버 사이드.


calculator.js
// jshint esversion:6

// 로드
const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// body-parser 사용
app.use(bodyParser.urlencoded({extendedtrue}));

// index.html에서 respond 하기
app.get("/",function(req,res){
  res.sendFile(__dirname + "/index.html");
});


// index.html 폼에 post 부분
app.post("/",function(reqres){

 // body num1, num2 데이터 취득
 // Number() 정수형으로 변환
  var num1 = Number(req.body.num1);
  var num2 = Number(req.body.num2);

  var result = num1 + num2;

  res.send("The result of the calculation is " + result);
});

app.listen(3000);


app.get이 서버 자체의 리쿼스트에 대한 리스폰스 처리고, app.post는 form의 submit 리퀘스트의 리스폰드 처리입니다.

서버 갱신 자동화엔 "nodemon" 추천

참고로 위에 있는 server.js 파일을 갱신할 때마다 명령줄(커맨드라인)에서 서버 종료하고, 다시 시작해야 합니다. 상당히 귀찮죠.


그런 분들을 위해, Udemy 강사 Angela 씨가 유용한 툴인 nodejs nodemon을 가르쳐 주십니다.

Angela 씨의 강의는 여기입니다 → Udemy Bootcamp web development


nodemon을 사용하면 server.js 파일을 수정하고 저장할 때마다 감지해주고, 자동으로 서버를 업데이트 후 반영시켜주는 뛰어난 기능을 갖고 있습니다.


https://nodemon.io/


설치

설치 방법은 커맨드라인에서


npm install -g nodemon


라고 타이핑하면,


※ permission error가 나올 수도 있으니


sudo npm install nodemon -g


앞에 sudo를 붙입니다.


사용법

nodemon server.js


위 명령어를 커맨드라인에 적고 엔터! server.js 파일의 수정 내역이 자동으로 업데이트됩니다.


종료할 때는 ctrl + C.


이상 Node.js와 Express 프레임워크였습니다.



반응형
그리드형