카테고리 없음

[JavaScript] 네트워크 통신을 위한 fetch 함수

코딩하는둥이 2025. 2. 21. 15:10

                              요청(Request)

                             --------------------->

      클라이언트                                              서버

                            <---------------------

                              응답(Response)

 

 

요청(Requeset)

 url : 요청 서버 주소

 method : 요청 종류 (GET, POST, PUT, DELETE)

 header: 요청 메타 정보

 body: 요청 데이터

fetch('주소',{
    method : 'POST', // Get은 기본이라서 없어도 상관없다. 
    headers : {
    	'Content-Type': 'application/json'
    }, // 빈값이면 없어도 된다.
    body: JSON.stringify({
    	name:'HAPPY',
        age: 85,
        isCalid:true,
        emails: ['luck131313@naver.com']
    }) // undefined면 없어도 된다
});
 .then((res) => res.json())
  .then((data) => console.log(data))

 

 

응답 (Response)

 status: 응답 상태 코드(200, 400, 500 등)

 header: 응답 메타 정보

 body: 응답 데이터

 ok:  정상적인 처리 여부 

 

 

CRUD 

 Create: POST - 데이터 생성

 Read: GET - 데이터 조회

 Upadet: PUT(PATCH) - 데이터 수정

 Delete: DELETE - 데이터 삭제

 

 

URL구조

 https: 통신 규약(protocol)

 www.heropy.dev : 도메인(Domain)

 /p/QoWkv: 경로(Path)

 ?key=value&12&b=34: 쿼리(Query)

 #h1-title: 해시(Hash)

 

 

HTTP 상태 코드

 1xx: 처리중

 2xx: 성공

 3xx: 리다이렉트

 4xx: 클라이언트 오류

 5xx: 서버 오류

 

 200: 정상적으로 처리됨

 400: 잘못된 요청

 401: 인증 정보가 부족함

 403: 권한이 있음

 404: 찾을 수 없음

 500: 서버오류