axios와 post, delete, patch 메서드 그리고 .env

post 메서드 사용

axios.post(url[, data[, config]])

이 형식에 맞게 post 메서드를 사용해서 클라이언트의 데이터를 서버에 전송할 수 있다.

const onSubmitHandler = async (newTodo) => {
    await axios.post("http://localhost:4000/todos", newTodo);
  };

newTodo는 inputValue로 {title : "~~"} 형식으로 된 객체이다. post 메서드를 사용해서 "http://localhost:4000/todos" 해당 url로 newTodo를 보내면 서버로 데이터가 전송된다. 이때 특이했던건, 나는 newTodo에 id 값을 적어서 보내준 적이 없지만 db.json을 확인해보면 내가 보낸 newTodo 객체에 id 값이 생겨있다. 챗쥐한테 물어보니

이 id 값은 클라이언트 측에서 새로운 todo를 생성할 때 할당하지 않고, 서버에서 생성된 값입니다.

서버에서 받아온 데이터를 생성하고 거기에 고유한 id 값을 할당해준다고 한다.

delete 메서드 사용

axios.delete(url[, config])

위와 같은 형식으로 delete 메서드를 사용해 서버의 데이터를 삭제할 수 있다.

// 삭제
  const onDeleteHandler = async (id) => {
    await axios.delete(`http://localhost:4000/todos/${id}`);
    fetchTodos(); // fetchTodos는 get으로 서버의 데이터를 읽어와서 setTodos를 사용해서 읽어온 데이터를 가지고 state를 업데이트 함 -> 컴포넌트 렌더링 됨 -> 삭제한 내용을 바로 업데이트해서 화면에 보여주기 위해 넣은 코드
  };

onDeleteHandler를 사용할 때, id 값을 받아와서 todos/id로 들어가서 삭제해주는 코드

patch 메서드 사용

axios.patch(url[, data[, config]])  // PATCH

patch는 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드.
다만 이것은 http 환경에서의 약속으로, 수정을 하고자 반드시 patch, put 을 써야만 하는 것은 아님. (BE에 의해서 POST를 통해서 “수정" 이라는 기능은 충분히 만들 수 있음) 다만 이러한 약속들을 대부분의 개발자들이 지키고 있다고 함. 기능에 맞는 메서드를 써서 restful한 api를 사용하는 것임.

// 수정
  const onClickEditButtonHandler = async (todoId, edit) => {
    await axios.patch(`http://localhost:4000/todos/${todoId}`, edit);
  };

보통은 수정 기능을 만들 때 직접 id를 입력받아 처리는 방식은 거의 없다. 하지만 아주 간단한 코드로 기능을 구현하는 것을 예시로 보여주기 위해 이렇게 함. todoId와 수정될 값인 edit을 받아와서 해당 url에 수정 데이터인 edit을 넣어서 patch 메서드를 사용하면 된다.

ENV

env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다.

0. 사용시 주의할 부분

env를 사용할 때 주의해야 할 부분이 세가지가 있다.

1. 프로젝트 root 폴더에 .env 파일을 생성한다.
2. env 파일에 생성될 변수명은 반드시 REACT_APP_으로 시작해야 한다.
3. .gitignore에 .env를 등록해야 한다.

위에 명시된 부분을 주의하며 환경변수를 관리하자.

1. 사용 방법

(0). root 폴더에 .env 파일 생성
(1). 환경변수 입력

// .env
REACT_APP_SERVER_URL = http://localhost:4000

(2). 환경변수 불러오기

// AS-IS
const onDeleteHandler = async (id) => {
    await axios.delete(`http://localhost:4000/todos/${id}`);
    fetchTodos();
  };

// TO-BE
const onDeleteHandler = async (id) => {
    await axios.delete(`${process.env.REACT_APP_SERVER_URL}/todos/${id}`);
    fetchTodos();
  };

이전과 똑같이 작동하지만, 환경변수를 사용함으로써 port 정보와 같이 민감한 정보들을 노출시키지 않고 사용할 수 있게됐다.

그 외

axios 에러 처리 정리

const url = "https://jsonplaceholder.typicode.com/todos";

// axios 요청 로직
axios
  .get(url)
  .then((response) => console.log(response.data))
	.catch((err) => {

		// 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다	
		if (err.response) {
			
	    const { status, config } = err.response;
	
			// 없는 페이지
	    if (status === 404) {
	      console.log(`${config.url} not found`);
	    }

			// 서버 오류
	    if (status === 500) {
	      console.log("Server error");
	    }
	
		// 요청이 이루어졌으나 서버에서 응답이 없었을 경우
	  } else if (err.request) {
	    console.log("Error", err.message);
		// 그 외 다른 에러
	  } else {
	    console.log("Error", err.message);
	  }
	});