js로 서버통신 | json data | 시리얼라이저 | serializer |

• cors
• simplejwt
• liveserver

백엔드와 프론트를 나눠서 github의 레포에 저장하면서 백엔드와 프론트 어떤식으로 운영되는지 작동하는지 통신하는지 전혀 모르고 있는상태에서 프로젝트에서 회원정보수정을 맡게되었다. 팀장님이 항상 실력이 점점 늘만한 난이도로 구현을 맡겼었는데 오늘 js를 사용해서 json 정보가 왔다갔다 하는게 신기하고 재밌었다...

우선적으로 어떤식으로 정보가 흘러가는지 이해하는게 중요했다. liveserver가 http://127.0.0.1:5500/ 호스트서버를 열고 백엔드에서는

http://127.0.0.1:8000/ 서버를 열게된다 여기서 js에서 

const response = await fetch('http://127.0.0.1:8000/user/api/token/', {
        headers : {
            'content-type' : 'application/json',
        }

이런식으로 백엔드의 url로 연결시켜주고 post일때는 js에서 document value로 받아서 백엔드로 보내주는 방식이다.

그런데 8000의 서버에서는 해킹과 데이터 조작의 위험으로 다른 서버의 접속을 막아놨는데 이걸 풀어주는게 cors 이다.

이해, 복습, 실습을 위해 로그인을 simplejwt 로 만들고 token을 활용해서 프론트 - 백엔드 연동을 해봤다.

이런식으로 입력하고난 후

터미널에서 정보가 넘어오는 걸 확인할 수 있었다.

작업환경도 한쪽에 프론트 한쪽에 백엔드 해서 콘솔을 확인하면서 작업할 수 있었다.