블로그
노션을 블로그 CMS로 쓰는 양방향 파이프라인
노션에서 쓰고 정적 사이트로 굽는다. 반대 방향도 필요했다. 조용히 사라지는 자리 셋을 막는 게 핵심이다.
코드 블록 언어 이름 하나 때문에 글 전체가 400으로 튕겼다
외부 API는 대개 값 화이트리스트가 있다. 목록에 없는 값 하나가 요청 전체를 무효로 만든다.
CSP 쓰는 사이트에 구글 태그 붙이기
지시어 네 개를 한 번에 열어야 한다. 하나씩 열면 다음 게 막힌다. 나는 세 번 배포했다.
노션 통합에 DB를 연결했는데 쓰기가 403으로 막힌다
읽기는 되는데 페이지 생성만 안 됐다. 연결과 권한이 다른 설정이라서다. 체크박스 하나가 빠져 있었다.
스택이 다른 사이트 셋에 같은 추적 코드 심기
Astro 정적, Next.js App Router, Vite SPA. 붙이는 자리와 실패 증상이 전부 다르다. 실제로 심으면서 겪은 것들.
grep -c 는 일치 횟수가 아니라 줄 수를 센다
같은 스니펫이 사이트마다 1회, 2회로 다르게 세어졌다. 코드가 다른 게 아니라 세는 방법이 틀렸다.
앞단 리다이렉트 목록이 새로 만든 페이지를 잡아먹는다
새 페이지 세 개가 전부 301로 튕겼다. 옛 주소를 넘겨주려고 만든 목록에 같은 이름이 들어 있었다.
정적 사이트에 예약 발행 붙이기
서버 없이 예약 발행을 만드는 방법. 빌드 시각으로 미래 글을 거르고, 그 시각에 빌드를 돌린다. 지금 이 블로그가 쓰는 구성이다.
PowerShell에서 VAR=값 명령이 "용어가 인식되지 않습니다"로 죽는 이유
리눅스 예제를 그대로 붙여넣으면 나는 오류다. PowerShell에는 명령 앞에 환경변수를 붙이는 문법이 없다.
GitHub Actions 시크릿은 이름이 틀려도 오류를 안 낸다
없는 시크릿을 참조하면 워크플로가 멈추지 않고 빈 문자열을 넣는다. 로그에 별표가 아니라 공백이 찍히는 게 유일한 단서다.
목록을 버리고 오브젝트를 띄웠다
카드 목록이던 메인을 오브젝트가 떠 있는 화면으로 바꿨다. 훑어보기는 확실히 나빠졌다.
앱마다 서브도메인을 쪼갠 게 맞았나
앱 네 개를 각자 서브도메인에 뒀다. 관리 비용은 늘었고, 대신 하나가 죽어도 나머지가 산다.
배포 직후 같은 주소가 200과 301을 번갈아 답했다
새로 만든 페이지가 열렸다 안 열렸다 했다. 엣지가 순차적으로 갱신되는 동안 구버전과 신버전이 섞여 응답하고 있었다.
새벽에 굴절 띠를 1.4%까지 줄이고 있었다
얇게 해달라는 말을 세 번 듣고 16%에서 1.4%까지 갔다. 그동안 그 띠는 화면에 안 나오고 있었다.
픽셀 폰트에 아랍어가 없다는 걸 15개 언어를 그려보고 알았다
API 는 폰트가 있다고 답했다. 패밀리가 로드됐는지만 보고 글자가 있는지는 안 보기 때문이다.
문어 다리 잘린 면을 화면 밖으로 미는 데 반나절
사진 한 장의 잘린 단면을 안 보이게 하려고 알파 픽셀까지 셌다. 그리고 그 뒤로도 계속 다시 쟀다.
가운데 정렬했는데 안 맞아 보여서 무게중심을 계산했다
글자는 정확히 화면 중앙이었다. 문제는 주변 오브젝트의 질량이 아래로 쏠려 있던 거였다.
이미지 17.7MB를 830KB로 줄인 방법
폴더를 옮긴 것만으로 첫 로딩이 17.7MB에서 수백 KB가 됐다. public 과 src 는 빌드가 손대는지 여부가 다르다.
투명 PNG를 오브젝트로 쓰면 안 보이는 사각형이 뒤를 가린다
눈에 분명히 보이는 오브젝트가 눌리지 않았다. 앞쪽 이미지의 투명한 여백이 히트 영역을 그대로 먹고 있었다.
마우스를 따라 기우는 화면에서 호버가 스스로 풀렸다
글자에 마우스를 올려도 효과가 걸렸다 말았다 했다. 커서가 떠난 게 아니라 대상이 커서 밑에서 빠져나가고 있었다.
backdrop-filter에 SVG 필터를 섞으면 선언 전체가 죽는다
유리 효과가 크롬에서만 안 보였다. 원인은 지원 여부가 아니라 CSS가 값 하나를 못 읽으면 선언을 통째로 버린다는 규칙이었다.