HOME
AdGuard 사용 시 티스토리 gif 이미지 안나오는 문제 해결
AdGuard 사용 시 티스토리 gif 이미지 안나오는 문제 해결
2025.07.07문제 파악얼마 전부터 티스토리 블로그에 .gif 파일을 올려도 이미지가 보이지 않는 문제가 발생했다. 포스트를 발행하고 내용을 확인해 보면 아래 스크린샷처럼 이미지 캡션(설명)만 보이고 정작 이미지는 나오지 않고 있었다. 원인을 파악하기 위해 크롬 개발자 도구로 HTML 코드를 살펴보니, 업로드한 원본 파일명과 관계없이 실제 이미지를 불러오는 주소는 아래처럼 항상 img.gif 라는 파일명을 가진 임시 URL을 통해 리소스를 요청하고 있었다.https://blog.kakaocdn.net/dna/.../img.gif?credential=... 카카오 CDN(콘텐츠 전송 네트워크)에 원본 파일을 저장하되, 보안을 위해 일정 시간만 유효한 임시 주소(Pre-signed URL)를 발급하는 방식으로 보였다...
[CS] 베지에 곡선 원리 이해하기 feat. 카스텔조 알고리즘
[CS] 베지에 곡선 원리 이해하기 feat. 카스텔조 알고리즘
2025.06.23CSS에서 애니메이션이나 전환 효과를 제어할 때 타이밍 함수(가속도 곡선)를 사용한다. 타이밍 함수는 애니메이션이 얼마나 빠르게 또는 느리게 시작하고 끝나는지를 결정하는 수학적인 함수다. 쉽게 말해 애니메이션의 속도 변화를 제어하는 역할을 한다. Tailwind CSS를 사용한다면 ease-in, ease-out, ease-in-out 등 미리 정의되어 있는 유틸리티 클래스를 사용해서 다양한 가속도 곡선을 적용할 수 있다.Button A 예를 들어 ease는 부드럽게 시작해서 부드럽게 끝나고(일반적인 가속도 곡선), ease-in은 느리게 시작해서 빠르게 끝나는 효과를 줄 때 사용한다. 사실 ease, ease-in, ease-out, ease-in-out 등은 CSS에서 기본적으로 제공하는 타이밍 함수..
[JS] async 함수가 await를 만났을 때 동작 흐름
[JS] async 함수가 await를 만났을 때 동작 흐름
2025.06.14TL;DRasync/await는 비동기 코드를 동기 코드처럼 작성할 수 있도록 해주는 문법적 설탕(Syntax Sugar)이다. 내부적으로는 async 함수 실행을 일시 중단했다가 프로미스가 처리되면 마이크로태스크 큐를 통해 다시 재개 하는 방식으로 논블로킹을 유지한다. async/await는 함수 실행을 중단/재개할 수 있는 제너레이터와 프로미스를 활용해서 구현되어 있으며, await 이후의 코드는 사실상 .then() 메서드의 콜백 함수라고 볼 수 있다.promise.then(() => { /* await 이후의 코드 */ }) async/await 내부 메커니즘async 함수를 호출하면 await 키워드를 만나기 전까지 일반 함수처럼 동기적으로 실행async 함수 실행 중 await 키워드를 만나..
[CSS] grid-row 동작 방식 살펴보기
[CSS] grid-row 동작 방식 살펴보기
2025.06.03grid-row-start, grid-row-end 속성은 그리드 아이템이 어느 행 라인부터 시작하여 어느 행 라인에서 끝날지 지정할 때 사용한다. 이 속성은 그리드 아이템(그리드 컨테이너의 직계 자식 요소) 자체에 적용한다. 참고로 그리드 라인은 컨테이너 시작 지점부터 1, 2, 3, … 양수 번호가 부여되고, 컨테이너 끝 지점부터는 -1, -2, -3, … 음수 번호가 부여된다./* 그리드 아이템이 1~2번 라인 차지(첫 번째 행 트랙) */grid-row-start: 1; grid-row-end: 2; span은 그리드 아이템이 차지할 트랙의 개수를 지정할 때 사용한다. 여기서 트랙(track)이란 두 그리드 라인 사이의 공간을 의미한다. 그리드 셀 1개는 기본적으로 하나의 행 트랙과, 하나의 열..
[HTTP] ETag 엔티티 태그 헤더
[HTTP] ETag 엔티티 태그 헤더
2025.05.05TL;DRETag(엔티티 태그; Entity Tag)는 HTTP 응답 헤더 중 하나로, 웹 리소스의 특정 버전을 식별하기 위한 고유한 식별자다. 클라이언트는 ETag를 이용해 리소스 변경 여부를 서버에 검증하고, 변경되지 않았으면 캐시 된 콘텐츠를 재사용함으로써 대역폭을 절약하고 성능을 개선할 수 있다. 작동 방식클라이언트가 특정 리소스를 처음 요청하면, 서버는 응답 헤더에 ETag 값을 포함하여 리소스와 함께 전달클라이언트는 응답으로 받은 ETag 값 저장이후 동일한 리소스 재요청 시 If-None-Match 요청 헤더에 ETag 값을 담아서 서버로 전송서버는 전달받은 ETag 값과 현재 리소스의 ETag 값 비교값이 일치하면 본문(body)은 생략하고 304 Not Modified 반환값이 일치하지..
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
2025.04.17이미지 비교 슬라이더는 핸들을 좌우로 움직여서 두 이미지를 비교할 수 있는 UI 패턴으로 쇼핑몰이나 제품 소개 페이지 등에서 자주 볼 수 있다. 이러한 이미지 비교 슬라이더는 range 타입의 input 태그와 6줄 정도의 자바스크립트 코드만으로 구현할 수 있다. range 타입의 input은 슬라이드바를 조정하여 범위 내 숫자 값을 선택할 수 있는 입력 필드다. 기본적으로 브라우저에서 제공하는 스타일이 적용되어 있다. 이 기본 스타일을 모두 제거하고 이미지의 너비/높이만큼 크기를 확장하면, 슬라이더 영역을 클릭 혹은 드래그할 때마다 (스타일을 제거해서 화면에 보이지 않는) 핸들이 해당 위치로 이동해서 값이 변경된다. 기본적인 구현 방법은 다음과 같다.이미지 1, 이미지 2를 감싸는 마스크 요소, ran..
무료 이미지 호스팅 구축하기 (Cloudflare R2 + PicGo + WebP Cloud)
무료 이미지 호스팅 구축하기 (Cloudflare R2 + PicGo + WebP Cloud)
2025.04.06이미지 호스팅은 이미지 파일을 웹 서버에 저장하고 인터넷을 통해 접근할 수 있도록 해주는 서비스다. 이미지를 저장/관리/공유하거나 블로그/웹사이트를 운영한다면 이미지 호스팅이 필요할 수 있다. 기존 클라우드 서비스나 전문 이미지 호스팅 서비스는 용량이 늘어날수록 비용 부담이 증가하고 이미지 최적화를 위한 별도의 관리가 필요하다. 서비스 제공업체의 정책 변경이나 서비스 종료 같은 위험성도 존재한다. 오늘은 Cloudflare R2, PicGo, WebP Cloud를 이용해 이미지 호스팅을 직접 구축하는 방법을 소개할까 한다. 개인적인 용도로 사용한다면 각 서비스의 무료 요금제(Free tier)로도 충분히 사용할 수 있다. 특히 Cloudflare R2는 330개 이상 데이터 센터로 구성된 글로벌 네트워크..
[HTTP] Cache-Control 헤더
[HTTP] Cache-Control 헤더
2025.03.31TL;DRCache-Control은 브라우저와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더로, 캐싱 가능 여부(public, private, no-store), 캐시 유효 기간(max-age), 재검증 방식(no-cache, must-revalidate) 등을 설정할 수 있다. 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutable public: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱하고 재사용할 수 있도록 허용max-age=31536000: 캐시 생성 후 1년(31,536,000초) 동안 fresh 상태 유지immutable: 유효 기간 내 리소스가 변..
Perplexity Pro 1년 무료로 사용하기 ($200 절약)
Perplexity Pro 1년 무료로 사용하기 ($200 절약)
2025.03.30Perplexity는 AI 기반 검색엔진으로 입력한 질문과 연관된 자료를 실시간으로 검색한 뒤 이를 바탕으로 답변을 생성한다. 모든 답변은 출처와 함께 제공되므로 올바른 정보인지 여부를 쉽게 검증할 수 있다. 요즘엔 구글 검색보다 Perplexity를 먼저 찾을 정도로 편리하다. Perplexity 요금제는 크게 Free/Pro로 나뉜다. Pro 회원은 하루 300회 이상 프로 검색(복잡한 쿼리 처리)을 이용할 수 있고, Claude 3.7 Sonnet, o3-mini 같은 고급 모델을 선택할 수 있다. 덤으로 월 $5 API 크레딧도 제공한다. 실시간 검색 결과는 선택한 AI 모델을 통해 처리되기 때문에 어떤 모델을 선택했느냐에 따라 답변 퀄리티가 달라진다. Perplexity Pro 가격은 한 달 ..
[Next.js] API 라우트 보호하기 - Unkey
[Next.js] API 라우트 보호하기 - Unkey
2025.03.30OpenAI 같은 LLM(대형 언어 모델) 기반 API로 기능을 개발하다 보면, 자연스럽게 사용량 제한이 필요해진다. Unkey라는 API 관리 플랫폼을 이용하면 API 키 관리, 요청 빈도 제한, 사용량 분석 같은 기능을 손쉽게 구현할 수 있다. API 엔드포인트별로 요청량을 제한하거나 사용자마다 다른 제한 정책을 설정할 수도 있다. Unkey 무료 요금제(Free Tier)는 API 키 1000개, 월 15만 건의 요청까지 사용할 수 있기 때문에 개인 프로젝트에 사용하기 딱 좋다. Next.js를 사용한다면 Unkey에서 제공하는 SDK를 이용해서 더 편하게 통합할 수 있다. 예를 들어 서버 액션이나 API 라우트에 미들웨어처럼 적용하여 인증된 요청만 처리하거나 사용량 제한을 적용할 수 있다. Unk..
[Next.js] dnd-kit을 활용한 칸반(Kanban) 보드 드래그 앤 드롭 구현
[Next.js] dnd-kit을 활용한 칸반(Kanban) 보드 드래그 앤 드롭 구현
2025.03.18일반적으로 칸반 보드는 드래그 앤 드롭을 통해 컬럼이나 태스크 카드의 순서를 자유롭게 변경할 수 있다. 이러한 드래그 앤 드롭 상호작용은 dnd-kit 이라는 라이브러리에서 제공하는 Sortable 프리셋을 이용하면 더 쉽게 구현할 수 있다. dnd-kit은 코어 크기가 10kb 정도로 가볍고 외부 의존성이 없는 장점이 있다. 드래그 제한, 애니메이션, 충돌 감지 등을 커스터마이징 할 수도 있다. dnd-kit을 이용해 칸반 보드를 구현하면서 비교적 까다롭다고 느꼈던 부분들을 정리해 봤다. 코드는 아래 레포지토리에서 확인할 수 있다.레포지토리: https://github.com/romantech/simple-kanban데모 페이지: https://kanban.romantech.net 칸반 데이터 모..
Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기
Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기
2025.03.15브랜디드 링크는 도메인을 활용한 맞춤형 단축 URL이다. 예를 들어 abc.com/123... 같은 긴 주소를 자신의 도메인을 이용해 짧고 직관적인 링크로 변환할 수 있다. bit.ly 같은 주소 단축 서비스에서도 브랜디드 링크 기능을 제공하지만, Growth 유료 플랜(월 $29) 이상에서만 사용할 수 있다. Cloudflare에 도메인을 등록했다면 Sink 라는 무료 오픈소스를 통해 자신만의 짧은 주소 서비스를 구축할 수 있다. 브랜디드 링크뿐만 아니라 애널리틱스, 링크 유효기간 설정 등 다양한 기능을 제공하며, 현재도 활발하게 개발이 진행 중인 프로젝트다. 브랜디드 링크 - 도메인 연동 및 맞춤형 단축 URL 생성애널리틱스 - 방문수, 리퍼러, 지역, 디바이스, 언어, OS 등 통계 제공링크 유효..