HOME
Perplexity Pro 1년 무료로 사용하기 ($200 절약)
Perplexity Pro 1년 무료로 사용하기 ($200 절약)
2025.03.30Perplexity는 AI 기반 검색엔진으로 입력한 질문과 연관된 자료를 실시간으로 검색한 뒤 이를 바탕으로 답변을 생성한다. 모든 답변은 출처와 함께 제공되므로 올바른 정보인지 여부를 쉽게 검증할 수 있다. 요즘엔 구글 검색보다 Perplexity를 먼저 찾을 정도로 편리하다. Perplexity 요금제는 크게 Free/Pro로 나뉜다. Pro 회원은 하루 300회 이상 프로 검색(복잡한 쿼리 처리)을 이용할 수 있고, Claude 3.7 Sonnet, o3-mini 같은 고급 모델을 선택할 수 있다. 덤으로 월 $5 API 크레딧도 제공한다. 실시간 검색 결과는 선택한 AI 모델을 통해 처리되기 때문에 어떤 모델을 선택했느냐에 따라 답변 퀄리티가 달라진다. Perplexity Pro 가격은 한 달 ..
[Next.js] API 라우트 보호하기 - Unkey
[Next.js] API 라우트 보호하기 - Unkey
2025.03.30OpenAI 같은 LLM(대형 언어 모델) 기반 API로 기능을 개발하다 보면, 자연스럽게 사용량 제한이 필요해진다. Unkey라는 API 관리 플랫폼을 이용하면 API 키 관리, 요청 빈도 제한, 사용량 분석 같은 기능을 손쉽게 구현할 수 있다. API 엔드포인트별로 요청량을 제한하거나 사용자마다 다른 제한 정책을 설정할 수도 있다. Unkey 무료 요금제(Free Tier)는 API 키 1000개, 월 15만 건의 요청까지 사용할 수 있기 때문에 개인 프로젝트에 사용하기 딱 좋다. Next.js를 사용한다면 Unkey에서 제공하는 SDK를 이용해서 더 편하게 통합할 수 있다. 예를 들어 서버 액션이나 API 라우트에 미들웨어처럼 적용하여 인증된 요청만 처리하거나 사용량 제한을 적용할 수 있다. Unk..
[Next.js] dnd-kit을 활용한 칸반(Kanban) 보드 드래그 앤 드롭 구현
[Next.js] dnd-kit을 활용한 칸반(Kanban) 보드 드래그 앤 드롭 구현
2025.03.18일반적으로 칸반 보드는 드래그 앤 드롭을 통해 컬럼이나 태스크 카드의 순서를 자유롭게 변경할 수 있다. 이러한 드래그 앤 드롭 상호작용은 dnd-kit 이라는 라이브러리에서 제공하는 Sortable 프리셋을 이용하면 더 쉽게 구현할 수 있다. dnd-kit은 코어 크기가 10kb 정도로 가볍고 외부 의존성이 없는 장점이 있다. 드래그 제한, 애니메이션, 충돌 감지 등을 커스터마이징 할 수도 있다. dnd-kit을 이용해 칸반 보드를 구현하면서 비교적 까다롭다고 느꼈던 부분들을 정리해 봤다. 코드는 아래 레포지토리에서 확인할 수 있다.레포지토리: https://github.com/romantech/simple-kanban데모 페이지: https://kanban.romantech.net 칸반 데이터 모..
Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기
Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기
2025.03.15브랜디드 링크는 도메인을 활용한 맞춤형 단축 URL이다. 예를 들어 abc.com/123... 같은 긴 주소를 자신의 도메인을 이용해 짧고 직관적인 링크로 변환할 수 있다. bit.ly 같은 주소 단축 서비스에서도 브랜디드 링크 기능을 제공하지만, Growth 유료 플랜(월 $29) 이상에서만 사용할 수 있다. Cloudflare에 도메인을 등록했다면 Sink 라는 무료 오픈소스를 통해 자신만의 짧은 주소 서비스를 구축할 수 있다. 브랜디드 링크뿐만 아니라 애널리틱스, 링크 유효기간 설정 등 다양한 기능을 제공하며, 현재도 활발하게 개발이 진행 중인 프로젝트다. 브랜디드 링크 - 도메인 연동 및 맞춤형 단축 URL 생성애널리틱스 - 방문수, 리퍼러, 지역, 디바이스, 언어, OS 등 통계 제공링크 유효..
[시놀로지 나스] 와일드카드 인증서 적용하기(acme.sh) / Plex 인증서 설정
[시놀로지 나스] 와일드카드 인증서 적용하기(acme.sh) / Plex 인증서 설정
2025.03.10와일드카드 인증서는 단일 도메인과 모든 하위 도메인을 보호할 수 있는 SSL/TLS 인증서로(*.domain.com), 여러 서브도메인을 한 번에 관리할 수 있다. 와일드카드 인증서를 발급하려면 DNS-01 챌린지를 통해 도메인 소유권을 인증해야 한다. 아쉽게도 시놀로지 나스의 기본 기능만으로는 DNS 레코드를 직접 조작할 수 없기 때문에 와일드카드 인증서를 발급할 수 없다. 이 문제는 acme.sh를 사용하면 해결할 수 있다. acme.sh는 DNS 인증 과정을 자동화하여 와일드카드 인증서를 손쉽게 발급하고 갱신할 수 있도록 지원한다. 특히, 시놀로지 나스에서 인증서를 갱신하려면 80/443 포트를 개방해야 하지만, acme.sh는 이러한 포트 개방이 필요 없어서 보안상 훨씬 유리하다. acme.sh의..
[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 콜백 안에서 비동기 처리도 가능해졌..