오늘은 간이로 만든 디자인에서 로그인 연결을 한번 해 보았다
이전 협업 프로젝트를 할 땐 백엔드를 EC2로 열고 서버 도메인을 변경하여 진행했는데 이번엔 둘 다 로컬로 열고 연결 시도 해봤다.
결과는 꽝
확실히 cs적인 측면에서 볼 때도 같은 와이파이나 인터넷 대역을 쓰고 있는 것도 아닌 완전히 다른 지역 다른 공간에서 다른 디바이스의 로컬 서버와 접속하는 건 보안상의 문제 포함 복잡함이 많은 것 같아 그만뒀다.
그럼 로컬로 열고 있는 서버를 어떻게 진행하면 좋을까? 생각하다 EC2로 열고 gti action을 통한 자동 배포를 연결하던가
서로 깃 주소를 공유받아 자체 로컬로 두가지를 열어서 검사하는 수 밖에 없다고 생각한다.
이후에 정식으로 배포를 시도할 때 프론트 쪽도 클라우드 프론트로 배포를 시작하고 자동 배포를 만들고 나면 제대로 연결되지 않을까 싶다.
그럼 바닐라JS를 사용할 땐 Ajax콜을 이용했는데 React에선 어떻게 사용할까??
나는 fetch와 axios 두가지를 한번 사용해 봤다.
fetch와 axios의 차이점
https://kofearticle.substack.com/p/korean-fe-article-axios-vs-fetch
-
fetch 요청은 필요한 JSON 데이터의 포맷을 얻기 위해 일반적으로 두 개의 .then() 호출을 갖는 반면, Axios 는 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있습니다.
-
fetch로 post 요청을 할 경우에는
JSON.stringify()를 사용하여 객체를 문자열로 변환한 뒤 본문에 할당해야하는 반면, Axios는 자동으로 데이터를 문자열로 변환해줍니다. -
fetch는 HTTP 에러 응답을 받았다고 해서 프로미스를 거부하지 않고 네트워크 장애가 발생한 경우에만 거부하는 반면, Axios는 상태코드가 2xx의 범위를 넘어가면 거부합니다.
-
두 클라이언트 모두 비동기이기 때문에 크게 중요하지 않을 수 있지만 fetch 가 Axios 보다 살짝 더 빠릅니다.
axios는 따로 설치하고 import도 해줘야 하지만...
개인적으론 쓸 수 있는 능력도 많고 간단하며 사용법이 쉬운 axios가 훨씬 좋았던 것 같다.
특히 응답을 받을 때 자동으로 json을 적용해서reponse 객체를 바로 반환하는 것에서 코드 작성도 줄어들고 훨씬 괜찮았다.
더구나 요청을 중도 Cancel 할 수 있고 응답시간 설정또한 있으며
400,500 대의 Error 발생시 reject로 reponse를 전달해 catch로 잡아낼 수 있다!(좋음)
- 둘 다 사용하는데 무리 없고 동작도 잘 하나 axios의 경우 빠른 업데이트는 아니기 때문에 react가 아닌 react native같은 환경에서는 사용하기 힘들다고 한다.
- 장점은 axios가 더 많은 것 같다. 다만 fetch보단 무거움
- 요청 취소를 위해선 axios같은 라이브러리 사용이 필요!
간단한 http 요청은 fetch를 써도 되지만 axios와 비교하자면 단점이 더욱 부각됨으로 많은 기능이 필요할 땐 axios가 더 나을 것 같다.
결론
이번 프로젝트는 axios를 통한 통신을 해볼 생각이다!
