HOME
홍콩 스테이블코인 발행과 디지털 금융 경쟁 구도
홍콩 스테이블코인 발행과 디지털 금융 경쟁 구도
2025.07.24지난 5월 홍콩이 「스테이블코인 조례」를 통과시키면서, 오는 8월 1일부터 기업들이 라이선스를 신청하고 스테이블코인을 발행할 수 있게 되었다. 홍콩에서 스테이블코인을 도입하면 모두에게 새로운 금융 수단과 기회가 생기게 된다. 오늘은 홍콩 스테이블코인 발행이 갖는 중요한 의미를 설명해볼까 한다. 스테이블코인이란?스테이블코인은 암호화폐의 한 종류로, 비트코인이 가진 가격 불안을 해소하기 위해 등장했다. 비트코인은 최초의 암호화폐지만 가격 변동이 매우 심하다. 오늘 햄버거 8개 가치였던 것이 내일은 5개가 되고 모레는 다시 7개로 변할 수 있다. 이 때문에 비트코인은 실제 거래 수단으로는 부적합하여 다른 물건을 구매할 때 사용하기 어렵다. 그래서 사람들은 가격이 안정적인 암호화폐인 스테이블코인을 만들었다. ..
[JS] 두 점 사이의 거리 계산하기
[JS] 두 점 사이의 거리 계산하기
2025.07.20요소 내부의 고정된 지점과 마우스 클릭 지점 사이의 거리를 계산해야 하는 경우가 종종 있다. 예를 들어 사용자 경험(UX) 개선을 위해 버튼 클릭 감지 영역을 실제보다 더 넓게 설정할 때(클릭하기 쉽도록 하기 위해) 이런 계산이 필요하다. 이때 두 지점 간의 거리는 피타고라스 정리를 이용해서 구할 수 있다. 피타고라스 정리는 직각삼각형에서 빗변(가장 긴 변)의 제곱은 다른 두 변의 제곱의 합과 같다는 원리다.$$c^2 = a^2 + b^2$$ 빗변 $c$의 길이를 구하기 위해 양변에 제곱근(루트; square root)을 적용하여 다음과 같이 표현할 수도 있다.$$c = \sqrt{a^2+b^2}$$ 한편, 피타고라스의 원리를 적용하기 위해 좌표평면(서로 수직으로 교차하는 두 직선으로 이루어진 평면)에..
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..