Next.js 서버 기능 <MongoDB>

---

서버 만드는 법

1. /pages/api 폴더를 생성한다.

2. 원하는 이름의 js파일을 생성한다.

=> 필자는 /pages/api/test.js로 생성하였다.

클라이언트가 요청을 하면 적절히 응답하기 위한 서버코드를 이곳에 작성할 것이다.

---

클라이언트 > 서버

(app/write/page.js)

export default function Write(){
  return (
    <div>
      <form action="/api/test" method="POST">
      	<input name="id" placeholder="ID 입력"></input>
        <input name="pw" placeholder="PW 입력"></input>
        <button type="submit">버튼</button>
      </form>
    </div>
  )
}

1. form태그를 연다.

2. action: 서버 경로를 기입한다.

3. method : GET, POST 방식을 기입한다.

- GET요청: URL의 주소 끝에 파라미터를 포함하여 전송하는 법. (qurry string)

- POST 요청: 전송할 데이터를 HTTP메시지 body부분에 담아서 서버로 전송하는 법.

4. submit : 입력한 데이터를 포함하여 서버에게 전송.

---

서버 > 클라이언트

(api/test.js)

export default function handler(req, res) {
  if (req.method == 'GET'){
  	const { id, pw } = req.query;
    console.log(id, pw);
  }
  
  if (req.method == 'POST'){
    console.log(req.body)
  }
}

 

1. handler함수를 생성.

2. 파라미터 값으로 request, response 값을 사용한다.

3. get방식은 req.query로 사용자가 입력한 데이터를 확인할 수 있다.

4. post방식은 req.body로 사용자가 입력한 데이터를 확인할 수 있다.

 

서버 > DB

await db.collection('컬렉션이름').insertOne(req.body)

클라이언트가 보낸 입력값을 통해 DB를 Create하는 방법이다.

await db.collection("post").findOne({ _id: new ObjectId(props.params.폴더명) });

URL의 parameter를 통해 > 클라이언트가 DB를 Read하는 방법이다. * 서버X

await db.collection('post').updateOne({게시물정보}, { $set : {바꿀데이터}} );

클라이언트가 보낸 입력값을 통해 DB를 Update하는 방법이다.

=> 게시물 정보는 게시글 고유 키 값인 id값을 보통 넣고, 바꿀데이터는 오브젝트 타입으로 보내면 된다.

return res.status(200).json('정상')
res.redirect(302, '/')

1. status(). json("") : 클라이언트에게 메시지를 보내는 용도. 

2. redirect : 클라이언트를 해당 URL로 이동시키는 코드다.

---

데이터 접근방법 및 예외처리

if (req.body.id == "") {
  return res.status(500).json('ID를 입력해주세요.')
}

body안에 데이터가 json형식 즉 object로 담겨있기 때문에, req.body로 접근하여 값을 확인할 수 있다.

=> 예외 처리 가능

---

서버를 단순히 js파일에서 구현을 할 수 있다는 게 되게 신기하다.

심지어 쉽고 간단한 편이라고 생각한다.

JSP를 했던 기억이 새록새록... 이 정도로 간단한데 왜 아직까지 Spring이 js보다 개발 시장이 큰지 의문이다.

장단점이 있겠지? 그래도 해외시장보다는 한국이 js를 선호하지 않는 편인 것 같아 조금 속상할 따름이다..