2025/01/12 2

<React + Vue.js> 프로젝트 내 로그인 기능 구현 가이드 With Dummy Server

1. 서론 이번 글에서는 React 로그인 기능을 구현하는 방법을 다룹니다. 사용자로부터 이메일과 비밀번호를 입력받아 서버와 통신하여 로그인 요청을 처리하고, 응답을 받아 인증 상태를 관리하는 과정을 단계별로 설명합니다. 이 가이드에서는 비밀번호 유효성 검사, 로딩 상태 관리, 예외 처리 등을 포함하여 완성된 로그인 페이지를 만들어 보겠습니다. 중요한 점은 이 글은 실제 API가 아닌, Dummy API로 Test 용 서버를 가지고 로그인 및 회원가입의 정상적인 흐름을 확인하는 것 뿐이라는 것을 분명히 명시합니다. 2. 주요 기능 • 입력 필드 관리: useState로 입력값 상태를 관리하여 폼 제출 시 데이터를 전송합니다. • 서버 통신: axios를 사용하여 로그인 요청을 처리합니다. • 에러 메시지..

FrontEnd Develop 2025.01.12

<React + Vue.js> 프로젝트 내 회원가입 기능 구현 가이드

1. 서론 이번 글에서는 React 회원가입 모달 컴포넌트를 구성하는 방법을 다룹니다. 사용자로부터 입력을 받고, 이를 더미 서버(JSON Server)와 통신하여 회원 정보를 등록하는 과정을 단계별로 설명합니다. 또한, try-catch-finally를 활용한 예외 처리와 상태 초기화 방법도 포함했습니다.  2. 주요 기능 • 입력 필드 관리: useState로 입력값 상태를 관리하여 폼 제출 시 데이터를 전송합니다. • 비동기 서버 통신: axios를 사용하여 회원가입 요청을 처리합니다. • 모달 닫기 기능: 부모 컴포넌트에서 전달받은 함수로 모달 창을 닫습니다. • 유효성 검사: 입력 필드 검증과 에러 메시지를 출력합니다. • 예외 처리: try-catch-finally 구문을 활용해 성공 및 실패..