[Node.js] 기초

[Node.js] 기초

2020. 7. 25. 21:56ㆍ개발/Node.js

아래 포스팅은 inflearn의 Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해 강의를 바탕으로 공부한 내용을 정리하는 포스팅입니다.

1. npm(Node Project Manager) 설치

sudo apt-get install npm

2. npm init

npm init 명령어로 node project를 시작하게 되면 package.json이라는 파일이 하나 생성된다. 이 파일은 내가 해당 node project에서 사용한 dependency들과 각종 info들을 관리해주는 파일이다.

3. Web Server 로는?

Node는 다양한 종류의 Web server를 지원한다. 여기서는 express를 사용해서 서버를 구성해보도록 하겠다.

node install express --save

위 명령어로 express server를 쉽게 설치할 수 있다. 설치가 끝나면 node_modules라는 폴더가 하나 생기게 되고, package.json에 dependencies가 추가 된 걸 볼 수 있다. node_modules에는 express가 동작하는데 필요로 하는 라이브러리들이 포함되어 있다.
--save 옵션으로 우리는 package.json에 설치 기록을 남길 수 있다. 우리가 설치한 dependency들을 기록해서 추후에 다른곳에서 서버를 사용할 때 쉽게 dependency들을 가져와 설치 할 수 있다.

sudo npm install nodemon -g

nodemon은 django처럼 파일이 수정되면 자동으로 서버를 내렸다가 올려주는 기능을 수행한다.
-g 옵션은 현재 node가 깔려있는 PC에서 어느 directory든 node projcect를 시작하면 global하게 nodemon의 기능을 사용할 수 있도록 해준다.(해당 프로젝트 한정이 아니라는 뜻.)
nodemon을 사용해 서버를 실행시키려면 nodemon app.js와 같은 방식으로 사용한다.

4. express 실행

app.js 생성

/* 
app.js
requrie는 express를 생성할때 만들어진 node_modules 폴더에서
필요한 modual을 가져오는 역할을 한다.
*/
var express = require('express')
var app = express()
app.listen(3000, function(){
        console.log("start! on 3000 port")
});

node app.js 명령어로 express 서버를 실행 시킬 수 있다.
1. nodemon을 사용하려면 nodemon app.js

node는 함수안에 동작하는 함수(콜백 함수) 가 모두 비동기로 동작한다.
1. ```
var express = require('express')
var app = express()
app.listen(3000, function(){
    console.log("start!")
});

console.log("end of server code");
```
  1. ```
  $ nodemon app.js
  end of server code
  start!
```
  - 위의 결과에서 보듯 end of server code 가 start! 밑에 있음에도 불구하고 먼저 출력되는데, 이는 서버가 완전히 실행되는걸 기다렸다가 함수가 실행되는게 아닌, callback함수들이 비동기로 처리되기 때문이다.
  - 따라서 서버가 완전히 올라가는 과정 중에 end of server code start! 가 실행되고 서버가 완전히 올라간 후 start!가 출력된다.
2. ```
var express = require('express')
var app = express()
app.listen(3000, function(){
    console.log("start!")
});

for(var i = 0; i < 1000; i++){
    console.log("end of server code");
}
```
  1. 위와 같이 코드를 바꾸게 되면 동기적으로 실행되는 end of server code 를 출력하는 과정이 끝난 후에 비동기로 실행되는 start!가 출력된다
  2. ```
  ...
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  end of server code
  start
```

5. 간단한 URL Routing

```
var express = require('express')
var app = express()
app.listen(3000, function(){
    console.log("start!")
});

app.get('/', function(req, res){
    res.send("<h1>hi friend!</h1>");
    //res.sendfile(__dirname + "/public/main.html")
});
```
1. res.send()로 Text return 할 수 있음. HTML text를 보내는 것 도 가능
2. res.sendfile()로 HTML파일 redirect 가능.
  1. 이때 __dirname은 js에서 기본적으로 제공하는 directory 변수 이다. 해당 javascript파일의 절대경로를 나타낸다.
3. '/' 경로로 접근하면 해당 함수가 response한다.

6. Static 디렉토리 설정

보통 html 파일에서 javascript를 불러오려면 <script src = "main.js"></script> 같은 식으로 불러온다. 이때 main.js를 실제로 불러올때 host:3000/main.js 와 같은 식으로 html을 로드하면서 서버에 main.js에 대한 request를 보내 파일을 받아온다.

하지만 main.js가 어디있는지 우리는 알려주지 않았기 때문에 어디서든 script를 부를때 기본적으로 참조하면서 파일을 찾는 Static 디렉토리를 설정해준다.

//express가 public 이라는 폴더를 static으로 기억하게 된다.
app.use(express.static('public');
<script src = "main.js"></script>

//image등을 불러올때도 마찬가지이다.
<img src = "images/crong.jpg" alt="" width="300px";>

7. POST 요청 처리

POST 로 Client에서 오는 데이터를 받아 보려면 body-parser를 사용해야 한다.

# body-parser 설치
npm install body-parser --save

var express = require('express');
var app = express();
var bodyParser = require('body-parser'); //body-parser 모듈 불러옴

app.listen(3000, function () {
  console.log('start Server 3000');
});

app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/email_post', function (req, res) {
  console.log(req.body);
  res.send(req.body);
});

저작자표시 비영리 변경금지

괜찮아 나도 몰랐어