Algorithm Cinema

이번 학기 전공수업 데이터베이스프로젝트 팀 프로젝트로 제가 동아리박람회때 혼자했던 프로젝트가 선정이 되어서 종합적으로 리펙토링이 필요했습니다. 먼저, 프론트엔드 인증 흐름을 개선하기 위해 Zustand 전역 상태 관리 + ProtectedRoute 도입 + AuthStore 리팩토링을 진행했습니다.1. 문제 상황로그인 후 상태가 유지되지 않아 새로고침 시 인증 정보가 사라짐.로그인 없이도 특정 페이지 접근이 가능했음.로그인/회원가입 플로우가 복잡해지면서 상태 관리와 라우팅 분리가 필요.2. Zustand 전역 상태 구축2.1 AuthStore 정의import { create } from 'zustand';import { persist, createJSONStorage } from 'zustand/midd..

0. 대상: 룰렛 기능 도메인DB 스키마(요약)users(id, name, gender, ...)prizes(경품 마스터)roulette_status(유저별 남은 시도)roulette_spins(스핀 히스토리)관계 요약users 1 ── 1 roulette_status (PK 공유)users 1 ── N roulette_spinsprizes 1 ── N roulette_spins1) 엔티티(Entity)1-1. User (기준 엔티티)package org.example.cowmatchingbe.domain;import jakarta.persistence.*;import lombok.*;import java.time.LocalDateTime;@Entity @Table(name="users")@Getter..

이번 포스팅에서는 룰렛 서비스 기능을 위한 JPA 엔티티와 레포지토리 계층을 어떻게 설계했는지 정리합니다. 단순히 코드만 보여주는 것이 아니라, 제가 학습하면서 가졌던 질문과 그 답변까지 함께 담아 두었어요. 앞으로 같은 길을 걷는 분들께도 도움이 되었으면 합니다 .1. 엔티티(Entity)란?먼저, 엔티티는 결국 자바 클래스입니다. 하지만 단순한 클래스와는 다른 특징이 있어요.@Entity 어노테이션이 붙어 있으면 JPA가 해당 클래스를 DB 테이블과 매핑해 줍니다.DB의 row 하나 = 엔티티 객체 하나로 연결됩니다.즉, SQL의 users 테이블 row 하나가 자바 코드에선 User라는 객체 하나가 되는 거죠.@Entity @Table(name="prizes")@Getter @Setter @NoAr..

1. Promise 기본 구조const promise = new Promise((resolve, reject) => { // 비동기 작업 if (성공조건) { resolve("성공 결과값"); } else { reject("에러 메시지"); }});핵심 포인트resolve(value) → 성공 시 Promise 상태를 fulfilled로 변경 + 결과값 전달reject(error) → 실패 시 Promise 상태를 rejected로 변경 + 오류 메시지 전달둘 다 선택 사항이지만 보통 둘 다 작성하는 게 좋음✅ resolve / reject는 필수 아님아무것도 호출하지 않으면 Promise는 pending 상태로 멈춤.보통은 둘 다 넣어서 정상 흐름과 오류 흐름을 명확히 구분해요.2. ..

자바스크립트 기본기자바스크립트를 처음 배우는 사람도, 실무 개발자도 이해할 수 있는 상세 온보딩 문서 오늘 다룬 모든 개념을 실제 사례와 코드 예시 중심으로 깊게 풀어냅니다.목차변수 선언 — var, let, const스코프(Scope) & 호이스팅(Hoisting)화살표 함수(Arrow Function)전개 연산자(Spread) & 나머지 연산자(Rest)객체 리터럴(Object Literal)과 구조분해할당반복문 & 배열 메서드 총정리비동기 처리 심화 — 콜백, Promise, async/await실무에서 API 통신 패턴베스트 프랙티스 & 주의할 점1. 변수 선언 — var / let / const자바스크립트에서 변수를 선언할 때 가장 먼저 배우는 것이 var, let, const입니다.1-1. v..

오늘은 "현재 등록된 사용자 수" 같은 집계값을 실시간으로 보여주는 기능을 추가했습니다. 처음 개발을 시작하는 분도 이해할 수 있도록, 백엔드 → 프론트엔드 → 개발 환경(proxy) 순서로 차근차근 설명드리겠습니다.1. 백엔드(Spring Boot)(1) DTO 만들기**DTO(Data Transfer Object)**는 프론트로 내려보낼 데이터를 담는 그릇입니다./src/main/java/org/example/cowmatchingbe/dto/SummaryDto.java:package org.example.cowmatchingbe.dto;public record SummaryDto(long totalUsers, long totalProfiles, long totalMatches, long distin..

가이드라인 문서입니다.1) 네트워크/아키텍처 기본 결정VPC: 기본 VPC 또는 별도 VPC 사용.서브넷:EC2(백엔드): 퍼블릭 서브넷(인터넷 게이트웨이 경유) — 초기에는 8080로 바로 접근, 이후 Nginx/ALB로 80/443 전환 권장.RDS(MySQL): 프라이빗 서브넷 2개 이상(각기 다른 AZ) — Public accessibility: No.보안그룹(SG): EC2와 RDS 각각 별도 SG 생성. RDS는 특정 EC2 SG만 허용(IP가 아니라 SG 참조)로 잠금.2) 보안그룹 설계sg-ec2-cow (백엔드용)Inbound22/tcp : 내 IP/32 만 허용(SSH)8080/tcp : 초기 개발 단계에서만 0.0.0.0/0 허용(테스트 후 삭제 권장)Outbound기본 All tra..

목표: Vercel(프론트) ↔ EC2(Spring Boot) ↔ RDS(MySQL) 전체 체인 연결, 실전 이슈 디버깅, 재발 방지용 런북 정리.TL;DR프론트 → 백엔드 통신: 브라우저 HTTPS에서 백엔드 HTTP 호출로 Mixed Content가 발생. → vercel.jsonRewrites로 Vercel이 HTTPS에서 프록시하여 해결.엔드포인트 불일치: 프론트가 /api/stats를 때렸으나 백엔드는 /api/stats/{userId} 또는 /api/metrics/summary. → 프론트 API 경로/타입 정리.Vercel 빌드 에러: TS6133(미사용 import), TS2345(타입 불일치). → 미사용 제거 + studentId 타입 정렬(숫자 변환).EC2 백엔드 실행: nohup ..

풀스택 작업 중 명세서 부재로 인한 불편감이 있어서도메인 → 레포지토리 → 서비스 → 컨트롤러 → 프론트 연동 순서로 전체 흐름과 API 스펙을 아주 쉽게 정리했습니다.0. 한눈에 보기Base URL (로컬): http://localhost:8080패키지 구조(권장)domain — JPA 엔티티(=DB 테이블 매핑)repository — DB 접근 계층(JpaRepository)service — 비즈니스 로직/트랜잭션controller — HTTP 요청/응답(REST API)config — CORS, MVC 설정 등db/migration — Flyway 마이그레이션 스크립트(V1, V2 ...)응답 JSON 네이밍: 자바 camelCase 기준 (userId, instaProfile 등)프론트 axios..

대상: 신입/합류 개발자목표: 두 위젯을 빠르게 이해하고, 팀의 코드/디자인 규칙에 맞춰 안정적으로 개발·확장할 수 있도록 한다.위젯학사일정 텍스트 전용 패널(달력 그리드 없음)자유게시판 HOT 게시물 리스트(로그인 게이팅)0. 스택 & 전제Next.js/React 18, TypeScript (strict), Tailwind CSS, Zustand(전역 인증), react-icons(아이콘)디자인 토큰: mju-primary, grey-40 등 (Tailwind theme.extend.colors에 등록되어 있어야 함)API 모듈: getAcademicEvents, getBoards (서버 응답이 케이스별로 달라질 수 있음 → 안전 파서 필요)// tailwind.config.{js,ts} 예시expor..