Node Js 복습 (3)

0910 내용이지만 오늘은 13일

금요일에 바로 복습을 했어야했는데 친구가 와서 패스

주말에는 백신 2차 맞고 이틀 내내 잠만 잤다

오늘 수업 듣고 정리를 하자니 막막하지만

일단 해봅시다

1. 흐름제어

Js와 Node에서는 주로 비동기 프로세스를 사용한다.

이벤트 리스너와 콜백함수를 많이 사용하게 되는데

콜백 함수가 줄줄이 나오면서 콜벡 헬에 빠지는 경우가 많다.

이를 해결하기위해 Promise 라는 객체를 사용.

1) Promise

const promise1 = function (condition) {
  return new Promise((resolve, reject) => {
    if (condition) {
      // 실행
      resolve("성공!");
    } else {
      // 에러
      reject("실패!");
    }
  });
};
promise1(true)
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.log(error);
  });

promise에 new Promise 생성 가능
매개변수로 resolve 와 reject를 가지는 콜백함수 생성
resolve 와 reject를 넣어준 인수는 각각 then과 catch의 매개변수에서 받는다!
resolve가 호출되면(condition = true) then이 실행되고
reject가 호출되면(condition = false) catch가 실행된다.

2) async/await

promise코드도 길다! 더 깔끔하게 줄일 수 있다.

promise와 코드를 비교해보면

  function findAndSaveUser(Users) {
    Users.findOnde({})
    .then((user) => {
    user.name = 'zero';
    return user.save();
    })
    .then((user=>{
        return Users.findOne({gender: 'm'});
    })
    .then((user=>{
        return users.save()
    })
    .catch(err=>{
        console.error(err);
    });
  }
  

이 코드가 async/await 에서는

async function findAndSaveUser(Users){
  try{
    let user = await Users.findOne({});
    user.nama = 'zero'
    user = await user.save();
    user = await Users.findOne({gender:'m'});
  } catch(error) {
    console.error(error);
  }
}

이렇게 줄어든다!

2. React + 통신

이전에는 강사님이 써주신 API명세를 보고 라우터를
만들었다면 이번에는
이전과는 다르게 API 명세를 직접 작성

// 목적 : 투두 리스트 생성
method : post
url : /contents
body : { todoContent: "할일"}
response
200
{ message: "할일이 추가 되었습니다."}
400
{ message: "이미 추가된 내용입니다."}

// 투두 리스트 삭제 (id)
method : delete
url : /contents/:id
body : {, todoContent: "할일"}
params: num
response
200
{ message: "삭제가 완료되었습니다."}
400
{ message: "존재하지 않는 내용입니다."}

이후에 라우터 작성

 router.post("/", (req, res) => {
  const { id, todoContent } = req.body;

  const todosIdx = todosArr.findIndex((item) => item.id === id);

  if (todosIdx === -1) {
    todosArr.push({ id, todoContent });
    res.status(200).json({
      message: "할일이 추가되었습니다.",
      data: todosArr,
    });
  } else {
    res.status(400).json({
      message: "추가에 실패했습니다.",
      data: todosArr,
    });
  }
});

router.delete("/:id", (req, res) => {
  const { id } = req.params;

  const todosIdx = todosArr.findIndex((item) => item.id === Number(id));

  if (todosIdx === -1) {
    res.status(400).json({
      message: "삭제에 실패했습니다.",
    });
  } else {
    todosArr.splice(todosIdx, 1);
    res.status(200).json({
      message: "수정이 완료 되었습니다.",
      data: todosArr,
    });
  }
});

통신을 해보니 console 창에 잘 뜬다!

3. axios

axios 는 npm 을 이용하여 다운로드 가능한 HTTP request 모듈/ 라이브러리 라고하는데.. 음 라우터 기능을 하는건가 아직은 헷갈린다.
promise 기반이라 비동기의 콜백헬 처리에도 효과적이다
async/await 사용도 가능.

4. React 프로젝트 관련..

지금 가장 큰 문제다.
Js가 생전 처음이라 FrontEnd 수업때 배운 Js 1~ 2주일동안 적응하느라
수업따라가기가 너무 힘들었다..
그래서인지 그때 같이 만들었던 Todo 리스트에 대한 체계적인 이해가 부족했는데
서버 통신을 그때 만든 Todo 리스트로 하니 지금 수업을 들을때마다 어지럽다ㅋㅋㅋ

이건 내가 Js공부를 계속해서 혼자 해야하는데... 으어어ㅓ어 할수있다!