turin's blog
만들고, 터지고,
기록합니다
풀스택, Flutter, 서버 운영, SEO, 배포 삽질을 실제 프로젝트 기준으로 정리합니다. 검색해서 들어온 사람이 바로 쓸 수 있는 체크리스트와 명령을 남기는 게 목표입니다.
자주 다루는 주제
주제별로 빠르게 훑어보기
전체 글
운영 중 부딪힌 문제를 검색 의도에 맞춰 정리
VPS 백업 파일로 실제 복구를 해 보니 빠진 설정이 있었다
매일 DB 덤프만 믿고 있다가 임시 서버에서 복구 리허설을 하면서 업로드 파일과 환경 변수 관리의 중요성을 알게 됐다.
Next.js 라우트 핸들러가 배포 뒤 예전 JSON을 계속 돌려준 캐시 문제
Route Handler의 캐시 정책을 명시하지 않아서 배포 후에도 이전 응답이 계속 내려왔던 상황을 확인 방법과 함께 정리했다.
계속 읽기 →블로그 글 목록이 KST 기준으로 하루씩 밀려 보이던 시간대 문제
UTC 저장값과 KST 표시를 섞지 않고 정렬은 타임스탐프로, 화면은 별도 함수로 통일하면서 혼란이 줄었다.
계속 읽기 →Docker Compose env_file을 수정했는데 컨테이너는 예전 값을 들고 있던 날
restart 명령은 환경변수를 다시 읽지 않으므로 up -d --force-recreate로 컨테이너를 새로 만들어야 했다.
계속 읽기 →검색창 디바운스를 넣었는데도 요청이 두 번씩 나가던 구조
디바운스된 검색어와 페이지 번호를 따로 관리하면서 동시에 두 effect가 트리거되던 문제를 상태를 묶어 해결했다.
계속 읽기 →프로세스가 떠 있는데 로그가 쌓이지 않던 권한 문제
systemd 서비스의 실행 사용자와 로그 파일 소유자가 다르면서 조용히 기록되지 않던 상황을 해결한 기록.
계속 읽기 →로컬에선 열리던 미리보기 링크가 배포 서버에서 404가 난 이유
관리자 페이지에서 동적 라우트 파일을 의심했던 문제가 사실은 상대 경로 생성 함수였다.
계속 읽기 →React 폼 검증이 실제 환경에서 다르게 작동할 때
폼 검증이 로컬에서는 정상이지만 배포 후 작동하지 않을 때, 렌더링과 이벤트 흐름을 점검하는 방법입니다.
계속 읽기 →React 입력 필드가 실제 서비스에서 다르게 작동할 때
모바일 환경에서 입력 필드가 로컬과 다르게 작동하면, 렌더링 조건과 이벤트 흐름을 체크하는 방법입니다.
계속 읽기 →Next.js 배포할 때 연결 문자열 에러 처음 볼 로그
Next.js 배포 후 데이터베이스 연결 문제가 발생하면, 처음 확인해야 할 로그와 설정입니다.
계속 읽기 →Nginx 서버에서만 실패할 때 확인하는 순서
로컬에서는 잘 작동하지만 Nginx를 통해서만 요청이 실패할 때, 단계별로 진단하는 방법입니다.
계속 읽기 →TypeScript 제네릭 타입 에러 확인하는 순서
TypeScript 제네릭을 사용할 때 타입 에러가 발생하면, 단계적으로 좁혀가며 원인을 찾는 방법입니다.
계속 읽기 →URL 슬러그가 검색에서 다르게 보일 때 확인하기
Next.js나 React에서 URL 슬러그가 예상과 다를 때, 로컬과 배포 환경의 차이를 빠르게 파악하는 방법입니다.
계속 읽기 →배포 전에 확인할 데이터 정렬 순서 점검법
데이터 정렬이 로컬과 배포 환경에서 다르게 작동할 때, 배포 전에 미리 확인할 항목들입니다.
계속 읽기 →데이터베이스 검색 기능 배포 전 점검법
데이터베이스 검색이 로컬에서는 잘 작동하는데 배포 후 실패하는 경우, 사전에 확인할 체크리스트입니다.
계속 읽기 →TypeScript 빌드는 성공인데 런타임 타입이 다를 때
TypeScript 컴파일은 통과하지만 런타임 데이터가 타입 정의와 맞지 않을 때 빠르게 찾아내는 방법입니다.
계속 읽기 →React 모바일 화면에서 레이아웃이 깨질 때 배포 전 확인사항
로컬에서는 멀쩡하던 모바일 레이아웃이 배포 후 깨지는 경우, 배포 전에 미리 확인할 사항들입니다.
계속 읽기 →배열 필터링 로직 안전하게 바꾸기
배열 필터링이 필요할 때 한 번에 정답을 노리지 말고 단계적으로 확인하면 훨씬 빠르고 안전합니다.
계속 읽기 →Next.js 배포 후 페이지 메타 태그가 다르게 보일 때
배포된 Next.js 사이트의 메타 태그나 og 이미지가 예상과 다를 때 빠르게 진단하는 방법을 정리했습니다.
계속 읽기 →Next.js 빌드 로그를 다룰 때
Next.js 배포 전에는 빌드 로그가 핵심이다. 검색으로 찾은 해결책도 바로 적용하기 전에 현재 빌드 상태를 먼저 파악하는 게 빠르다.
계속 읽기 →컴포넌트를 분리했을 때 폼이 불편해지면
React에서 폼 입력이 불편해지거나 느려지면 단순 렌더링 문제일 수도, 상태 관리 문제일 수도 있다. 확인 순서를 정해두면 빠르게 찾을 수 있다.
계속 읽기 →컨테이너는 실행 중인데 접속이 안 될 때
Docker 볼륨이나 포트 설정은 작은 실수 하나로 전체 시스템이 막힌다. 문제를 크게 잡지 말고 작은 단위로 확인하자.
계속 읽기 →날짜 필터로 대량 데이터를 다룰 때
정렬이나 필터링 로직을 수정할 때는 화면만 보지 말고 로그와 응답을 함께 확인해야 한다. 로컬과 운영 환경의 성능 차이가 크기 때문이다.
계속 읽기 →API 검증 순서를 체계적으로 잡기
검색으로 찾은 해결책도 로컬에서는 작동하는데 배포 환경에서는 다를 수 있다. 요청과 응답의 흐름을 정확히 이해하면 시간을 절약할 수 있다.
계속 읽기 →