본문 바로가기

TIL

클라이언트와 서버 연결(추가, 수정, 삭제 기능)

 원래는 보더, 리스트, 카드의 추가 + 수정 + 삭제 기능들을 구현하는데 완료하였지만 vscode와 서버, 클라이언트, 터미널을 전부 종료한 뒤 다시 start하여 확인해보니 추가 기능은 전부 완료하였지만 리스트와 카드의 수정 및 삭제 기능이 제대로 동작하지 않았다. 문제점은 전에도 말한 중간중간 넘겨주는 props들이었고, 서버에 저장되는 아이디의 형태와 받아오는 아이디의 형태가 다른 점이었다. 서버를 만들 때에 클라이언트에서 넘겨주는 아이디의 형태를 생각하지 않고 만들어서 그런지 형태가 달라 중간중간 어디서 잘못된 것인지 console.log()를 통해 알아보느라 눈 빠지는 줄 알았다.ㅎㅎㅎㅎ 다행히 전부 찾아내어 변경하였고, 기능들이 제대로 동작되는 것까지 확인하였다.

 하지만 여전히 제대로 되지 않는 부분이 있는데 카드의 삭제 기능이다. 서버도 확인하였고, 클라이언트도 확인하였고, 넘겨주는 아이디와 받아오는 아이디까지 확인하였지만 클라이언트부분에서 서버로 axios.delete를 하면 404에러가 뜨면서 통신이 되지 않았다. 그런데 이게 5번에 1번꼴로 발생하는 문제점이라서 어떻게 확인을 하고 어떻게 문제점을 찾아야할지 잘 모르겠다. 그냥 내 추측인데 async나 await를 전혀 쓰지 않아서 통신이 꼬이는 것이지 않을까.....라는 생각이 들지만 우선은 프로필의 이름과 비밀번호를 수정하는 기능, 회원탈퇴 기능에 집중해야겠다.