📕 업데이트 사항

데이터 출력시 async, await

기존에 쓰던 문법보다 async await을 쓰기를 권장하도록 바뀌었다.

가끔 처리가 완료되기까지 기다리지 않고 바로 다음 줄을 급하게 실행하려고 하기 때문에 (일명 비동기처리)
그걸 막고 싶으면 콜백함수를 쓰거나 await을 쓰거나 .then을 쓰거나 셋 중 하나 쓰면 됨.

1. 콜백함수 사용하기

app.get('/list', function(요청, 응답){
    // DB에 저장된 데이터 꺼내오기
    db.collection('post').find().toArray(function(에러, 결과){
        console.log(결과);
        응답.render('list.ejs', { posts : 결과 });
    });
});

기존문법임
DB에서 검색해온 데이터를 toArray()안에 콜백함수로 결과를 담아와서 나머지 요청을 해줬음

2. .then() 사용하기

app.get('/chat', 로그인했니, function(요청,응답) {
    db.collection('chatroom').find({ member : 요청.user._id }).toArray()
    .then((결과)=>{
        console.log(결과)
        응답.render('chat.ejs', { data : 결과, user : 요청.user });
    })
});

이런식으로 .then()안의 콜백함수로 DB 데이터를 검색한 이후에 실행시키도록 작성하기도 했음

3. async, await 사용하기

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('컬렉션명').find().toArray()
  응답.send(result[0].title)
})

요즘 node.js에서 최신식으로 권장하는 방식이라고 함

1. await 쓰려면 그 전에 async라는걸 콜백함수 왼쪽에 붙이기
2. 아무곳에서나 await 불가능! 지정된 곳에서만 가능함.
   db.collection().어쩌구() 코드들에만 await을 붙이기

예외상황 처리하기

try / catch

예외상황들에 대처해주는 코드도 넣는게 좋다.
예를 들어 유저가 /detail/글_id를 입력하는게 아니라 이상한걸 /detail/바보 라고 입력해서 서버로 요청을 날리면 에러가 뜬다.
이런걸 막기위한 코드를 넣어보자.

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

더 단단한 검사를 원한다면 try안에 if문 추가해도 좋다.

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 (){
    응답.send('이상한거 넣지마라')
  }
  
})

그리고 예외상황에선 에러코드같은것도 보내주면 프론트엔드에서 유저가 어떤 문제인지 파악하기 쉬운데,

유저 잘못으로 에러가 났을 경우엔 4XX 같은 코드를 .status() 안에 넣어주면 되고

서버 잘못으로 에러가 났을 경우엔 5XX 같은 코드를 .status() 안에 넣어주면 된다.

안한다고 나쁜건 없지만 프론트엔드에서 서버와 통신할 때 에러원인 찾는게 쉬워진다.

MongoDB 수정문법 추가

새로 배운거 총정리

1. DB에있던 document 하나 수정하려면 db.collection().updateOne()

2. 수정할 때 $set연산자 쓰면 덮어쓰기, $inc는 기존에 있던 숫자를 원하는 만큼 증감 가능

{$set : {like : 2}} // 덮어쓰기
{$inc : {like : 2}} // 숫자만큼 증감 (-2면 그만큼 감소)
{$mul : {like : 2}} // 기존값에 곱하기
{$unset : {like : 2}} // 필드값 삭제 (거의 쓸일 없음)

3. 여러개 document 한 번에 수정하려면 updateMany 쓰면 되는데 거기서는 $gt같은걸로 특정조건을 만족하는 document만 필터링해서 수정해버릴 수도 있음

app.put('/edit', async (요청, 응답)=>{
  	// document 여러개 수정하기
	await db.collection('post').updateMany({_id : 1}, {$set : {like : 2}})
})

조건거는 법 :

app.put('/edit', async (요청, 응답)=>{
	await db.collection('post').updateMany({_id : 1}, {{like : $gt{2}}})
	// like가 2보다 큰것. like > 2
	// gt는 greater than
})

4. 서버에서 어떤 정보가 필요한데 근데 서버에서 찾을 수 없으면 유저에게 보내라고하거나 DB에서 출력해보거나 하면 됨

5. method override 사용하면 폼태그에서도 put, delete 요청 날릴 수 있는데 그럼 좀 더 이쁜 API를 만들 수 있음

AJAX 요청하기 - fetch()

document.querySelectorAll('.delete')[0]
.addEventListener('click',function(){

  fetch('/요청url입력란', {
    method : 'POST',
    headers : {
      'Content-Type' : 'application/json'
    },
    body : '데이터~~~' // 문자나 숫자 자료만
    // body : JSON.stringify({a:1})
    // -> array,object는 이렇게
  })
})

jquery 없이 AJAX 요청하기

fetch() 사용시 서버가 보낸 데이터 출력

document.querySelectorAll('.delete')[0].addEventListener('click',function(){
  fetch('/요청url입력란', {
    method : 'POST',
  })
  .then((r)=>r.text())
  .then((r)=>{ console.log(r) })
})

fetch함수 사용응용임
자바스크립트에서 fetch는 늦게 처리되는 함수임
그래서 .then 써줘야함. 사용법이니까 몰라도 그냥 외우셈

서버가 보내는게 문자일 경우 r.text()
object, array일 경우 r.json()

콘솔에 출력해보면 서버에서 보낸 메세지가 잘 출력된다.
즉, r은 서버가 보낸 데이터임

여기서 잠깐 알아보자면, html 보여주는 법에는 두가지가 있다.

1. 서버에서 다 만들어서 보내기 (SSR)
   -> 새로고침 발생

2. 서버는 데이터(array/object)만 보내고 브라우저에서 완성하기 (CSR)
   -> 부드러움

지금까지 배웠던거는 모두 1번 방식임.
근데 AJAX의 then 활용하면 저 구간에서 코드짜서 html 동적 생성 가능함
CSR 하기 좋다는 의미임

AJAX 실패시

fetch('/URL')
  .then((r)=>{
    if(r.status == 200) {
      return r.json()
    }
    else {
      // 서버가 에러코드전송시 실행할코드
    }
  })
  .then((result)=>{
    // 성공시 실행할 코드
  })
  .catch((error)=>{
    // 인터넷문제 등으로 실패시 실행할코드
})

axios 라이브러리 사용하기

간단한 axios 라이브러리 사용해서 서버에 AJAX 요청하는 방법도 있음.
사용법도 간단함

axios.get('/URL').then((r)=>{ console.log(r) 
    // 결과 출력             
}).catch(()=>{
	// 예외 처리 = 에러시 실행할 사항
})

끝!