useActionStateuseActionState 는 인자로 3개의 인자를 반환한다.const [state, formAction, isPending] = useActionState( handleSubmit, null ) 이 훅은 actionFunction이 실행된 결과 상태(state)를 추적하고,그 액션을 트리거할 수 있는 함수(formAction)를 리턴하며,현재 실행 중인 상태인지를 알려주는 isPending도 함께 제공한다. 1. state액션 실행 후의 결과 상태. 예를 들어, 서버에서 리턴된 메시지나 에러 등이 여기에 담긴다. 처음에는 null이다. 2. formActionhandlrSubmit 을 실제로 실행시킬 수 있는 함수. 처럼 사용한다.. 3. isPendingtrue일 경우, 현재..

토큰 인증 방식이란?토큰은 쉽게 말해 입장권이나 출입증과 같은 인증 수단이다. 클라이언트가 서버로부터 인증을 받으면 서버는 토큰을 발급해주고, 클라이언트는 이 토큰을 들고 다니며 서버에 요청할 때마다 제출함으로써 인증을 대신하게 된다. JWT (JSON Web Token) 소개 웹에서 많이 사용하는 토큰 방식 중 하나는 JWT 이다.JWT는 JSON 형태의 데이터를 담고, 이를 인코딩하여 만든 토큰이다. 이 토큰은 총 3개의 구성 요소로 이루어져 있다.1. Header (헤더)토큰의 타입 (typ)과 알고리즘 정보 (alg)가 담겨 있다.예시:{ "alg": "HS256", "typ": "JWT"}2. Payload (페이로드)사용자 정보나 토큰에 담을 데이터가 들어간다.예시:{ "name": "J..

서버에서 session 정보를 삭제 했을 때 서버에서 session 정보를 보관하기 때문에 서버에서 session을 삭제 하게 되면 로그인 시 에러가 발생된다. 서버에서 session 설정app.use( session({ secret: "session secret", // 암호화 할 때 열쇠와 같은 문자열 resave: false, // 내용의 변경이 없어도 저장을 할 건지 saveUninitialized: false, // 요청의 내용이 비어 있을 때 저장을 할 건지 })); Session 이름 설정app.use( session({ secret: "session secret", resave: false, saveUninitialized: fals..

쿠키(Cookie)란 무엇인가?쿠키는 클라이언트(브라우저)에 저장되는 짧은 텍스트 데이터로, HTTP 프로토콜의 **무상태성(statelessness)**을 보완하기 위해 사용되는 도구다.HTTP의 무상태성이란?HTTP는 기본적으로 서버가 이전의 요청이나 응답을 기억하지 못하는 구조이다.예를 들어, 사용자가 “아메리카노 한 잔 주세요”라고 요청하고, 서버가 “따뜻하게 드릴까요?”라고 응답한 뒤, 다시 “아이스로 해주세요”라고 요청해도 서버는 이전 요청을 기억하지 못한다.이처럼 HTTP는 매 요청마다 독립적으로 처리되기 때문에 상태를 유지하지 않는다. 쿠키의 역할이러한 무상태성을 보완하기 위해 쿠키가 등장하게 되었다.서버는 한 번의 요청-응답 이후에 **클라이언트에게 정보를 저장하도록 지시(set-cook..

React 에서의 데이터 Fetching react 에서는 useEffect 를 사용 하여 데이터를 fetching 을 하게 된다. 이로서 컴포넌트가 렌더릴 될 때 나 데이터가 변경 되었을 때 데이터를 불러올 수 있다. 하지만 화면이 렌더링 된 후 데이터를 불러오기 시작한다. 빈화면이 보이고, 자바스크립트실행 해서 이제 드디여 화면이 보였는데 또다시 데이터 fetching 하는 시간 까지 기다려야 한다. Next.js 에서의 데이터 fetching SSR (Server Side Rendering) Next.js 에서는 사전렌더링 과정중에 데이터 fetching 까지 수행 하여서 진행 하기 때문에 React 의 느린 FCP 를 좀더 빠르게 진행할 수 있다. 컴포넌트 상단에 getSeverSideP..

react 렌더링 방식 : CSR ( Client Side Rendering ) 1) 접속요청 2) index.html 빈껍데기를 브라우저에 전달한다. 3) 빈화면을 유저에게 먼저 렌더링 4) 후속으로 서버에서 JavaScript 번들을 전달한다. 5) 브라우저에서 JavaScript 를 실행 한 후 6) 컨텐츠를 렌더링 한다 ---------------------------------- 여기까지 걸리는 시간을 FCP : First Content for Paint 라고 한다. 7) 초기접속 이후 페이지 이동 시 8) 브라우저에서 JavaScript 를 실행 해서 ( 4번에서 서버에서 JS 번들을 모두 전달 받았다 ) 9) 컨텐츠를 렌더링 한다. 장점 1. 페이지 이동이 매우 빠르고 쾌적하다 단점 ..