Node.js

aydennote·2022년 5월 13일
expressnode.jsnpmpostman
0

Node.js

목록 보기
1/2

📖 오늘 학습 뽀인트!

  1. 서버
  2. npm
  3. Node.js
    3-1 Node.js로 서버 구축
    3-2 routing
    3-3 express, nodemon
    3-4 http 메소드
    3-5 미들웨어
    3-6 multer
    3-7 ejs
    3-8 express-session
  4. Postman

1. 서버

🕵️‍♀️서버란?
네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램이다. 클라이언트의 요청에 대한 응답을 하는 역할을 한다.

localhost : 현재 컴퓨터의 내부 주소. 서버 개발할 때 테스트 용으로 많이 쓰인다.
port : 서버내에 프로세스를 구분하는 용도. 멋사 2기 교육 초반에 빌딩 안에 문으로 비유하여 작성한 적이 있다.
routing : 요청에 맞게 분기 처리하여 응답하는 것을 라우팅이라고 한다.

❓ localhost와 사설 IP의 차이는?
"내 컴퓨터의 IP와 localhost(127.0.0.1)는 같지 않을까?" 라는 생각을 했다.
localhost(127.0.0.1)로 서버를 띄울 경우, 서버를 띄운 PC에서만 접속이 가능하다.
내 컴퓨터의 IP(사설 IP)는 같은 대역의 사설 IP를 할당받은 모든 기기에서 접속이 가능하다.

2. npm

const http = require("http"); // http 패키지 사용.

위 소스코드 처럼 패키지를 통해 서버 구축을 편리하게 할 수 있다. 서로 의존되는 패키지들이 있고, 버전마다 기능이 다를 수 있다. 이러한 패키지들을 모아서 관리해주는 툴이 npm(node package manager)이다. 패키지 의존성과 버전 관리를 package.json 파일로 할 수 있다.

✍ npm 사용
터미널에서 npm init 이라는 명령어로 초기환경을 구축할 수 있다. 입력사항들을 입력한 후 해당 폴더에 package.json이 생성된다.

✍ npm 패키지 설치 및 사용

"dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.16"
  }

터미널에 "npm install 패키지명"을 입력하여 패키지를 설치할 수 있다.터미널에 "npm install -D 패키지명"을 입력하면 패키지를 설치하는데 개발 환경에서만 사용하고 나중에 배포할 때는 사용하지 않는다는 의미이다.
터미널에 "npm install -g 패키지명"을 입력하면 한 번의 설치로 모든 프로젝트에서 사용한다는 의미이다.
💬 실습에서 설치한 패키지는 서버 구축시 필요한 express, nodemon, express-generator 이다.npm install express, npm install -g express-generator nodemon

✍ package.json

{
  "name": "npm_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "echo hello"
  },
  "author": "ayden",
  "license": "ISC"
}

pakage.json 내부는 위와 같이 되어 있으며, "scripts" 부분에 명령어를 입력할 수 있다.

3. Node.js

🕵️‍♀️Node.js란

3-1 Node.js로 서버 구축

const http = require("http");     // http 패키지 사용.

http.createServer((req, res)=>{
    if(req.url ==="/"){
        res.writeHead(200);       // 정상 응답
        res.end("main url");      // 사용자에게 보여질 코드
    } else if(req.url === "/upload"){
        res.writeHead(200);
        res.end("upload url")
    }
}).listen(3000, ()=>{
    console.log('3000번 포트 서버 접속 완료~!!')
})

위 소스코드와 같이 일반 .js 파일에 작성하여 서버를 구축할 수 있다.

require("http") 은 서버를 쉽게 구축하기 위해 http 패키지를 불러오는 메소드이다.
createServer((req, res)=>{...})은 서버를 생성하는 메소드이다. 콜백함수로 req, res 가 있어 요청과 응답을 받고 보낼 수 있다.
listen(3000)는 서버를 대기 상태로 만드는 메소드이다. 클라이언트에서 요청이 있으면 그것을 받아 처리할 수 있다. 3000은 Port Number이다.

3-2 routing

🕵️‍♀️routing이란?
클라이언트의 요청 URL를 보고 이 요청을 처리할 수 있는 곳으로 전달해주는 것이다. 즉, 요청에 따라 처리를 해주는 것을 라우팅이라고 한다.

// app.js 파일
const templateRouter = require('./routes/template')
app.use('/template', templateRouter);

app.js 파일 안에 위와 같은 소스코드를 볼 수 있는데, '/template' url로 요청이 왔을 때 ./routes/template.js 파일을 실행한다는 의미로 생각하면 된다.

// routes 폴더 안에 js 파일.
// 위 소스코드를 보았을 때, user.js 또는 index.js 파일
const express = require("express");
const router = express.Router();

router.get('/ejs', (req, res)=>{
    res.render('template', {data: "test data"});
})

routes 폴더에 js 파일 안에서 어떤 url로 요청 왔을 때 콜백함수로 어떤 것을 전달 받고 어떤 것을 전달해줄지 작성할 수 있습니다.

3-3 express, nodemon

🕵️‍♀️express란?
express는 미들웨어 구조로 인하여 빠르고 간편하게 Node.js를 개발할 수 있도록 도와주는 웹 프레임워크이다.
express-generator는 express를 기본 구조를 간편하게 만들어주는 역할을 한다.

// 프로젝트 생성 명령문으로 터미널에 작성
express --ejs first-project

express-generator를 통해 프로젝트를 만들게 되면 위와 같은 구조로 생성된다.

bin 폴더의 www : 서버 실행 및 포트번호 지정.
public 폴더 : image, js, css 등 리소스.
routes 폴더 : 페이지 라우팅과 관련된 파일, 실제 서버 로직 작성
views 폴더: 템플릿 파일(.jade, .ejs 등) 포함.
app.js 파일 : 핵심적인 서버 역할, 라우팅의 시작점.
package.json 파일 : 의존성 관리 및 버전 관리.

✍ 템플릿 파일은 HTML 코드 안에 JS 코드를 넣을 수 있다.

🕵️‍♀️nodemon이란?
nodemon은 라이브 서버 같은 역할을 수행한다. nodemon을 설치하면 변경 사항이 있을 때 서버를 껐다가 킬 필요 없이 페이지 새로고침만으로 변경 사항이 업데이트된다.

3-4 http 메소드

// GET(data 가져오기)
router.get('/read', (req, res)=>{
  res.status(200).json({
    message: "read success"
  })
})

// POST(생성)
router.post('/create', (req, res)=>{
  const {data} = req.body;
  arr.push(data);
  res.status(200).json({
    message: "create success",
    result: arr,
  })
})

// PUT(수정)
router.put('/update/:id', (req, res)=>{
  const {id}= req.params;
  const {data} = req.body;
  arr[id] = data;
  res.status(200).json({
    message: "update success",
    result: arr,
  })
  console.log(id);
})

// DELETE(삭제)
router.delete('/delete/:id', (req, res)=>{
  const {id} = req.params;
  arr.splice(id, 1);
  res.status(200).json({
    message: "delete success",
    result: arr,
  })
})

http 메소드를 사용하여 서버에 요청을 보내는 방법이다.
GET: 요청 받은 정보를 검색하여 응답(READ)
POST: 요청된 자원을 생성(CREATE)
PUT: 요청된 자원을 수정(UPDATE)
DELETE: 요청된 자원을 삭제(DELETE)

✍ localhost:3000/delete/0 url로 요청 시 router.delete('/delete/:id', (req, res)=>{...} 코드에 :id는 url 요청으로 온 파라미터를 받아서 처리할 수 있다. 즉, :id===0 이 된다.

3-5 미들웨어

-- ../module/loginCheck --
const loginCheck = (req, res, next)=>{
    const userLogin = true;
    if(userLogin){
      next()
    } else{
      res.status(400).json({
        message: "login fail"
      })
    }
  }
  module.exports = loginCheck;
-- index.js --
const loginCheck = require('../module/loginCheck')
router.get('/', loginCheck, (req, res)=>{       // 두 번재 매개변수가 미들웨어
  res.status(200).json({
    message: "login success",
  })
})

🕵️‍♀️미들웨어란?
요청과 응답 사이에 위치하여 목적에 맞게 처리하는 함수들이다.
예를 들어 게시판에 글을 쓴다고 가정해 보자. 게시판에 글을 쓰고 삭제하고 수정하는 작업은 로그인한 후에 가능한 작업이다. 즉, 글 작성, 삭제, 수정 요청 시 매번 로그인이되어 있는지 확인해야 한다. 이렇게 요청이 올 때마다 뭔가를 체크하는 작업의 코드를 작성한다면 비효율적이다. 글 작성, 삭제, 수정 요청 시 로그인 체크 하나의 함수로 응답해주는 게 미들웨어이다.

3-6 multer

-- index.js --
const multer = require("multer");
const storage = multer.diskStorage({
    destination: (req, file, cb) =>{
        cb(null, "public/images/")
    },
    filename: (req, file, cb) =>{
        cb(null, file.originalname)
    }
})
const upload = multer({storage: storage})

-- imageUpload.js --
const multer = require("multer");
const storage = multer.diskStorage({
    destination: (req, file, cb) =>{
        cb(null, "public/images/")
    },
    filename: (req, file, cb) =>{
        cb(null, file.originalname)
    }
})
const upload = multer({storage: storage})

🕵️‍♀️multer란?
express는 사용자가 업로드한 파일을 받아서 저장하는 기능을 제공하지 않는다. 파일을 업로드할 때 사용하는 패키지가 multer이다.

3-7 ejs

🕵️‍♀️ejs란?
HTML이 정적 웹 페이지라면 ejs는 view 파일 안에 변수를 넣을 수 있는 동적 웹 페이지이다. 사용자 모두에게 똑같이 보이는 웹페이지를 ejs로 하나만 만들고 안에 내용만 변수로 사용하면 HTML 처럼 하나하나 다 만들지 않아도 된다.

✍문법 사용

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <% if(true){ %>
    <div>ejs working</div>
    <% } else { %>
    <div>ejs not working</div>
    <% } %>
    <div></div>
  </body>
</html>

js 코드는 위 소스코드와 같이 <%...%>로 작성한다.

-- ./routes/template.js --
router.get('/ejs', (req, res)=>{
    //views 폴더 template 파일에 data 라는 key를 가진 값을 보낸다.
    res.render('template', {data: "test data"}); 
})
-- ./view/template.ejs --
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <%= data %>
  </body>
</html>

위와 같은 소스코드로 data라는 변수를 출력할 수 있다.

res.render('template', {data: "test data"});

✍ejs도 JS처럼 파일 분할이 가능하다. <% include 파일명 %>으로 외부 파일을 가져올 수 있다.

3-8 express-session

//app.js
const session = require('express-session')
app.use(session({
  secret: "first project",      // 세션 암호화
  resave: false,                // 세션이 변경되지 않았을 때는 저장 X
  saveUninitialized: true,      // 세션 저장될 때 초기화 X
}))

🕵️‍♀️express-session이란?
로그인이라는 기능을 구현한다고 가정했을 때, 사용자는 아이디와 비밀번호를 서버에 보내 로그인을 요청한다. 정상적으로 로그인이 되고 게시판에 글을 작성하려고 할 때, 서버는 상태에 대한 저장 기능이 없기 때문에 사용자가 로그인되어 있는 것을 확인할 수 없다. 즉, 로그인이 되어 있지 않다고 판단하여 게시판 글 작성에 대한 요청을 거절한다. 이때 필요한 것이 session이다. 즉, session은 사용자 정보를 저장하는 기능을 하는 패키지이다.

4. Postman

서버 개발 시 이를 테스트할 수 있는 툴이다. 브라우저 대신이라고 생각하면 될 것 같다. 또한, API 개발을 보다 빠르고 쉽게 구현할 수 있도록 도와주며, 개발된 API를 테스트하여 문서화 또는 공유할 수 있도록 도와주는 툴이다.

💬 API는 간단하게 요청을 받고 응답하는 서버이다.

❓ 브라우저에서 테스트하지 않고 왜 Postman을 사용할까?
너무나 당연하지만 브라우저는 기본적으로 테스트하기 위해 만들어지지 않았다. 따라서, 테스트 단계에서 사용하기에는 적합하지 않다.(파라미터를 전달하는 방법, 응답을 받고 출력하는 방법 등등)

profile
aydennote
기록하는 개발자 Ayden 입니다.
다음 포스트

Database

0개의 댓글