node js를 이용한 서버 구현 기초

npm

for JavaScript developers to share and develop

npm init

name & description

node based webserver

대표 프로그램: express

installation

npm install express

뒤에 --save 를 붙이면 프로그램이 의존하고 있는 외부 라이브러리를 package 안에 모두 기록 할 수 있다.

pacakage.json 은 데이터를 가지고 있다. 그 중 dependencies는 어떤 모듈을 쓰고 있는지 보여준다.

const express = require('express')
const app = express()
app.listen(3000, function(){
	console.log('express sever on port 3000')
});

실행

node 'file name'

짤 때 비동기 인 것을 주의 할 것

npm install nodemon -g

nodemon: node 소스의 수정 사항을 자동 반영하여 소스를 재실행

-g : global 내 전체 pc에 영향

URL Routing 처리

get 요청

app.get('/', function(request, response) {
	res.send("hi friend!")
})

html 으로 보내기

app.get('/', function(request, response) {
    res.sendFile("[절대 경로(User부터 시작해서 전부)]")
    res.sendFile(__dirname + "/public/main.html")
})

__dirname은 현재 있는 파일의 root 경로를 표현함

Static 디렉토리 설정

app.use(express.static('dir name'))

static url 설정

<script src="filename.js"></script>

html에 사용하고 싶은 static file 등록

POST 요청처리

npm install body-parser --save

const bodyParser = require('body-parser')

// json을 처리
app.use(bodyParser.json())
// ascii 가 아닌 type을 처리
app.user(bodyParser.urlencoded({extended:true}))

app.post('url', function (request, response) {
	// request.body는 object type
    console.log(request.body.`key`)
    request.send("welcome!" + request.body.`key`)
})

View engine을 활용한 응답처리

npm install ejs --save

app.set('view engine', 'ejs')

view는 views라는 지정된 dir가 있음

app.post('url', function (request, response) {
    request.render('email.ejs', {'email': request.body.email})
})

{%= email =%}

ejs는 view library 중 하나

다른 library도 많으니 찾아서 맞는 걸로 쓸 것

JSON 활용한 Ajax 처리

Ajax를 사용하여 spa 구현

<script>
document.querySelector('.ajaxsend').addEventListener('click', function() {
	const inputdata = document.forms[0].elements[0].value;
	sendAjax('url', inputdata);
})

function sendAjax(url, data) {
	const data = {'email': data};
    // 서버에서 주고 받을 때는 문자열 형태로 해야하기 때문에 stringfy
    data = JSON.stringfy(data);
	const xhr = new XMLHttpRequest();
	xhr.open('POST', url);
	xhr.setRequestHeader('Content-Type', "application/json");
	xhr.send(data);
	xhr.addEventListener('load', function() {
		const result = JSON.parse(xhr, responseText);
        if (result.result != "ok") return;
        document.querySelector(".result").innerHTML= result.email;
	});
}
</scripts>

app.post('url', function(request, response) {
    // check valication about input value => select or insert db
	const responseData = {'result': 'ok', 'email': request.body.email};
	response.json(responseData)
})

출처: https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C
위의 무료 강의를 보고 정리한 내용입니다.