FineReport FCA 개념 정리 — 매개변수부터 보고서 설계, 데이터 입력, Tomcat 배포까지개요FineReport FCA 학습 자료를 기준으로 기본 개념을 정리했다.범위는 매개변수와 셀 설정부터 SQL, 데이터 입력, 서버 배포까지 꽤 넓다. 메뉴 이름만 외우면 비슷한 보기에서 헷갈리기 쉽다.특히 실제 값과 표시 값, 데이터 연결과 데이터셋, 반복 제목과 틀 고정은 따로 구분해서 봐야 한다.그래서 이번에는 보고서를 만드는 흐름에 맞춰 내용을 묶었다.데이터 연결 → 데이터셋 구성 → 매개변수로 조회 조건 전달 → 셀 확장과 보고서 설계 → 차트 구성 또는 데이터 입력 → 내보내기와 서버 배포기준 자료는 일반 FCA인 FanRuan Certified Reporting Engineer – ..

Next.js와 Supabase로 개인 리뷰 컬렉션 프로젝트이번 프로젝트는 영화, 애니, 게임, 드라마처럼 보고 나서 기록해두고 싶은 콘텐츠를 모아두는 개인 리뷰 컬렉션 웹앱이다.처음에는 단순히 리뷰 목록을 보여주는 정도로 시작했는데, 만들다 보니 로그인, 리뷰 작성/수정/삭제, 썸네일 업로드, 배포, 성능 측정까지 붙이게 됐다.기술 스택은 Next.js, Tailwind CSS, Supabase, Vercel을 사용했다.Next.js와 Tailwind CSS는 처음 써보는 입장에서 구조를 익히기 좋은 프로젝트였다.프로젝트 구조이 프로젝트는 Next.js App Router 구조를 사용했다.Next.js에서는 src/app 폴더 안의 파일 구조가 곧 라우팅 구조가 된다.src/app/page.tsx : ..

종이 경기표를 사진으로 찍어서 자동으로 점수를 입력하는 기능을 붙였다.이번 작업의 목표는 단순했다. 스캐너로 반듯하게 읽은 이미지가 아니라, 실제 현장에서 휴대폰으로 촬영한 사진도 최대한 안정적으로 읽어내는 것이었다.문제는 생각보다 까다로웠다.사진이 회전되어 들어올 수 있다.종이가 화면 중앙에 정확히 있지 않을 수 있다.조명 때문에 일부 영역이 밝거나 어두울 수 있다.같은 양식이라도 촬영 위치에 따라 좌표가 조금씩 밀린다.사용자가 칸을 완벽하게 칠하지 않을 수도 있다.그래서 이번 OMR은 “한 번 읽고 끝내는 방식”이 아니라, 여러 후보 이미지를 만들고 여러 보정값을 시도한 뒤 가장 신뢰도 높은 결과를 선택하는 구조로 만들었다.전체 구조구성은 다음과 같다.API 서버는 Node.js/Express이미지 ..

💰 환율·주가·유가 한눈에 — 금융 대시보드 만들어봤다🤔 "환율이 얼마지?" 할 때마다 네이버 켜는 게 귀찮아서 그냥 만들었습니다. 🧐 왜 만들었나해외직구, 여행 환전, 미국 주식까지 챙기다 보면 탭을 몇 개씩 열어놓게 된다.환율 → 네이버주가 → 증권사 앱유가 → 오피넷뉴스 → 또 다른 탭...이걸 하나로 합치면 어떨까?그래서 만들었다. 환율 / S&P500 / 유가 탭 3개짜리 대시보드. 🛠 기술 스택항목선택프레임워크React + Vite차트Recharts스타일CSS (다크/라이트 테마)배포- 📋 기능 소개💱 탭 1. 환율USD / JPY / EUR / KRW 실시간 환율 카드1주 / 1달 추이 라인 차트🧮 환율 계산기 — "100달러가 얼마야?" 즉시 계산📊 환전 타이밍 시그널 — 3..

더블 엘리미네이션 토너먼트 대진표 직접 구현개요이번 프로젝트에서 토너먼트 대진표 기능을 직접 구현했다.(쓸만한 프레임워크가 있었으나 너무 오래된것이었고, 원하는 기능이 없었음.)단순 싱글 토너먼트가 아니라 상·하위 더블 엘리미네이션(Double Elimination) 방식까지 지원해야 했다.라이브러리를 사용할 수도 있었지만, 커스터마이징 한계가 명확해서 처음부터 직접 구현했다.구현 범위는 크게 세 가지다.대진표 시각화 (SVG 커넥터 + 좌표 계산)경기 진행 (점수 입력, 상태 관리)토너먼트 진출 자동화 (승자/패자 자동 배정)대진표 레이아웃1. 단일 토너먼트 (좌 → 우)가장 기본적인 구조다.라운드가 증가할수록 오른쪽으로 배치한다.X 좌표: 라운드 기준 증가Y 좌표: 자식 매치의 중간값// 라운드마다 ..

개요기존에는 배포 과정이 완전히 수동이었다.웹(React)로컬에서 빌드 → PowerShell 스크립트 실행 → SCP로 서버 업로드API(Node.js)서버에 직접 SSH 접속 → git pull → npm install → pm2 restart이 방식은 다음과 같은 문제가 있었다.배포 과정이 번거롭다사람이 직접 실행해야 한다실수 가능성이 높다배포 이력이 남지 않는다그래서 GitHub Actions를 이용해 main 브랜치에 push하면 자동으로 배포되도록 CI/CD를 구축했다.프로젝트 구조 (Monorepo)3ch-project/├── 3ch-web/ # React + Vite 프론트엔드├── 3ch-api/ # Node.js + Express 백엔드└── .githu..