아리의 개발 일상

이메일 인증- 앞서 스프링에서 이메일 인증을 하기위해 구글 이메일 설정및 앱 비밀번호 생성하는 부분은 생략하겠다. 1. 의존성 추가이메일 기능을 사용을 위한 의존성 추implementation 'org.springframework.boot:spring-boot-starter-mail' 2.application.yml 설정spring: mail: host: smtp.gmail.com port: 587 username: ${MAIL_USERNAME} password: ${MAIL_PASSWORD} properties: mail: smtp: auth: true starttls: enable: true ..

클라우드 타입을 이용하여 리액트, 스프링부트 배포 처음 배포할때에는 db와 서버는 클라우드 타입 리액트는 netlify로 배포하였다. 그러나 서로 도메인이 달라 cors문제가 발생하였고 이걸 해결하기 위해 이것저것 해봤지만 시큐리티의 세션을 쿠키로 전달하는 과정 때문에 대부분 막혀 결국 리액트도 크라우드 타입으로 같은 도메인은 사용하도록 배포하였다.  클라우드 타입으로 스프링부트 배포 하는법깃허브 레퍼지토리에서 자신의 스프링부트 레퍼지토리를 선택하고 그 후자신의 프로젝트에 맞는 자바 버전을 저기서 설정할 수 있다. 환경변수는이렇게 설정할수 있는데 이때 application.yml 파일에spring: profiles: active: ${PROFILE}profile는 환경변수가 집어넣을 파일명을 의미..

TaskHub 기술 스택1. FrontendReact:ReduxRouter2. BackendSpring Boot:Spring SecurityJPA3. DatabaseMySQL 기능로그인 : 시큐리티의 세션 기반 인증을 이용하여 로그인하고 리액트에서 세션값을 리덕스에서 관리todo : 사용자 개인의 todo 리스트 생성,저장,불러오기,삭제메시지 : 사용자 간 메시지 전송,수신,확인,삭제 동작과정메인 로그인 TODO메시지메시지 작성메시지 확인 향후보환 계획웹소켓을 추가하여 채팅기능등 여러 기능을 추가해볼생각OAuth2 로그인 추가UI 개선모바일 지원 결론TaskHub는 개인 생산성과 커뮤니케이션을 동시에 향상시키기 위해 설계된 프로젝트입니다.현재 기본 기능을 충실히 구현한 상태이며, 향후 WebSocket을..

TaskHub 프로젝트 개요목적: React와 Spring Boot를 사용하여 사용자 인증, 상태 유지, 메시지 전송 및 관리, TODO 기능을 제공하는 애플리케이션을 개발.주요 기능1. 회원가입기능: 사용자 계정을 생성하며, 아이디 중복 여부를 확인.세부사항:아이디 중복 확인 API 구현 (Spring Boot).회원가입 폼 유효성 검사 (React).비밀번호 해시 암호화 (Spring Security).2. 로그인기능: 사용자가 로그인하여 애플리케이션을 사용할 수 있게 함.세부사항:세션 기반 인증 (Spring Security).React에서 로그인 폼 구현 및 세션 토큰 관리.3. 리덕스를 이용한 로그인 상태 유지기능: 로그인 후 상태 정보를 Redux에 저장하여 상태 유지.세부사항:로그인 성공 시..

리액트 리덕스툴킷 사용법 리덕스 툴킷 설치npm install @reduxjs/toolkit react-redux  리덕스 툴킷 흐름1.적용할 컴포넌트 만들기2.슬라이스 3.스토어4.컴포넌트에 리덕스 적용하기 1.컴포넌트 import React from 'react';const Counter = () => { return ( Redux Toolkit Counter Increment Decrement Increment by 5 Count: );}export default Counter; 2.슬라이스 만들기슬라이스에서 액션함수와 리듀서 함수를 만들어 사용합니다.import {createSlice} from '@r..

리액트 기존 리덕스(redux) 사용방법전체 흐름Actions: 상태 변화를 위한 액션 정의 (INCREMENT, DECREMENT).Reducers: 액션을 처리하는 함수로, 상태(state)를 업데이트.Store: 상태 관리 중심. Provider로 앱과 연결.Components: store를 연결하여 랜더링 구현방법1. 액션 함수 정의-액션은 객체 형태로 애플리케이션에서 어떤 동작이 발생했는지를 설명하는 함수-type이라는 액션의 고유 식별자가 필수로 이었야 하면 상태 업데이트할 때 필요한 값을 포함할 수 있다.//액션타입정의const INCREASE = 'counter/+'const DECREASE = 'counter/-'// 액션 생성 함수 예시export const increase=()=>({..

리액트 라우터 사용법 라우터란?사용자가 페이지를 이동할때마다 새로운 html을 받아와 화면을 보여주는 방식이 아닌html을 한번에 받아와 실행시켜 필요한 데이터만 받아와 브라우저 주소의 경로에 따라 페이지를 보여준다. 라우터 설치 npm add react-router-dom 라우터 사용법 로 감싸여 그 안에 이동할 주소들을 담아서 사용한다.  pathimport React from 'react';import {Route,Routes} from 'react-router-dom'import TodoPage from '../page/TodoPage';import Home from '../page/Home';import AboutMe from '../page/AboutMe';const Path = ..

Ref 사용하는 이유Ref는 리액트 에서 DOM 요소에 직접 접근 할수 있도록 제공되는 기능으로 useState와 비슷하지만 차이점이 존재한다. Ref는 값을 변경시키지만 렌더링이 되지 않는다  즉 렌더링을 하고싶지 않은데 내부값을 수정하고 싶을때 사용한다 예시코드 import React, { useRef } from 'react';const FocusInput = () => { const inputRef = useRef(null); // ref 생성 const handleFocus = () => { inputRef.current.focus(); // input 요소에 포커스 }; const handleAlert = () => { alert(`입력된 값: $..

리액트 props 사용법props는 리액트 컴포넌트 간에 데이터 전달하는 데 사용된다.import React from 'react';import Greeting from './Greeting';function App() { const userName = "John Doe"; const userAge = 25; return ( Welcome to the Props Example! {/* 자식 컴포넌트에 props 전달 */} );}export default App;import React from 'react';function Greeting(props) { return ( ..