카카오 로그인 API 구현하기 : 서버와 클라가 요청하고 응답 받는 원리 (with. fetch와 then은 한 팀)

클라이언트와 서버

 

클라이언트:

요청을 보내는 쪽

• 웹 브라우저
• 모바일 앱

 

서버:

요청을 받는 쪽

요청을 받아 처리하고 응답을 보냄

 

 

---

 

app.get

 

사용법

app.get('경로', (req, res) => { } );



사용 예시
app.get('/hello', (req, res) => {
  res.send('Hello World!');
});


· · · 
리액트에서 

fetch('/hello')
  .then((response) => response.text()) // 텍스트로 변환
  .then((data) => {
    console.log(data); // 'Hello World!' 출력
  });

 

	경로	req	res
정의	클라이언트(브라우저)가 요청할 URL	요청 request 객체 클라이언트가 보낸 정보를 담음	응답 response 객체 서버가 클라이언트에게 보낼 데이터를 처리할 때 사용
작동 원리	1. 클라이언트가 요청을 보냄 2. 서버가 요청을 받음 3. res가 응답 준비 4. 클라이언트가 응답을 받음
사용 예시		- 요청 url - 요청 파라미터 - 헤더 - 본문 데이터	- html 페이지 렌더링 - json 데이터 반환 - 상태 코드 설정

 

 

 

작동 원리

 

1. 클라이언트가 요청을 보냄

• 사용자가 웹 브라우저에서 http://localhost:3000/hello 를 입력함.
• GET 요청을 보냄
  • get 요청: (서버에게) 📢 나 이 경로(/hello)에 대한 정보를 원해!

 

2. 서버가 요청을 받음

• /hello에 등록된 핸들러 함수  (req, res) => { res.send('Hello World!'); } 를 실행

3. 핸들러 함수가 응답 준비

• 3번에서  res.send('Hello World!');  가 실행
• 이 회색 코드는 서버가 클라이언트(브라우저)에게  'Hello World!' 라는 메세지를 응답으로 보냄

4. 클라이언트가 응답을 받음

• 클라이언트(브라우저)는 서버가 보낸  'Hello World!'  메세지를 화면에 표시하거나, 다른 작업에 사용함
• 그 말은 응답 메세지를 꼭 화면에 띄우는 용도로만 사용하는 것이 아님!

 

 

 

역할 정리

클라이언트:

📢  나는 /hello 경로의 정보를 원해!

• 요청

 

서버:

🦻 어 그래? 준비된 답변을 준비해서 보내줄게

• 답변을 준비
•  'Hello World!'  라는 말을 준비

클라이언트:

서버한테서 답변을 받는다

• 화면에 띄운다
• 저장한다
  • 변수에 저장
  • 파일에 저장
  • db에 저장

서버 답변 데이터는 항상 같은 Type이 아니다.

그래서 메서드를 이용해서 변환을 해야 데이터를 사용할 수 있다.

 

 

 

 

 

---

 

 

 

받은 서버 답변 활용하기

1. 브라우저의 js코드를 통해 서버 답변을 저장

// 1. 서버에 요청 보내기 (GET 요청)
    fetch('http://localhost:3000/hello')
      .then((response) => response.text()) // 응답을 텍스트로 변환 (fetch(url)에서 받은 대답이 response
      .then((data) => {

        // 2. 데이터를 변수에 저장
        const serverResponse = data; 
        console.log('서버 응답:', serverResponse); // 'Hello World!' 출력
      })

      .catch((error) => {
        console.error('요청 중 에러 발생:', error);
      });

  
  
  
  ---
  
server.js
  
    app.get('/hello', (req, res) => {
      res.send('Hello World!'); 
      
      // send()함수는 괄호 안의 데이터를 담아 보내는 역할
      // 괄호 안이 문자열일 때는 서버가 텍스트 data를 보낸다고 자동으로 해석함
      
      
      /*예시*/
      res.send(123); // send()로 숫자 데이터를 보냄
      res.json({key: 'value'}); // json 형식 데이터를 보냄
    });

 

 

fetch:

• 클라이언트(브라우저)에서 서버로 📢 요청을 보냄
• 여기서 서버 경로는 http://localhost:3000/hello

응답 데이터 처리:

• 서버는 요청을 받고 답변을 준비
  •  'Hello World!'  라는 말을 준비
• 답변을 보냄 (= 응답)

 

응답 받고 저장하기:

• 클라이언트가 서버에게서 답변을 response라는 이름으로 받음
  • 이때 response는 답변 객체다(= 응답 객체)
• response라는 이름으로 받은 답변 객체를 

 

 

 

 

---

 

 

 

fetch와 then 정리

	fetch	then
정의	·  서버에 요청을 보내는 함수 ·  Promise를 반환함 "응답이 준비되면 알려줄게!"라는 약속을 한다.	· 응답받았을 때 실행되는 콜백함수 ·  Promise가 성공적으로 완료되면 실행됨 ·  비동기 작업이 성공적으로 완료되었을 때 실행되는 함수 (콜백) ·  어떤 비동기 작업이 끝난 뒤 실행되는 로직을 정의해놓은 것? * Promise: - 미래에 값을 받을 수 있는 약속
역할	Promise라는 답변 약속을 반환함 이 Promise가 성공하면 then이 실행됨  →	- Promise가 성공했을 때 실행되는 콜백함수를  ( )  안에 등록함 →  fetch가 Promise를 반환하고 답변이 성공적으로 왔을 때, then() 안의 콜백함수가 실행됨 - 이전 단계의 결과를 전달받아 처리하는 역할이기도 함
둘의 관계	1. fetch() 함수가 서버로 요청을 보냄 답변을 받으면 2. then() 안의 콜백함수가 실행되어 그 답변을 처리함 * 비동기 작업이 성공적으로 완료가 되었을 경우에만 해당함
response	-	- 서버에서 보낸 답변 객체 - 응답 데이터는 바로 사용할 수 없고, 필요한 형식으로 변환해야 함 때문에 답변 객체 안에 있는 data를 text, json, blob등으로 변환해서 사용할 수 있음
순서	1. fetch('/hello') 📢 Hello 데이터를 줘! 2. 서버 잠깐 기다려요! 준비되면 알려줄게요!  Promise 반환 * 서버는 데이터를 바로 주는 것이 아님 3. 서버 여기 데이터 있어요!	약속이 지켜짐 4. then 괄호 안 콜백함수 실행
.then((response) => response.text())	-	then 괄호 안 콜백함수가 실행됨 서버에서 보낸 답변 객체를 매개변수로 넣어서 text()를 이용해 변환하여 텍스트로 변환
.then((data) => { console.log(data); });	-	앞서 실행한 then에서 결과 값이 나오면 그 결과값을 두 번째 then에 넘겨주는데 => *그 약속이 지켜졌기 때문에 두 번째 then이 실행되는 것임 * 그 약속:  (response) => response.text()  는 비동기 작업이기 때문에 Promise를 반환한다 여기서 텍스트 형식으로 변환해달라는 약속이 지켜졌기 때문에 다음 then이 실행되는 것!
특이점	-	- then 자체는 Promise를 날리지 않음 - Promise가 실행되기를 기다리는 존재
정리	fetch는 - 서버에 요청을 하고 - Promise를 반환한다	then은 Promise가 실행되면 자기 괄호 안에 있는 함수를 실행한다 이를 콜백함수라고 말한다
fetch 뿐만 아니라, 비동기 작업은 Promise를 반환한다. fetch와 then은 한 팀이다! 요청과 응답을 처리하는

 

 

 

 

2. 서버 응답을 화면에 띄우기

React에서...


fetch('http://localhost:3000/example')
      .then((response) => response.text()) // 서버 응답을 텍스트로 변환
      .then((data) => {
       // 하고 싶은 작업을 이 콜백함수 안에 기재
       
        document.getElementById('끼룩끼룩_변수명').innerText = data;
      })
      .catch((error) => {
        console.error('요청 중 에러 발생:', error);
      });

 

 

 

 

호호 이전 글을 더 먼저 작성 시작했는데 이게 더 먼저 정리가 되었다!

이걸 먼저 정리하고 싶기도 했고 후후

 

이제 fetch와 then에 대해서 좀 더 명확하게 알 것 같다.
await에 대해서는 글이 가독성이 안 좋을 것 같아 다음 글에서 정리해보면 좋을 것 같다.😄