The Web Developer - (Udemy)_ RESTful 라우트

‍정진철·2022년 7월 27일
Restfulexpressudemywebweb developer
0

web devloper (udemy)

목록 보기
12/34

1) Get 요청과 Post 요청

GET

  • Used to retrieve information.

  • Data is sent via query string.

  • Information is plainly visible in the URL!

  • Limited amount of data can be sent.

  • 데이터를 가져올 때 쿼리 문자열에 담겨서 옴.

  • 즉, URL에서 데이터를 볼 수 있음. (최대길이: 2048자)

  • GET 요청을 북마크 할 수 있음.

  • 정보를 가져오고 페이지를 가져와서 화면에 띄우는 것.

  • 기본적으로 백엔드에 영향을 주지 않음.

  • Post요청과 비교했을 때 생성,삭제,업데이트를 하지 않음.

  • 데이터는 넣을 수 있지만 쿼리 문자열로 들어감 (GET)

Post

  • Used to post data to the server.

  • Used to write/create/update

  • Data is sent via request body, not a query string!

  • Can send any sort of data (JSON!)

  • post의 기본 개념은 데이터를 '보내는 것'

  • 보내야 하는 중요정보가 있을 때 post요청을 사용하고 쿼리 문자열은 요청의 일부로 포함되 있지 않음.

  • 대신 요청의 Body에 포함됨.

  • 길이가 제한된 URL과 달리 더 많은 데이터를 보낼 수 있음.

  • 쿼리 문자열 대신 JSON 타입으로 보내기 가능. (텍스트 취급)

  • 회원가입과 같이 계정을 등록해 생성하거나 블로그에 사진,글,댓글을 쓰기 위해 데이터를 보낼 때 사용.

  • 한마디로 데이터를 보내서 request body에 포함시키는 것. (get은 아님)

<요약>

  • Get 요청은 정보를 가져올 때 씀.
  • Post 요청은 정보를 올리거나 보낼 때 사용.

2) REST

REpresentational State Transfer

  • REST is an " architectural style for distributed hypermedia systems ".
  • Its basically a set of guidelines for how a client + server should communicate and perform CRUD operations on a given resource.

클라이언트와 서버가 어떻게 서로 '소통' 해야 하는가에 대한 가이드라인,개념,원리.

  • RESTful은 REST 규칙에 따르는 시스템.
  • 예를들어 트윗을 삭제하고 업데이트하고 읽는 등, CRUD의 행위를 할 때 사용자가 해당 리소스에서 CRUD를 수행하도록 다양한 라우트를 구현하는 방법.
  • 리소스는 어떤 것이 될 수 있음 (트윗 , 사용자 ,이미지 등)
  • HTTP 를 통해서 접근을 노출하거나 제공하는 엔티티.
  • 웹 앱을 설계할 때 따르는 일련의 원칙.
  • 클라이언트 서버 의사소통을 위한 일련의 규칙.
  • 무상태성: 무상태 프로토콜로서의 HTTP 개념을 이야기하는 것이며 모든 요청은 그 자체로 일종의 진공상태.
  • 이전 요청에 대한 접근권한이 없음.
  • 오늘날 대부분은 다른 HTTP 동사(Get, Post, Put, Patch, Delete) 와 매치되는 일종의 일관된 URL 패턴으로 구성되있음.

3) RESTful 주석 개요

CRUD 청사진 


index - GET/comments - list all comments
Create - POST/comments - Create a new comment 
Show - GET/comments/:id - Get one comment (using ID)
Update - PATCH/comments/:id - Update one comment
Delete/Destroy - DELETE/comments/:id - Destroy one comment

4) RESTful 주석 Index

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


app.use(express.urlencoded({ express : true}))
app.use(express.json())
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

const comments = [
    {
        username:'Todd',
        comment: 'lol that is so funny'
    },
    {
        username: 'Skyler',
        comment: 'I like to go birdwatching'
    },
    {
        username: 'sk8erboi',
        comment: 'plz detle your account, Todd'
    },
    {
        username: 'onlysayswoof',
        comment: ' woof woof woof'
    }
]

//comments : 브라우저에 기입될 내용
app.get('/comments', (req,res) =>{
    res.render('comments/index', {comments})
    //'comments/index 는 comments라는 폴더에 index.ejs를 불러와라 !
    // 그리고 comments 의 데이터를 랜더링하기 위해 {comments} 변수 기입 -> ejs 파일에서 사용가능

})

app.listen(3000, () =>{
    console.log("ON PORT 3000")
})
<index.ejs>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Comments Index</title>
  </head>
  <body>
    <h1>Comments</h1>
    <ul>
      <% for(let c of comments) { %>
      <li><%= c.comment %> - <b><%= c.username %></b></li>

      <% } %>
    </ul>
  </body>
</html>

5) RESTful 주석 New

  • 1) form 을 랜더링하는 route - Get (/comments/new)
    -> 이때, form 태그의 action = /comments , method = post 
 app.get('/comments/new', (req,res) =>{
    res.render('comments/new')
})

  • 2) 입력된 댓글의 내용을 전송함 - Post (/comments)
  app.post('/comments', (req, res) => {
    const {username, comment} = req.body;
    comments.push({username, comment})
    res.send("IT WORKED!")

})

5) Express 방향 수정

res.redirect([stauts])

해당 브라우저에서 원하는 행동 수행 후 제출 혹은 새로고침시 원하는 브라우저 페이지로 향하게 하는 것.


app.post('/comments', (req, res) => {
    const {username, comment} = req.body;
    comments.push({username, comment})
    res.redirect('/comments')

})
  • form 제출 후 localhost:3000/comments 로 바로 이동하게 됨 .(기본 상태 : 302)

6) RESTful 주석 Show

<index.js>
app.get('/comments/:id', (req,res) => {
   const { id } =  req.params;
   //comments 배열에 존재하는 각각의 comment 객체 지칭.
   const comment = comments.find(c => c.id === parseInt(id))
   //show.ejs 템플릿에 comment 변수 전달시키기.
   res.render('comments/show' , {comment})
})


<show.ejs>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Show</title>
  </head>
  <body></body>
  <h1>Comment ID: <%=comment.id%></h1>
  <h2>Commnet: <%= comment.comment%> - <%=comment.username%></h2>
  <a href="/comments"> Back to Index</a>
</html>

7) UUID 패키지

새로운 댓글을 입력 할 때 마다 새로운 id를 부여할 수 없으니 랜덤으로 아이디가 부여되는 패키지 설치

const express = require('express');
const app = express();
const path = require('path');
const {v4 : uuidv4} = require('uuid');
uuidv4();


const comments = [
    {   
        id: uuidv4(),
        username:'Todd',
        comment: 'lol that is so funny'
    },
    {    
        id: uuidv4(),
        username: 'Skyler',
        comment: 'I like to go birdwatching'
    },
    {   
        id: uuidv4(),
        username: 'sk8erboi',
        comment: 'plz detle your account, Todd'
    },
    {
        id: uuidv4(),
        username: 'onlysayswoof',
        comment: ' woof woof woof'
    }
]

//form에서 입력된 username, comment 내용 localhost:3000/comments 로 전송.
app.post('/comments', (req, res) => {
    const {username, comment} = req.body;
    comments.push({ username, comment, id: uuidv4() })
    res.redirect('/comments')
})

//form 제출
app.get('/comments/:id', (req,res) => {
    // 매개변수에서 (params) 문자열 id 가져오기
   const { id } =  req.params;
   //comments 배열에 존재하는 각각의 comment 객체 지칭.
   const comment = comments.find(c => c.id === id)
   //show.ejs 템플릿에 comment 변수 전달시키기.
   res.render('comments/show' , {comment})
})

8) RESTful 주석 Update

Patch / Put

  • 기존의 내용을 편집하거나 바꿀 때 사용.
  • Patch는 기존 리소스에 업데이트하거나 추가할 때 사용 (페이로드가 포함됨 - newComment)
  • Post는 body에 댓글의 '모든 게' 다 들어감. 댓글 텍스트뿐만 아니라 ID인 사용자 이름까지.
    기존의 데이터베이스에 저장된 데이터를 새 페이로드로 변경.
  • 요즘 웹 개발의 추세는 객체를 변형시키지 않는 불변성을 강조.

9) Express 메소드 재정의

method-overrid

  • 클라이언트가 해당작업을 지원하지 않는 환경에서 Put,Delete 등의 HTTP 동사를 쓰도록 해줌.

  • '쿼리 문자열'값을 이용하는 옵션 사용.

  • form 액션에서 'Delete, Patch, Put 등 무엇으로 설정되든 간에 Express는 HTTP 동사를 바로 그 액션으로 취급함.

  • 즉 , 예를들어 <form method="POST", action="/resource?_method=DELETE"> 에서 post 요청이어도 express는 delete 요청으로 취급.

   //post 요청이지만 express를 속여 patch를 수행하게함.
    <form method="POST" action="/comments/<%=comment.id %>/edit?_method=PATCH">
      <textarea name="comment" id="" cols="30" rows="10">
      <%= comment.comment %>
    </textarea
      >
      <button>Save</button>
    </form>
  </body>
</html>

// 댓글 편집하는 특정 리소스 설정 (form)
app.get('/comments/:id/edit', (req,res) => {

	//ID를 이용해 필요할 법한 정보를 폼으로 전달
    const { id } =  req.params;
    const comment = comments.find(c => c.id === id)
    res.render('comments/edit', { comment })

})

  • 댓글 수정

  • 사실은 POST 요청을 했지만 express와 합의해 비밀코드인 '_method'를 사용해 해당 요청이 PATCH 요청으로 취급되게 하는것.

  • '/comments/:id' 를 Get과 Patch 로 만들 수 있음.

10) RESTful 주석 Delete

<show.ejs>
 <body>
    <h1>Comment ID: <%=comment.id%></h1>
    <h2>Commnet: <%= comment.comment%> - <%=comment.username%></h2>
    <a href="/comments"> Back to Index</a>
    <a href="/comments/<%= comment.id%>/edit">Edit Comments</a>
    <form method="POST" action="/comments/<%=comment.id%>?_method=DELETE">
      <button>Delete</button>
    </form>
  </body>
      
  
<index.js>
  
//댓글 삭제
app.delete('/comments/:id', (req,res) =>  {
    const { id } =  req.params;
  //delete를 눌렀을 때 해당 id와 다른 id는 살리고 해당 id만 제거
    comments = comments.filter(c => c.id !== id);
    res.redirect('/comments')
})

Before

After

profile
‍정진철
WILL is ALL
이전 포스트

The Web Developer - (Udemy)_ Express

다음 포스트

The Web Developer - (Udemy)_ Mongoose & Express

0개의 댓글