프로젝트 작업일지 : 로그인 (비밀번호 찾기)

작업일지에 들어가며 이전 기능 구현에 이어 이번에는 사용자 정보를 입력받아 검증 후 비밀번호를 재설정하여 사용자 메일에 전송해주는 기능을 구현해보겠다. 🙏 Spring Boot + React 프로젝트 / 이메일 전송 기능 (비밀번호 찾기, 임시비밀번호 부여) 내가 원하는 기능을 아주 상세하게 작성해주셔서 해당 포스팅을 상당히 많은 참고를 하며 해봐야겠다.구글 이메일 세팅 앱 비밀번호를 꼭 기억해두자!백엔드 코드1. application.properties# GMailspring.mail.host=smtp.gmail.comspring.mail.port=587spring.mail.properties.mail.deug=truespring.mail.properties.mail.smtp.auth=truespri..

• format_list_bulleted Project/Forklog
• · 2024. 12. 30.
• textsms

프로젝트 작업일지 : 로그인 (아이디 찾기)

작업일지에 들어가며이번에는 사용자 아이디 찾기 기능을 구현해보겠다. 아이디(이메일)찾기 버튼을 누르면 모달로 사용자 정보 중 휴대전화번호가 중복이 되지 않기 때문에  사용자 이름과 휴대전화 번호를 입력받고 서버에서 검증하여 검증이 완료되면 해당 유저의 이메일을 모달에 바로 띄우는 방향으로 진행해보겠다.백엔드 코드1. Respositorypublic interface MembersRepository extends JpaRepository { Members findByEmail(String email); // 이메일 중복 검사 boolean existsByEmail(String email); // 휴대전화 중복 검사 boolean existsByPhone(String phone); // 이메일 찾기 Opti..

• format_list_bulleted Project/Forklog
• · 2024. 12. 30.
• textsms

프로젝트 작업일지 : 로그인 (아이디 기억하기)

작업에 들어가며로그인 아이디 기억 기능 개발 구현을 하기 위해 어떻게 할까 고민 중 중간 프로젝트와 동일하게 쿠키에 사용자 아이디를 넣어 화면에 출력하는 방법이 제일 쉽고 간단하게 구현할 수 있을 것 같아 이번 프로젝트에서도 같은 방법으로 기능을 구현하게 되었다. 아래에서 좀 더 자세하게 기능 개발 과정을 설명해보도록 하겠다.로그인 이메일 기억하기 개발 과정1. 쿠키 모듈 설치먼저 리액트에서 쿠키를 사용하기 위한 모듈을 설치해준다.npm install js-cookie 2. 체크박스 상태 관리useState를 사용해서 아이디 기억하기 체크박스의 상태를 관리한다.초기값은 false로 체크박스가 해제된 상태로 화면에 보여지게 한다.// 아이디 기억하기 체크박스 상태 관리const [checked, setCh..

• format_list_bulleted Project/Forklog
• · 2024. 12. 28.
• textsms

프로젝트 작업일지 : 로그인 (폼 만들기_React Hook Form)

작업에 들어가며이전에 회원가입 컴포넌트를 만들어보았다. 그렇기에 로그인 컴포넌트를 만드는 일은 크게 어렵지 않게 진행될 것 같다. 이번에도 차크라UI를 사용하여 로그인 폼을 만들 것이며, 차크라 UI에 관한 사용법은 바로 아래 링크를 참조해놓겠다. 바로 시작해보자! 🙏 프로젝트 작업일지 : 회원가입 (폼 만들기_React Hook Form)로그인 폼 구현1. 이메일, 비밀번호 입력 필드 구현import { Button, Input, Stack } from "@chakra-ui/react"import { Field } from "../components/ui/field"import { useForm } from "react-hook-form" const AuthLogin = () => { const {..

• format_list_bulleted Project/Forklog
• · 2024. 12. 28.
• textsms

프로젝트 작업일지 : 회원가입 (이메일 중복 검사)

작업일지에 들어가며지난 글에서는 기본적인 회원가입 로직을 구현했다. 이번에는 회원가입 기능 중 이메일 중복 검사 기능을 만들어보겠다. 사용자가 입력한 필드의 값을 서버로 보내 중복되는 이메일이 있는 지 검사하고 응답을 받아 모달 내부에 사용 가능 및 사용 불가를 표시해주면 될 것 같다. 바로 시작해보자!프론트 코드1. Chakra UI | Dialog응답 메세지를 띄울 모달로 차크라UI의 Dialog 컴포넌트를 사용import { Button } from "../components/ui/button"import { DialogActionTrigger, DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, Dial..

• format_list_bulleted Project/Forklog
• · 2024. 12. 27.
• textsms

프로젝트 작업일지 : 회원가입 (스프링 - 리액트 회원가입)

작업일지에 들어가며이전 프로젝트의 경우 멤버 테이블을 하나만 운영해서 프론트에서 데이터를 받아오고 DB에 저장하는데 크게 어려움이 없었다. 이번에는 멤버 테이블은 회원의 중요 정보를 담는 Main과 세부 정보를 담는 Detail로 나눠서 일대일 관계 설정이 되어있고,  또 Main 테이블은 회원 주소에 따라 위치 정보를 담는 location_roads 테이블과 다시 일대일 관계로 설정되어있다.  시작도 전에 난항이 생길 것 같은 기분이다.  아무튼 최선을 다해보자!회원가입 로직 구현 과정1. 테이블 구조 확인members_mainmembers_detaillocation_roads members_main을 기준으로 detail과 roads가 일대일 관계로 설정 되어있는 모습이다. 2. Entity데이터베이..

• format_list_bulleted Project/Forklog
• · 2024. 12. 24.
• textsms

프로젝트 작업일지 : 회원가입 (리액트 다음 주소 찾기 API)

작업일지에 들어가며이전 중간 프로젝트에서 JSP를 사용하여 카카오에서 제공하는 주소 찾기 API를 구현하였다. 이번 프로젝트는 리액트를 사용하기 때문에 처음에는 적용하기 어렵지 않으려나 생각했었는데 이미 여러 사람들이 리액트로도 API를 잘 구현하여 개인 블로그에 잘 정리하여 포스팅해주어서 잘 모르는 부분이나 에러가 나는 부분들은 쉽게 해결할 수 있었다. 내가 구현했던 과정을 하기에 좀 더 상세하게 기록을 남겨보겠다.리액트 다음 주소 API🙏 다음 우편번호 서비스카카오에서 제공하는 다음 우편번호 서비스 공식 설명 페이지이다.API의 특징과 기본 사용법이 아주 상세하게 설명되어있으니 처음 사용하는 사람들도 손쉽게 사용 가능하다. 하지만 본인은 공식 페이지의 설명만으로는 리액트에서 적용하기 쉽지 않아 쉽게..

• format_list_bulleted Project/Forklog
• · 2024. 12. 23.
• textsms

프로젝트 작업일지 : 회원가입 (폼 만들기_React Hook Form)

작업일지에 들어가며이전에 ERD를 어느정도는 구성했지만 테이블간 관계를 더 고려해봐야해서 데이터베이스가 없다. 그래서 DB와 프론트쪽으로 우선 업무를 간단히 분담하여 프로젝트를 진행하기로하였다. 나는 프론트 업무를 담당하게되어 이번 글에서는 리액트로 화면을 구성해보도록 하겠다. 우리는 이미 구현이 되어있는 템플릿 사용과 아니면 차크라UI를 사용하여 필요한 것들을 직접 만들어 사용할 지 논의했고, 템플릿을 사용하면 기존 코드를 해석하는 시간도 오래 걸리고 우리가 원하는 방향으로 수정하기 까다롭다고 판단하여 차크라 UI를 사용하여 화면을 만들기로 하였다.Chakra UI 사용 방법하기 차크라 UI 홈페이지에 들어가서 기본 세팅을 해주면 된다.1. 라이브러리 설치npm i @chakra-ui/react @em..

• format_list_bulleted Project/Forklog
• · 2024. 12. 23.
• textsms

React : 컴포넌트(Component)

컴포넌트(Component)리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)' 라는 단위를 사용한다.컴포넌트는 리액트의 핵심 단위로, 독립적이고 재사용 가능한 UI 조각이다.즉, 리액트에서 애플리케이션을 이루는 가장 작은 조각이라고 할 수 있겠다.리액트에서는 이러한 작고 독립된 코드의 파편을들을 조합하여 복잡한 UI를 구축할 수 있다.리액트 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 2가지로 나뉠 수 있으며,현재는 Hook의 등장으로 클래스형 컴포넌트보다 함수형 컴포넌트의 사용 빈도가 월등히 많다.✨ 하지만 하이테크한 로직이 있을 경우 클래스형 컴포넌트를 사용해주는 편이 더 좋아서 클래스형 컴포넌트를 잊어서는 안되겠다.컴포넌트의 구성 요소1. props- props는 부모 컴포넌..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms

React : props and state

propsprops(properties)란 컴포넌트가 외부에서 받는 데이터를 의미한다.즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.props는 읽기 전용 데이터이므로 전달받은 자식 컴포넌트 내부에서 직접 수정할 수 없다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능한 대신 props를 전달해준 부모 컴포넌트만 props를 변경하여 자식 컴포넌트가 변경된 데이터를 받게 된다.💡 props란?"props는 부모 - 자식 컴포넌트 간의 데이터를 전달하는데 사용되며, 상속받은 자식 컴포넌트 내부에서는 값이 변경 불가능한 readonly 데이터이다."props 예제App.js를 부모 컴포넌트라고 가정다른 컴포넌트(class type, function type)에 props로 데이..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms