turin's blog

만들고, 터지고, 기록합니다

풀스택, Flutter, 서버 운영, SEO, 배포 삽질을 실제 프로젝트 기준으로 정리합니다. 검색해서 들어온 사람이 바로 쓸 수 있는 체크리스트와 명령을 남기는 게 목표입니다.

1175published
8topics
kopractical notes

자주 다루는 주제

주제별로 빠르게 훑어보기

웹 개발350Next.js283서버 운영165Docker110API80TypeScript58DB50Flutter39

전체 글

운영 중 부딪힌 문제를 검색 의도에 맞춰 정리

Next.js

Next.js 서버 컴포넌트가 로그인 직후 이전 쿠키를 읽은 리다이렉트 문제

로그인 직후 보호 페이지가 다시 로그인 화면으로 돌아간 원인을 요청 경계에서 찾은 기록

·1분 읽기
서버 운영1분 읽기

Nginx 정적 파일 캐시를 무효화하지 못한 배포 실수와 해시 기준

CSS를 수정했는데 일부 사용자에게 이전 화면이 남은 배포 실수를 파일명 해시와 캐시 헤더로 나눠 해결한 기록

계속 읽기 →
Next.js1분 읽기

검색 페이지의 canonical URL을 한 가지 규칙으로 고친 SEO 비교 글

쿼리 파라미터가 붙은 검색 결과가 색인되던 문제를 canonical과 noindex의 역할을 비교해 정리한 글

계속 읽기 →
CI/CD1분 읽기

GitHub Actions에서 빌드와 배포 환경 변수를 분리한 CI 수정 회고

로컬에서는 통과하지만 배포에서 API 주소가 비어 있던 CI 문제를 변수의 사용 시점별로 나눈 회고

계속 읽기 →
서버 운영1분 읽기

Ubuntu 배포 서버에서 파일 권한을 숫자보다 소유자로 점검한 설정 노트

배포 뒤 업로드 파일만 읽히지 않던 문제를 권한 숫자 암기 대신 사용자와 그룹 기준으로 확인한 방법

계속 읽기 →
Next.js1분 읽기

React 폼 제출이 두 번 실행된 원인을 버튼 상태로 좁힌 기록

엔터키와 클릭이 겹친 폼에서 중복 요청이 발생한 상황을 재현하고 제출 상태를 한 곳에서 관리한 과정

계속 읽기 →
서버 운영1분 읽기

journalctl 로그가 디스크를 채운 뒤에야 만든 Linux 보존 기준

로그가 원인을 알려주는 동시에 디스크를 소비한다는 사실을 놓친 운영 실수를 정리했다

계속 읽기 →
Next.js1분 읽기

React 낙관적 업데이트를 되돌릴 때 원본 상태를 보존한 짧은 튜토리얼

좋아요 API가 실패해도 정확히 이전 화면으로 돌아가도록 만든 구현을 정리했다

계속 읽기 →
Docker1분 읽기

Docker 컨테이너가 살아 있는데 서비스는 죽어 있던 healthcheck 비교

프로세스 존재와 실제 요청 가능 상태를 나눠 Docker healthcheck를 설계한 비교 노트다

계속 읽기 →
API1분 읽기

PostgreSQL 커넥션 풀이 먼저 고갈된 API 장애를 추적한 과정

CPU와 메모리는 여유로운데 요청이 멈췄던 장애에서 커넥션 풀 대기 시간을 먼저 확인한 기록이다

계속 읽기 →
Docker1분 읽기

Next.js metadataBase를 지정하지 않아 OG 이미지가 빠졌던 설정 노트

로컬에서는 멀쩡했지만 공유 카드에서 이미지가 사라졌던 원인을 metadataBase와 절대 URL 기준으로 정리했다

계속 읽기 →
Next.js1분 읽기

로그 레벨을 운영에서 DEBUG로 둔 실수와 재발 방지 기준

운영 서버의 로그가 갑자기 폭증했던 원인을 배포 설정에서 찾고, 로그 레벨과 민감정보 점검 기준을 다시 세웠습니다.

계속 읽기 →
DB1분 읽기

PostgreSQL 백업 파일을 복원하기 전 확인한 운영 체크리스트

백업 파일이 있다는 사실만으로 복구 준비가 끝난 것은 아니었습니다. 복원 전 검증 항목과 안전한 순서를 기록했습니다.

계속 읽기 →
웹 개발1분 읽기

Cloudflare 캐시와 브라우저 캐시를 나눠서 확인한 배포 비교 노트

배포했는데 내 브라우저에서만 이전 화면이 보였던 상황을 CDN 캐시와 브라우저 캐시로 나눠 진단한 방법입니다.

계속 읽기 →
Next.js1분 읽기

React 키보드 단축키가 입력창에서 실행된 문제를 막은 짧은 튜토리얼

문서 전체에 등록한 단축키가 검색창의 글자 입력까지 가로채던 문제를 이벤트 대상 검사로 분리했습니다.

계속 읽기 →
서버 운영1분 읽기

Vite 개발 서버에서만 보이던 경로 오류를 base 설정으로 고친 기록

개발 환경에서는 정상인데 정적 배포 후 자산 경로가 깨졌던 원인을 base 설정과 브라우저 요청 주소로 좁힌 과정입니다.

계속 읽기 →
Next.js2분 읽기

사이드 프로젝트 공개 전 점검한 SEO와 보안 체크리스트

작은 웹 서비스를 공개하기 전 검색 노출, 오류 페이지, 비밀값, 헤더를 함께 확인한 실전용 사전 점검표입니다.

계속 읽기 →
DB2분 읽기

SQLite에서 PostgreSQL로 옮기며 날짜와 NULL을 다시 검증한 회고

작은 서비스의 데이터베이스를 옮길 때 날짜 비교와 NULL 처리 차이로 생긴 오류를 검증 기준과 함께 기록했습니다.

계속 읽기 →
Next.js2분 읽기

React 모달을 닫은 뒤에도 요청이 상태를 바꾸던 문제를 정리한 튜토리얼

모달을 빠르게 열고 닫을 때 늦게 도착한 응답이 화면 상태를 덮어쓰지 않도록 AbortController를 적용한 방법입니다.

계속 읽기 →
서버 운영1분 읽기

Nginx 업로드 413을 제한값과 타임아웃으로 나눠 고친 과정

파일 업로드가 간헐적으로 실패할 때 요청 크기와 응답 대기 시간을 구분해 수정한 트러블슈팅 기록입니다.

계속 읽기 →
Next.js1분 읽기

Next.js 환경변수가 브라우저에서 비어 있던 원인 추적기

로컬에서는 보이는데 배포 화면에서만 API 주소가 사라졌던 문제를 빌드 시점과 실행 시점으로 나눠 확인한 기록입니다.

계속 읽기 →
웹 개발1분 읽기

배포 직후 10분 점검 순서를 만든 운영 회고

CI 성공과 실제 서비스 정상 사이를 확인하는 회고입니다.

계속 읽기 →
Next.js1분 읽기

React 검색 결과가 오래된 응답으로 바뀌지 않게 막은 방법

debounce와 AbortController를 함께 적용한 튜토리얼입니다.

계속 읽기 →
웹 개발1분 읽기

웹훅 서명 검증에서 원문 본문을 먼저 읽어야 했던 이유

JSON 파싱 전 원문으로 서명을 검증하는 체크리스트입니다.

계속 읽기 →