PETIQUE
반려동물 분양 서비스
Backend · Web Developer
배포까지 고려해
문제를 해결하는 개발자
React 기반 정적 서비스부터 Spring Boot, JSP, jQuery 기반 서버 프로젝트까지 작업했습니다. 프로젝트를 배포 화면 기준으로 확인하고, 데이터 처리·권한 검증·자동화 배포 흐름을 정리합니다.
PETIQUE
반려동물 분양 서비스
Review Tag
리뷰 기반 보상 서비스
팜프라이스 노트
농산물 가격 데이터
대표 프로젝트
대표 프로젝트
프로젝트
프로젝트 목록
개인 데이터 프로젝트와 기존 서비스 보완 프로젝트를 구분해 정리했습니다.
프로젝트 상세
PETIQUE
반려동물 분양, 후기, 커뮤니티를 한 흐름으로 연결한 웹 서비스입니다.
기존 서비스 보완
보완 범위
JSP와 jQuery 기반 화면 흐름을 유지하면서 분양 상태 전이, CSRF 요청 처리, Render/Supabase 배포 환경을 보완했습니다.
JSPjQuerySpring MVCPostgreSQLRender
2026.01.08 리디자인 시작 · 2026.04.21 배포 검증 보강 · 배포 중
분양 상태 전이
문제 신청, 승인, 완료 흐름에서 권한과 상태 검증이 필요했습니다.
해결 상태 변경 요청을 서버 기준으로 검증하고 화면에서는 상태별 버튼 노출을 정리했습니다.
CSRF 요청 처리
문제 JSP form, jQuery Ajax, fetch 요청이 섞이면 토큰 누락 가능성이 있습니다.
해결 요청 공통부에서 CSRF 값을 붙이도록 정리해 반복 코드를 줄였습니다.
배포 환경 보완
문제 Render와 Supabase 환경에서는 이미지, 메일, DB 연결 설정을 분리해 관리해야 했습니다.
해결 환경 변수와 외부 API 연동 흐름을 분리해 배포 환경에서 확인하기 쉽게 정리했습니다.
프로젝트 상세
Review Tag
영화·애니 리뷰 커뮤니티에 퀴즈와 포인트 보상 기능을 함께 넣은 서비스입니다.
기존 서비스 보완
보완 범위
리뷰 커뮤니티의 포인트, 퀴즈, 상점, 인벤토리 흐름을 정리하고 권한별 화면 노출과 토큰 오류를 보완했습니다.
ReactSpring BootOracleJWTVercel
2026.01.05 리디자인 시작 · 2026.03.24 토큰 오류 수정 · 배포 중
토큰 오류 처리
문제 로그인 상태에 따라 접근 가능한 화면이 달라져야 했고 토큰 만료 시 화면 흐름이 흔들릴 수 있었습니다.
해결 권한별 노출 조건과 요청 실패 처리를 다시 정리했습니다.
포인트 흐름 정리
문제 포인트 적립, 차감, 상점 구매, 인벤토리 지급 흐름이 화면마다 분산되어 보였습니다.
해결 포인트 관련 메뉴를 한 흐름으로 묶고 처리 순서를 설명 가능하게 정리했습니다.
관리자 화면 보완
문제 관리자 화면과 일반 화면의 스타일 충돌 가능성이 있었습니다.
해결 관리자 영역 클래스와 레이아웃을 분리해 유지보수하기 쉽게 정리했습니다.
개인 데이터 프로젝트
보완 범위
브라우저 직접 호출 대신 수집 단계에서 데이터를 정리하고, React 화면에서는 검증된 JSON만 읽도록 구성했습니다.
ReactViteKAMIS APIGitHub Actions
2026.03.02 기획 시작 · 2026.04.01 검증 로직 보강 · 배포 중
API Key 노출 위험
문제 브라우저에서 API를 직접 호출하면 Key 노출 가능성과 예외 처리 반복이 생깁니다.
해결 GitHub Actions 수집 단계에서 데이터를 만들고 정적 JSON으로 배포했습니다.
데이터 누락
문제 품목, 날짜, 가격 값이 비어 있을 때 화면이 깨질 수 있었습니다.
해결 배포 전에 필요한 값을 검사하는 검증 단계를 추가했습니다.
화면 가독성
문제 가격 흐름을 숫자만으로 보면 변화가 잘 보이지 않았습니다.
해결 품목 카드와 그래프형 화면으로 가격 변화를 볼 수 있게 정리했습니다.
개인 데이터 프로젝트
보완 범위
ZIP 추출과 한글 인코딩 처리를 데이터 처리 단계로 분리하고, 화면은 일정 표시와 검색에 집중하도록 구성했습니다.
ReactViteOpenDART APIGitHub Actions
2026.03.02 기획 시작 · 2026.03.26 자동화 흐름 정리 · 배포 중
ZIP/인코딩 처리
문제 OpenDART 데이터는 압축과 인코딩 처리가 필요해 화면에서 바로 다루기 어렵습니다.
해결 Node.js 처리 단계에서 압축 해제와 인코딩 변환 후 JSON으로 저장했습니다.
일정 상태 정리
문제 공시 원문만으로는 진행 상태를 빠르게 파악하기 어렵습니다.
해결 상태별 카드와 검색/필터 UI로 일정 정보를 정리했습니다.
갱신 흐름
문제 수동 데이터 갱신은 누락 가능성이 있습니다.
해결 GitHub Actions 기반 자동화 흐름으로 정적 데이터를 갱신하도록 정리했습니다.
개인 데이터 프로젝트
보완 범위
현재 가격 데이터와 이력 데이터를 분리하고, 화면에서는 정렬과 필터링에 집중하도록 구성했습니다.
ReactViteOpinet APIStatic JSON
2026.03.02 기획 시작 · 2026.04.02 JSON 분리 · 배포 중
빈 응답 처리
문제 요청 조건에 따라 데이터가 비어 올 수 있습니다.
해결 수집 단계에서 빈 응답을 확인하고 화면에는 안내 메시지를 표시하도록 했습니다.
데이터 파일 비대화
문제 가격 데이터와 이력 데이터가 섞이면 화면 코드가 복잡해집니다.
해결 현재 가격 JSON과 이력 JSON을 분리했습니다.
비교 기준
문제 사용자가 가격 차이를 빠르게 보기 어렵습니다.
해결 지역, 유종, 가격 기준 정렬 흐름으로 비교 화면을 구성했습니다.
개발기록
개발 일정
각 프로젝트에서 무엇을 만들고 보완했는지 작업 흐름 중심으로 정리했습니다.
- Review Tag 리디자인 시작
토큰 오류와 권한별 화면 노출 흐름을 다시 확인했습니다.
- PETIQUE 보완 시작
분양 상태 전이와 JSP/jQuery 요청 흐름을 정리했습니다.
- 데이터형 미니 서비스 3종 기획
팜프라이스 노트, 상장노트, 리터세이브를 같은 방향으로 기획했습니다.
- Review Tag 토큰 오류 수정
로그인 상태와 권한 조건에 따른 화면 흐름을 정리했습니다.
- 상장노트 자동화 정리
OpenDART 데이터 처리와 정적 JSON 흐름을 분리했습니다.
- 팜프라이스 노트 검증 보강
가격, 날짜, 품목 데이터 누락 여부를 배포 전에 확인하도록 정리했습니다.
- 리터세이브 JSON 분리
현재 가격 데이터와 이력 데이터를 분리했습니다.
- PETIQUE 배포 검증 보강
Render와 Supabase 배포 환경을 기준으로 설정을 점검했습니다.
문제 해결
문제 해결 기록
프로젝트에서 반복적으로 발생할 수 있는 문제를 구조적으로 정리했습니다.
API Key 노출 위험
브라우저 직접 호출 대신 GitHub Actions에서 데이터를 수집하고 정적 JSON으로 저장했습니다.
OpenDART 인코딩 처리
ZIP 추출과 한글 인코딩 변환을 Node.js 처리 단계로 분리했습니다.
정적 JSON 분리
가격 데이터와 이력 데이터를 나누어 화면에서 필요한 데이터만 읽게 했습니다.
CSRF 요청 처리
JSP form, jQuery Ajax, fetch 요청의 공통 처리 흐름을 정리했습니다.
토큰/권한 화면 처리
로그인 상태와 권한에 따른 버튼·화면 노출을 다시 정리했습니다.
기술 스택
사용 기술과 적용 위치
기술명을 단순히 나열하지 않고 어떤 프로젝트에서 사용했는지 함께 정리했습니다.
Frontend
ReactViteJavaScriptjQueryHTML5CSS3AxiosJotaiBootstrap
React는 데이터 프로젝트와 Review Tag, jQuery는 PETIQUE 화면 흐름 보완에 사용했습니다.
Backend & View
Java 21Spring BootSpring MVCSpring SecurityJWTJSPJSTLJdbcTemplateMyBatis
Review Tag는 Spring Boot, PETIQUE는 Spring MVC/JSP 기반으로 정리했습니다.
Database
OraclePostgreSQLSupabaseSQLCRUDTransaction
Oracle은 Review Tag, PostgreSQL/Supabase는 PETIQUE 배포 환경에서 사용했습니다.
Deployment
GitHub ActionsGitHub PagesVercelRenderCloudflare PagesGitHub Secrets
개인 데이터 프로젝트는 GitHub Pages, Review Tag는 Vercel, PETIQUE는 Render 기준으로 정리했습니다.
연락처
Contact
프로젝트와 포트폴리오 관련 연락은 아래 메일로 받을 수 있습니다.