turin's blog
만들고, 터지고,
기록합니다
풀스택, Flutter, 서버 운영, SEO, 배포 삽질을 실제 프로젝트 기준으로 정리합니다. 검색해서 들어온 사람이 바로 쓸 수 있는 체크리스트와 명령을 남기는 게 목표입니다.
자주 다루는 주제
주제별로 빠르게 훑어보기
전체 글
운영 중 부딪힌 문제를 검색 의도에 맞춰 정리
React 컴포넌트 분리 후 화면이 렌더링되지 않을 때
컴포넌트 분리 후 UI 문제가 생기면 화면뿐 아니라 브라우저 콘솔 로그와 네트워크 탭의 API 응답까지 함께 확인해야 원인을 빠르게 찾을 수 있다.
Docker 컨테이너가 예상과 다르게 동작할 때
Docker 문제는 로컬과 운영 환경의 차이에서 발생하는 경우가 많은데, 포트 매핑과 환경변수를 먼저 확인하면 대부분 해결된다.
계속 읽기 →운영 DB를 건드리기 전에 확인해야 할 것
DB 스키마나 데이터를 변경하기 전에 백업 상태와 현재 상태를 명확히 하면 문제가 생겼을 때 빠르게 대응할 수 있다.
계속 읽기 →페이지네이션 구현 후 배포했을 때 확인할 것
페이지네이션 문제는 로컬과 운영 환경의 차이가 숨어 있을 때가 많은데, 빌드 결과와 실제 요청 상태를 비교하면 빠르게 찾을 수 있다.
계속 읽기 →배포 후 API 연동 문제를 빠르게 찾는 방법
API 요청/응답의 흐름을 체계적으로 확인하면 배포 후의 예상 밖의 문제도 원인을 빠르게 좁힐 수 있다.
계속 읽기 →검색 결과로 찾은 코드, 로컬에선 되는데 배포하면 안 될 때
로컬과 배포 환경의 차이를 체계적으로 확인하는 과정이 필요하다.
계속 읽기 →운영 DB를 다룰 때 꼭 지켜야 할 세 가지
스키마 변경 전에 백업, 변경 후에 검증, 문제 시 롤백. 이 순서를 거르면 안 된다.
계속 읽기 →Empty State 컴포넌트의 높이가 유독 크다면
HTML head와 빌드 결과를 함께 봐야 원인을 찾을 수 있다.
계속 읽기 →날짜 필드를 추가할 때 놓치기 쉬운 실수
created_at과 updated_at은 단순한 필드가 아니다. 타입, 기본값, 인덱스를 모두 확인해야 한다.
계속 읽기 →유니온 타입 때문에 배포가 깨질 때 보는 곳
TypeScript가 컴파일되지 않으면 배포 전 확인할 수 있다. 항상 타입 검사부터 하자.
계속 읽기 →배포 직후 CORS 에러가 터질 때 우선 확인할 로그
CORS 문제는 브라우저 콘솔에서도 보이지만, 실제 원인은 서버 로그에 있다.
계속 읽기 →Prisma migration을 개인 프로젝트에서 안전하게 실행하기
개인 프로젝트는 복잡한 배포 프로세스 없이 로컬에서 바로 DB를 수정한다. 롤백 계획부터 세워야 한다.
계속 읽기 →"컨테이너는 떠 있는데 접속이 안 될 때" 배포 전 점검표
네트워크 설정 미스가 대부분이다. 배포 전에 미리 확인하자.
계속 읽기 →docker-compose 환경에서 컨테이너가 자꾸 재시작되는 원인 찾기
로컬과 배포 환경의 환경 변수 차이가 가장 흔한 원인이다.
계속 읽기 →Next.js metadata가 예상과 다를 때 확인할 것
Metadata는 빌드 타임에 고정되고, 환경 변수 주입도 제한된다. 그래서 항상 헷갈린다.
계속 읽기 →Rate Limit 설정을 운영 중 바꾸는 게 위험한 이유
로컬 테스트는 통과했지만 배포 후 rate limit이 다르게 적용되는 현상을 겪은 후 배운 교훈.
계속 읽기 →Next.js 서버 컴포넌트 문제, props 로그부터 찍자
서버에서만 터지는 버그는 보이는 화면이 아니라 렌더링 단계부터 추적해야 한다.
계속 읽기 →페이지 로딩 속도가 갑자기 느려졌을 때 시작하는 방법
운영 중 페이지가 버벅거리기 시작했을 때, 어디서부터 디버깅을 시작할지 결정하는 체크리스트.
계속 읽기 →테이블 모바일에서 레이아웃이 깨질 때 대응하는 방법
반응형 테이블이 모바일에서 깨져 보일 때, 구조부터 CSS까지 확인하고 고치는 순서.
계속 읽기 →이미지 로딩 중에 입력이 먹히지 않는 UI 버그
사용자가 폼을 입력하는데 도중에 큰 이미지 로딩이 간섭해서 UI가 응답 안 할 때의 원인 파악.
계속 읽기 →Next.js 동적 라우트 공유 미리보기가 깨질 때
SNS에 공유된 동적 라우트 링크의 미리보기(og:image, meta 태그)가 안 보일 때 확인 순서.
계속 읽기 →메모리 사용량이 늘어나는 원인을 체계적으로 찾기
서버의 메모리가 자꾸 늘어날 때, 어느 프로세스가 문제인지 빠르게 진단하고 메모리 누수를 추적하는 방법.
계속 읽기 →502 Bad Gateway 배포 직후에 보이면 이렇게 확인하자
배포 후 502 에러가 나는 첫 15분, 어디를 먼저 봐야 하는지 정한 흐름.
계속 읽기 →Docker 이미지가 잘못 배포됐을 때 빠르게 확인하기
컨테이너 로그부터 이미지 태그까지, 배포된 버전이 정말 최신인지 확인하는 체크리스트.
계속 읽기 →