Frontend25 Axios Interceptor, Lodash.debounce 어제 개발을 하다가 다음과 같은 문제가 일어났었다. 플로우는 다음과 같다.처음에 로그인을 한다.로그인을 하면 패스워드를 해싱한다. ( DB에는 원문이 들어가 있지 않고, 단방향 해싱으로 진행한다. )해싱값을 입력값 ( pw )와 비교한다. 맞으면 서버에 저장된 SECRET_KEY로 생성한 jwt 토큰을 발급한다.그리고 이 토큰을 클라이언트측 브라우저의 세션 스토리지에 넣는다. 이후에, Axios 인스턴스의 헤더에 Authorization : Bearer [토큰] 을 추가해서 API를 날린다.( 리프레시나 토큰 만료는 아직 고려하지 않았다. ) 문제는 다음에서 발생했다.토큰을 브라우저의 세션 스토리지에 분명 넣었는데, 토큰 검증이 되지 않아서 자꾸 401 ( Unauthorized ) 에러가 나는 것이었.. 2025. 4. 15. css -> tailwind css padding padding : 1rem;p-4 padding-top : 0.5rem;pt-2 padding-bottom : 2rem;pb-8 padding-left/right : 0.75rem;px-3 ( 좌.우) padding-top/bottom : 1.5rem;py-6 ( 위.아래 ) margin똑같음1rem이 4왼쪽은 l, 위는 t, 아래는 b, 오른쪽은 r, 위아래는 y, 왼우는 x flexbox display:flex;flex display:inline-flex;inline-flex flex-direction : column;flex-col flex-wrap : wrap;flex-wrap align-items : center;items-center align-self : start;self.. 2025. 3. 28. Recoil-Persist Recoil-Persist는 Recoil atom (전역상태)을 브라우저(또는 리액트 네이티브)의 영구저장소(LocalStorage, SessionStorage, AsyncStorage등)에 자동으로 저장 Persist 하고 페이지 리로드 시 저장된 값을 복원 rehydrate 해주는 가벼운 라이브러리이다. - 선택적 Persistence : 특정 atom만 골라서 저장가능- 만료 설정 가능 : 저장 데이터의 TTL ( time to live ) 지정- 타입스크립트 지원 : 제네릭 타입 정의 가능 * 예시 * import React from 'react';import { RecoilRoot, atom, useRecoilState } from 'recoil';import { recoilPersist } f.. 2025. 3. 24. Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다. * 동작방식1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메.. 2025. 3. 21. npm, package.json, package-lock.json npm initpackage.json 생성npm install npm 모듈 로컬 설치npm install 패키지@버전특정버전 설치npm install --save 패키지이름node_modules 디렉토리에 설치, dependencies 항목에 패키지 추가npm install -g 패키지시스템 전역에 패키지 설치, 해당 프로젝트의 node_modules 디렉토리와 관계 없이 사용가능npm install --save옵션dependencies 항목에 추가가 됨npm install --save-devdevDependencies 항목에 추가가 됨 ** 주의해야npm updatenpm 모듈 업데이트npm dedupe중복된 모듈 정리npm outdated오래된 패키지의 존재 유무를 알려줌npm cachenpm 내의 .. 2025. 3. 18. React 18 ) useTransition 아까 useActionState에 대해서 언급하였는데, 작동이 안되는 경우가 종종 있다. 예를 들어서, isPending 값이 제대로 업데이트 안되는 경우가 존재했다. ( 아무래도 아직 나온지 얼마 안되어서 그런건가? ) * 두가지 반환값이 존재한다. - isPending : 배열을 반환하는데, 첫번 째 값은 업데이트가 진행중인지 나타내는 boolean 값 - startTransition : 비우선 업데이트를 시작하는 함수 * 사용목적예를 들어서, 사용자가 입력하는 동안 목록 필터링처럼 시간이 좀 걸리는 작업이 있다면 이 작업을 startTransiton 안에 넣어서 실행할 수 있다. 그러면 입력반응은 즉시 이뤄지고, 시간이 걸리는 작업은 백그라운드에서 진행되면서 UI가 멈추지 않는다. import.. 2025. 3. 18. React 19 ) useActionState( 구 useFormState ) useFormState는 이전에 React Dom에서 제공했었고 이제는 useActionState로 이름이 바뀌어 제공된다. 목적은 폼의 동작을 쉽게 관리하기 위함이다. useActionState ( 구 useFormState )const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); * 목적- 폼 제출 ( 이걸 액션이라고 한다 ) 을 호출할 때, 이전 상태와 함께 폼 데이터를 인자로 받아 처리한 후, 그 결과 상태를 관리해준다. * 기능- 폼 제출 시 자동으로 pending 상태를 관리한다.- 서버액션 ( 데이터 업데이트, 검증 등 )의 결과를 상태로 반영하여 이후 렌더링에 활용할 수 있다.- 이전 Cana.. 2025. 3. 18. 인증 인증(세션 vs 토큰) 개요세션(Session) 방식발급 방식:사용자가 로그인을 하면, 서버는 "세션 키"를 발급서버 내부 DB나 메모리에 사용자 id - 세션 키를 매핑해 저장클라이언트에게 세션 키를 전달하고, 클라이언트는 이 키를 쿠키 등에 저장검증 방식:클라이언트 요청 시 세션 키를 전송서버는 자신이 가진 세션 저장소를 참조해 해당 세션 키의 유효성 및 해당 사용자와의 매칭 여부 확인유효한 경우 응답 제공한계:서버 확장(수평 확장) 시 세션 공유 문제 발생세션 정보를 모든 서버에 공유하기 위해 추가적인 DB나 캐시(레디스 등) 필요JWT(Token) 방식JWT란?RFC 7519에 정의된 표준화된 토큰 포맷헤더(Header), 페이로드(Payload), 시그니처(Signature)로 구성된 JSON .. 2024. 12. 17. useQuery React Query의 useQuery는 React 어플리케이션에서 데이터를 관리하고 서버와의 통신을 효율적으로 처리할 수 있도록 도와주는 훅입니다. useQuery는 데이터를 가져오는 과정과 상태관리를 간소화하며, 캐싱, 리패칭, 로딩/에러 상태 관리 등을 자동으로 처리해줍니다. useQuery(queryKey, fetchFunction, options); 첫번째 매개변수로 쿼리키 query key - 데이터를 구분하기 위한 키입니다.- 배열로 작성됩니다.- 예를 들어, ['posts'] 두번째로 데이터를 가져오는 함수 fetch function- 데이터를 가져오는 비동기 함수입니다. 세번째로 옵션 객체 option object 를 받을 수 있습니다. 옵션들을 보겠습니다. 1. enabled- 기.. 2024. 12. 13. 이전 1 2 3 다음