turin's blog
만들고, 터지고,
기록합니다
풀스택, Flutter, 서버 운영, SEO, 배포 삽질을 실제 프로젝트 기준으로 정리합니다. 검색해서 들어온 사람이 바로 쓸 수 있는 체크리스트와 명령을 남기는 게 목표입니다.
자주 다루는 주제
주제별로 빠르게 훑어보기
전체 글
운영 중 부딪힌 문제를 검색 의도에 맞춰 정리
React에서 상태가 비었을 때 UI가 터질 때 대처하기
React 컴포넌트에서 초기 상태가 비어 있으면, 로컬 개발과 모바일에서 다르게 작동할 수 있다.
검색 결과를 따라 했는데도 문제가 안 풀릴 때
온라인에서 찾은 해결책을 그대로 따라 해도 안 되면, 우선 자신의 환경과 검색 결과의 환경이 정말 같은지 확인해야 한다.
계속 읽기 →초보 개발자가 놓치는 패키지 충돌 확인 방법
npm이나 yarn으로 패키지를 설치할 때 충돌이 생기면, 빌드는 성공하지만 런타임에 문제가 나타난다.
계속 읽기 →서버 재부팅 후 접속이 안 될 때 점검 순서
서버가 재부팅되거나 서비스가 멈춘 후 접속이 안 되면, 네트워크 포트부터 확인해야 한다.
계속 읽기 →Next.js에서 상태 초기화 후 메타데이터가 안 나올 때
상태 관리 라이브러리를 바꾸거나 초기화 로직을 수정하면, Next.js 서버 렌더링 때 메타데이터가 손실될 수 있다.
계속 읽기 →권한 설정 때문에 기능이 안 될 때 확인하는 방법
사용자마다 보이는 기능이 다르다면, 단순히 UI 코드의 문제가 아니라 권한 로직과 서버 응답을 함께 봐야 한다.
계속 읽기 →Flutter 앱의 이미지가 Docker 배포 후 로딩 안 될 때
Flutter와 Docker를 함께 쓸 때, 로컬에서는 이미지가 잘 보이지만 배포 후 안 보이는 경우가 있다. 대체로 환경 변수나 마운트 설정 때문이다.
계속 읽기 →React 모달이 모바일에서만 안 닫힐 때
React 모달의 이벤트 처리는 데스크톱과 모바일에서 다르게 작동할 수 있다. 특히 터치 이벤트와 클릭 이벤트의 차이를 봐야 한다.
계속 읽기 →API 요청이 CORS 에러로 막힐 때 확인 순서
CORS 에러는 브라우저가 차단하는 것이므로, 실제 API 응답이 뭔지부터 봐야 원인을 찾을 수 있다.
계속 읽기 →Flutter에서 Play Console과 실기기 테스트 결과가 다를 때
Flutter 앱이 에뮬레이터에서는 정상인데 Play Console에서나 실기기에서 문제가 나면, 먼저 개발 환경 설정을 확인해야 한다.
계속 읽기 →Docker 배포 후 데이터가 사라지는 원인 찾기
컨테이너를 배포한 후 데이터가 없어지는 문제는 보통 볼륨 마운트 설정이나 환경 변수 때문이다.
계속 읽기 →Next.js 서버 렌더링에서 메타데이터가 안 나올 때
Next.js에서 서버에서만 발생하는 메타데이터 버그는 대체로 간단한데, 디버깅할 때 모든 파일을 의심하면 시간이 걸린다.
계속 읽기 →React 버튼이 예기치 않게 비활성화될 때
사용자 입력을 무시하는 버튼 문제를 빠르게 추적하는 방법을 정리했다.
계속 읽기 →릴리즈 빌드에서 사용자 입력이 느릴 때
프로덕션 빌드에서 상호작용이 느린 건 자주 JavaScript 크기가 크거나 스크립트 실행 비용 때문이다. 빌드 분석부터 해야 한다.
계속 읽기 →React에서 페이지 전환 후 로그인이 풀리는 이유
페이지네이션 같은 URL 변경에서 인증 상태가 초기화되는 건 전역 상태 관리 방식 때문이다. 재렌더링 시에도 상태를 유지해야 한다.
계속 읽기 →Next.js 배포 후 메타데이터가 없을 때
배포 후 SNS 공유나 검색 엔진 크롤링이 안 되는 경우 metadata 설정을 확인해야 한다. 서버에서 렌더링되는 메타데이터를 직접 봐야 한다.
계속 읽기 →Docker 컨테이너가 자꾸 재시작될 때
컨테이너가 계속 재시작된다면 로그를 봐야 한다. docker logs와 inspect 명령으로 원인을 찾을 수 있다.
계속 읽기 →SQLite 문제를 빠르게 좁히기
데이터베이스 에러는 스키마, 환경 변수, 마이그레이션 상태를 이 순서로 확인해야 한다. 추측하지 말고 명령으로 확인하자.
계속 읽기 →서버 에러 메시지를 읽는 순서
서버에서만 에러가 난다면 포트, 로그, 권한을 이 순서대로 확인해야 한다. 추측하지 말고 로그를 본다.
계속 읽기 →TypeScript Record 타입 제대로 사용하기
Record 타입을 모든 키를 필수로 만들지 않으면 런타임 에러가 난다. optional 처리를 정확히 해야 한다.
계속 읽기 →서버에서만 터질 때 로그 확인 순서
로컬에서는 잘 되는데 서버에서만 빌드가 실패한다면 포트, 권한, 디스크부터 확인하자. 환경 차이를 체계적으로 좁혀야 한다.
계속 읽기 →배포 전에 unknown 에러를 피하기
TypeScript에서 catch 블록의 error 타입을 제대로 다루지 않으면 배포 후 런타임 에러가 난다. unknown 타입 체크는 선택이 아니다.
계속 읽기 →API 응답을 캐싱할 때 꼭 확인할 것
캐시 헤더를 제대로 설정하지 않으면 매 요청마다 전체 데이터를 받는다. curl로 응답 헤더를 확인하는 것부터 시작하자.
계속 읽기 →혼자 운영할 때 자주 빠지는 에러 페이지
개발 초기에는 에러 페이지를 놓치기 쉽다. 로컬에서는 테스트 안 해도 배포 후 문제가 드러난다.
계속 읽기 →