HOME
[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) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아..
[Dev] 시맨틱 버저닝 Semantic Versioning
[Dev] 시맨틱 버저닝 Semantic Versioning
2025.01.27소프트웨어의 버전은 일반적으로 20.12.2 같은 형식으로 표기한다. 이는 소프트웨어 버전 번호를 관리하는 시맨틱 버저닝(Semantic Versioning)이라는 규칙을 따른 것으로, 메이저.마이너.패치 형식으로 구성되어 각 숫자가 특정한 의미를 가진다.Semantic Versioning은 줄여서 SemVer라고도 불린다. 메이저 버전은 호환성에 영향을 미치는 큰 변화가 있을 때 증가하며, 마이너 버전은 호환성을 유지하면서 새로운 기능이 추가될 때 증가한다. 패치 버전은 주로 버그 수정이나 성능 개선과 같은 작은 변경 사항을 나타낸다. 이러한 버전 관리 방식은 소프트웨어의 변경 사항을 체계적으로 전달하는 데 중요한 역할을 한다. 시맨틱 버저닝: 소프트웨어의 버전 번호를 체계적으로 관리하는 방법으로, ..
[React] 리액트의 올바른 useEffect 사용팁
[React] 리액트의 올바른 useEffect 사용팁
2025.01.21리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다. 경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이..
[JS] 자바스크립트 코드 최적화 기법 모음
[JS] 자바스크립트 코드 최적화 기법 모음
2024.12.07"Optimizing Javascript for fun and for profit"라는 자바스크립트 최적화 관련 글의 영어 원문과 번역본을 바탕으로, 부가적인 설명을 추가하고 이해하기 쉬운 언어로 정리해 봤다. 예시 코드도 조금 더 다듬어서 개선했다. 문자열 비교 피하기 Avoid string comparisons문자열 비교는 각 문자를 순차적으로 비교해야 하므로 O(n) 시간복잡도를 갖는다. 특히 문자열 enum을 사용하는 것은 성능 최적화 관점에서 피해야 할 패턴 중 하나다. 자바스크립트 엔진에서 정수(Integer)는 일반적으로 값으로 전달되며, 비교 연산 시 바로 값을 확인할 수 있어 빠르게 처리할 수 있다. 반면 문자열은 메모리에 저장된 위치(포인터)를 참조해 값을 가져온 후 비교하기 때문에 ..
[시놀로지 Nas] 나스 메인 하드디스크 교체하기
[시놀로지 Nas] 나스 메인 하드디스크 교체하기
2024.11.13얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다. DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다. 하드디스크 복사?..