hyuko

비밀번호 변경 비밀번호 변경은 resetPassword 메서드와 resetPassword API 엔드포인트를 통해 이루어집니다. 클라이언트에서는 MyPage 컴포넌트에서 비밀번호 변경 버튼을 클릭하여 비밀번호 변경 페이지로 이동하고, 사용자가 새로운 비밀번호를 입력한 후 변경을 완료할 수 있습니다. 클라이언트 코드 (MyPage.js) import React, { useState } from 'react'; import axios from 'axios'; import { useQuery } from 'react-query'; import { useNavigate } from 'react-router-dom'; const MyPage = () => { const navigate = useNavigate()..

회원 정보 수정 회원 정보 수정은 modifyUser 메서드와 modifyUser API 엔드포인트를 통해 이루어집니다. 클라이언트에서는 MyPage 컴포넌트를 통해 회원 정보 수정 페이지로 이동하고, 사용자가 수정할 정보를 입력한 후 수정을 완료할 수 있습니다. 클라이언트 코드 (MyPage.js) import React, { useState } from 'react'; import axios from 'axios'; import { useQuery } from 'react-query'; import { useNavigate } from 'react-router-dom'; const MyPage = () => { const navigate = useNavigate(); const [authState, ..

이번 블로그에서는 React를 사용하여 여행 일정 계획을 작성하고 관리하는 웹 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. 이 애플리케이션은 여행 날짜와 장소 정보를 선택하여 일정을 작성하고 저장하는 기능을 제공합니다. 1. 개발 환경 설정 먼저, 개발을 시작하기 전에 필요한 환경 설정을 완료해야 합니다. 아래는 개발 환경 설정에 필요한 내용입니다. 1.1 Node.js와 npm(Node Package Manager) 설치 React 프로젝트 생성 필요한 라이브러리와 의존성 설치 자세한 환경 설정 방법은 본 블로그에서 다루지 않으므로, 이미 환경이 설정되어 있다고 가정하고 진행하겠습니다. 1.2. 컴포넌트 개발 여행 일정 계획 애플리케이션을 구현하기 위해 다양한 컴포넌트를 개발해야 합니다. 여기서..

앞서 회원가입을 만들었다. 사용자 인증은 거의 모든 웹 애플리케이션에서 필수적인 부분입니다. 이 포스트에서는 Java와 Spring Boot를 사용하여 백엔드를, React를 사용하여 프론트엔드를 구현하며 JWT(JSON Web Token)를 사용하여 사용자 인증을 처리하는 방법에 대해 살펴보겠습니다. 서버 사이드: Spring Boot @ValidAspect @PostMapping("/login") public ResponseEntity login(@Valid @RequestBody LoginReqDto loginReqDto, BindingResult bindingResult) { return ResponseEntity.ok(authService.signin(loginReqDto)); } public ..