turin's blog

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

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

1175published
8topics
kopractical notes

자주 다루는 주제

주제별로 빠르게 훑어보기

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

전체 글

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

API

API 목록 응답에서 정렬 기준을 명시하자

API의 목록 응답이 어떤 순서로 정렬되는지 명시하지 않으면 클라이언트가 혼란스러워한다.

·1분 읽기
TypeScript1분 읽기

TypeScript optional 타입을 안전하게 다루기

TypeScript에서 optional 값을 다룰 때 생기는 실수들과 그 해결책을 정리했다.

계속 읽기 →
Git1분 읽기

git pull 전에 local 변경사항을 먼저 보기

git pull을 하기 전에 현재 있는 변경사항을 먼저 확인하는 습관이 충돌을 줄인다.

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

서버 재부팅 후 포트가 제대로 열렸는지 확인하기

서버를 재부팅했을 때 실제로 필요한 포트들이 다시 열렸는지 확인하는 것이 중요하다.

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

Nginx reload와 restart 무엇이 다를까

Nginx 설정을 변경했을 때 reload를 써야 하는지 restart를 써야 하는지 항상 헷갈렸다. 이번에 정리해봤다.

계속 읽기 →
Docker3분 읽기

Docker rollback을 위해 이전 이미지를 남겨두기

배포 후 문제가 생기면 빨리 이전 버전으로 돌아가야 한다. 그럴 때 이미지가 없으면 곤란하다.

계속 읽기 →
Next.js3분 읽기

React에서 비싼 계산을 렌더링 밖으로 빼기

복잡한 계산을 매번 렌더링할 때마다 반복하면, 성능이 급격히 떨어진다. 계산을 최적화하는 방법.

계속 읽기 →
Next.js4분 읽기

Next.js Route Handler에서 HTTP 메서드 구분하기

Route Handler에서 GET, POST, DELETE를 같은 파일에서 처리할 때, 실수 없이 하는 방법.

계속 읽기 →
CI/CD3분 읽기

GitHub Actions에서 secret 누락을 빨리 알아채기

배포 스크립트에서 환경 변수를 빼먹으면, 배포는 성공해도 서비스는 작동하지 않는다.

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

블로그 제목에서 너무 넓은 단어 줄이기

"Python 배우기", "웹 개발 팁" 같은 제목은 구글 검색에서 밀려난다. 구체적인 제목으로 바꾸는 방법.

계속 읽기 →
API2분 읽기

API에서 무한 스크롤보다 페이지네이션을 쓸 때가 있다

무한 스크롤은 UX가 좋아 보이지만, 페이지네이션이 더 나은 상황도 있다. 각각의 장단점과 선택 기준.

계속 읽기 →
API3분 읽기

TypeScript discriminated union으로 API 응답 안전하게 다루기

API 응답의 성공/실패를 정확하게 타입하면, 런타임 에러를 많이 줄일 수 있다.

계속 읽기 →
Git2분 읽기

Git upstream 브랜치를 잘못 설정했을 때 벌어지는 일

로컬 브랜치의 upstream이 잘못되면 pull/push가 엉뚱한 곳으로 가거나 머지 충돌이 늘어난다.

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

서버 재부팅 후 cron 작업이 제대로 도는지 확인하기

재부팅 후 자동 작업들이 실제로 실행되는지 확인하는 건 생각보다 까다롭다. 체계적으로 확인하는 방법.

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

Nginx에서 정적 파일 캐시 헤더 제대로 설정하기

정적 파일은 캐시해서 빠르게 제공해야 하는데, 헤더 설정을 잘못하면 유저가 오래된 파일을 계속 본다.

계속 읽기 →
Docker2분 읽기

Docker 이미지 업데이트를 digest로 확인하기

같은 태그의 이미지도 내용이 바뀔 수 있다. Docker digest는 정확히 어떤 이미지를 쓰고 있는지 알려준다.

계속 읽기 →
Next.js2분 읽기

React에서 useMemo를 지워도 될까

useMemo는 과도한 렌더링을 막기 좋지만, 많은 경우 불필요한 최적화다. 언제 지우고 언제 두어야 할지.

계속 읽기 →
Next.js1분 읽기

Next.js API 라우트에서 401과 403을 구분해야 했던 이유

401은 인증 오류, 403은 권한 오류다. 클라이언트는 이 둘을 다르게 처리해야 한다. 401이면 재로그인, 403이면 접근 불가 화면을 보여준다.

계속 읽기 →
CI/CD1분 읽기

GitHub Actions Secret을 환경별로 나누는 방법

프로덕션 Secret과 개발 환경 Secret을 같은 저장소에서 관리할 때 이름 규칙으로 환경을 명확히 구분하자.

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

기술 블로그 제목을 문제형으로 다시 쓴 이유

"X를 하는 방법"이 아니라 "X를 하다가 겪은 문제"로 제목을 쓰면 독자가 더 공감하고 클릭률도 높아진다.

계속 읽기 →
API1분 읽기

API pagination 응답에 totalCount를 함께 보내야 하는 이유

totalCount 없이는 클라이언트가 페이지 수를 계산할 수 없다. 그리고 마지막 페이지인지도 알 수 없어서 무한 스크롤 구현이 복잡해진다.

계속 읽기 →
TypeScript1분 읽기

TypeScript union type으로 로딩 상태 깔끔하게 관리하기

로딩 상태를 여러 boolean으로 나누면 동기화 문제가 생긴다. union type으로 한 번에 하나의 상태만 가능하게 하자.

계속 읽기 →
Git1분 읽기

Git remote가 여러 개일 때 push 대상 확인하기

fork한 저장소와 원본 저장소에 모두 push 권한이 있으면 헷갈릴 수 있다. git remote -v로 현재 설정을 항상 확인하자.

계속 읽기 →
Docker1분 읽기

서버 재부팅 후 Docker 서비스가 다시 뜨는지 확인하기

서버를 재부팅하면 Docker 서비스도 자동으로 다시 시작되어야 한다. 만약 안 된다면 restart policy를 확인해야 한다.

계속 읽기 →