xeunnie

로그인 구현 1은 프론트 과정에서 구현해야하는 툴을, 로그인 구현 2에선 JWT 토큰을 구현하는 틀을 다뤘다.1과 2는 기본적인 틀만 다룬 것이기 때문에 실제론 더더 많은 보안 조치와 오류 처리가 필요했다.애플리케이션의 안전성과 안정성을 높이는 것이 매우 중요하기 때문에 백과 프론트에서 적용할 수 있는 몇 가지 보안 조치와 오류 처리 방법을 다루는 글이 되겠다.백엔드 보안 조치:환경 변수 사용강력한 비밀번호 정책JWT 만료 시간 설정리프레시 토큰 사용HTTPS 사용입력 데이터 검증CSRF 보호로그 및 모니터링프론트엔드 보안 조치:JWT 저장 위치자동 로그아웃비동기 요청 오류 처리입력 검증HTTPS 사용XSS 방지Nodejs 백엔드 보안 조치와 오류 처리환경 변수 사용:JWT 시크릿 키와 같은 민감한 정보..

1탄은 로그인을 인증하는 틀을 담았다. 2탄은 인증하기 위해 사용하는 JWT 토큰을 생성하는 과정이다.JWT (JSON Web Token) 토큰을 만드는 방법을 React 애플리케이션과 Node.js 백엔드를 사용하여 구현하는 과정으로 나눴다.백엔드 (Node.js) 설정: 사용자 인증 및 JWT 생성Express 서버 설정JWT 생성 및 검증사용자 등록 및 로그인 엔드포인트 구현프론트엔드 (React) 설정: 로그인 폼 및 JWT 저장 및 사용로그인 폼 구현JWT를 이용한 인증 요청보호된 리소스 접근1. 백엔드 설정Step 1: Node.js 프로젝트 초기화 및 필요 패키지 설치먼저, Node.js 프로젝트를 초기화하고 필요한 패키지를 설치한다.mkdir jwt-auth-examplecd jwt-aut..

로그인 기능 구현 (1): 프론트엔드 처리 과정 🚀로그인 기능은 거의 모든 웹 애플리케이션에서 필수적으로 사용됩니다. 이번 글에서는 React를 사용하여 로그인 기능을 구현하는 과정을 친절히 설명합니다. 토큰 기반 인증 방식과 상태 관리를 이해하며, 로그인 로직을 어떻게 처리해야 하는지 단계별로 살펴보겠습니다.0️⃣ 로그인 기능의 기본 원리로그인 기능은 사용자가 입력한 아이디와 비밀번호를 인증 서버에 전달하여 유효성을 검증한 후, 성공적으로 인증되었을 때 토큰을 반환받는 방식으로 작동합니다.로그인 흐름 🔄사용자가 로그인 폼에 아이디와 비밀번호를 입력합니다.입력 데이터를 서버로 전송하여 인증을 요청합니다.서버는 데이터를 검증하고, 유효한 경우 Access Token 및 Refresh Token을 반환합..

자바스크립트란? 🌟자바스크립트(JavaScript)는 웹 개발 세계에서 빼놓을 수 없는 마법의 언어예요.한때는 단순히 버튼을 클릭하면 “띵!” 하고 경고창을 띄우는 정도였지만,지금은 웹, 서버, 모바일 앱, 데스크탑 앱까지! 못하는 게 없는 전천후 언어로 성장했답니다.자바스크립트의 탄생 이야기 📖🌱 1. 초기의 자바스크립트: 작지만 강력한 시작1995년, 웹은 그저 정적인 HTML 페이지로 가득했어요.사용자는 페이지를 보고 끝, 상호작용은 꿈도 못 꾸던 시절이었죠. 이때 넷스케이프(Netscape) 브라우저 팀이 생각했어요:“웹도 상호작용 좀 할 줄 알아야지!” 그 결과, 10일 만에 탄생한 언어가 바로 자바스크립트!처음에는 버튼 클릭 이벤트나 간단한 애니메이션 구현 정도였지만,점점 더 사용자 경험..