TIL 23 | 서버를 만들어보자 feat. express

daekuenhan·2021년 9월 11일
0
post-thumbnail

express 라이브러리

express 라이브러리를 사용하지않고 순수 node.js 코드로 서버를 만드려면 이렇게 매우 복잡한 코드를 구현해야 한다.

const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something ...
      })
    }
  }
}

하지만 express 라이브러리를 이용하면 미들웨어 추가도 편리하고, 자체 라우터도 제공하고,
코드도 훨씬 간결하기 때문에 서버를 매우 쉽게 짤 수 있게 도와주는 라이브러리입니다.

express 설치
VSC를 열고 터미널에 npm init을치면 package.json을 자동으로 만들어줌.
그럼 여러가지가 나오는데 entry point 만 내가 원하는 파일명으로 설정해주면 된다.
그럼 package.json이 만들어지는데 이건 내가 어떤 라이브러리 설치했는지 기록해주는 파일이다.

그 후에 npm install express / yarn add express 를 입력하면 설치가 된다.

get 요청을 처리해보자.

서버를 만들기 위한 JS 파일을 하나 만들고 (예를들어 server.js 같은)
서버를 띄우기위한 기본 셋팅 (express 라이브러리)을 하고
터미널에 node server.js를 입력하면 'listening on 8080'문구가 뜨면서 서버가 열린다.

const express = require('express'); // express 라이브러리를 첨부해주세요
const app = express(); //express 라이브러리를 이용해서 새로운 객체를 만들어주세요

app.listen(8080, ()=>{ // 8080은 PORT
		console.log('listening on 8080')}); //콜백함수는 서버를 띄운 후 실행할 코드

PORT란 ?

컴퓨터는 항상 외부 컴퓨터와 통신할 수 있게 설계되어있다.
랜선을 꽂거나 와이파이를 켜면 다른 사람이 내 컴퓨터로 접속을 요청할 수도 있다.
컴퓨터는 외부와 통신할 수 있는 구멍이 60000개 정도있는데, 이걸 'PORT'라고 부른다.
평상시엔 막혀있는데, 외부 컴퓨터 접속을 허가하려면 포트를 열어야한다.
무작위로 하나 고른 8080번째 포트를 사용해서 서버를 띄운 것일 뿐이다.
이제 외부 컴퓨터가 아이피 주소:8080이라고 입력하면 내 컴퓨터로 들어올 수 있는 것이다.

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

app.listen(PORT, ()=>{
		console.log('listening on 8080')});

app.get('/pet', (req, res) => { //경로 , callback 함수를 인자로 가진다.
	res.send('펫 용품 쇼핑 페이지')})//callback 함수는 req(요청), res(응답) 인자로 가짐.

서버에서 HTML 파일 전송 / nodemon

nodemon이 없으면 코드를 수정할 때마다 서버를 껏다 켯다 해야함.
그게 귀찮으니까 nodemon을 설치해서 쓰자.
터미널에 npm install global nodemon 으로 설치한다.
이게 안되면 sudo를 붙여서 관리자모드로 설치하면 된다. (난 이렇게 했음...)

이전까지는 res.send()를 이용해서 문자만을 보냇다면 이번엔 HTML 파일을 보내보자.
res.sendFile() 메소드를 이용해준다

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

app.listen(PORT, ()=>{
		console.log('listening on 8080')});

app.get('/pet', (req, res) => { // '/' 경로는 첫 화면, 즉 메인페이지를 의미한다.
	res.send('펫 용품 쇼핑 페이지')})

app.get('/', (req, res) =>{
	res.sendFile(__dirname + '/index.html') 
  // __dirname + '파일명' 을 넣어주면 된다. __dirname은 현재 파일의 경로를 뜻함.
})

form에 입력한 데이터를 서버에 전송하는 법( POST 요청 )

  1. form HTML tag에 기능개발을 먼저 해야한다.
    form 태그에 action, method 속성은 꼭 있어야한다. 그래야 데이터를 서버에 보낼 수 있음.
    없으면 정보를 서버에 전달 할 수가 없음.

input에 입력한 정보들은 req << 여기에 저장이 되있는데, req.body를 찍어보면 undefined가 뜸.
이걸 꺼내서 쓰려면?
body-parser라는 라이브러리가 필요함. 그러나 이제는 body-parser가 내장되어 따로 설치 할 필요는 없다.

app.use(express.json()); // 객체 or 배열 형태의 데이터만 받아옴.
app.use(express.json({strict: false})); // 원시자료형 까지도 다 받을 수 있음.
위 두줄 중에 필요한것 한줄만 골라서 넣어주고
app.use(express.urlencoded({extended: true}))
이거 한줄도 추가해서 넣어주면 된다.

이렇게 두줄 추가해주면 사용이 가능하다.

// write.html 파일의 form tag
<form action="/add" method="POST">
  <input type="text" class="form-control" name="title">
  <input type="text" class="form-control" name="date">
</form>

// server.js에서 post 요청 코드
app.post('/add', (req, res) =>{
  console.log(req.body.title);
  res.send('전송완료')
});

input에 name 속성을 써주엇는데 저게 req.body object의 key가 되는것이고,
input에 내가 입력하는 데이터가 value가 되는 것이다.

때문에 req.body.title / req.body.data 이렇게 입력해주면 값을 꺼내올 수 있다.

profile
새로운 시작을 준비하는 놈

0개의 댓글