Algorithm Cinema

React로 프로젝트를 하다 보면 Prettier로 코드 포맷을 맞추고, Tailwind CSS로 스타일을 작성하게 됩니다. 두 도구를 그냥 쓰면 className 안에 나열한 Tailwind 클래스 순서가 제각각이라, 저장할 때마다 Prettier가 순서를 바꿔서 의미 없는 diff가 많이 생깁니다.Prettier와 Tailwind를 같이 쓰면서, Tailwind 권장 순서로 클래스를 자동 정렬하는 설정을 정리해 봤습니다.ESM 프로젝트에서 Prettier 설정 파일을 둘 때 겪을 수 있는 문제와 해결 방법도 포함했습니다.Prettier는 코드 정리 도구보다 프로젝트 내부의 표현 방식 통일로 이해하자.Prettier는 보통 “들여쓰기/따옴표/세미콜론 같은 코드 정리 도구”로만 생각하기 쉬운데, 실제로는..

이미 git push로 올려버린 커밋을 없애고 싶을 때가 있습니다.예: 커밋 메시지를 잘못 썼다, Co-author가 잘못 붙었다, 작업 단위를 나누고 싶다.위같은 원인들이 유명하죠. 변경된 코드는 그대로 두고, 히스토리에서만 해당 커밋들을 없애는 방법을 정리했습니다.커밋을 없애거나, 원격 브랜치 내용을 바꾸는 것을 AI에게 해줘~ 하다간 큰일 날 수 있습니다. 그러나 이건 3가지 전제조건이 필요한 매우 조심해야하는 방법입니다. 애시당초에 커밋과 푸쉬는 조심해야하죠.Git도 결국 “일관된 히스토리(=데이터)” 를 여러 사람이 공유하는 시스템이며DB에서 롤백 + 강제 반영 같은 고위험 작업에 가깝습니다.전제 조건 3개가 필요합니다.되돌릴 커밋이 이미 원격에 push된 상태아직 그 브랜치를 pull 받은 ..

1. 개요이번 서버 리팩토링 이후 새로운 배포 과정에서 다음 두 가지 운영 이슈가 발생하였다.JWT 관련 필수 환경변수 미설정으로 인한 애플리케이션 부팅 실패Swagger 서버 URL이 로컬 환경으로 고정되어 발생한 실행 혼선본 문서는 각 이슈에 대해 장애 증상, 원인 분석, 대응 조치 및 재발 방지 방안을 정리하여,향후 유사 장애 발생 가능성을 최소화하는 것을 목적으로 한다.2. 장애 원인 ①JWT 환경변수 누락으로 인한 애플리케이션 기동 실패2.1 장애 증상배포 이후 애플리케이션이 정상적으로 기동되지 않았으며,Coolify 로그 상에서 다음 에러가 반복적으로 출력되었다. Error: JWT_SECRET is required 해당 에러로 인해 컨테이너가 지속적으로 재시작되는 현상이 발생하였다.2.2 원..

0. 이 글에서 다루는 것Next App Router로 프로젝트를 옮기다 보면 가장 먼저 막히는 지점이 있습니다.app/layout.tsx에는 {children}밖에 없는데,Next는 어떻게 “지금 어떤 페이지를 렌더링해야 하는지” 알고 있을까?Vite + React Router에 익숙하다면 이 구조가 꽤 낯설게 느껴집니다.아래 네 가지 주제를 토대로 정리합니다.라우팅이 무엇인가?Vite 방식과 Next App Router 방식은 무엇이 다른가?실제 프로젝트에서 도메인(admin.)에 따라 레이아웃을 분기하는 법가드 로직은 어디에 두는 게 좋은지에 대한 개인적인 생각1. 라우팅이란 무엇인가라우팅은 결국 이 질문에 대한 답입니다.“현재 URL 요청에 대해 어떤 화면(컴포넌트) 을 보여줄 것인가?”브라우저가..

로컬 개발 환경에서 문제없이 동작하던 백엔드와 데이터베이스를 클라우드엔지니어님이 제공해주신 환경으로 이전하는 작업을 진행하였습니다.이번 글에서는 Coolify를 처음 전달받은 상황부터, DB 연동 → 백엔드 배포 → 자동 배포(Webhook) → 마이그레이션 자동화까지실제로 설정하며 확인한 기준과 이유를 정리합니다. Coolify는 무엇이며, 어떤 위치의 서비스인가클라우드 엔지니어로부터 다음과 같은 관리자 페이지를 전달받았습니다. https://admin.eternalmarketing.co.kr/ 이는 EC2 인스턴스 자체가 아니라,EC2 위에 설치된 Coolify 관리자 콘솔입니다.정리하면 구조는 다음과 같습니다.EC2 인스턴스: 인프라 레벨 (클라우드 엔지니어가 관리)Coolify: EC2 위에서 동..

반성하며 시작 : 로그인을 대충 이런 느낌으로 어림짐작 했던 나프론트엔드 개발자나 클라이언트 입장에서의 로그인은 이런 느낌일것입니다.“로그인 요청을 보내면 서버에서 토큰이 온다” → “그 토큰을 저장하고 요청 헤더에 붙인다” → “서버는 그 토큰을 확인하고 권한을 부여한다” 이 3가지 흐름은 명확하게 알고 계십니다. 그러나, 백엔드 코드를 직접 작성하는 백엔드 개발자에서의 시선은 여기서 한단계 더 내려갑니다.“토큰은 누가 어떤 정보로 만들어야하지?”“서버는 토큰을 어떻게 믿지?”“토큰이 만료되면, 왜 RefreshToken이 필요하지?”로그인 성공은 단순하지 않다.로그인 시스템을 구현할때는 보통 두 단계를 고려합니다.먼저 인증(Authentication)을 하겠습니다.“로그인 하려고 하는 너는 도대체 누..

2. Repo: PostRepo.ts (DB 접근 “전담”)레포지토리 계층은 한마디로 “Sequelize 쿼리 모음집”입니다.다시 말하면, 서비스 컨트롤러는 더 이상 PostModel.findAll()같은 야생의 쿼리를 사용하지 않고, PostRepo.create()와 같은 메서드만 호출하면 DB작업이 끝나도록 처리합니다.이렇게 분리해두면, 나중에 DB를 변경해야할 소요가 있거나, 쿼리 최적화를 위해 인덱스를 조정하거나, 캐싱 레이어를 추가하고 싶을때 서비스/컨트롤러 코드는 최대한 손대지 않을 수 있습니다.2-1. create(data, imageUrls) : 게목표: post 하나 만들고, 이미지 URLs도 별도 테이블에 저장.const post = await PostModel.create(data);..

본 문서는 공동구매 플랫폼의 백엔드 개발자로 참여하며 학습한 내용을 바탕으로, Node.js(Express) + Sequelize + MySQL을 활용한 백엔드 구조를 체계적으로 정리한 가이드입니다. 단순 구현 방식만을 나열하는 것이 아니라, 실제 개발 과정에서 마주한 문제 상황과 해결 과정, 그리고 그 안에서 얻게 된 인사이트를 함께 기록합니다. 이 문서에서는 Node.js 기반 백엔드를 구성하는 핵심 축인 모델(Model), 레포지토리(Repository), 서비스(Service), 컨트롤러(Controller), 그리고 애플리케이션의 시작점을 담당하는 서버(server.ts) 구조를 중심으로 설명합니다. 각 구성요소가 어떤 역할을 맡고 있으며, 실제 서비스 개발 과정에서 어떻게 유기적으로 연결되는지..

1. 기획 배경 — “하나의 페이지에 모든 걸 넣은 게 문제였다” 처음 식단 페이지를 만들 때는 MVP 수준으로 단일 컴포넌트에모든 로직(데이터 fetch, 상태, 날짜 이동, UI)을 넣어 빠르게 완성했어요. 하지만 그 구조는 다음과 같은 문제를 드러냈습니다. 모바일에서도 데스크톱용 주간 테이블이 그대로 표시되어 가독성이 나쁨브라우저 크기에 따라 한 컴포넌트 안에서 조건문이 난무함React Query / 상태 / 날짜 계산 로직이 뒤섞여 유지보수가 어려움간단한 변경도 “하루 걸리는 구조”가 됨 이 시점에서 UI 관심사와 데이터 로직을 분리하고, 기기별 UX를 맞추자는 기획이 시작됐습니다. 2. 리팩터링 방향성 — “역할 단위로 쪼갠다”우리는 React의 단일 책임 원칙(Single Responsib..

대상: 신입/합류 개발자목표: 두 위젯을 빠르게 이해하고, 팀의 코드/디자인 규칙에 맞춰 안정적으로 개발·확장할 수 있도록 한다.위젯학사일정 텍스트 전용 패널(달력 그리드 없음)자유게시판 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..