캡틴테크의 실전 기술서

React로 웹을 만들면 필연적으로 서버와 접속하게 됩니다. 이 때 서버는 직접만든 서버일 수도 있고 외부에서 제공한 서버 일 수도 있는데요. Public게 오픈되어지는 서버라면 상관없지만, 유효한 유저의 요청일 경우만 반환하는 것이 일반적입니다. 날씨정보를 가져오더라도 유료화 모델의 경우 특정 유저는 더 많은 API를 사용할 수 있도록 권한을 부여한다던지 하는 것도 이러한 Role 기반의 비즈니스 모델이지요. 오늘 제가 소개해드릴 것은, 직접만들 서버에 요청하는 API는 반드시 유효한 인증정보를 담고 있어야 하고, 그 인증정보가 유효한지 서버에서 체크한 뒤 만약 유효한 유저라면 그에 상응하는 응답을 하는 기본적인 로직구현을 해보도록 하겠습니다. 아마도 이 부분은 리액트에서 API 부를 구현하는 분이 모..

리액트로 사이드프로젝트를 진행하기위해 리서치를 해나가면서 프론트앤드가 서버랑 통신할때 사용하는 Axios 라이브러리 외에 효과적으로 통신한 데이터를 관리하는게 네트웍비용을 줄이는 중요한 요소이며, 서버의 데이터가 변경되었을때 바로바로 프론트에서 보여주는 동적인 기능들이 중요한데요. 오늘은 그런 요구사항들을 커버해줄 수 있는 리액트의 매커니즘인 React-Query에 대해서 살펴보고자 합니다. Reference 리액트 쿼리를 도일을 위해 고민을 한 사람이 자세하게 내용 정리한 블로그 React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희 React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희 Web Fron..

프론트앤드는 하나의 클라이언트로서 서버와 통신을 통해 데이터를 받아오고 이를 시각화 하는 역할을 보통합니다. 서버는 사용서버일 수도 있고 자신이 만든 서버일 수도 있는데요. 리액트에서 어떤 API 리퀘스트 라이브러리를 사용하는지 리서치해보고 제가하려는 사이드프로젝트에서는 어떤 것을 쓰는게 적합한지 보도록 하겠습니다. AXIOS vs FETCH 검색하면 크게 2가지로 사용하는 것을 볼수 있는데 하나는 axios이고 나머지는 라이브러리라기 보단 이미 브라우저에 내장되어있는 함수를 사용하는 방법입니다. 그러다 보니 장단점이 있겠죠? 내장된 것을 사용하다보면 별도의 라이브러리 설치 없이 바로 사용할 수 있는 반면에 REST API를 사용하다보면 단순한 콜이 아닌 파라메터도 넣고, 몇번 리트라이 할 것인지도 정하..