이번에 백엔드 개발자와 협업한 프로젝트에서 JWT 방식 로그인을 사용했는데, 간단하게 정리해볼까 한다. JWT 토큰 방식 로그인의 순서는 다음과 같다. 클라이언트에서 서버에 로그인 요청을 보낸다. 요청 데이터에 문제가 없다면 서버는 새로운 토큰을 발급한다. 발급한 토큰을 응답 헤더에 담아 클라이언트로 보낸다. 클라이언트는 응답 헤더에서 토큰을 꺼내 웹 스토리지에 저장한다. 이후 사용자 인증이 필요한 요청 시 요청 헤더에 저장한 토큰을 담아서 요청하면 된다. 다음은 코드와 함께 JWT 인증 방식에 대해 알아보자. 로그인 요청 const handleLogin = async (data) => { return await axios.post("http://서버URL/users/logins", { email: da..

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용되며, 현재 가장 인기 있는 자바스크립트 라이브러리라고 볼 수 있다. 리액트를 사용하지 않아도 바닐라 JS를 사용해 개발할 수 있지만, 리액트를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다. 리액트의 특징 몇 가지를 알아보자. 컴포넌트 기반 props 단방향 데이터 바인딩 가상 돔(Virtual DOM) JSX 컴포넌트 기반 컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다. 리액트는 UI를 여러 컴포넌트로 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한..