서론
css는 따로 건들지 않고 오로지 CRUD와 데이터 통신을 위한 것만을 프로젝트로 만들어볼 것이다.
React와 SrpingBoot(Apache Tomcat)서버를 이용할 것이며, 통신간 React에서 쓰면 좋을 것 같은 것들을 주로 다뤄볼 것이다
(Spring Boot는 뒷전, 기본만 짤거임)
요구사항
기능적인 부분
추가, 단건/다건조회, 수정, 삭제
input, 검색버튼, 조회된 리스트(각각의 수정과 삭제버튼),
수정을 눌렀을 때 모달창(id값을 통해서 단 건 조회),
삭제 눌렀을 때 windo.confirm → 삭제
React
atoms
recoil이라고 하며, 어떠한 데이터들을 전역에서 관리하기 위해 사용하는 것이다.
useState로 관리할 수 있다.
import { atom } from "recoil";
export const todolistAtom = atom({
key: "todolistState",
default: {
todolist: [],
counts: {
all: 0,
today: 0,
important: 0,
busy: 0,
complete: 0,
},
}
});형태는 key와 기본값 default가 무조건 들어가고 아직까지는 key 어떤역할을 하는지 잘 모르겠다.
default에서 선언되는 곳이 useState(이자리다)
apis & axios
api
서버통신간에 반복될만한 서버통신 메소드들을 정리해서 전역에서 만들어두고 사용하는 서버통신전용 메소드들 집합체를 api 또는 instance라고 부름
axios
원래라면 fetch를 사용하여 백엔드와 통신을 하였으나, 가독성이 떨어지던 구문들을 확 줄이고, 좀 더 쉽게 접근을 하기 위한 라이브러리
백엔드 서버와 통신하려면 fetch라는 형식의 메소드로 통신을 해주어야한다
headers표기도 해줘야하고, body에 데이터를 담아 보낸다
const handleSubmit = () => {
fetch("http://localhost:8080/basic/student",{
method: "post",
headers: {
"Content-Type" : "application/json"
},
body: JSON.stringify(student)
}).then(response =>{
response.json().then(responseData => {
console.log(responseData);
})
})
}이렇게 보내면 가독성방면에서 확실히 떨어지기 때문에 이를 좀 더 쉽게 표현한 라이브러리가 axios 다
데이터통신 메소드의 경우엔 프로미스형태라서 async와 then 구문사용이 가능하다.
import axios from "axios";
// 기본api 만들어주기
export const instance = axios.create({
baseURL:"http://localhost:8080/api/v1",
withCredentials:true
})
// 사용될 api 만들어주기
export async function changeCheckTodoStatus(todoId) {
let response = null;
try {
response = await instance.put(`/todo/${todoId}/status`);
} catch (e) {
console.error(e);
response = e.response;
}
return response;
}
export async function changeEdit(todoId,data) {
let response = null;
try {
response = await instance.put(`/todo/${todoId}/status`,data);
} catch (e) {
console.error(e);
response = e.response;
}
return response;
}대표적으로 사용 될 기본 instance(api)를 만들어주고 그것을 이용한
api들을 만들어주면 된다
hooks
상태변수가 하나라도 들어간것을 함수로 정의한것을 hook함수라 부른다
Promiss
비동기객체들을 동기적인 관리가 필요할 때 쓰는 문법
함수,메소드에 aysnc라는 구문을 붙이면 해당함수는 프로미스구문이된다
그렇게되면 await를 사용할 수 있게 되는데.....
SrpingBoot
annotation
@RequestParam
요청 HTTP → Request (header,body) → header정보(메소드,URL,서버IP,Port) /body(데이터값)
형식으로가는데 이 때 header에는 params라는 key를 담고있음 여기에 데이터를 value로 같이 보내주는 것이다
값 보내는 방식은 URL로 보낼 수 있다
http://localhost:8080/api/v1/?username=교르&age=27
@PathVariable과 다른점은 물음표 하나이다
사용용도는 @PathVariable과 유사하지만 값을 객체로 묶어서 보낼 수 있다는 장점이 있지만 잘 사용하지않는다.
-> @RequestBody가 있고, @PathVariable이 있기 때문에...
@PathVariable
url을 통해서 변수를 받을 때 사용하며, 주로 하나의 변수를 받을 때 사용된다
url : http://localhost:8080/api/v1/3
@GetMapping("/{num}")
public int get(@PathVariable int num){
return num;
}
>>> 3@RequestBody
웹 데이터를 주고 받을 때 주로 JSON형식으로 주고 받는다
{
name : "교르",
age : 28
}해당 key 값을 인식해서 Dto에 변수를 찾아서 value를 담는 것을 도와주는 게
@RequestBody다
RestApi 규칙에 맞게 Controller 구성하기
Get
@CrossOrigin
@Slf4j
@RequestMapping("/api/v1/user")
@RestController
public class ApiController {
@Autowired
private Service service;
// 전체조회
@GetMapping
public ResponseEntity<?> getUser(){
log.info("{}", dto);
List<ResponseDto> userList = service.getUser();
return ResponseEntity.ok().body(userList);
}
// 단건조회 => 단건으로 조회할 매개가 필요함
@GetMapping("/{userId}")
public ResponseEntity<?> getUser(@PathVariable int userId){
log.info("{}", userId);
ResponseDto findUser = service.getUser(userId);
return ResponseEntity.ok().body(findUser);
}+
오버로딩을 통해서 같은 메소드명으로 다형성을 반영
@RequestMapping을 이용하여 매핑 주소를 최대한 직관성 있게 사용
Delete
@PathVariable로 id던져주기
Post
JSON객체형식으로 던져주기
Put
객체로 던져주어도 id값 생각해주기
소제목
coral
