PETIQUEJSP · jQuery · Spring MVC · Render
Backend · Web Developer
배포까지 고려해
문제를 해결하는
개발자
Java와 Spring 기반의 안정적인 백엔드 서비스, JSP/jQuery 화면 흐름, React 기반 데이터 프로젝트를 배포까지 연결해 정리했습니다.
Review TagReact · Spring Boot · Oracle
팜프라이스 노트공공데이터 · GitHub Actions
Featured
대표 프로젝트
Projects
전체 프로젝트
Data Flow
데이터 처리 흐름
☁외부 API 수집
→
▤데이터 정리
→
✓검증
→
{ }JSON 생성
→
▣화면 반영
Deployment
배포 경험
GitHub Pages개인 데이터 프로젝트 정적 배포
VercelReview Tag 프론트엔드 배포
RenderPETIQUE 서버 배포 및 환경 변수 관리
Cloudflare Pages포트폴리오 정적 배포
Records
개발기록
PETIQUE2026.01.08 리디자인 시작 · 2026.04.21 배포 검증 보강
기존 기능
분양 게시글, 신청, 예약, 완료, 취소, 후기 연결, 커뮤니티, 관리자 기능을 포함합니다.
보완 범위
JSP/jQuery 화면 흐름, 분양 상태 전이, CSRF 요청 공통 처리, PostgreSQL/Supabase와 Render 배포 설정을 정리했습니다.
핵심 로직
상태 변경 요청에서 권한과 상태를 함께 확인해 잘못된 상태 전이를 줄이는 방향으로 보완했습니다.
Review Tag2026.01.05 리디자인 시작 · 2026.03.24 토큰 오류 수정 · 2026.04.08 QA 항목 추가
기존 기능
영화·애니 리뷰, 게시판, 퀴즈, 출석, 포인트, 룰렛, 상점, 인벤토리, 관리자 기능을 포함합니다.
보완 범위
포인트 메뉴 흐름, 토큰 오류, 권한별 화면 노출, 관리자 화면 스타일 충돌 가능성을 정리했습니다.
핵심 로직
포인트 차감, 재고 감소, 인벤토리 지급이 한 흐름으로 처리되도록 트랜잭션 관점으로 정리했습니다.
팜프라이스 노트2026.03.02 기획 시작 · 2026.04.01 검증 로직 보강
문제
API 응답을 화면에서 바로 처리하면 예외 처리와 데이터 정리가 컴포넌트마다 반복됐습니다.
수정
수집 단계에서 데이터 형태를 맞추고 React는 정적 JSON만 읽도록 분리했습니다.
결과
API Key 노출 위험을 줄이고, 데이터 누락을 배포 전 단계에서 확인할 수 있게 했습니다.
상장노트2026.03.02 기획 시작 · 2026.03.26 자동화 흐름 정리
문제
OpenDART 데이터는 ZIP 파일과 한글 인코딩 처리가 필요해 화면에서 직접 다루기 어렵습니다.
수정
Node.js 처리 단계에서 압축 해제와 인코딩 변환을 수행한 뒤 JSON으로 저장했습니다.
결과
React 화면은 정리된 일정 데이터만 읽고 검색과 표시 역할에 집중하게 됐습니다.
리터세이브2026.03.02 기획 시작 · 2026.04.02 JSON 분리
문제
가격 데이터와 이력 데이터가 섞이면서 화면 코드가 복잡해졌습니다.
수정
현재 가격과 이력 데이터를 별도 JSON으로 분리하고, 필요한 데이터만 읽도록 구성했습니다.
결과
가격 비교와 필터링 중심으로 화면 코드를 단순화했습니다.
Problems
문제 해결 기록
API Key 노출 위험
브라우저 직접 호출 대신 수집 단계에서 데이터를 만들고 정적 JSON을 제공했습니다.
OpenDART 인코딩 처리
ZIP 추출과 인코딩 변환을 브라우저가 아닌 Node.js 처리 단계로 분리했습니다.
CSRF 요청 처리
JSP form, jQuery Ajax, fetch 요청 흐름에서 누락 가능성이 있는 보안 처리를 공통화했습니다.
토큰/권한 화면 처리
비회원, 회원, 관리자에 따라 버튼과 접근 흐름이 다르게 보이도록 점검했습니다.
Stack
기술 스택
Frontend
ReactViteJavaScriptjQueryHTML5CSS3Bootstrap
사용 위치: 팜프라이스 노트, 상장노트, 리터세이브, Review Tag, PETIQUE
Backend & View
Java 21Spring BootSpring MVCJSPJSTLJWTMyBatis
사용 위치: Review Tag, PETIQUE
Database
OraclePostgreSQLSupabaseSQLCRUD
사용 위치: Review Tag, PETIQUE
Deployment
GitHub ActionsGitHub PagesVercelRenderCloudflare Pages
사용 위치: 개인 데이터 프로젝트, Review Tag, PETIQUE, 포트폴리오
Contact
연락처
프로젝트와 개발 기록은 배포 화면 기준으로 정리했습니다.