HOME
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 Calendar 등..
[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 메인 하드 디스크 교체 과정을 소개해 보려고 한다. 하드디스크 복사..
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
2024.11.11슬라이딩 윈도우 알고리즘 개념슬라이딩 윈도우 알고리즘(Sliding Window Algorithm)은 배열과 같은 선형 자료구조에서 연속된 구간 내의 데이터를 효율적으로 처리하기 위해 사용하는 기법이다. 특히 배열 내 연속된 요소의 합, 최댓값, 최솟값 등을 계산할 때 유용하다. 슬라이딩 윈도우는 이름 그대로 고정/가변 크기의 범위(윈도우)를 이동(슬라이드)시키면서 필요한 계산을 반복하는 방식이다. 이때 전체 배열을 한 번만 순회하면 되기 때문에 중복 연산을 피하고 시간 복잡도를 개선할 수 있다. 일반적으로 슬라이딩 윈도우 기법을 사용하면 O(n)의 시간 복잡도로 문제를 해결할 수 있다.// 주어진 배열에서 연속된 k개 요소의 최대 합을 찾는 함수function maxSumSubarray(arr, k) ..
[React] 리액트 코드를 개선할 수 있는 4가지 팁
[React] 리액트 코드를 개선할 수 있는 4가지 팁
2024.10.28TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치 4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..
[Flutter] 플러터 기초 내용 정리 - Part 2
[Flutter] 플러터 기초 내용 정리 - Part 2
2024.10.13이전 글: 플러터 기초 내용 정리 Part 1 Data Fetching객체지향 언어인 Dart는 거의 대부분이 클래스 기반으로 구성된다. API 호출, 응답 데이터 타입 정의, 데이터 처리 역시 모두 클래스 내부에서 이루어진다. 먼저 응답 데이터를 나타내는 모델 클래스를 정의한다. 일반적으로 fromJson 이라는 이름 있는 생성자를 사용하여 JSON 데이터를 인스턴스화 시킨다. 아래 예시에선 JSON 객체를 인자로 받기 때문에 초기화 리스트를 사용하여 클래스 필드에 할당하고 있다.// lib/models/webtoon_model.dartclass WebtoonModel { final String id, title, thumb; WebtoonModel.fromJson(Map json) : t..
[Flutter] 플러터 기초 내용 정리 - Part 1
[Flutter] 플러터 기초 내용 정리 - Part 1
2024.10.05배경 지식Flutter 구조💡 Dart는 Just-In-Time(JIT) 컴파일과 Ahead-Of-Time(AOT) 컴파일을 모두 지원한다. JIT 컴파일은 개발 모드에 사용돼서 Hot Reload 같은 빠른 피드백 루프를 제공한다. AOT 컴파일은 배포 모드에 사용돼서 컴파일된 코드가 기기에 더 최적화된 상태로 실행할 수 있게 만든다. 네이티브 개발에선 운영체제(OS)와 직접 상호작용하여 버튼, 텍스트 같은 UI 요소를 생성한다.Flutter는 네이티브 플랫폼의 위젯을 사용하지 않고 자체적으로 UI를 렌더링한다. 이는 비디오 게임 엔진의 작동 방식과 유사하다.Dart로 작성된 코드는 Flutter 프레임워크를 사용하여 UI를 정의하고, 실제 화면에 렌더링하는 작업은 C++로 작성된 Flutter 엔진..