CI/CD 배포 경험
GitHub Actions, GitHub Pages, Vercel, Render, Cloudflare Pages 흐름을 프로젝트 성격에 맞게 정리했습니다.
CI/CD · Data Pipeline · Full-stack Portfolio
데이터 수집부터 배포 자동화까지 연결하는 웹 개발자
React/Vite 화면 구현, Spring Boot 비즈니스 로직, 외부 API 데이터 수집·가공, GitHub Actions 기반 자동화와 Cloudflare Pages 배포 구조까지 서비스 흐름 전체를 정리한 포트폴리오입니다.
5배포/시연 프로젝트
3데이터 파이프라인
CI/CD자동화·배포 경험
const portfolio = {
frontend: ["React", "Vite", "SPA UI"],
backend: ["Spring Boot", "Oracle", "API"],
pipeline: ["External API", "Node ETL", "Static JSON"],
deploy: ["GitHub Actions", "Cloudflare Pages", "Vercel", "Render"]
}
focus = "data → service → deploy"React
Spring
CI/CD
데이터 파이프라인
외부 API 수집 → 정규화 → 정적 JSON 생성 → React 화면 출력까지 가벼운 ETL 흐름을 구현했습니다.
API Key 보호 구조
민감한 키는 GitHub Secrets/서버 환경에서 사용하고, 프론트는 가공된 데이터만 조회하도록 구성했습니다.
역할·문제해결 중심
기능 나열보다 담당 도메인, 데이터 흐름, 오류 대응, 배포 개선 경험이 보이도록 구성했습니다.
Recommended Positioning
“데이터 기반 웹 서비스를 끝까지 연결하는 개발자”
포트폴리오의 방향은 단순한 사이트 모음이 아니라, 외부 데이터를 가져오고, 서비스 화면으로 가공하고, 사용자 기능과 배포 자동화까지 연결한 경험을 강조하는 쪽으로 잡았습니다. 면접에서는 데이터 흐름, CI/CD 자동화, 상태 변화가 있는 비즈니스 로직을 중심으로 설명하기 좋습니다.
Selected Works
프로젝트 컬렉션
각 프로젝트마다 서비스 목적, 핵심 기능, 담당 역할, 데이터 처리 경험, CI/CD·배포 경험, 사용 기술 스택을 빠르게 읽을 수 있도록 정리했습니다.
개인 프로젝트 · 농산물 가격 데이터 · 자동화 파이프라인
팜프라이스 노트
배추, 무, 양파, 감자, 대파, 오이 가격 추이를 비교하고 Gemini 기반 AI 리포트로 가격 흐름을 요약하는 데이터 시각화 서비스입니다.
- 최근 7/14/30일 가격 추이, 전일 대비, 평균/최고/최저가 표시
- KAMIS 실데이터 수집과 Gemini 리포트 생성을 GitHub Actions로 자동화
- React 화면은 API Key 노출 없이 정적 JSON만 조회하도록 구성
React 18ViteJavaScriptCSS3Fetch APIGitHub ActionsKAMIS APIGemini APIStatic JSONGitHub Pages
개인 프로젝트 · 공시 데이터 · ZIP/인코딩 처리
상장노트
OpenDART 공시 데이터를 기반으로 상장·공모청약 일정을 검색하고 상태별로 확인할 수 있는 포트폴리오 데모입니다.
- 회사명, 공시명, 주관사 검색과 진행 상태 필터 제공
- OpenDART 원문 공시 링크와 데이터 갱신 시점 표시
- adm-zip, iconv-lite를 활용해 압축·인코딩 이슈를 처리
React 18Vite 5JavaScriptOpenDART APINode.js Scriptadm-zipiconv-liteGitHub ActionsStatic JSONGitHub Pages
개인 프로젝트 · 최저가 주유소 · 좌표/가격 데이터
리터세이브
한국석유공사 오피넷 Open API 데이터를 활용해 유종과 지역별 최저가 주유소를 가격 낮은 순으로 조회하는 서비스입니다.
- 유종/지역별 최저가 주유소 목록, 평균가, 갱신 시점 표시
- 페이지네이션과 카카오맵 길찾기 버튼 제공
- Opinet API 데이터를 Node.js 스크립트로 수집해 정적 JSON으로 제공
React 18Vite 5JavaScriptCSS3Opinet APIproj4Node.js ScriptStatic JSONGitHub ActionsGitHub Pages
파이널 팀 프로젝트 · 콘텐츠 리뷰 플랫폼 · 프론트/백엔드 분리 배포
Review Tag
TMDB 기반 콘텐츠 탐색, 리뷰, 퀴즈, 출석, 포인트, 상점, 인벤토리, 관리자 기능을 연결한 영화·콘텐츠 리뷰 플랫폼입니다.
- 담당: 포인트 메인, 출석 캘린더, 일일 퀘스트, 룰렛, 선물, 상점, 위시리스트, 인벤토리, 아이콘 화면 구현
- 백엔드: 출석/퀘스트 보상, 구매/환불/선물, 포인트 이력, 관리자 포인트·상품 관리 API 구현
- 공통 Axios/Jotai 인증 구조와 포인트 화면 갱신 흐름을 정리해 사용자/관리자 화면을 일관되게 연결
Frontend
React 19Vite 7React RouterAxiosJotaiBootstrapSweetAlert2React Quill
Backend
Java 21Spring Boot 3.5Spring SecurityJWTMyBatisOracleSpringdoc OpenAPIWebSocket
세미 팀 프로젝트 · 반려동물 커뮤니티 · Render 배포
PETIQUE
반려동물 양육 정보, 커뮤니티, 분양 게시판, 후기, 마이페이지를 통합한 JSP 기반 웹 플랫폼입니다.
- 담당: 분양 리스트/상세, 신청자 관리, 신청·취소·승인·거절·완료 프로세스 설계 및 구현
- 상태별 버튼 노출, 작성자/신청자/방문자 권한 처리, 후기와 알림 동선 연결
- 분양글, 동물, 신청 이력, 후기 테이블 흐름을 기준으로 데이터 연동 로직 작성
Java 21Spring Boot 3.5Spring MVCJSPJSTLJdbcTemplateOracleMavenLombokJsoupSpring MailRender
CI/CD & Deployment
배포 자동화 경험
프로젝트 유형별로 다른 배포 전략을 사용했습니다. 정적 데이터 서비스는 GitHub Actions로 수집·빌드·배포를 자동화하고, 풀스택 프로젝트는 프론트/백엔드를 분리해 배포했습니다.
GitHub Actions 기반 정적 배포
개인 데이터 프로젝트에서 외부 API를 직접 브라우저에서 호출하지 않고, Actions 워크플로가 데이터를 생성한 뒤 GitHub Pages에 배포하는 구조를 사용했습니다.
GitHub ActionsSecretsnpm run buildGitHub Pages
프론트/백엔드 분리 배포
Review Tag는 React 프론트와 Spring Boot 백엔드를 분리해 배포하고, Axios 기반 API 통신 구조로 화면과 서버 기능을 연결했습니다.
VercelSpring BootREST APICORS
Spring Boot 서비스 배포
PETIQUE는 JSP/Spring MVC 기반 서비스를 Render 환경에 배포해 실제 URL로 접근 가능한 웹 서비스 형태로 구성했습니다.
RenderJava 21MavenOracle
Cloudflare Pages 배포 준비
현재 포트폴리오는 Cloudflare Pages에 맞춰 정적 빌드 결과물, 보안 헤더, SPA 라우팅용 redirects 파일을 포함했습니다.
Cloudflare Pagesdist_headers_redirects
Data Pipeline Experience
데이터 파이프라인 처리 경험
개인 프로젝트 3개는 “외부 데이터 → 가공 → 캐싱 → 화면 출력” 흐름이 공통입니다. 복잡한 대용량 파이프라인은 아니지만, 프론트 서비스에서 필요한 데이터를 안정적으로 제공하기 위한 실전형 처리 흐름을 경험했습니다.
1External API
KAMIS, OpenDART, Opinet 데이터 요청
2Collect Script
Node.js 스크립트로 수집·예외 처리
3Transform
정렬, 필터링, 인코딩, 좌표 변환
4Static JSON
프론트가 읽는 캐시 데이터 생성
5React UI
검색, 필터, 차트, 카드 UI 출력
팜프라이스 노트
KAMIS 가격 데이터를 수집한 뒤 기간별 통계와 Gemini 요약 리포트를 생성해 프론트에서 조회 가능한 JSON으로 제공합니다.
- 가격 데이터 정규화, 전일 대비 계산, 기간별 평균/최고/최저 추출
- AI 리포트 생성 결과를 정적 데이터로 저장해 화면 로딩 안정성 확보
상장노트
OpenDART 데이터의 압축 파일과 문자 인코딩을 처리하고, 공시·청약 일정 정보를 화면에서 검색하기 쉬운 구조로 변환합니다.
- ZIP 추출, 한글 인코딩 변환, 회사명/일정/상태 기준 정규화
- 갱신 시점을 표시해 사용자가 데이터 최신성을 확인할 수 있게 구성
리터세이브
Opinet 주유소 가격 데이터를 지역·유종 기준으로 정렬하고, 지도 이동에 필요한 좌표 데이터를 함께 가공합니다.
- 최저가 정렬, 평균가 계산, 페이지네이션용 데이터 구조 생성
- proj4 기반 좌표 변환으로 길찾기/지도 이동 동선 개선
Troubleshooting
문제 해결 경험
면접에서 설명하기 좋은 기술적 문제와 해결 방식을 별도 섹션으로 정리했습니다.
API Key 노출 위험
문제: 정적 React 사이트에서 외부 API를 직접 호출하면 API Key가 브라우저에 노출될 수 있었습니다.
해결: GitHub Actions/서버 환경에서 데이터를 수집하고, 프론트는 가공된 정적 JSON만 읽는 구조로 변경했습니다.
공시 데이터 압축·인코딩
문제: OpenDART 데이터 처리 과정에서 ZIP 추출과 한글 인코딩 변환이 필요했습니다.
해결: adm-zip과 iconv-lite를 사용해 데이터 추출·변환 단계를 파이프라인에 포함했습니다.
상태가 많은 도메인 로직
문제: 분양 신청, 승인, 거절, 완료처럼 사용자 역할과 상태에 따라 버튼과 동작이 달라졌습니다.
해결: 작성자/신청자/방문자 권한과 신청 상태를 기준으로 화면 조건과 서버 처리 흐름을 분리했습니다.
Stack Map
기술 스택 정리
프로젝트별 스택을 포트폴리오에서 한눈에 보이도록 영역별로 다시 묶었습니다.
Frontend
컴포넌트 기반 UI, SPA 라우팅, 상태관리, API 통신, 사용자 피드백 UI를 구현했습니다.
ReactViteJavaScriptReact RouterAxiosJotaiBootstrapCSS3
Backend
회원/인증, 포인트, 게시판, 분양 프로세스, 관리자 기능을 서버 단에서 검증하며 구현했습니다.
Java 21Spring BootSpring MVCSpring SecurityJWTMyBatisJdbcTemplateOracle
Data & API
외부 데이터를 수집·가공해 정적 JSON 또는 서비스 API로 제공하는 구조를 설계했습니다.
KAMISGeminiOpenDARTOpinetTMDBNode.js ScriptStatic JSONETL
CI/CD & Deployment
정적 사이트와 풀스택 서비스를 각각의 특성에 맞게 배포하고 자동화했습니다.
Cloudflare PagesGitHub PagesGitHub ActionsVercelRenderGitGitHubSecrets
Project Flow
구현 경험 흐름
-
2025.10
PETIQUE
Spring MVC/JSP 기반 반려동물 커뮤니티에서 상태가 변하는 분양 프로세스와 Render 배포 경험을 쌓았습니다.
-
2025.11 - 2025.12
Review Tag
React + Spring Boot 구조의 팀 프로젝트에서 포인트 도메인과 프론트/백엔드 분리 배포 흐름을 담당했습니다.
-
개인 프로젝트
Data Note Series
농산물 가격, 공시 일정, 주유소 가격처럼 외부 데이터를 자동 수집·가공하는 React/Vite 서비스를 배포했습니다.
Contact
데이터, 화면, 서버, 배포를 함께 이해하는 개발자를 목표로 합니다.
사용자 흐름을 끝까지 따라가며 화면, API, 데이터, 배포까지 연결하는 개발자가 되고 싶습니다. 이 포트폴리오는 Cloudflare Pages에 배포하기 쉽도록 정적 구조로 구성했고, CI/CD와 데이터 파이프라인 경험이 잘 드러나도록 정리했습니다.