로맨테크

얼마 전 Windows 11 부팅 USB를 사용할 일이 생겼다. 윈도우를 사용한다면 공식적으로 제공되는 설치 미디어 만들기(Windows Media Creation Tool) 도구를 사용하면 쉽게 만들 수 있지만, 아쉽게도 맥(macOS) 사용자를 위한 도구는 따로 제공하지 않는다. 패러렐즈(Parallels)로 윈도우 설치 미디어 만들기 도구를 실행해 봤지만 USB를 인식하지 못하는 문제가 있었다. 그러던 중 WinDiskWriter라는 유용한 도구를 발견해서 소개해볼까 한다.  가장 눈에 띄는 기능은 TPM 우회와 설치 이미지 자동 분할이다. 맥에 내장된 디스크 유틸리티는 기본적으로 HFS+, FAT32, ExFAT만 지원하며, 윈도우에서 사용하는 NTFS 형식의 포맷은 읽을 수는 있지만 쓰기를 지원..

노션에선 @(골뱅이)이나 /Link 단축키를 입력하여 기존에 작성했던 노션 페이지를 바로 링크할 수 있다. 예전에 작성해둔 노션 페이지의 제목이 정확히 기억나지 않아도 키워드만 입력하면 연관 페이지들이 뜨기 때문에 편리하다. 노션을 사용하면서 가장 마음에 드는 기능 중 하나다. 오늘은 노션의 링크 삽입과 관련한 소소한 팁 3가지를 소개하고자 한다. 💡 팁 1. @ 단축키로 노션 페이지 링크 걸기 일반적인 서비스에서 @(골뱅이, at)는 보통 특정 사람을 호출할 때 사용한다. 하지만 노션에선 사람은 물론 날짜(Date), 노션 페이지(Page)까지 링크할 수 있다. ❶@ 입력 후 ❷링크하고 싶은 페이지 제목/키워드를 입력하면 연관 페이지들이 나타난다. ❸위/아래 방향키로 원하는 페이지를 선택한 뒤 ❹엔터(..

원격(외부) 네트워크에서 SMB에 접속하려면 139, 445(맥북 연결 시) 등의 포트를 개방해야 된다. 하지만 이러한 포트들은 보안에 취약하기 때문에 기본적으로 SMB 프로토콜은 로컬 네트워크에서만 사용하는 것을 권장한다. 보안 취약성을 최소화하면서 원격에서 접근하려면 로컬 네트워크에 VPN을 구축하는 것이 좋다. OpenVPN, WireGuard 등 사설 VPN을 구축하는 여러 가지 방법이 있는데 Tailscale을 사용하는 게 가장 편리하다. Tailscale은 WireGuard를 이용한 사설 Mesh Network 서비스다. Tailscale에 연결된 장치는 같은 네트워크에 있는 것처럼 작동한다. Tailscale은 설정이 거의 필요 없고 SSO 로그인을 사용하므로 보안 문제가 발생할 일도 적다...

노션의 replaceAll, length 함수를 응용해 Person 속성(Property)에 추가한 Member(사람) 숫자만큼 통계를 내어 간단한 투표 시스템을 만들 수 있다. 이를 이용해 아이디어, 장소 투표 등 다양한 상황에서 활용할 수 있다. 🔎 투표 시스템 완성본 예시 🔎 설정 방법 Table 포맷의 Database 생성 (/table 입력) 투표 항목(Name), 예산(Number), 투표자(People), 득표수(Formula) 속성 추가 득표수(Formula)에 아래 수식 복사 → 붙여 넣기 if(empty(prop("투표자")), "❗️투표해주세요!", format(length(replaceAll(prop("투표자"), "[^,]", "")) + 1)) 📌 투표 템플릿 퍼가기 ✏️ For..

레딧의 노션 커뮤니티를 둘러보면 노션 홈에 위젯을 설치해둔 해외 유저들이 꽤 많이 보인다. HTML 임베드를 지원하는 노션의 장점을 활용해 페이지 성격에 맞는 위젯을 삽입한 것이다. 위젯을 제공하는 대부분의 서비스는 배경/폰트 색상 등을 커스터마이징 할 수 있기 때문에 노션 페이지 스타일에 잘 어울리도록 구성한다면 그럴싸한 홈페이지처럼 꾸밀 수 있다. 그래서 필자도 외부에 공개한 노션 페이지(위 이미지)에 날씨 위젯을 설치해봤다. 위젯을 투명 배경으로 설정했지만 노션에서 임베드하면 회색 배경으로 자동 변경되는 것 빼곤 큰 이질감 없이 깔끔하게 표시된다. 날씨 외에도 TradingView의 주식, 환율이나 오늘의 명언 같은 위젯도 설치할 수 있다. 설치 방법 역시 간단하니 아래 가이드에 따라 차근차근 따라..

얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다.  DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다.   하드디스크 복사?..

지난 5월 홍콩이 「스테이블코인 조례」를 통과시키면서, 오는 8월 1일부터 기업들이 라이선스를 신청하고 스테이블코인을 발행할 수 있게 되었다. 홍콩에서 스테이블코인을 도입하면 모두에게 새로운 금융 수단과 기회가 생기게 된다. 오늘은 홍콩 스테이블코인 발행이 갖는 중요한 의미를 설명해볼까 한다. 스테이블코인이란?스테이블코인은 암호화폐의 한 종류로, 비트코인이 가진 가격 불안을 해소하기 위해 등장했다. 비트코인은 최초의 암호화폐지만 가격 변동이 매우 심하다. 오늘 햄버거 8개 가치였던 것이 내일은 5개가 되고 모레는 다시 7개로 변할 수 있다. 이 때문에 비트코인은 실제 거래 수단으로는 부적합하여 다른 물건을 구매할 때 사용하기 어렵다. 그래서 사람들은 가격이 안정적인 암호화폐인 스테이블코인을 만들었다. ..

요소 내부의 고정된 지점과 마우스 클릭 지점 사이의 거리를 계산해야 하는 경우가 종종 있다. 예를 들어 사용자 경험(UX) 개선을 위해 버튼 클릭 감지 영역을 실제보다 더 넓게 설정할 때(클릭하기 쉽도록 하기 위해) 이런 계산이 필요하다. 이때 두 지점 간의 거리는 피타고라스 정리를 이용해서 구할 수 있다. 피타고라스 정리는 직각삼각형에서 빗변(가장 긴 변)의 제곱은 다른 두 변의 제곱의 합과 같다는 원리다.$$c^2 = a^2 + b^2$$ 빗변 $c$의 길이를 구하기 위해 양변에 제곱근(루트; square root)을 적용하여 다음과 같이 표현할 수도 있다.$$c = \sqrt{a^2+b^2}$$ 한편, 피타고라스의 원리를 적용하기 위해 좌표평면(서로 수직으로 교차하는 두 직선으로 이루어진 평면)에..

문제 파악얼마 전부터 티스토리 블로그에 .gif 파일을 올려도 이미지가 보이지 않는 문제가 발생했다. 포스트를 발행하고 내용을 확인해 보면 아래 스크린샷처럼 이미지 캡션(설명)만 보이고 정작 이미지는 나오지 않고 있었다. 원인을 파악하기 위해 크롬 개발자 도구로 HTML 코드를 살펴보니, 업로드한 원본 파일명과 관계없이 실제 이미지를 불러오는 주소는 아래처럼 항상 img.gif 라는 파일명을 가진 임시 URL을 통해 리소스를 요청하고 있었다.https://blog.kakaocdn.net/dna/.../img.gif?credential=... 카카오 CDN(콘텐츠 전송 네트워크)에 원본 파일을 저장하되, 보안을 위해 일정 시간만 유효한 임시 주소(Pre-signed URL)를 발급하는 방식으로 보였다...

CSS에서 애니메이션이나 전환 효과를 제어할 때 타이밍 함수(가속도 곡선)를 사용한다. 타이밍 함수는 애니메이션이 얼마나 빠르게 또는 느리게 시작하고 끝나는지를 결정하는 수학적인 함수다. 쉽게 말해 애니메이션의 속도 변화를 제어하는 역할을 한다. Tailwind CSS를 사용한다면 ease-in, ease-out, ease-in-out 등 미리 정의되어 있는 유틸리티 클래스를 사용해서 다양한 가속도 곡선을 적용할 수 있다.Button A 예를 들어 ease는 부드럽게 시작해서 부드럽게 끝나고(일반적인 가속도 곡선), ease-in은 느리게 시작해서 빠르게 끝나는 효과를 줄 때 사용한다. 사실 ease, ease-in, ease-out, ease-in-out 등은 CSS에서 기본적으로 제공하는 타이밍 함수..

TL;DRasync/await는 비동기 코드를 동기 코드처럼 작성할 수 있도록 해주는 문법적 설탕(Syntax Sugar)이다. 내부적으로는 async 함수 실행을 일시 중단했다가 프로미스가 처리되면 마이크로태스크 큐를 통해 다시 재개 하는 방식으로 논블로킹을 유지한다. async/await는 함수 실행을 중단/재개할 수 있는 제너레이터와 프로미스를 활용해서 구현되어 있으며, await 이후의 코드는 사실상 .then() 메서드의 콜백 함수라고 볼 수 있다.promise.then(() => { /* await 이후의 코드 */ }) async/await 내부 메커니즘async 함수를 호출하면 await 키워드를 만나기 전까지 일반 함수처럼 동기적으로 실행async 함수 실행 중 await 키워드를 만나..

grid-row-start, grid-row-end 속성은 그리드 아이템이 어느 행 라인부터 시작하여 어느 행 라인에서 끝날지 지정할 때 사용한다. 이 속성은 그리드 아이템(그리드 컨테이너의 직계 자식 요소) 자체에 적용한다. 참고로 그리드 라인은 컨테이너 시작 지점부터 1, 2, 3, … 양수 번호가 부여되고, 컨테이너 끝 지점부터는 -1, -2, -3, … 음수 번호가 부여된다./* 그리드 아이템이 1~2번 라인 차지(첫 번째 행 트랙) */grid-row-start: 1; grid-row-end: 2; span은 그리드 아이템이 차지할 트랙의 개수를 지정할 때 사용한다. 여기서 트랙(track)이란 두 그리드 라인 사이의 공간을 의미한다. 그리드 셀 1개는 기본적으로 하나의 행 트랙과, 하나의 열..