전체 글
-
[Project/FE] Redux를 활용한 차트 기간 상태 리팩토링Project/[Team]건강 관리 웹 사이트 2026. 2. 19. 13:41
📅 Today's Task[Front-End]1. redux 적용해 그래프/기록 화면의 사용자 선택 상태 부분 코드 수정 신체 기록 데이터를 시각화하는 차트 화면에서 주간 / 월간 / 전체 기간을 선택할 수 있는 UI를 구현했는데,처음에는 useState로 기간 상태를 관리했지만, 구조를 정리하면서 해당 상태를 Redux로 전환 🧩 기존 구조: useState로 관리하던 기간 상태 초기에는 차트 컴포넌트 내부에서 아래와 같이 기간 상태를 관리했다.const [mode, setMode] = useState("week"); 이 mode 값은 단순히 버튼 UI만 제어하는 것이 아니라,날짜 범위 계산 로직차트 데이터 가공 방식BarChart / LineChart 선택버튼 활성화 UI등 화면 전반의 ..
-
[Project/FE] TanStack Query 기반 신체 데이터 저장 컴포넌트 구현Project/[Team]건강 관리 웹 사이트 2026. 2. 10. 13:57
📅 Today's Task[Front-End]1. TanStack Query 기반 신체 데이터 저장/조회 컴포넌트 구현 [ TanStack Query 기반 신체 데이터 저장 컴포넌트 구현 ] 1) 컴포넌트 책임 분리: “UI/입력” vs “서버 저장/캐시” 컴포넌트 (src/components/BodyRecordCard.tsx)입력값 상태 관리(useState)저장 버튼 클릭 시 payload 구성저장 성공/실패에 대한 UI 피드백(알럿/에러 메시지) api (src/api/bodyRecords.ts)실제 HTTP 요청만 담당 (http.post, http.get)컴포넌트는 URL/axios 로직을 직접 몰라도 됨 hook(src/hooks/useSaveBodyRecord)서버 저장을 useMut..
-
[Project/FE] Axios 인터셉터 기반 Access/Refresh 토큰 자동 재발급 및 인증 처리 구현Project/[Team]건강 관리 웹 사이트 2026. 2. 6. 11:40
📅 Today's Task[Front-End]1. Axios 인터셉터 기반 Access/Refresh 토큰 자동 재발급 및 인증 처리 구현 axios에 쿠키 포함 옵션 추가 // 공통 axios 인스턴스const http = axios.create({ baseURL: "http://localhost:8080", withCredentials: true, // 쿠키 포함 });refreshToken이 HttpOnly 쿠키라서 이거 없으면 refresh 안 감 요청 인터셉터 → accessToken 자동 첨부 http.interceptors.request.use((config) => { const token = localStorage.getItem("accessToken");..
-
[Project/BE] Redis 사용해 Refresh Token 발급 구현Project/[Team]건강 관리 웹 사이트 2026. 2. 4. 09:22
📅 Today's Task[Back-End]1. Redis 사용해 Refresh Token 발급 구현 1) Refresh Token 설계Access Token: 짧게(15분) → Authorization 헤더(Bearer)Refresh Token: 길게(14일) → HttpOnly 쿠키(JS로 접근 못하게)서버는 Refresh Token을 Redis에 저장해서 “폐기/로그아웃/탈취 대응” 가능하게 2) 의존성 추가 (Gradle) 및 application.yml 설정 implementation 'org.springframework.boot:spring-boot-starter-data-redis'spring: data: redis: host: localhost port: ..
-
[Project/FE] Axios interceptor 기반 JWT 인증 처리 구현Project/[Team]건강 관리 웹 사이트 2026. 2. 3. 12:23
📅 Today's Task[Front-End]1. 회원가입/로그인 API 연결2. 테스트 API 1개가 AccessToken으로 통과되는지 확인 1) 회원가입/로그인 API 연결 로그인은,단발성 요청캐싱 필요 없음그냥 요청 → 토큰 저장 끝 굳이 TanStack Query까지 쓰면 오히려 오버엔지니어링 느낌이기 때문에 axios만 사용해 구현했다. TanStack Query는 데이터 조회 + 캐싱 + 자동 재요청 필요한 API 등에 사용하는게 좋다고 한다. axios 라이브러리 설치 후 아래처럼 코드 작성해주면 회원가입/로그인 API 연결 확인을 할 수 있다. npm install axios // src/utils/http.tsimport axios from "axios";// 공통 axio..
-
[Project/FE] React Hook Form 기반 회원가입 폼 구현Project/[Team]건강 관리 웹 사이트 2026. 2. 1. 14:07
📅 Today's Task[Front-End]1. 회원가입 / 로그인 UI 구현 react-hook form 라이브러리 이용+ 추후 zod 라이브러리 사용해 검증 부분 코드 개선 회원가입 전체 코드 import {useForm} from "react-hook-form";// 타입 정의type SignupFormValues = { email: string; password: string; passwordConfirm: string; name: string; number: string; gender: string; birth: string;};export default function SignupForm() { // useForm 꺼내쓰기 const { ..
-
[Project/BE] 예외 처리 개선 / @ExceptionHandler / @RestControllerAdviceProject/[Team]건강 관리 웹 사이트 2026. 1. 30. 11:11
📅 Today's Task[Back-End]1. 예외 처리 / 응답 형식 정리 1) 기존 방식: IllegalArgumentException("...") // AuthService.java @Transactional public void signup(SignupRequest req){ if(userRepository.existsByEmail(req.email())) { throw new IllegalArgumentException("이미 가입된 이메일 입니다."); }.... } @Transactional(readOnly = true) public String login(LoginRequest req){ Us..
-
[Project/BE] JWT 토큰 발급 / 회원가입, 로그인 API 구현Project/[Team]건강 관리 웹 사이트 2026. 1. 29. 12:46
📅 Today's Task[Back-End]1. User 엔티티 + Repository 만들기2. 회원가입 API 만들기 (POST /auth/signup)3. 로그인 API 만들기 (POST /auth/login)4. 테스트용 “로그인 필요 API” 하나 만들기+ 예외 처리/응답 형식 정리로그인 실패: 401토큰 없음/만료: 401권한 부족: 403 User 엔티티 + Repository 만들기 1. SecurityConfig 수정 ( /auth/** 열어야 로그인/회원가입 가능) SecurityConfig.java .authorizeHttpRequests(auth -> auth .requestMatchers("/health..