TIL :: fetch 연 결

서버코드를 만들고나면 브라우저랑 연결을 해야하는 과정이 남았다.

현재 내가 알고 있는 방식으로는 2가지 방식이 있는데 첫번째 , ejs 를 이용해서 render처리,  두번째, fetch를 이용해 연결

 

익숙한것은 fetch로 날리는것이기에 했던 방법을 소개할까 글을 남긴다.

 

첫 째.

수정을 예시로 들자면 나는 우선 수정버튼을 생성하기 위해서 수정버튼 생성을 정의하는 함수를 먼저 작성했다.

function createEditButton() {

  const editButton = document.createElement('button');

  editButton.classList.add('edit-comment-button');

  editButton.textContent = '수정';

  return editButton;

}

그리고 나서 본격적인 fetch를 해야하는데, 그 전에 저번에는 먼저 코드 상단부분에 생성자를 만들어 호출을 했었는데, 

아직 잘 정리가 안된 상태라 그런지 저번과는 다른 방식인거 같기도하고 같은 맥락인것 같기도 하다.

현재 작성하고 있는 파일에서는 다른 팀원분들이랑 함께 2명이서 사용하고 있기에 코드가 엄청 길어서 기분탓일지도 모른다. 아무튼 다음단계로 fetch를 하는 부분쪽으로 넘어가면,

try {

    const updateCommentResponse = await fetch(`/api/cards/${cardId}/comments/${id}`, {

      method: 'PUT',

      headers: {

        'Content-Type': 'application/json',

      },

      body: JSON.stringify({ commentText }),

    });

    const updateCommentData = await updateCommentResponse.json();

    if (updateCommentData.errorMessage) {

      alert(updateCommentData.errorMessage);

    } else {

      alert('댓글이 성공적으로 수정되었습니다.');

      commentTextElement.textContent = commentText;

    }

  } catch (err) {

    console.log(err);

    return alert('댓글 수정에 실패하였습니다.');

  }

이렇게 작성할수 있는데, 변수를 하나 선언하고 fetch 안에 api를 쏘는 url주소를 적으면 된다.

# 가급적 작성시 복수형태로 적어주는것이 좋다 !

그리고나서 어떤 메서드를 사용하지 적으면 되는데 , 위에 예시로는 수정을 할것이기 때문에, 대문자로 PUT 이라고 

작성했다. 그다음 헤더쪽에는  위에 방식처럼 작성을 하였다. 그리고 body에는 JSON으로 반환 할것이기에 저렇게 작성을 했다. 그 밑쪽은 에러상황들을 작성을 하면 된다.

 

URL쪽 주소에 각자 고유한 아이디가 있다면 그 경로에 ex))  /:cardId 이런식으로 적을것이 아니라, 처음 경로를 감쌀때

빽틱 즉, ` ` 이걸 먼저 사용하고 그 뒤에 $를 만든뒤 중괄호 { }로 ID를 감싸면 된다.

 

오늘은 이렇게 서버에 있는 코드를 fetch를 통해 브라우저와 연결을 하는것에 대해 공부하고, 이해한대로 글을 남겨보았다.

이 방법들이 익숙해지면 ejs도 연습을 해봐야지! 라고 생각을 했는데, 다른분의 말씀을 들어보니 ejs는 로그인? 회원가입? 을 할때 좋은점이 있고 그 외엔 저렇게 fetch로 하는게 더 나은것 같다. 라고 말씀을 하셔서 ejs를 사용하진 않을껏 같고,

좀더 경험이 쌓이고 익숙해지면 react 로 한번 작업을 시작해봐야겠다. 라는 행복한 생각을 했다.