CRUD - POST

gittidev·2024년 6월 12일

Nodejs

목록 보기

4/6

🔥 코드 혼자 잘짜는법 1.기능이 어떤식으로 동작하는지 한글로 정리 2. 한글을 코드로 번역 🔥 [내용 정리]

코드혼자 잘짜고 싶으면 한글로 기능이 어떻게 동작하는지 설명부터하고 그걸 코드로 번역
태그쓰면 서버로 POST요청할 수 있고 유저가 입력한데이터도 전송할 수 있음
서버에서 요청.body쓰면 유저가 폼에 입력한 데이터출력해볼 수 있음
DB에 데이터저장하려면 .insertOne()
그리고 예외처리는 if문이나 try, catch

POST 요청[글 작성하기]

글작성 페이지에서 글을 작성해서 서버로 글을 보낸다.
서버는 글을 잘 썼나 확인[검사는 서버가 담당하는게 좋음]
서버는 확인 후 DB에 저장
글 작성해서 서버로 글을 보낸다.
1. name속성을 꼭 입력해주어야, 서버로 작성한 내용이 잘 전달된다. 반드시 써주기

<body>
    <form class="form-box" action="/add" method="POST">
        <!-- action : form을 전송할 url  method : http method-->
        <h4>글쓰기</h4>
         <input name="title">
         <input name="content">
         <button type="submit">전송</button>
     </form> 
</body>

server.js 에서 유저가 보낸 정보를 서버에서 쉽게 출력하고 싶을때

//요청.body 사용하려면 필요
app.use(express.json())
app.use(express.urlencoded({extended:true}))


//input을 받을 페이지를 렌더링
app.get('/write', (요청, 응답) =>{
    응답.render('write.ejs')
})

//해당 페이지에서 button을 누르면 add url 실행
app.post('/add', async(요청, 응답) => {
    console.log(요청.body) // 요청.body 유저가 input으로 보낸 데이터를 출력해볼수 있음
    await db.collection('post').insertOne({title :  요청.body.title, content : 요청.body.content})
    응답.redirect('/list')
    // 응답.send('작성완료')
})

예외처리 방법

유저가 제목을 안적고 글을 전송한다면?

if 문을 사용한 예외처리
validation 라이브러리 : express-validator, vinejs, validator 등

app.post('/add', async (요청, 응답) => {
  if (요청.body.title == '') {
    응답.send('제목안적었는데')
  } else {
    await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
    응답.redirect('/list') 
  }
  
})

에러발생 방지 try-catch 문

DB가 다운되어 통신이 안되는 등 에러가 발생하는 경우에 특정 코드를 실행시키고 싶을때

try {
   await db.collection('post').insertOne(어쩌구)
} catch (e) {
   console.log(e)
   응답.send('DB에러남')
}

상세페이지 만들기[URL parameter]

기능을 잘 모르겠다 ⇒ 다른 사이트 카피하기
~/detail/어쩌구 로 접속하면
_id 가 어쩌구인 글을 DB에서 찾아와서
ejf에 글을 박아서 유저에게 보낸다.

URL 파라미터 문법

:어쩌구 이런 식으로 URL을 작성할 수가 있는데

이게 뭔 뜻이냐면 "이 자리에 유저가 아무 문자나 입력하면~" 이라는 뜻

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

detail.ejs

<div class="detail-bg">
    <h4>글제목임</h4>
    <p>글내용임</p>
</div>

server.js

parameter는 / 를 기준으로 여러개 작성해도 된다.

const { ObjectId } = require('mongodb') 
//ObjectId를 쓰기위해 가져와야함

app.get('/detail/:id', async(요청, 응답)=>{
    console.log(요청.params)
    await db.collection('post').findOne({_id : new ObjectId('666308bcd58fe9669e0becbe')})
    응답.send('detail.ejs')
})

가져온 데이터를 detail.ejs에 전달하여 화면을 구성한다.

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

해당게시글의 제목을 눌렀을때, 상세페이지로 이동하게 만들기

js 형식으로 작성해야하므로 a태그의 링크를 적는 란에
“/url/<%=params %>” 형식으로 작성한다.

(list.ejs)
    <body class="grey-bg">
        <%- include('nav.ejs')%>
        <% for (var i = 0; i < 글목록.length; i++){ %>

            <div class="white-box">
              <div class="list-box">
                <h4><a href="/detail/<%=글목록[i]._id%>"><%= 글목록[i].title %></a></h4>
                <p>글내용임</p>
                </div>
            </div>
          
        <% } %> 
      
      </body>

예외처리

try catch문을 사용하여 에러메세지를 보여준다. [예시]user가 잘못된 글 번호를 작성한 경우

app.get('/detail/:id', async (요청, 응답) => {
    try {
      let result = await db.collection('post').findOne({ _id : new ObjectId(요청.params.id) })
      if (result == null) {
        응답.status(400).send('그런 글 없음')
      } else {
        응답.render('detail.ejs', { result : result })
      }
      
    } catch (e){
      응답.send('이상한거 넣지마라')
    }
    
  })