코딩/React42 axios request, response # request Axios를 사용하여 HTTP 요청을 보내고 원하는 데이터를 서버에 전달하는 방법은 다음과 같다. 1. axios.post() 메소드를 사용하여 HTTP POST 요청을 보낸다. 이때, 첫 번째 매개변수로 요청을 보낼 URL을 전달하고, 두 번째 매개변수로는 보낼 데이터를 전달한다. axios.post('/api/data', { key1: 'value1', key2: 'value2' }) 2. HTTP POST 요청의 본문에 포함될 데이터는 두 번째 매개변수로 전달한다. 데이터는 객체 형태로 전달하며, 객체의 프로퍼티 이름이 데이터의 키(key)가 되고, 프로퍼티 값이 데이터의 값(value)이 된다. 3. 만약, 데이터를 JSON 형식으로 보내고 싶다면, Content-Type 헤더를.. 2023. 5. 8. 인증/인가(쿠키, 세션, 토큰, JWT) # 인증&인가 (1) 인증(Authentication) vs. 인가(Authorization) 인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다. 인가(Authorization)이란 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다. Quiz: 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청을 할 때, 서버는 클라이언트에게 인증을 해줄까? 아니면 인가를 해줄까? (A. 인가) (2) http 프로토콜 통신의 특징 2가지 1. 무상태 (Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다. 상태값은 매 요청마다 클라이언트가 가지고 오기.. 2023. 5. 1. throttling & debouncing # Throttling & Debouncing이란? 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법인 쓰로틀링과 디바운싱에 대해 알아보자. Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용하는 것이 목표이다. # Throttling 이란? 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 주로 사용되는 예: 무한스크롤 # Debouncing 이란? 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도.. 2023. 5. 1. React Query # React Query란? (1) 개념 react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. (2) 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다. 하지만 다음과 같은 문제가 있다. 보일러 플레이트 : 코드량이 너무 많음. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님(규격화 문제) (3) 리액트 쿼리의 강점 : 쉽고, 책임에서 자유롭다. 보일러 플레이트 만들다가 오류날 일이 없음 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아님 사용방법이 기존 thunk 대비.. 2023. 4. 29. 이전 1 2 3 4 ··· 11 다음
