FinTrack 프로젝트
1.[PostgreSQL] Docker 컨테이너 생성
도커에서 직접 컨테이너를 생성하는 것이 아니라 docker-compose.yml 파일을 만든 다음 실행시키면 도커가 알아서 컨테이너를 만들어준다. 1단계: docker-compose.yml 파일 만들기 프로젝트 루트 폴더에 docker-compose.yml를 작성한다
2.[PostgreSQL] 연결 테스트
지난 번에 도커에서 생성한 데이터베이스가 프로젝트와 잘 연결되는지 확인하고자 한다. 1단계: application.yml 설정 ddl-auto: update 엔티티 기반으로 테이블 자동 생성하는 코드이다. 테스트이기 때문에 잠시만 사용하고, 이후에는 Flyway 등
3.[JPA] JPA란? + @PrePersist, @PreUpdate
user 테이블을 설계할 때 @PrePersist와 @PreUpdate 어노테이션을 사용했다.@PrePersist와 @PreUpdate 은 Entity가 Persist(데이터베이스에 삽입) 또는 Update(데이터베이스에 수정)되기 전에 JPA Provider가 자동으
4.[Java] 비밀번호 검증 커스텀 어노테이션 적용하기 + 어노테이션 + 커스텀 어노테이션
https://velog.io/@potato_song/Java-%EC%96%B4%EB%85%B8%ED%85%8C%EC%9D%B4%EC%85%98-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%96%B4%EB%85%B8%ED%85%8C%EC%9D%B4%EC%8
5.[SpringBoot] 스프링 컨테이너의 작동 원리와 Bean 주입 과정
지난 컨텐츠를 작성하다가 스프링 컨테이너 등의 용어가 생소해 공부 및 정리가 필요한 것 같았다. 이번 기회에 스프링 컨테이너가 뭔지, 어떻게 작동하는지에 대해 정리하고자 한다. 1. 스프링 컨테이너란? 스프링 컨테이너는 객체(Bean) 를 생성하고, 생명주기를 관리
6.[Java] 회원가입 기능 코드 + Postman 테스트
컨트롤러 서비스 테스트 결과 1. 비밀번호 조건 미충족 결과 2. 비밀번호 확인 오류 <img src="https://velog.velcdn.com/images/tnfdus/post/1101b32b-53f9-41f6-8171-d6e63ac82258/image.
7.[Spring Security] Spring Security Filter Chain + JWT Filter 적용
프로젝트를 진행하다보니, 사용자 인증/인가 관련 개발을 할 때 Spring Security를 많이 사용했다. 선제적인 이론 공부 없이 코드를 작성하다보니 오류를 수없이 맞이하고 구글링을 반복하게 되어 개념 이해를 하고자 포스팅을 진행한다. 왜 인증과 인가가 필요한가?
8.로그인 기능 구현
이전 포스팅에서 JWT에 대해 언급했으니 이제 이걸 프로젝트에 적용한 내용에 대해 작성하고자 한다. 의존성 주입 jwt 라이브러리에 여러 종류가 있으나, 주로 사용되는 것은 JJWT와 Auth0이다. | 비교 항목 | JJWT (io.jsonwebtoken)
9.[Java] 지출 CRUD 구현
목표 사용자가 자신의 지출 내역을 등록하고 → 읽고 → 수정하고 → 삭제할 수 있도록 만드는 것(CRUD) 엔티티 DTO ExpenseCreateRequest, ExpenseUpdateRequest와 ExpenseResponse를 작성했다. 지출금액, 카테고리, 메모와 일시를 필요로 한다. ExpenseCreateRequest ExpenseUpdat...
10.[Java] 로그인 + 지출 CRUD Postman 테스트 + @AuthenticationPrincipal
로그인 테스트 결과 지출 등록 Postman에 JWT AccessToken 저장한 후 결과 지출 조회 등록한 지출을 조회하려고 GET Test를 했는데 
이전 구현 방식 처음 FinTrack 인증을 구현했을 때는 가장 흔한 방식인 JWT를 localStorage에 저장하는 방식을 사용했습니다. authStore.ts 이전 axios.ts — 모든 요청에 Authorization 헤더 수동 첨부 로그인 후 서버에서
13.[FrontEnd] Optimistic Update란?
⚡️ Optimistic Update란? 그리고 내 코드에 적용되어 있을까? 프론트엔드에서 UX를 크게 개선하는 패턴 중 하나가 Optimistic Update다. 이게 실제로 적용되어 있는지, 어디에 있는지, 체감 성능 차이는 어떤지까지 정리해봤다. ✅ Optim
14.[FrontEnd] 삭제 실행 취소 UX — setTimeout + Snackbar로 5초 유예 구현하기
지출 내역 페이지에는 삭제 버튼이 있다.기존에는 confirm() 팝업으로 한 번 더 물어보는 방식이었다.하지만 실제로 써보면 이런 문제가 있다.사용자가 무의식적으로 “확인”을 누름UX가 끊김실수 복구가 어려움그래서“삭제됨 → 실행 취소 가능”이 UX를 프론트엔드만으로