fetch 에 대해서!!

fetch 는 프론트엔드에서 백엔드로 정보를 보낼 때 사용한다.

js파일에서 api를 활용하여 백엔드로 무언가를 요청할 때에 사용하는 방법을 배웠다.

여기서 조심할 점이 몇가지 있다.

 

 

1. fetch로 백엔드에 요청을 보낼 때에
method: "POST", ( default는 GET 메써드이다)
headers: {},
body: {},

URL과 더불어 이 세 가지를 덧붙여야 한다.

2. headers에는 이 요청의 세부 사항을 명시하며, body에는 실질적인 컨텐츠가 포함된다.

3. 따로 명시하지 않을 시에 모든 body의 컨텐츠는 Text File로서 전송되고 받아 인식된다.

4. 특히 body: { ... }, 이런 식으로 자바스크립트 오브젝트를 넘겨줄 시 외부에서 이 오브젝트는 [object Object]라는 의미 없는 문자열로 변환된다.(object를 toString()해보면 알 수 있음)

5. 오브젝트와 그 안의 세부 변수 목록들을 넘겨주고 싶을 시, JSON이라는 규약에 의거한 오브젝트 내의 모든 기록을 텍스트화하여 넘겨주어야 하는데, 이때 JSON.stringify({ ... }) 라는 편리한 자체 표준 함수를 사용하면 된다.

6. 덧붙여 headers 안에 "Content-Type": "application/json"이라는 명시를 해 주어 전송된 텍스트가 JSON파일임을 백엔드에 인식시켜 준다. ( 이 부분은 설정 안해줘도 상관없긴한데 명확히 제시해주는 것이 좋아보인다!)

7. 백엔드에 (이를테면 express를 사용 중이라면) app.use(express.json()); 미들웨어를 추가해주어 자체 내에서 JSON.parse("..."); JSON파일을 다시 자바스크립트 오브젝트로 변환해주는 표준 함수로 요청 body 내의 컨텐츠를 디코딩하는 작업을 한다.

 

추가적으로 await 을 통해서 백엔드와 통신하고 돌아올 때 까지 기다려 주어야된다. 지금은 그렇게 작성하지 않아도 작동은 되지만 만약 추가적인 작업이 있을 경우에는 부하가 걸리거나 한다면 오류가 충분히 생길 수 있기 때문이다.

 

또한 반대로 백엔드에서 다시 fetch로 정보를 넘겨주고 싶을때 ex) res.status(201).json({newCommentId: comment._id})

이렇게 해준다면 fetch에서 정보를 받아 와서 ex) json = await response.json() 을 해준다면 사용할 수 있다~!