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..

아래 코드는 RTK Query의 공통 API 베이스 설정모든 서버 요청에 대해 기본 URL과 Authorization 헤더를 자동으로 설정함.import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";import type { RootState } from "../../app/store";export const baseApi = createApi({ reducerPath: "api", baseQuery: fetchBaseQuery({ baseUrl: import.meta.env.VITE_API_BASE_URL ?? "/api", prepareHeaders: (headers, { getState }) => { co..