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

작업일지에 들어가며 이전 기능 구현에 이어 이번에는 사용자 정보를 입력받아 검증 후 비밀번호를 재설정하여 사용자 메일에 전송해주는 기능을 구현해보겠다. 🙏 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/Team
• · 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/Team
• · 2024. 12. 30.
• textsms

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

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

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

프로젝트 작업일지 : 로그인 (Spring Security - JWT - React)

작업일지에 들어가며이전 프로젝트에서는 다른 참고 자료들의 코드들을 보고 따라하는 수준으로 스프링 시큐리티와 JWT를 적용했다면 이번에는 시큐리티와 JWT에 대해 알고있던 얕은 지식과 학원 수업을 더해 진행해보겠다.  학원에서는 리프레쉬 토큰까지 배우지는 않았지만 이번 작업에서는 리프레쉬 토큰까지 구현해보도록 하겠다. 무난히 개발을 완료했으면 좋겠지만 오히려 많은 에러를 만나보는 것이 더 좋을 것 같다는 생각이 든다.JWT 개발 과정1. bulid.gradle JWT 의존성 추가dependencies { ... 생략 // JWT implementation group: 'io.jsonwebtoken', name: 'jjwt-api', version: '0.11.5' runtimeOnly group: ..

• format_list_bulleted Project/Team
• · 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/Team
• · 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/Team
• · 2024. 12. 24.
• 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

React : JSX(JavaScript XML)

JSX(JavaScript XML)이전 글에서 App.js 자바스크립트 파일 내에 코드를 변경하여 브라우저 화면(HTML)이 수정된 것을 확인할 수 있었다.원래 HTML의 변경은 .html 파일에 적어야 하지만 그런데 .js파일에 코드를 수정해도 HTML이 변경되는 이유가 뭘까?바로 App.js, return 내부의 코드들은 HTML코드가 아니기 때문이다. 바로 JSX 이다.JSX는 자바스크립트를 확장한 언어로 자바스크립트 파일 내에서 HTML코드를 사용할 수 있게 해준다.즉, 리액트는 JSX를 사용하여 HTML과 JavaScript를 결합한다.JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하며 가독성이 좋다.추가로 JSX에서는 HTML 태그들과 똑같이 사용..

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

React : 개요 및 개발환경 세팅

리액트(React)리액트는 사용자 인터페이스(UI)를 구축하기 위해 페이스북(메타)에서 개발한 자바스크립트 라이브러리이다.기존 HTML에서 사용자들을 가장 신경쓰이게 하는 점은 페이지 이동이나 새로고침 같은 화면 깜박임이다. 그래서 싱글 페이지 애플리케이션(SPA) 구현이 웹 개발에 있어서 가장 중요한 부분 중 하나이다. 이러한 SPA 구현 뿐만 아니라 컴포넌트 사용으로 재사용성 향상, 데이터가 HTML에 바로 렌더링되어 자동 반영 기능을 가지고 있는 React, Angular, Svelte, Vue, Preact 와 같이 유사한 기능을 제공하는 라이브러리가 많지만 그 중 전세계적으로 리액트를 가장 많이 사용하는데 이 점이 리액트가 가지는 큰 장점이다.리액트의 사용 사례로 대규모 데이터 기반 애플리케이션..

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