전체 글 (120) 썸네일형 리스트형 TIL - 68 쿠키, 세션, 쿠키-세션, 토큰 인증 (Authentication) : 서비스를 이용하는 유저가 등록된 회원인지 확인하는 과정 인가 (Authorization) : 유저에게 특정 리소스에 접근할 수 있는 권환을 줌 (권환 부여) 운영자의 권환을 확인하는 절차 마이페이지에 대한 권환을 확인하는 절차 1. 쿠키 무상태와 비연결성이라는 http통신의 특징(TIL - 60 확인)에도 불구하고 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단으로 사용 가능 브라우저에 저장되는 텍스트파일로 key-value 형태로 저장 (예시 : 브라우저가 주머니에 쿠키를 넣어뒀다) http 특징인 무상태와 비연결성을 개선할 수 있도록 사용됨 별도로 삭제되거나 유효기간이 지나지 않은 이상 서버와 통신할 때 자동으로 주고받게 됨 서버에 특.. TIL - 66 React Query 1. ReactQuery란? 1) 미들웨어의 한계 보일러 플레이트 : 코드량이 많음 ( thunk 같은 경우도 thunk를 생성하고 보내주고... ) 규격화 문제 : Redux가 비동기 데이터 관리를 위한 라이브러리가 아님 2) 리액트 쿼리의 강점 보일러 플레이트를 만들다 오류가 날 일 X 내가 만든 부분이 아니기 때문에 나의 잘못 X 사용 방법이 기존 thunk 대비 쉽고 직관적 2. 주요 키워드 1) Query 문의, 의문 => axios의 get요청과 비슷 const response = await axios.get(’http://localhost:3000/todos’) 2) Mutation 어떠한 데이터를 변경하는 것 추가, 수정, 삭제를 의미하는데, CRUD 중 CUD를 의미 axios의 post.. TIL - 65 custom hook 1. custom hook? 기존에 많이 쓰인 것 훅을 내가 원하는 hook으로 만들 수 있는 기능 반복되는 로직이나 코드를 우리만의 훅으로 관리하는 것 Ex) 항상 만들었던 input의 onChange 등 const [name, setName] = useState(''); const [password, setPassword] = useState(''); const onChangeNamehandler = (e) => { setName(e.target.value) } const onChangePasswordhandler = (e) => { setPassword(e.target.value) } return ( ); 2. useInput 커스텀 훅 만들기 1) hooks란 파일을 만들고 그 안에 useInpu.. TIL - 64 Thunk 심화 1. thunk 함수 구현 export const __getTodos = createAsyncThunk( "getTodos", async (payload, thunkAPI) => { // 비동기 처리 : async try { // thunkAPI.fulfillWithValue 혹은 thunkAPI.rejectWithValue로 extraReducers로 보내줌 const response = await axios.get('http://localhost:4000/todos') console.log(response) // response -> json에 들어있는 data // toolkit에서 제공하는 API // Promise -> resolve(=network 요청이 성공한 경우) -> dispatch해주.. TIL - 63 Thunk 기초 TIL 59번 redux-toolkit을 먼저 보세요! 예제가 59번의 예제입니다! 미들웨어란 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환하게 되는데, 이 과정 사이에 우리가 하고싶은 작업을 넣어서 할 수 있게 만드는 것이다. 예를 들어 todolist에서 list를 추가할 때 추가 버튼을 누르고 3초 뒤에 추가가 되도록 만들고싶으면 미들웨어 없이 할 수 없기 때문에 미들웨어를 사용하는 것이다. 리덕스는 dispatch가 되면 action이 바로 리듀서로 달려가 state를 반환하기 때문이다. 보통의 경우 리덕스 미들웨어는 서버와 통신을 위해 사용하는 것이고, 그 중에서 Redux-Thunk와 saga가 많이 쓰인다. dispatch 안에 객체.. TIL - 62 axios interceptor axios로 json을 가져올 때의 주소가 바뀐 경우 내가 작성한 500개의 axios 주소를 모두 바꿔줘야 하는데, 엄청난 인적 자원을 낭비하게 된다. 이떄 할 수 있는 것이 axios interceptor이다. 1. axios interceptor 흐름을 가로채서 간섭하는 것이다. 요청(request)이 처리되기 전 (=http request가 서버에 전달되기 전) 응답(response)의 then(성공) 또는 catch(실패)가 처리되기 전 Ex) 요청 헤더 추가 ( request header ) 인증 관리 ( JWT ) 로그 관련 로직 삽입 에러 핸들링 ( error handling ) 1) 사용 방법 1. instance를 만들어준다. api.js import axios from "axios";.. TIL - 61 axios get, post, delete, patch 1. GET 1) 가져올 json 형식 파일 만들기 db.json { "todos" : [ { "id": 1, "title": "react" } ] } 2) async로 연결 const fetchTodos = async () => { const { data } = await axios.get('http://localhost:4000/todos') console.log(data) // await로 비동기로 가져오기 } useEffect(() => { // db로부터 값을 가져올 것이다. fetchTodos() }, []); useEffect로 새로고침이 되었을 때, fetchTodos를 실행 fetchTodos => get을 사용해 json 형식의 파일을 data에 넣어준다. 비동기로 작동해야 함으로 ay.. TIL - 60 HTTP 1. HTTP란? 단순한 의미로 소통(communication), 대화 방법 대화는 보통 데이터로 이루어지며, 대상은 서버(웹 서버)와 클라이언트(웹 브라우저) 웹 통신은 약속(프로토콜)인데, 서버와 클라이언트 사이 대화하기 위해 서로 약속한 방식으로 데이터를 주고 받는 것으로, 이렇게 하지 않으면 "오류"가 생길 수 있다. 웹에서 서버와 클라이언트간 주고 받은 상호간의 약속을 HTTP 프로토콜이라 한다. 1) 요청과 응답 서버와 클라이언트가 서로 데이터를 주고받을 때 '요청(request)'을 하면 그에 따른 '응답(response)'이 오는데, 대화의 형식과 같음 2) 메서드 GET - 조회 POST - 생성 PUT, PATCH - 수정 ( isDone을 true에서 false로 바꿀 때 ) DELE.. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
