turin's blog
만들고, 터지고,
기록합니다
풀스택, Flutter, 서버 운영, SEO, 배포 삽질을 실제 프로젝트 기준으로 정리합니다. 검색해서 들어온 사람이 바로 쓸 수 있는 체크리스트와 명령을 남기는 게 목표입니다.
자주 다루는 주제
주제별로 빠르게 훑어보기
전체 글
운영 중 부딪힌 문제를 검색 의도에 맞춰 정리
모바일 Safari에서 100vh가 화면을 넘칠 때 바꾼 레이아웃 기준
iPhone Safari에서 하단 버튼이 주소창 뒤로 밀렸다. 100vh 대신 동적 뷰포트 단위를 적용하며 정리한 짧은 튜토리얼.
로그아웃 뒤 뒤로가기로 보이던 관리자 화면을 막은 기준
로그아웃 API는 성공했지만 브라우저 뒤로가기에 관리자 내용이 남았다. 인증과 캐시를 분리해서 점검한 보안 메모.
계속 읽기 →PostgreSQL 연결 수가 늘어날 때 Prisma 인스턴스를 먼저 의심한 회고
개발 서버를 저장할 때마다 PostgreSQL 연결이 늘었다. 쿼리보다 PrismaClient 생성 위치를 바꿔 해결한 회고.
계속 읽기 →Next.js error.tsx를 붙이고도 에러 화면이 안 나온 이유
App Router에 error.tsx를 추가했는데도 기대한 화면이 보이지 않았다. 경계의 범위와 reset 동작을 확인한 설정 노트.
계속 읽기 →CORS 에러를 프론트 수정으로만 풀려다 놓친 preflight 요청
브라우저 콘솔의 CORS 에러를 보고 API 코드부터 고쳤다가, OPTIONS 요청과 응답 헤더를 따로 확인하며 해결한 기록.
계속 읽기 →SEO용 canonical URL을 도메인 하나로 고정한 체크리스트
www와 비www, 쿼리 문자열이 섞인 작은 사이트에서 canonical과 리다이렉트를 맞춘 점검 목록.
계속 읽기 →배포용 GitHub Actions 권한을 contents: write에서 줄인 기준
동작하던 배포 워크플로의 넓은 토큰 권한을, 실제 단계별 필요 권한으로 줄인 보안 설정 메모.
계속 읽기 →React 검색창의 디바운스를 취소하지 않아 오래된 결과가 덮어쓴 문제
입력마다 요청 수는 줄었지만 이전 검색 결과가 화면을 덮었다. 취소와 최신 요청 판별을 적용한 짧은 튜토리얼.
계속 읽기 →작은 VPS의 메모리 부족을 swap 추가보다 먼저 확인한 순서
Node 프로세스가 죽을 때 swap부터 늘리지 않고, 메모리 압박의 원인을 좁힌 점검 노트.
계속 읽기 →Next.js 서버 액션에서 같은 주문이 두 번 만들어진 날
버튼을 잠갔는데도 주문이 중복 생성됐다. UI 제어와 서버 멱등성을 분리해 처리한 기록.
계속 읽기 →이미지 업로드 API에 파일 크기 제한을 두기 전에 정한 다섯 가지
용량 숫자만 검사해서는 부족했던 이미지 업로드 API의 검증 항목을 체크리스트로 정리했습니다.
계속 읽기 →Ubuntu에서 배포 계정의 파일 권한을 755로 통일하지 않은 이유
권한 오류를 만날 때마다 chmod 755를 적용하던 습관을 멈추고, 소유자·그룹·실행 권한을 나눠 본 비교 메모입니다.
계속 읽기 →React 모달의 Escape 처리가 입력 중에도 닫히던 실수
모달에 Escape 키 닫기를 추가했다가 자동완성 입력까지 닫아 버린 문제를 수정한 짧은 회고입니다.
계속 읽기 →배포 직후 CSP가 인라인 스크립트를 막았을 때 고른 수정 기준
보안 헤더를 추가한 직후 관리자 화면이 멈춘 사례를 바탕으로, CSP를 느슨하게 풀지 않고 원인을 좁히는 방법입니다.
계속 읽기 →Next.js Route Handler에서 웹훅 본문을 먼저 읽으면 서명 검증이 깨지는 이유
웹훅 JSON을 먼저 파싱한 뒤 서명 검증이 실패했던 상황에서, raw body를 한 번만 읽는 방식으로 고친 기록입니다.
계속 읽기 →서버 배포 후 502와 504를 구분해서 본 비교 메모
Nginx 앞단에서 502와 504가 보일 때 같은 장애로 묶지 않고 upstream 상태와 timeout을 나눠 확인한 메모입니다.
계속 읽기 →작은 사이드 프로젝트에서 DB 마이그레이션을 수동 SQL로 남긴 체크리스트
ORM 마이그레이션 도구를 바로 붙이기 애매한 작은 프로젝트에서 수동 SQL 변경을 기록하고 검증한 방법입니다.
계속 읽기 →Next.js Link prefetch 때문에 요청이 너무 많아 보였던 착각
Next.js 화면에서 네트워크 요청이 갑자기 늘어난 것처럼 보였을 때 Link prefetch와 실제 사용자 요청을 나눠 본 경험입니다.
계속 읽기 →Cloudflare 프록시 뒤에서 실제 IP 로그가 모두 같아진 설정 노트
Cloudflare를 켠 뒤 Nginx 로그의 접속 IP가 프록시 주소로만 보일 때 확인한 헤더와 real_ip 설정 메모입니다.
계속 읽기 →Vite React 환경변수를 바꿨는데 화면이 그대로였던 기록
Vite에서 VITE_ 접두사, 개발 서버 재시작, 빌드 산출물 캐시를 순서대로 확인하며 환경변수 문제를 좁힌 기록입니다.
계속 읽기 →Next.js sitemap을 수동 파일로 둘지 동적 라우트로 만들지 정한 기준
글이 자주 추가되는 블로그에서 sitemap.xml을 정적 파일과 동적 라우트 중 어디에 둘지 비교한 기록이다.
계속 읽기 →배포 전 .env 값을 확인할 때 실제 프로세스 기준으로 보는 체크리스트
파일에 적힌 .env가 아니라 실행 중인 프로세스가 어떤 값을 들고 있는지 확인하는 배포 체크리스트다.
계속 읽기 →React 리스트 key를 index로 둔 채 정렬 기능을 붙였을 때 생긴 버그
정렬 버튼을 추가한 뒤 체크 상태가 엉뚱한 항목에 붙던 문제를 key 기준으로 정리한 회고다.
계속 읽기 →Linux 서버에서 journalctl 로그 시간을 KST로 읽으며 놓친 것
장애 시간을 찾을 때 서버 시간대와 journalctl 출력 기준을 섞어 봐서 원인을 늦게 찾은 설정 노트다.
계속 읽기 →