HOME
[UI] Shadcn DropdownMenu에서 Dialog 자동 닫힘 문제 해결
[UI] Shadcn DropdownMenu에서 Dialog 자동 닫힘 문제 해결
2025.03.09Shadcn의 드롭다운(Dropdown)은 특정 동작이나 기능 등을 Popover 형태로 표시하는 컴포넌트다. 드롭다운 메뉴 아이템(DropdownMenuItem)을 클릭했을 때 다이얼로그(혹은 AlertDialog)를 띄우려는 의도로 메뉴 아이템의 자식으로 다이얼로그를 추가할 수 있다. 하지만 이렇게 작성하면 다이얼로그가 제대로 열리지 않는다. 메뉴 열기 {/* ... */} ; Radix의 메뉴 아이템은 클릭했을 때 드롭다운이 자동으로 닫히도록 설계되어 있다. 때문에 다이얼로그를 띄우는 메뉴 아이템을 클릭하면, 드롭다운이 닫히는 기본 동작에 의해 다이얼로그가 열리지 마자 닫히는 문제가 발생한다. 위 문제로 StackOverFlow를 찾아보면 Dr..
검색엔진 바이두를 위협하는 SNS 샤오홍슈(RedNote, 小红书)
검색엔진 바이두를 위협하는 SNS 샤오홍슈(RedNote, 小红书)
2025.03.072025년 1월 미국에서 틱톡 금지법이 발효되자 1억 명이 넘는 이용자가 샤오홍슈로 옮겨가는 이례적인 현상이 벌어졌다. 샤오홍슈는 이 기간 앱스토어 다운로드 순위 1위를 차지하면서 큰 화제가 됐다. 해외에서 RedNote로 불리는 샤오홍슈는 흔히 '중국판 인스타그램'으로 소개되곤 하지만 사실 인스타그램, 도우인(틱톡)과는 생각보다 결이 많이 다르고 가장 저평가된 서비스이기도 하다(2025년 1분기 기준 기업가치 약 29조, 출처: Sacra). 샤오홍슈는 다른 어떤 플랫폼보다 생생한 사용자 경험과 리뷰가 많은 곳이다. 그래서 그런지 요즘 중국인들은 바이두 대신 샤오홍슈 검색을 더 선호한다(2024년 4분기 기준 샤오홍슈 일일 검색량 6억 건, 바이두 10억 건, 출처: Sina Finance). 이러한 ..
[CSS] :focus, :focus-visible 차이점
[CSS] :focus, :focus-visible 차이점
2025.03.06focus, focus-visible:focus: 모든 포커스 상황(키보드, 마우스, 터치)에 적용:focus-visible: 키보드 포커스 또는 브라우저에서 포커스 표시가 필요하다고 판단할 때만 적용Tab 키로 포커스 이동 시(키보드 포커스)키보드 입력을 지원하는 요소(텍스트 입력 필드 등)… 일반적으로 마우스 사용자에게 불필요한 외곽선은 숨기면서 키보드 사용자의 접근성을 보장하기 위해 :focus와 :focus-visible 선택자를 조합해서 사용하는 경우가 많다./* 기본 포커스 스타일 리셋 */button:focus { outline: none;}/* 키보드 포커스 시 스타일 적용 */button:focus-visible { outline: 2px solid green;} outline, r..
[JS] 자바스크립트 랜덤 색상(Random Color) 생성하기
[JS] 자바스크립트 랜덤 색상(Random Color) 생성하기
2025.03.04HEX 색상 코드는 RGB 색상을 RRGGBB 형식의 16진수로 표현한다. HEX 코드의 최소 값은 #000000(검은색, 10진수 0), 최댓값은 #FFFFFF(흰색, 10진수 16777215)이기 때문에 0~16777215 사이의 랜덤 숫자를 16진수로 변환하고 #를 붙이면 랜덤한 HEX 색상 코드가 된다.export const getRandomColor = ({ transparent = false, transProbability = 0.2,} = {}) => { // transProbability 확률로(기본값 20%) 투명값 반환 if (transparent && Math.random() Math.random() 메서드는 0 이상 1 미만(0 ≤ x approximately uniform..
[CSS] 쌓임 맥락 Stacking Context
[CSS] 쌓임 맥락 Stacking Context
2025.02.26TL;DR기본적으로 요소들은 DOM 순서에 따라 쌓인다.positioned(position ≠ static) 요소는 non-positioned(position = static) 요소보다 위에 쌓인다.positioned 요소들 중 z-index 값이 높을수록 위에 쌓인다.새로운 쌓임 맥락이 생성되면 자식 요소는 해당 맥락 안에서 순서가 결정된다. 설명쌓임 맥락(Stacking Context)은 HTML 요소들을 가상의 z축(깊이) 방향으로 배치하는 개념이다. 기본적으로 요소들은 DOM 순서에 따라 쌓인다. 즉, 뒤에 정의한 요소일수록 화면에선 위에 위치한다. position을 적용한 요소(positioned)는 position을 적용하지 않은 요소(non-positioned)보다 위에 쌓인다. posit..
[시놀로지 나스] Nas에서 Cloudflare DDNS 사용하기 (도커 방식)
[시놀로지 나스] Nas에서 Cloudflare DDNS 사용하기 (도커 방식)
2025.02.10도메인 네임서버로 Cloudflare를 사용한다면 Cloudflare API를 활용해서 DDNS 기능을 무료로 사용할 수 있다. 별도의 클라이언트 프로그램 없이 API 호출만으로 간편하게 설정할 수 있고, 자신의 도메인을 그대로 활용할 수 있는 장점이 있다. 반면, DuckDNS 같은 서비스는 *.duckdns.org 형태의 서브도메인만 제공하므로 원하는 도메인을 직접 사용할 수 없다. 시놀로지 Nas에서 Cloudflare를 연동하는 방법은 크게 작업 스케줄러에 스크립트를 등록하는 방식과 Docker 컨테이너를 실행하는 방식이 있다. 두 방법 모두 설정하는데 크게 어렵지 않지만 환경변수를 통해 설정을 관리하기 용이한 Docker 방식을 추천한다. 기본적으로 1개 도메인(example.com)에 대한 여..
[React] 리액트 19 업데이트 내용 톺아보기
[React] 리액트 19 업데이트 내용 톺아보기
2025.02.082024년 12월 React 19의 stable 버전이 출시됐다. 리액트 공식 블로그를 참고해서 React 19의 주요 변경 사항을 정리해 봤다. 새롭게 선보인 훅은 각종 문서와 예제를 참고해서 이해하기 쉽도록 부연 설명을 덧붙였다. 공식문서에 기존 사용자를 위한 마이그레이션 가이드도 자세하게 나와있으니 참고하자. useTransitionuseTransition은 주로 무거운 작업의 상태 업데이트를 낮은 우선순위로 지정하여 UI 블로킹을 방지할 때 사용한다. React 18 버전까지 startTransition 콜백은 항상 동기적이어야 하는 제약이 있었다. 때문에 콜백 안에서 비동기 호출 같은 작업을 수행할 수 없었다. React 19부턴 startTransition 콜백 안에서 비동기 처리도 가능해졌..
[크롬 확장] 페이지 목차를 팝업으로 표시해주는 - Smart TOC
[크롬 확장] 페이지 목차를 팝업으로 표시해주는 - Smart TOC
2025.02.03긴 내용을 읽다 보면 이전 또는 다음 단락으로 이동해야 할 때가 많다. 하지만 매번 마우스로 스크롤해서 원하는 단락을 찾기 번거롭기 때문에 소제목을 기준으로 탐색하면 훨씬 쉽게 찾을 수 있다. 이런 소제목들은 목차에서 한눈에 확인할 수 있다. 위키피디아 같은 사이트는 사이드바에 목차를 제공하고 현재 보고 있는 단락의 소제목은 굵게 강조 표시된다. 아쉽게도 많은 사이트는 위키피디아 같은 목차를 따로 제공하지 않는다. Smart TOC 라는 크롬 부가기능을 사용하면 현재 페이지의 제목 태그(h1, h2, ...)를 기준으로 사이드바 혹은 플로팅 메뉴 형태로 목차를 볼 수 있다. 부가기능을 설치하고 툴바에 있는 Smart TOC 아이콘을 클릭하면 목차 플로팅 메뉴가 표시된다. 플로팅 메뉴 위치는 드래그해서 ..
Cloudflare DNS 레코드 설정 방법 (티스토리, Vercel 등 오류 해결)
Cloudflare DNS 레코드 설정 방법 (티스토리, Vercel 등 오류 해결)
2025.02.02얼마 전 도메인 네임 서버(DNS)를 AWS Route 53에서 Cloudflare로 옮겼다. Route 53은 호스팅 영역당 매월 ＄0.5 비용이 발생하고(추가 호스팅 영역은 ＄0.1) 100만 쿼리당 ＄0.4 누진 과금이 적용된다. 반면, Cloudflare는 이러한 비용 없이 무료로 사용할 수 있다. 또한 Cloudflare 프록싱을 활성화하면 별도 설정 없이 CDN을 사용할 수 있고 웹 애플리케이션 방화벽(WAF), DDoS 보호 등 다양한 보안 기능도 무료로 제공한다. 규모가 크지 않은 웹사이트라면 비용/기능 면에서 Cloudflare가 더 적합하다고 판단했다. 오늘은 티스토리, Vercel 등의 DNS 레코드를 설정할 때 발생했던 문제와 해결 방법에 대해 정리해 봤다. 티스토리레코드 설정유형..
[Next.js] Dynamic Routes 다이나믹 라우트
[Next.js] Dynamic Routes 다이나믹 라우트
2025.01.31TL;DR[slug] : 단일 경로 세그먼트 포착[...slug] : 다중 경로 세그먼트 포착(Catch-All)[[...slug]] : 루트 경로를 포함한 모든 경로를 선택적으로 포착(Optional Catch-All) Dynamic Segments정확한 세그먼트 이름을 미리 알 수 없을 때 폴더 이름을 대괄호로 감싸면 다이나믹 세그먼트로 작동. 세그먼트 이름은 layout, page 또는 route 파일에서 params 프롭으로 값 조회 가능. RouteURL ExampleParamsapp/blog/[slug]/page.js/blog/a{ slug: 'a' }app/blog/[slug]/page.js/blog/b{ slug: 'b' }루트 경로(blog/)에 페이지 없으면 접근 불가. Catch-..
[macOS] 맥에서 잘라내기 단축키 사용하기 - Command X
[macOS] 맥에서 잘라내기 단축키 사용하기 - Command X
2025.01.31윈도우(Windows)는 파일/폴더를 선택하고 ctrl + x 잘라내기 단축키를 누른 후, 다른 위치에서 붙여 넣기 하면 원래 위치에 있던 파일/폴더가 해당 위치로 이동한다. 아쉽게도 맥(macOS)에선 윈도우의 잘라내기 같은 단축키가 없다. 대신 이와 유사한 (복사한)파일 이동 단축키를 제공한다. (파일/폴더 선택 후) 복사: command + c(다른 폴더에서) 이동: command + option + v 하지만 command + option + v 단축키를 누르는 게 은근히 불편해서 잘 사용하지 않게 된다. 그러던 중 맥에서도 윈도우의 잘라내기 단축키를 사용할 수 있도록 해주는 Command X 무료 앱을 발견했다. 이 앱은 Gifski, Refined GitHub, Menu Bar Calenda..
[Next.js] App Router 공식 튜토리얼 톺아보기
[Next.js] App Router 공식 튜토리얼 톺아보기
2025.01.30Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다. Optimizing Fonts and ImagesCumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다. 예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아..