[NodeJS] Express라이브러리, GET요청(출력, 파일전송)

---

Express라이브러리

NodeJS를 이용하여 쉽게 서버를 구성할 수 있게 도와주는 웹 프레임워크이다.

Express설치

npm init

이후

npm install express

입력하면 express 설치는 끝.

서버에 요청할 수 있는 4가지 방법

GET: 읽기요청(웹페이지 읽을 때)

POST: 쓰기, 생성 요청(글을 쓰거나, 로그인 기능 등)

PUT: 수정요청(글, 댓글 수정)

DELETE: 삭제 용청(글, 댓글 삭제)

GET요청 

서버생성

server.js

const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
})

서버를 express로 만들기 위한 기본 문법이다.

node server.js

입력하면

출력하게 되고 localhost:8080 에 접속해보자

다음과 같은 결과가 출력되면 성공이다.

GET요청을 처리하는 코드 작성

app.get('/write', function(req, res) { 
  res.send('write page test')
})

localhost:8080/write 에 접속하면 write page test 창이 뜬다. 

server.js에 get요청을 여러개를 만들어 여러 페이지에 대해 get요청을 처리할 수 있다.

해당 경로 접속시 index 파일 전송

app.get('/', function(req, res) {
	res.sendFile(__dirname + '/index.html')
    });

 

/ <=홈 디렉토리 이다. 처음 localhost:8080에 접속할 때 메인페이지 역할을 함.

해당경로에 접속시 index.html파일을 get요청한 사용자에게 전송시켜주세요 역할이다.

사용자는 경로에 접속시 해당 html 내용을 전달받아 볼 수 있음.

 

app.get( 파라미터1, function( ){ } );

get요청할 시 위의 문장을 이용한다. 파라미터2번째에 function() {} 함수를 넣고 있는데

이는 콜백함수 라고 칭한다.

자바스크립트에서 무언가 순차적으로 실행하고 싶을 때 이 함수를 이용한다.

app.get( '/write', function( ){ 내용 } );

누군가 /write로 요청시 콜백함수 내용을 실행하라 라는 의미 이다.

ES6(신문법)에서는 이를 다음과 같이 화살표로 나타낸다. 

app.get( '/write', ( ) => { 내용 } );

this키워드를 이용할 때 이 문장을 주로 사용한다. 

POST요청 

어떤 글을 쓸때 특정 경로로 보낸다.

action="/add" method="POST"

해당 문장을 HTML의 태그와 같이 추가하면된다.

예를들어

<form action="경로" method="POST">
	<div>
   		<label>할일</label>
        <input type="text">
    </div>
    <button type="submit">버튼</button>
</form>

이런식으로 작성하여 아래 버튼을 클릭할때 input에 입력했던 내용을 action에 지정된 경로로 전송하게 된다. 

server.js에도 다음과 같이 작성한다.

app.post('경로' ,function(req,res){
    res.send('전송완료')
})

POST요청으로 서버에 데이터를 전송하고 싶으면

1. body-parser 필요함

app.use(express.urlencoded({extended: true}))

21년 이후 프로젝트는 따로 설치할 필요없이 다음문장을 server.js 상단에 추가하면 된다.

2. form데이터의 경우 input에 name을 생성한다.

ex)

<input type="text" class="form-control" name="title">

<input type="text" class="form-control" name="date">

server.js에

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

다음과 같이 적어주면 제출했을 때 add로 방문하게 되고 input에 담긴 내용을 add로 전송하게 된다. 

예제

결과