HTTP 메서드 사용하기

서버에 있는 리소스를 사용하기 위해 , 어떤 동작을 원하는 지 요청해야한다.

우리는 HTTP 메서드를 사용하여 서버에게 원하는 바를 요청하게 된다.

 

 

💡 HTTP 메서드가 어떤건가요?

→  HTTP 메서드는 클라이언트와 서버 사이에 이뤄지는 요청과 응답 데이터를 전송하는 방식 입니다. 

     총 9가지의 메서드가 있으나, 자주 사용하는 메서드는 POST, GET, PUT, PATCH, DELETE 입니다.

• GET : 리소스 조회
• POST:  요청 데이터 처리, 리소스 추가(등록)
• PUT : 리소스 대체 , 해당 리소스가 없으면 생성
• PATCH : 리소스 부분 변경
• DELETE : 리소스 삭제

 

 

1) GET 사용하기

데이터를 조회하는 과정에서 사용합니다.
url에 쿼리스트링을 이용하여 원하는 데이터를 조회할 수 있으며, 헤더에 데이터를 추가해서 전송할 수 있습니다.

 

// 정적 데이터 조회 (쿼리 X)
// 쿼리를 사용하지 않은 GET/members/100 형태로 정적 데이터 조회가 가능하다.
// GET 요청을 보낸 후, 서버에게 200코드와 함께 요청에 맞는 응답이 오면 사용할 수 있다.

		axios
			.get(`/members/${memberId}`, {
				headers: {
					'Content-Type': 'application/json',
				},
			})
			.then((res) => {
				return res.data;
			})
			.then((data) => {
				setUserDisplayName(data.displayName);
				// console.log(userDisplayName);
			});

 

// 동적 데이터 조회
// 해당 형식과 같이 파라미터를 사용하여 ?q=today 와 같이 해당 부분을 필터하여 동적으로
// 데이터를 취합하여 정보를 제공하는 방식
   
https://www.google.com/search?q=%EC%8A%A4%ED%81%AC%EB%A1%A4+%EC%8B%9C+fixed

 

 

 

 

2) POST 사용하기

데이터를 전달, 등록 하기 위해 사용합니다.
바디에 데이터를 넣어 서버로 전달하여 서버가 데이터를 새로 등록하거나, 다른 처리를 할 수 있도록 합니다.

 

axios
			// 데이터가 JSON 이라는 것을 헤더로 알려준다.
			.post(`/questions/${memberId}`, JSON.stringify(submitData), {
				headers: {
					'Content-Type': `application/json`,
				},
			})
			.then(() => setResultText('제출 완료되었습니다.'))
			.then(() => {
				setIsResultOpen(true);
				setTimeout(() => {
					setIsResultOpen(false);
					navigate('/');
				}, 1000);
			})
			.catch(() => {
				setResultText('제출에 실패했습니다. 잠시 후 다시 시도해주세요.');
				setIsResultOpen(true);
				setTimeout(() => {
					setIsResultOpen(false);
					setIsOpen(false);
				}, 1000);
			});

 

→  데이터는 JSON, HTML-form, 파일 형태로만 전달 가능합니다. 

 

 

 

 

3) PUT 사용하기

저장된 데이터를 수정하기 위해 사용합니다.

해당 url에 데이터가 있다면, 덮어씌워 지금 요청한 데이터로 바꿉니다.

해당 url에 데이터가 없다면 새로 생성합니다.

→  데이터를 덮어씌우기 때문에 정확한 url 값이 중요합니다. 구체적인 경로를 지정해야합니다.

 

axios
			// 정확한 경로 지정이 중요합니다.
			.put(`/answers/${targetId}`, JSON.stringify(newAnswer), {
				headers: {
					'Content-Type': `application/json`,
				},
			})
			.then((res) => console.log(res.data));

 

 

 

 

4) PATCH 사용하기

저장된 데이터를 수정하기 위해 사용합니다.
데이터를 덮어씌우는 것이 아닌 해당 리소스의 일부분 만을 변경합니다.

→  전체 데이터가 아닌 일부분만 변경하고 싶다면, PUT이 아닌 PATCH로 변경해야합니다. 

 

axios
			// 해당 member_id 를 갖은 유저의 displayName, title, aboutMe 만 변경한다.
			.patch(`/members/${member_id}`, {
				displayName: data.displayName,
				title: data.title,
				aboutMe,
			})
			.then((response) => {
				setUserData(response.data);
				navigate(`/myprofile/${member_id}`);
			})
			.catch((error) => {
				console.error(error);
				navigate(`/`);
			});

 

 

 

 

5) DELETE 사용하기

데이터를 삭제 하기 위해 사용합니다.
요청한 url의 정보를 삭제합니다.

 

const deleteData = async () => {
		try {
			await axios.delete(`/members/${member_id}`); // 해당 id에 해당하는 문서 삭제
			alert('문서가 삭제되었습니다.');
			navigate(`/`);
		} catch (error) {
			console.error();
		}
	};

 

 

💡 HTTP 메서드를 사용하면 항상 데이터를 이용할 수 있나요?

→  올바르게 작성했고, 서버가 올바르게 설정되어있다면 이용할 수 있습니다.

     하지만, 다양한 에러들이 발생할 수 있습니다.

     상태코드를 확인할 수 있다면, 어떤 에러인지 혹은 정상적으로 작동중인지 파악할 수 있습니다.
    https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드 - HTTP | MDN