2-6. GET, POST + 2-7. 데이터흐름

강연주·2024년 10월 12일

GET POST 데이터

🙋‍♀️ 기술면접

목록 보기

20/112

13. GET, POST 방식의 차이점

GET: 데이터는 URL에 포함되어 전송되고, URL을 통해 전송되므로 보안에 취약합니다.

POST: 데이터는 HTTP 요청의 본문(body)에 포함되어 전송되고, 데이터가 본문에 포함되어 전송되므로, URL에 노출되지 않습니다.

14. GET, POST의 개념 및 데이터 흐름 설명

GET: 주로 데이터를 조회하고, 요청 파라미터를 URL에 포함시켜 전송합니다. 사용자가 브라우저에서 URL을 입력하거나, 링크를 클릭하면 GET 요청이 생성됩니다.

POST: 클라이언트에서 서버로 데이터를 전송할 때 사용되는 HTTP 메서드입니다. HTML 폼의 Submit 버튼을 누르거나, JavaScript를 사용하여 POST 요청을 생성합니다.

🎨 GET, POST 설명 및 비교

GET과 POST는 HTTP 요청 메서드의 두 가지 주요 유형으로,
웹 애플리케이션에서 서버와 클라이언트 간의 데이터를 주고받는 방식. 이 두 가지는 특정한 상황에서 사용 목적이 다르다.

1. GET 요청

목적: 주로 서버에서 데이터를 가져오는데 사용.
특징:
- URL에 요청 데이터를 쿼리 문자열로 포함시킨다.
  예를 들어, https://example.com/search?q=javascript에서 q=javascript가 쿼리 데이터다.
- 요청에 포함되는 데이터가 URL에 노출되어 보안에 취약.
- 브라우저 캐싱을 허용. 즉, 동일 요청을 여러 번 보내면 브라우저는 이전에 받은 데이터를 저장하고 이를 다시 사용하는 것이 가능.
- 요청 크기 제한. (대부분 브라우저에서 URL 길이 제한적)
예시 (GET 요청)

🖥️ fetch('https://api.example.com/data?param1=value1')
  .then(response => response.json())
  .then(data => console.log(data));

2. POST 요청

목적: 서버에 데이터를 제출하거나,
서버에 영향을 미치는 작업을 요청할 때 사용.
특징:
- 데이터가 URL에 포함되지 않고,
  요청 본문(body)에 포함된다.
- 주로 폼 데이터를 서버로 보낼 때 사용.
- 보안상 조금 더 안전한 방식.
  특히 중요한 데이터(예: 비밀번호) 전송 시 주요.
- 보통 서버의 상태를 변경하므로 캐싱되지 않음.
- 요청 크기에는 제한이 거의 없으므로,
  파일 업로드와 같은 큰 데이터를 보내기 가능.
- 서버 상태를 변경하는 작업 (예: DB에 정보 저장, 업데이트 등)을 처리하는 용도.
예시 (POST 요청):

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ param1: 'value1', param2: 'value2' })
})
.then(response => response.json())
.then(data => console.log(data));

➡️ GET: 데이터를 "가져오는" 요청. URL에 요청 데이터를 포함.
➡️ POST: 데이터를 "보내는" 요청. 본문에 데이터를 포함.

🎨 GET, POST 데이터 흐름

1. GET 메서드에서의 데이터 흐름

1. 클라이언트에서 서버로 요청

클라이언트(브라우저)가 URL을 통해 서버에 요청을 전송.
이때 데이터는 URL의 쿼리 파라미터로 포함됩니다.
예: https://example.com/search?q=javascript
(q=javascript가 데이터)
클라이언트는 요청 헤더를 포함한 HTTP GET 요청을
서버로 전송.
- 헤더: 요청에 포함된 부가 정보
  (예: 브라우저 유형, 인증 토큰 등).
- 쿼리 문자열: 데이터를 URL의 끝부분에 추가하여 서버에 전달.

2. 서버에서 요청을 처리

서버는 요청을 받으면 URL의 쿼리 문자열을 확인하고
요청에 대한 처리를 수행. 예를 들어, 데이터베이스에서 클라이언트가 요청한 데이터를 조회 가능.
서버는 요청한 데이터 또는 처리가 완료된 결과를
응답으로 준비.

3. 서버에서 클라이언트로 응답

서버는 준비된 데이터를 HTTP 응답으로 클라이언트에 전송한다. 이 응답에는 상태 코드(예: 200 OK), 응답 헤더, 그리고 요청된 데이터(JSON, HTML 등)가 포함됩니다.
클라이언트(브라우저)는 서버에서 받은 데이터를 처리하고, 화면에 표시하거나 다른 용도로 사용.

2. POST 메서드에서의 데이터 흐름

1. 클라이언트에서 서버로 요청

클라이언트(브라우저)는 서버에 데이터를 전송하기 위해
HTTP POST 요청을 보낸다.
데이터는 URL이 아닌 요청 본문(body)에 포함.
(예: 사용자가 로그인할 때 아이디와 비밀번호를 전송하거나,
폼 데이터를 제출할 때.)
클라이언트는 요청 본문에 포함된 데이터를 서버로 전송,
이 데이터는 JSON, XML, 폼 데이터 등 다양한 형식일 수 있다.

헤더: 요청 본문이 어떤 형식인지(Content-Type: application/json 등) 명시.
본문: 실제 데이터(예: { "username": "user", "password": "pass" }).

2. 서버에서 요청을 처리

서버는 POST 요청의 본문을 읽고 데이터를 처리.
데이터베이스에 저장하거나, 서버의 상태를 변경하거나,
다른 처리 작업을 수행할 수 있다.
처리 결과에 따라 서버는 클라이언트에 응답을 준비한다.

3. 서버에서 클라이언트로 응답

서버는 처리 결과에 따라 HTTP 응답을 클라이언트로 전송. 응답에는 상태 코드, 응답 본문(예: 성공 메시지, 오류 메시지 등), 그리고 필요한 경우 데이터가 포함된다.

클라이언트(브라우저)는 응답 데이터를 받아서,
페이지를 리로드하거나 다른 후속 작업을 수행.