아리의 개발 일상

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

리액트 리덕스툴킷 사용법 리덕스 툴킷 설치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 = ..

토이프로젝트 sns 만들어보기 1 현재까지 회원가입과 로그인 페이지를 완성하였다.  회원가입 페이지 회원가입을 하기 위해서 아이디 중복 확인과 이메일 인증을 해야지 회원가입이 가능하게 만들었다, db 테이블은 id, userid는 실재 유저 아이디 , pw는 유저 패스워드로 암호화하여 저장하였다  암호화할 때 BCryptPasswordEncoder 이걸 사요용하였다 그 외의 필드는 이름, 권한, 이메일 만든 날짜를 기입하게 만들었다. 회원가입할때모든칸을 다 채우고 아이디 중복확인을 하여 통과 할경우에만 이메일 인증 번튼이 작동하고 클릭하면 적은 이메일로 인증 번호가 이메일로 온다. 아이디 중복 확인 코드 컨트롤러 @GetMapping("/signup/idpass") public String..

[리액트 프로젝트] 프로젝트명 Tourify 기획서Tourify 프로젝트 기획서1. 프로젝트 개요Tourify는 한국의 다양한 관광지 정보를 제공하는 웹 애플리케이션입니다. 관광 목적지 추천 및 상세 정보 제공뿐만 아니라 사용자 간의 소통과 정보 교환을 위한 커뮤니티 서비스를 제공합니다. 2. 프로젝트 목표한국의 다양한 관광지 정보를 사용자에게 제공한다.사용자가 여행 계획을 세우는 데 도움을 준다.사용자 간의 소통과 정보 공유를 촉진한다.3. 프로젝트 내용사용자 인증 및 회원가입 기능관광지 목록 및 상세 정보 표시사용자 간의 게시판 기능 제공관광지 추천관광지 행사 대한 정보 제공4. 프로젝트 일정시작일: 2024년 4월 22일종료일: (일정에 따라 작성)5. 사용한 기술 스택Frontend: React,..