** 먼저 node.js가 깔려있다고 전제한다.
● express
원하는 디렉토리에, npm init을 먼저 한다. 이후 package.json을 작성해주면됨.
엔트리 포인트만 내가 원하는 파일명으로 적어주면 된다. 나는 server.js로 설정했다.
server.js파일을 만들어주고, express 라이브러리를 사용하겠다는 기본 템플릿을 적어준다.
- express 기본 템플릿
// (server.js 파일)
const express = require('express');
const app = express();
app.listen(8080, function() {
console.log('listening on 8080')
})
첫 두줄은 express 라이브러리 첨부와 사용, 밑에 app.listen()은 원하는 포트에 서버를 오픈하는 문법이다.
listen() 함수 안엔 두개의 파라미터가 필요하다. listen(서버를 오픈할 포트번호, function(){서버 오픈시 실행할 코드})
위 코드를 잘 작성하고 New Terminal 눌러 터미널을 켜서 node server.js를 입력하면 서버가 뜬다.
브라우저에서 localhost:8080 이라고 접속하면 확인이 가능하다.
● nodemon
server.js에 변동된 사항을 반영하려면 서버를 껐다가 다시 켜야하기때문에 nodemon 을 설치하면 변동될때마다 반영해준다.
nodemon 설치
npm install -g nodemonnodemon 실행
nodemon server.js
● get 요청하기
app.get('/home', function(request, respond){
respond.send("홈화면 입니다.")
})위와같이 get요청을 하고, url로 들어가면 내가 원하는 것을 send할 수 있다.
또 특정 url에 들어가게 되면, 원하는 파일을 보낼 수 있다.
먼저, 할일을 적을 수 있는 html을 만들었다. get 요청으로 '/write'라는 url로 들어오게 됐을 때, 이 html파일을 보여주고 싶다. 아래와 같이 작성하고, url로 들어가면 아래와 같은 페이지로 로드된다.
__dirname은 현재 파일의 경로를 뜻한다.
app.get('/write' , function(request, respond){
respond.sendFile(__dirname + '/write.html')
})
그런데 이제 write 폼에서 사용자가 할일과 날짜를 입력하고 submit버튼을 보냈을 때, 서버에서 이 값들을 전송받고 싶다면?
● body-parser
이 값들을 사용하려면 body-parser라는 라이브러리가 있어야한다. (express를 install하면 자동 설치된다.)
아래는 body-parser 기본 템플릿
const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))그 다음 html에 있는 form과 input 태그에 값을 넣어주어야한다.
form 은 action과 method / input은 name
form 태그의 method 속성은 GET/POST 중 어떤 요청을 할 건지 정해주는 부분, action은 어떤 경로로 요청할건지를 정해주는 부분이다.
<form action="/add" method="POST">
<div class="form-group">
<label>오늘의 할일</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label>날짜</label>
<input type="text" class="form-control" name="date">
</div>
<button type="submit" class="btn btn-outline-secondary">Submit</button>
</form>그다음 server.js에서 이렇게 값을 넣어주면된다.
app.post('/add', function(request, respond){
respond.send("전송완료")
console.log(request.body.title);
console.log(request.body.date);
})
