1. 서론
지난 포스팅에서는 useState로 상태관리를 통해 유효성검사를 진행하고 유효성 검사를 통과하지 못하면 각 입력창 하단에 에러 메시지를 출력하는 부분을 작성하였다. 하지만 이메일과 비밀번호를 사용하여 실제로 로그인 요청을 처리하는 부분이 구현되어 있지 않았다.
따라서 이번 포스팅에서는 백엔드와 연동하여 로그인 요청을 처리하고, 요청 결과에 따라 성공/실패 처리를 하는 로그인 및 회원가입 시스템 개요에 대해서 알아보도록 하자
또한, 이 프로젝트에서는 이메일을 사용한 로그인 및 회원가입 시스템을 Node.js와 Express.js를 사용하여 어떻게 구현하는지 알아보고 이를 통해 클라이언트와 서버 간에 RESTful API를 활용하는 방법, 그리고 쿠키와 세션을 통한 인증 방법을 구현해보자.
2. 로그인 및 회원가입 시스템 개요
로그인과 회원가입 시스템은 웹 애플리케이션에서 가장 중요한 기능 중 하나입니다. 이를 통해 사용자를 식별하고, 사용자별로 개인화된 서비스를 제공할 수 있습니다. 이메일 기반 인증은 사용자가 이미 자주 사용하는 이메일 계정을 활용할 수 있어 편리하며, 이메일 확인을 통해 사용자의 신원을 일정 수준에서 보장할 수 있습니다.
로그인과 회원가입 시스템은 웹 에플리케이션에서 가장 중요한 기능 중 하나이다. 이를 통해 사용자를 식별하고 사용자 별로 개인화된 서비스를 제공할 수 있기 때문이다. 이메일 기반 인증은 사용자가 이미 자주 사용하는 이메일 계정을 활용할 수 있어 편리하며, 이메일 확인을 통해 사용자의 신원을 일정 수준에서 보장할 수 있다.
3. 사용 기술 소개
이번에는 로그인 및 회원가입에 사용되는 기술에 대해 소개하고 해당 기술을 선택하게 된 이유에 대해서 알아보자.
REST API
로그인 및 회원가입 기능에서 REST API를 사용하는 이유는 주로 사용자 경험과 관련되어 있다.
- 실시간 피드백: REST API를 사용하면 클라이언트는 서버로부터 바로 응답을 받을 수 있다. 예를 들어, 사용자가 회원가입 시 이메일이나 닉네임이 이미 사용 중인지 바로 확인하고 피드백을 주는 것이 가능하다. 이는 서버사이드 렌더링에서는 페이지 전체를 다시 렌더링해야 하는 데 반해, REST API는 필요한 부분만 업데이트하므로 더 효율적이다.
- 동적인 사용자 인터페이스: 회원가입이나 로그인과 같은 폼을 다룰 때, REST API는 필요에 따라 동적으로 UI를 업데이트하는데 유리하다. 예를 들어, 폼 유효성 검사 결과에 따라 특정 메시지를 표시하거나, 로그인 후 사용자의 이름을 화면 상단에 표시하는 등의 동적인 기능을 쉽게 구현할 수 있다.
- 비동기 처리: 로그인 및 회원가입 과정에서 서버로 요청을 보낼 때, 사용자는 그 응답을 기다리는 동안 다른 작업을 할 수 있다. 이는 REST API가 비동기적으로 작동하기 때문에 가능한데, 이를 통해 사용자 경험이 향상될 것으로 기대된다.
이러한 이유로 로그인 및 회원가입 과정에서는 REST API를 활용하는 것이 더욱 적합하다. 물론, 초기 페이지 렌더링에 대해서는 서버사이드 렌더링이 더 효과적일 수 있지만, 로그인이나 회원가입 같은 특정 인터랙션에 대해선 REST API를 사용하는 것이 더 효율적일 수 있다.
쿠키와 세션
웹은 기본적으로 상태를 유지하지 않는(stateless) 구조이다. 따라서 사용자가 로그인을 하더라도 그 정보를 유지하지 못하는데, 이 문제를 해결하기 위해 쿠키와 세션을 사용한다. 쿠키는 클라이언트에 저장되는 작은 데이터 조각이고, 세션은 서버에서 관리하는 사용자 정보이다. 로그인 정보를 쿠키에 담아 클라이언트에 보내고, 이후 클라이언트가 요청을 보낼 때마다 쿠키를 함께 보내서 사용자를 식별하는 방식이다.
JWT(Json Web Token)도 인증 방식 중 하나로, 최근에 많이 사용되고 있다. JWT는 자체적으로 정보를 가지고 있어서 세션처럼 별도의 저장소가 필요 없는 장점이 있지만, 토큰이 탈취되면 그대로 사용될 수 있다는 보안 문제와 한 번 발급된 토큰의 변경이 어렵다는 단점이 있다. 이에 반해 세션은 서버에서 관리하기 때문에 상대적으로 보안이 잘 되어 있고, 필요에 따라 세션을 제어할 수 있다는 장점이 있다.
따라서 이번 프로젝트에서는 보안이 중요한 로그인 및 회원가입 기능에 세션을 사용하여 사용자 인증을 처리하도록 하자.
Passport.js
Passport.js는 Node.js로 만들어진 강력한 인증 미들웨어로, 간단하게는 사용자 이름과 비밀번호를 이용한 로컬 전략에서부터, OAuth(페이스북, 구글, 트위터 등)를 이용한 다양한 전략(strategy)을 쉽게 적용할 수 있게 해준다.
Passport.js를 사용하면 로그인을 구현하는 코드가 대폭 간소화되며, 로그인 로직을 분리해서 관리할 수 있기 때문에 코드의 가독성과 유지 보수성이 향상된다. 또한, Passport.js는 세션을 사용하여 사용자 로그인을 유지하며, 이는 로그인한 사용자를 추적하고, 로그인 세션을 유지하는데 필요한 기능을 제공한다.
따라서 이번 프로젝트에서는 Passport.js를 활용하여 로그인 요청을 처리하고 세션을 관리하도록 하자.
