[Node.js] POST ( insertOne, 예외처리, URL parameter, Link)

yellowbutter·2024년 5월 30일

NodeJs

목록 보기
3/8
post-thumbnail

1. 📌 버튼누르면 서버로 글 전송하기

<form class="form-box" action="/보낼url" method="POST">
   <h4>글쓰기</h4>
    <input name="title">
    <input name="content">
    <button type="submit">전송</button>
</form> 

2. 📌 서버는 글 받으면 잘보냈나 검사

유저가 데이터를 보내면 요청.body로 쉽게 꺼내쓸 수 있게 도와주는 코드

✨ 1. 서버 파일 상단에 추가

app.use(express.json())
app.use(express.urlencoded({extended:true})) 

✨ 2. post하는 코드 추가

  • form 태그 action에 적어주었던 주소를 적어준다.
app.post("/add", (요청, 응답) => {
  await db
    .collection("post")
    .insertOne({ title: 요청.body.title, content: 요청.body.content });
  // 응답.send()
  응답.redirect("/list");
});
  • 서버에게 요청을 한 뒤에는 응답을 해주어야 한다.
    응답.send( )이렇게 메세지 보내도 되고,
    응답.redirect 처럼 다른 페이지로 이동해도 된다.

  • 이렇게 하면 이렇게 입력한 값이 서버로 보내진다.

3. 📌 예외처리

✨ 1. if else - 유저가 보낸 데이터 검사

app.post("/add", (요청, 응답) => {
  if(요청.body.title = ''){
   응답.send('잘못된 요청입니다') 
  }else{
     await db
    .collection("post")
    .insertOne({ title: 요청.body.title, content: 요청.body.content });
  응답.redirect("/list");
  }
});

✨ 2. try catch - 에러 사항 처리

app.post("/add", async (요청, 응답) => {
  console.log(요청.body);
  try {
    if (요청.body.title === "") {
      응답.send("잘못된 요청입니다.");
    } else {
      await db
        .collection("post")
        .insertOne({ title: 요청.body.title, content: 요청.body.content });
      응답.redirect("/list");
    }
  } catch (e) {
    console.log(e);
    응답.status(500).send("서버에러");
  }
});

4. 📌 URL 파라미터

URL 입력란에 :아무문자 이런 식으로 URL을 작성할 수가 있는데
"이 자리에 유저가 아무 문자나 입력하면~" 이라는 뜻이다.

app.get('/detail/:aaaa', (요청, 응답) => {
  
})

1. ✨ DB에서 특정 document 1개 찾기

1> await db.collection('post').findOne({a,1})
2> await db.collection('post').findOne({_id : new ObjectId('64bfde3b02d2932a4c06ffba')}) 

1>

  • a : 1이라는걸 가지고 있는 document를 하나 찾아서 출력해준다.
  • a : 1을 가진게 많으면 그 중에 맨 위에 있는 document 한개만 출력해준다.

2>
2를 사용하려면 상단에 해당 코드를 추가해준다.

const { ObjectId } = require('mongodb') 

id로 document를 찾고 싶을때 사용

2. ✨ 유저가 url parameter에 입력한 것 가져오기


app.get('/detail/:id', (요청, 응답) => {
  console.log(요청.params)
})

3. ✨ /detail/:id로 접속하면 { _id : ~ } 인 글을 DB에서 찾아와서 detail.ejs 파일에 집어넣어서 유저에게 보내기

app.get('/detail/:id', async (요청, 응답) => {
  let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
  응답.render('detail.ejs', { result : result })
})

이렇게 한 뒤에
/detail/글id 를 요청해서
<%= JSON.stringfy(result) %> 하면 저장된 값이 보여진다.

<!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>Document</title>
    <link href="main.css" rel="stylesheet" />
  </head>

  <body class="grey-bg">
    <%- include('nav.ejs') %> 
	<%= JSON.stringfy(result) %>
    <div class="detail-bg">
      <h4>글제목</h4>
      <p>글내용</p>
    </div>
  </body>
</html>

3. ✨ link로 게시글 클릭하면 해당 글로 이동하게 하기

<!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>Document</title>
    <link href="main.css" rel="stylesheet" />
  </head>

  <body class="grey-bg">
    <%- include('nav.ejs') %>
    <!-- <%= JSON.stringify(글목록) %> -->
    <div class="white-bg">
      <% for(let i=0; i < 글목록.length ; i++) { %>
      <div class="list-box">
        <a href="/detail/<%= 글목록[i]._id%>">
          <h4><%= 글목록[i].title %></h4>
          <p><%= 글목록[i].content %></p>
        </a>
      </div>
      <% } %>
    </div>
  </body>
</html>

4. ✨ try, catch 로 에러 관리하기

  • 글 번호 길이 잘못 입력하면 try , catch 로 관리
  • id 길이는 맞았는데, 번호 잘못되면 try catch로 다 막을 수는 없음
  • 그럴때는 result가 null이 나오는데 이때 에러처리도 해줘야한다.
app.get('/detail/:id', async (요청, 응답) => {
  try {
    let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
    if (result == null) {
      //만약 해당 _id를 가진 문서가 데이터베이스에 없다면
      응답.status(400).send('해당 글이 없습니다.')
    } else {
      응답.render('detail.ejs', { result : result })
    }
    
  } catch (){
    //요청.params.id가 유효한 ObjectId 형식이 아니면 
    응답.send('에러처리')
  }
  
})
profile
기록은 희미해지지 않는다 🐾🧑‍💻

0개의 댓글