전체 글101 24일차 (인증/인가) 인증/ 인가 1. 인증: 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 2. 인가: 특정 리소스에 접근할 수 있는 권한이 있는지를 확인하는 절차 => http 프로토콜 통신 특징 2가지 1. 무상태(Stateless): 서버는 클라이언트의 상태를 기억하지 않음 2. 비연결성(Connectionless): 서버와 클라이언트는 연결되어 있지 않음 쿠키 1. 무상태와 비연결성이라는 통신의 특징에도 불구하고 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단 2. 브라우저에 저장되는 텍스트 파일이며, key-value 형태로 저장 3. 별도로 삭제하거나 유효기간이 만료되지 않는 이상 서버와 통신할 때 자동으로 주고받게 됨 4. 서버에 특정 API를 요청할 때 서버가 응답시 he.. 2023. 9. 10. 23일차 (Throttling & debouncing & Lodash) Throttling & debouncing 1. 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 2. setTimeout 메서드를 사용해서 Throttling & debouncing을 구현 => Throttling: 이벤트는 일어나지만 함수는 한 번만 호출되는 것(오락실 광클) => debouncing: 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 헨들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(delay)가 경과한 후에 한 번만 호출하도록 하는 것 => 메모리 누수: Throttling & debouncing이 실행될 때 페이지 이동이 이루어졌음에도 불구하고 Throttling & debouncing이 실행되는 것 => Lodash: 리렌더링 .. 2023. 9. 8. 22일차 (react-query) 기존 미들웨어의 한계 1. 보일러 플레이트: 코드량이 많아짐 2. 규격화 문제: redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님 리액트 쿼리의 강점 1. 보일러 플레이드 만들다가 오류 날 가능성 x 2. 쉽고 책임에서 자유로움 3. 사용방법이 쉬움 주요 키워드 1. Query: get 요청과 유사 2. Mutation: 어떤 데이터를 변경하는것(Create, Update, Delete) 3. Query Invalidation: 최신화 시키는 것 사용방법(데이터 조회) 1. 프로젝트를 아우르는 App.jsx에서 쿼리 설정을 해줘야 함 const queryClient = new QueryClient(); const App = () => { return ( ); }; 2. API관련 파일들 다 .. 2023. 9. 8. 21일차(thunk, custom-hocks) thunk 1. 리덕스 구조에서 비동기를 다루는 미들웨어 => 미들웨어: dispatch -> state 반환 전에 하고 싶은 작업을 넣을 수 있도록 해주는 것 Ex) count에서 더하기 버튼을 눌렀을 때 3초 기다리고 +1 구현 2. 사용이유: 서버와의 통신을 위해 사용 3. 액션 객체가 아닌 함수를 디스패치 할 수 있게 해줌 4. 액션이 리듀서로 전달되기 전 중간에 어떤 작업을 더할 수 있음 사용방법 // redux / modules / counterSlice.js import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; // 2개의 인풋(이름, 함수) // 여기서 만든 함수를 component의 dispatch(addNumber) 대신 .. 2023. 9. 6. 이전 1 ··· 14 15 16 17 18 19 20 ··· 26 다음 728x90