NodeJS+MongoDB Part1

---

 

Express 라이브러리 설치

1. VScode 터미널 열기
2. npm init
   1. 어떤 라이브러리를 설치했는지 기록하기 위해 package.json에 기록하는데 자동으로 생성시켜줌
   2. entry point만 내가 원하는 파일명으로 작성

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

1. npm install express 로 설치
   • dependencies에 express가 추가됨

{
  "name": "nodejs_mongodb",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

// 서버만들기

const express = require('express') //위에서 작성한 라이브러리를 설치
const app = express() // 설치한 라이브러리로 객체를 생성해줘

app.listen() // listen() 으로 서버 띄우기.

다만 현재 어떤 서버로 열지에 대해 작성하지 않았기에 아래와 같이 작성하기

const express = require('express') //위에서 작성한 라이브러리를 설치
const app = express() // 설치한 라이브러리로 객체를 생성해줘

// listen(서버 포트 번호, 해당 서버에 실행할 코드)
app.listen(8080, function(){
	console.log("listening on 8080");
}) 

// 이후 해당 코드를 실행시키기 위해 콘솔에 아래의 코드 작성
// node {파일명}
// node server.js

이제 get 요청을 만들고자 한다면?

// get 요청 API 만들기
app.get('경로', function () {
  
})

예를 들어 /pet 으로 방문시 펫관련 안내문을 띄워준다고 했을 때는?

app.get("/pet", function (req, res) {
  res.send("펫용품 쇼핑할 수 있는 페이지 입니다.");
});

*숙제 예를 들어 /beauty으로 방문시 뷰티관련 안내문을 띄워준다고 했을 때는?

app.get("/beauty", function (req, res) {
  res.send("뷰티용품 쇼핑할 수 있는 페이지 입니다.");
});

그런데 코드를 변경시마다 계속 서버를 새로 켜야하는것이 불편하기에

자동으로 갱신해주는 라이브러리 설치해주기!

// 콘솔에 작성하기
npm install -g nodemon

// 이후 코드 실행
nodemon {파일명}
nodemon server.js

*여기서 만약 콘솔창에 보안 오류에서가 생긴다면

1. 관리자권한으로 PowerShell 실행
2. executionpolicy -> Enter == Restricted  // Restricted 가 발생한다면 
3. set-executionpolicy unrestricted -> 예(Y) -> Enter

*이제  /  경로로 접속시 HTML 파일을 보내서 랜더링 시키고자 할 경우!

app.get("/", function (req, res) {
	// res.sendFIle(__dirname + '보낼파일경로')
  res.sendFile(__dirname + '/index.html')
});

현재 /write 페이지로 이동시 보일 화면

위와 같은데 Submit을 클릭시 폼에 입력한 제목과 날짜를 서버로 전달하려고 할 경우

<div class="container mt-3">
	// action은 submit시 POST 요청을 한뒤 이동하게 되는 페이지 
  <form action="/add" method="POST">
    <div class="form-group">
      <label>오늘의 할일</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>날짜</label>
      <input type="text" class="form-control">
    </div>
    <button type="submit" class="btn btn-danger mt-1">Submit</button>
  </form>
</div>

이후 해당 요청에 대한 server.js 에 코드를 작성한다면?

• 어떤 사람이 /add 경로로 POST 요청을 한다면 ?을 해줘라! 형식으로 작성

app.post("/add", (req, res) => {
  res.send("전송완료");
});

여기서 input 태그 안에 작성한 내용들은 request라고 하는 req 안에 담겨져 있다.

다만 쉽게 꺼내사용하기 위해선 body-parser 라이브러리를 사용하기!

// 설치하기
npm install body-parser
const bodyParser = require("body-parser"); 
// body-parser 가져오기
app.use(bodyParser.urlencoded({ extended: true })); 
// 적용하기
// 이후 input 태그에 name 속성을 추가해 구별가능하도록 하기
<div class="container mt-3">
    <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-danger mt-1">Submit</button>
    </form>
  </div>

이후 html에서 작성한 요소를 확인하기 위한 코드

app.post("/add", (req, res) => {
  res.send("전송완료");
  console.log(req.body.title);
})

콘솔에 input 태그에 작성한 값이 출력되는 것을 확인할 수 있다.

만약 console.log(req.body); 로 작성한다면 object의 객체형태로 볼 수 있다.

이후 해당 값을 영구적으로 저장하고자 한다면 REST API로 DB에 저장하는 방법이 있다.

---

REST API 6개 원칙

1. Uniform Interface: 하나의 자료는 하나의 URL로 만들기
   1. URL 하나를 알면 둘을 알 수 있어야 한다
   2. 요청과 응답은 정보가 충분히 들어있어야 한다
2. Client-Server 역할 구분
   1. 브라우저는 요청만 할 뿐
   2. 서버는 응답만 할 뿐
3. Stateless
   1. 요청1과 요청2는 의존성이 없어야한다.
4. Cacheable
   1. 서버에서 보내주는 정보들은 캐싱이 가능해야 한다.
   2. 캐싱을 위한 버전 같은 것도 관리 잘해야 한다.
   3. 브라우저가 잘해준다.
5. Layered System
   1. 여러개의 레이어를 거쳐서 요청을 처리하게 만들어도 된다.
6. Code on Demand
   1. 서버는 고객에게 실제 실행가능한 코드를 전송해줄 수도 있ek.

좋은 REST API 이름짓기 원칙

• URL을 명사로 작성하기
• 하위문서를 나타낼 땐 /
• 파일확장자(.html) 쓰지말기
• 띄어쓰기는 대시이용
• 자료 하나당 하나의 URL