axios 기초편 기본 CRUD 작성법

활용 편을 먼저 쓰고 나니 성의가 없어 보이기도 하고 기초적인 내용은 포함되어 있지 않아 간단히 예제를 통한 axios기초 편에 대해 작성을 해본다.

 

보통 CRUD라고하면 특정 객체에 대한 등록, 조회, 수정, 삭제라고 할 수 있는 아주 중요하면서도 기본적인 내용이라 볼 수 있다. 예를 들자면 "사용자"라는 객체에 대해서 CRUD를 작성해 보자

 

사용자 객체

보통 실무에서는 간단히 하더라도 대략 저런 형태의 모델을 작성을 많이 한다. 여기서 복잡하니 사용자 아이디, 사용자 명, 생년월을 정도만 가지고 예제를 만들어보자 

 

---

C(생성)

생성은 axios의 post 메소드를 이용해서 주로 생성한다. API 기반의 back-end를 구성하고 있다면 여러 명의 사용자를 조회할 경우 url은 /user정도로 작성되고 post메서드를 통해 조회할 수 있도록 설계되어 있을 꺼라 생각한다. 

let returnVal = window.axios.post('/user', {"user_id":"test@test.com", "user_nm":"홍길동", "birthday":"20200704"});

returnVal.then(function(response){
  // 조회 후 통신 상태가 200(성공)일 경우
  if(response.status == '200'){
    alert('저장에 성공하였습니다')
  }
})
};

위의 정도로 최대한 간략히 작성해볼 수 있다. post의 경우 url다음의 인자가 formData이며, 3번째 인자에 {params:{}, headers:{}} 등을 설정해서 보낼 수 있다.

---

R(조회)

조회는 axios의 get 메소드를 이용해서 주로 조회한다. 여러 명의 사용자를 조회할 경우 url은 /users 가 되거나, 한 명의 사용자 조회를 할 경우 /user/:user_id 정도로 url이 작성되고 get메서드를 통해 조회할 수 있도록 설계되어 있을 꺼라 생각한다. 

 

여러 명의 사용자 조회 검색조건은 user_id와, user_nm 정도라고 생각했을 때

let returnVal = window.axios.get('/users', { params: {"user_id":"", "user_nm":"김지"} });

returnVal.then(function(response){
  // 조회 후 통신 상태가 200(성공)일 경우
  if(response.status == '200'){
    //response.data에 있는 내용을 화면의 목록을 나타내면 됨
  }
})
};

위의 정도로 최대한 간략히 작성해볼 수 있다. user_id는 검색조건인데 비어있고, 이름이 "김지"로 시작하는 사람들에 대해 조회하고 응답을 받아 화면에 목록을 작성한다.

---

U(수정)

수정은 axios의 put메소드를 이용해서 주로 생성하며. 다른 내용은 post와 거의 같다고 생각하면 된다.

let returnVal = window.axios.put('/user', {"user_id":"test@test.com", "user_nm":"홍길동2", "birthday":"20200704"});

returnVal.then(function(response){
  // 조회 후 통신 상태가 200(성공)일 경우
  if(response.status == '200'){
    alert('수정에 성공하였습니다')
  }
})
};

위의 정도로 최대한 간략히 작성해볼 수 있다.

---

D(삭제)

삭제는 axios의 delete메소드를 이용해서 주로 생성한다. 전체 삭제를 할 경우는 좀 다르겠지만 보통 한 명의 사용자를 지운다거나 데이터를 삭제할 때 주소가 /user/:user_id  (예를 들어 /user/test@test.com, url을 delete로 호출..)처럼 되도록 많이 사용한다.

let returnVal = window.axios.delete('/user/'+'test@test.com');

returnVal.then(function(response){
  // 조회 후 통신 상태가 200(성공)일 경우
  if(response.status == '200'){
    alert('삭제에 성공하였습니다')
  }
})
};

위의 정도로 최대한 간략히 작성해볼 수 있다. 

 

 

---

기타

사실 메소드는 post, get, put, delete를 맞게 사용해도 좋고 안 해도 되는 경우도 있다. 모든 호출을 get으로 하고, back-end도 method에 구애받지 않거나 모두 get으로 설정해두고 내부적으로 삭제를 하거나, 수정을 하거나 하는 등 method와 관계없이 동작할 수 있도록 작성할 수 도 있으나, JPA나 method에 맞게 작동하도록 되어있는 환경이라면 잘 확인하고 사용하는 것이 좋다. API url을 생성하는 규칙이나, API통신 시 method의 사용법 이유 등은 시간 나면 한번 찾아본 후 axios를 사용하는 것을 권장한다.