프로그래밍/개인프로젝트

[프로젝트] 7. 오류페이지(일반) - 프론트화면(react)

이번에는 쉬어 갈겸 url잘못입력했을시 오류 페이지로 이동되는 페이지를 디자인 작업하였다.이쁘진않음.. 현재 라우터는 아래와같다. 만약 "/login22222" 으로 요청시 NotFound NotFound.jsximport "./NotFound.css";import { Link } from "react-router-dom";const NotFound = () => { return ( 404 페이지를 찾을수 없습니다. 죄송합니다. 더 이상 존재하지 않는 페이지입니다. 홈으로 );};export default NotFound; NotFound.css.notfound_wrap { heig..

2024. 9. 4. 10:40
프로그래밍/개인프로젝트

[프로젝트] 6. 로그인(일반) - 프론트화면(react)

저번에 spring boot에서 로그인후 JWT토큰 생성하고 응답 Header에 토큰 전송하는것까지 완료하였다.이번에는 react(처음써봄) 이용해서 비동기 통신 이용하여 로그인 기능 작성해볼려고한다. 우선 react에서 router-dom 설치해두었고,페이지이동을위한 router설정을 진행하였다.vite.config.jsimport { defineConfig } from "vite";import react from "@vitejs/plugin-react";// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], server: { proxy: { // "/api" 요청시 -> "http://localhost..

2024. 9. 3. 21:02
프로그래밍/개인프로젝트

[프로젝트] 5. 로그인(일반)

우선 회원가입보다 로그인기능을 먼저 작업할 생각이다.. 전체 구조1. Frontend - React - 로그인페이지 : 일반로그인 및 소셜 로그인 버튼을 제공함 - API 요청 : 사용자가 로그인 할 때, 서버에 요청을 보냄 - JWT 관리 : 서버에서 발급받은 JWT를 localStorage또는 sessionStorage에 저장함 2. Backend - Spring Boot - 일반 로그인 처리 : 사용자로부터 받은 비밀번호를 암호화(BCrypt)로 해싱하여 DB에 저장하고, 로그인시 해당 해시와 사용자가 입력한                                  비밀번호 비교함 - 소셜 로그인 : OAuth2를 통해 카카오와 네이버 로그인 기능 처리하고 로그인후 JWT발급 ㄴ 일단 소셜로그인은..

2024. 8. 29. 17:59
프로그래밍/개인프로젝트

[프로젝트] 4. 프로젝트 Entity

JPA 사용을 위한 Entity 작성을 하였다..JPA 처음사용하다보니 강의들었을때랑 실제 응용하는 부분에서 많이 어려웠다..어디 확인받을곳도없고 우선 ERD처럼 나오긴했는데아직 NOTNULL부분은 제대로 설정하진않았고 추후에 설정할예정그리고 언제든지 수정될수있음 .. 작성한 Entity 및 ENUM 파일 목록입니다. 1. ENUM 파일 목록Provider(소셜로그인시 소셜 업체)package dev.momory.moneymindbackend.entity;public enum Provider { KAKAO, NAVER, GOOGLE;} AuthProvider(회원가입 일반계정인지, 소셜계정 여부)package dev.momory.moneymindbackend.entity;public en..

2024. 8. 29. 11:18
프로그래밍/개인프로젝트

[프로젝트] 3. 프로젝트 폴더 구조

FRONT - REACTBACK - SPRINGBOOT Spring Boot 폴더 구조config/ : 애플리케이션 설정과 관련된 클래스들 포함합니다.controller/ : REST API 를 정의하는 컨트롤러 클래스들을 포함합니다.dto/ : 데이터 전송 객체(Data Transfer Objects) 클래스들을 포함합니다.exception/ : 사용자 정의 예외 예외 처리 클래스 포함entity: 데이터베이스 엔티티 모델 클래스 포함repository/ : JPA 레포지토리 인터페이스 포함service/ : 비즈니스 로직을 처리하는 서비스 클래스 들을 포함util/ : 유틸리티 클래스 포함 React  폴더 구조components/ : 재사용 가능한 React 컴포넌트 포함pages/ : 각 페이지에..

2024. 8. 28. 14:07
프로그래밍/개인프로젝트

[프로젝트] 2. ERD 및 테이블 정의서 작성하기

우선 프로젝트 주제는 개인 금융 관리 시스템 으로 정했고,    ERD 테이블 정의서1. USER(유저)컬럼명데이터 타입제약조건설명idINTPRIMARY KEY,AUTO_INCREMENT사용자 고유 식별자usernameVARCHAR(50)UNIQUE,NOT NULL사용자 이름emailVARCHAR(100)UNIQUE,NOT NULL이메일(로그인)passwordVARCHAR(255)NOT NULL비밀번호(암호화)profile_pictureVARCHAR(255) 프로필사진 URLcreated_atDATETIME 계정 생성 날짜updated_atDATETIME 계정 수정 날짜auth_providerENUM('local', 'naver', 'kakao', 'google') 로그인 타입provider_idVARC..

2024. 8. 28. 13:36