[코드잇 스프린트 풀스택 4기] React 애플리케이션에서 JWT를 사용하여 인증 시스템 구현하기
·
개발이야기/웹개발
1. 개요JWT(JSON Web Token)는 서버가 사용자를 인증한 후 클라이언트에게 토큰을 발급하여, 클라이언트가 이후 요청 시 토큰을 포함시켜 인증 상태를 유지하도록 하는 방식이다. React와 같은 SPA(Single Page Application)에서는 이 토큰을 활용해 사용자의 로그인/로그아웃 상태를 관리할 수 있다.JWT의 기본 개념, React 내에서의 인증 상태 관리, 그리고 로그아웃 구현 로직에 대해 알아보자. 2. JWT 인증 흐름로그인 과정사용자가 로그인 폼에 자격 증명을 입력하면, 백엔드 서버는 해당 정보를 검증인증에 성공하면 서버는 사용자의 정보를 포함한 JWT를 생성하여 클라이언트에 전달클라이언트는 이 토큰을 안전한 저장소(예: localStorage, sessionStorag..
[코드잇 스프린트 풀스택 4기] 리액트(React) 컴포넌트
·
개발이야기/웹개발
리액트 컴포넌트의 정의와 특성- 리액트 애플리케이션을 구성하는 최소 단위를 말한다.- view를 독립적으로 관리하고 재사용할 수 있다.- props를 입력받고 state를 정의하여 DOM을 렌더링한다.- 컴포넌트는 대문자로 시작한다. 리액트 컴포넌트의 종류초기에 클래스형 컴포넌트를 주로 사용하였으나 사용의 불편이 있어 나온 것이 함수형 컴포넌트이며 이 과정에서 hook이 개발됨 1. 클래스형 컴포넌트(Class Component)- 클래스의 형태로 컴포넌트를 정의- 코드내에서 Lifecycle과 state 기능 구현 2. 함수형 컴포넌트(Stateless Functional Component)- 함수의 형태로 컴포넌트를 정의하고 export와 import를 통해 사용- hook을 사용하여 라이프사이클과 ..