React (57) 썸네일형 리스트형 [React] Redux Ducks 패턴 1. Reducer 함수를 export default 2. Action Creator 함수를 export 3. Action Type 은 app/ reducer/ Action_Type 형태로 작성 모듈 파일 한개에 Action Type, Action Creator, Action Value 가 모두 작성된 방식 [React] Redux 프로젝트 세팅 Redux 프로젝트 생성 yarn add redux react-redux src > redux > config > configStore.js // 중앙 데이터 관리소 (store) import { createStore } from "redux"; import { combineReducers } from "redux"; const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; src > index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App .. [React] 인증/ 인가 (토큰, JWT) 토큰(Token) - 클라이언트에서 보관하는 암호화된 인증정보를 의미 - 세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에, 서버 부담을 줄여주는 인증 수단임. - 웹에서 인증 수단으로 사용되는 토큰은 주로 JWT(Json Web Token) 을 이용한다. JWT 의 특징 header.payload.signature 형식으로 3가지 데이터로 구성되어 있음. 국제 인터넷 표준 인증 규격 중 하나이다. 암호화된 토큰을 누구나 복호화하여 payload를 볼 수 있음. → 토큰의 용도는 인증정보(payload)에 대한 보호가 아니라 위조 방지 정보(payload)를 토큰화할 때 signature에 secret key가 필요하고, secret key는 복호화가 아니라 토큰이 유효한 지를 검증하는 .. [React] 인증/ 인가 (세션) 세션 세션이란 사용자와 서버간의 연결이 활성화 된 상태를 의미하는 개념 (인증이 유지되고 있는 상태) 로그인 성공 -> 서버에서 세션 생성 및 저장 (key-value 형식) -> 쿠키에 의해 key(sessionId) 를 브라우저에 응답 쿠키-세션 인증방식 - 로그인/ 회원가입시 세션 인증 - 로그인/ 회원가입 성공 시 서버에서 쿠키에 sessionId 를 담아서 보냄 - 세션 유지 상태 : 서버에서 관리하는 세션 저장소에 회원 데이터 있음 - 세션 만료 상태 : 서버에서 관리하는 세션 저장소에 회원 데이터가 없음 - 인가 필요한 API 요청/ 응답 - 서버는 인가가 필요한 API 요청을 받으면 클라이언트 쿠키에 들어 있는 sessionId를 세션 저장소에 조회하여 있으면 DB에 데이터를 조회하여 응답 [React] 인증/ 인가 (쿠키) 인증 - 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 (로그인) 인가 - 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 (카페 운영자) - 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청 http 프로토콜 통신의 특징 2가지 1. 무상태(Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다. - 상태값은 매 요청마다 클라이언트가 가지고오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답함. - 무상태라는 특성 덕분에 동일한 서버를 여러개로 확장 가능 (Scale-out) 2. 비연결성 (Connectionless) : 서버와 클라이언트는 .. [React] Throttling/ Debouncing Throttling & Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 Throttling 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위 (delay) 로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는것. 주로 사용되는 예 : 무한스크롤 Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay) 이 경과한 후에한번만 호출하도록 하는 것 주로 사용되는 예 : 입력값 실시간 검색, 화면 resize 이벤트 메모리 누수(Memory Leak) 필요하지 않은 메모리를 계속 점유하고 있는 현상 setTimeout 이 메모리 누수를 유발하는지.. [React] React Query React Query 기존 미들웨어의 한계 다른 서버와의 API 통신 및 비동기 데이터 관리를 위해 thunk, saga 와 같은 미들웨어를 채택해서 사용할 수 있으나, 다음과 같은 문제점이 있음. 1. 보일러 플레이트 : 코드량이 너무 많음 2. 규격화 문제: Redux가 비동기 데이터를 관리하는 전문 라이브러리가 아님. 리액트 쿼리의 강점 1. 보일러 플레이트 만들다 오류 날 일이 없음. 2. 휴먼에러를 줄인다. 3. 사용방법이 기존 thunk 대비 쉬움. Query 어떤 데이터에 대한 요청을 의마한다. Mutation 데이터 그룹 그 자체를 변경하는 것으로, 여기서 변경은 추가 수정 삭제 즉 CUD 에 해당한다. Query Invalidataion Query를 Invalidation, 즉 무효화 시.. [React] custom hooks custom hooks 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅으로, 앞에 use 가 붙는다. 아래와 같이 input 의 갯수가 늘어날 때마다 state 와 handler 가 같이 증가하게 되는데, 반복되는 로직이나 중복되는 코드를 우리만의 훅, 커스텀 훅으로 만들어 관리할 수 있다. // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTit.. 이전 1 2 3 4 ··· 8 다음
