HOME
[시놀로지 나스] NAS에 서브넷 라우터 구성하기 (Tailscale 활용)
[시놀로지 나스] NAS에 서브넷 라우터 구성하기 (Tailscale 활용)
2025.08.10Tailscale의 서브넷 라우터 기능을 시놀로지 NAS에 설정하면 Tailscale을 설치할 수 없는 구형 기기도 원격으로 접속할 수 있다.서브넷(Subnet)은 같은 네트워크에 연결된 기기들의 그룹을 의미한다. 우리가 흔히 사용하는 인터넷 공유기는 통신사(ISP)에서 받은 공인 IP 주소를 이용해, 집 안의 여러 기기가 인터넷을 함께 쓸 수 있도록 별도의 내부 네트워크(사설망)를 구성한다. 이 내부 네트워크에 속한 기기들은 공유기로부터 192.168.1.x 같은 내부 IP 주소를 할당받는데, 192.168.1.x 대역 전체를 하나의 서브넷으로 볼 수 있다.서브넷 라우터(Subnet Router)는 말 그대로 특정 서브넷에 접근할 수 있도록 통로 역할을 하는 장치다. 시놀로지 NAS를 서브넷 라우터로 ..
[시놀로지 나스] NAS에 설치한 Tailscale 자동 업데이트 설정 방법
[시놀로지 나스] NAS에 설치한 Tailscale 자동 업데이트 설정 방법
2025.08.03Tailscale은 보통 4주마다 새 버전이 출시되지만 시놀로지(Synology) 패키지 센터는 분기별 한 번 정도로 업데이트가 이뤄지기 때문에 변경사항 반영이 비교적 느린 편이다. 이를 보완하기 위해 스케줄러를 활용하면 매주 또는 원하는 주기마다 Tailscale이 자동으로 갱신되도록 할 수 있다. 🔍 아직 Tailscale 패키지를 설치/설정하지 않았다면 이전 포스팅을 참고하자. Tailscale 자동 업데이트① DSM 제어판 > 작업 스케줄러 > 예약된 작업 > [사용자 정의 스크립트] 클릭 ② [일반] 탭 > [작업] 필드에 원하는 이름 입력, [사용자]는 root 선택 ③ [스케줄] 탭 > 원하는 실행 날짜 선택 ④ [작업 설정] 탭 > [사용자 정의 스크립트] 필드에 아래 명령어 입력 ta..
작은 크기의 소음없는 최고의 가성비 UPS - WalleCube
작은 크기의 소음없는 최고의 가성비 UPS - WalleCube
2025.07.3024시간 내내 작동하는 나스(NAS)에 중요한 자료를 저장해 두고 사용한다면, 예기치 못한 정전이나 불안정한 전력 상황으로부터 데이터를 보호하기 위해 UPS 사용을 적극 권장한다. UPS(Uninterruptible Power Supply, 무정전 전원 공급장치)는 내부에 배터리를 탑재하여 비상 전원을 공급해 주는 장치다. 일종의 외장 배터리라고 보면 된다. UPS는 단순히 전원을 유지하는 데 그치지 않고, NAS가 시스템을 안전하게 종료할 수 있도록 시간적 여유를 제공한다는 장점이 있다. NAS를 UPS에 연결해 두면 정전이 발생했을 때 모든 작업을 마친 뒤 자동으로 전원을 종료하도록 설정할 수 있다. 하드디스크는 고속으로 회전하는 플래터 위를 미세한 간격으로 헤드가 움직이는 정밀한 기계장치로, 갑작스..
홍콩 스테이블코인 발행과 디지털 금융 경쟁 구도
홍콩 스테이블코인 발행과 디지털 금융 경쟁 구도
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개 이상 데이터 센터로 구성된 글로벌 네트워크..