로맨테크
POPULAR POSTS
-
[HTTP] Cache-Control 헤더
[HTTP] Cache-Control 헤더
2025.03.31Cache-Control 헤더: 클라이언트와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더(특정 응답을 얼마동안, 어떻게 캐싱할지 지정). 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutablepublic: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱할 수 있도록 허용.max-age=31536000: 캐시 생성 후 1년(31, 536,000초) 동안 fresh 상태 유지.immutable: 한 번 캐시 된 후 변경되지 않음(불필요한 재검증 요청 방지). 동적인 리소스동적인 리소스는 항상 최신 상태를 유지할 수 있도록 매번 서버에 재검증Cache-Control: .. -
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의..
LATEST POSTS
-
[HTTP] Cache-Control 헤더
[HTTP] Cache-Control 헤더
2025.03.31Cache-Control 헤더: 클라이언트와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더(특정 응답을 얼마동안, 어떻게 캐싱할지 지정). 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutablepublic: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱할 수 있도록 허용.max-age=31536000: 캐시 생성 후 1년(31, 536,000초) 동안 fresh 상태 유지.immutable: 한 번 캐시 된 후 변경되지 않음(불필요한 재검증 요청 방지). 동적인 리소스동적인 리소스는 항상 최신 상태를 유지할 수 있도록 매번 서버에 재검증Cache-Control: .. -
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의..