본문 바로가기

전체 글156

CloudFlare 배포 및 해제 (CloudFlare Pages 정적 사이트) CloudFlare 배포 및 해제 (CloudFlare Pages 정적 사이트) 배포 방법1. CloudFlare 사이트( https://www.cloudflare.com/ )에 들어가서 회원가입 후 로그인을 하면 아래와 같은 화면이 열린다. 2.왼쪽 메뉴에서 'Compute (Workers)' 메뉴의 'Workers & Pages' 메뉴를 선택 한 후, 가운데 화면에서 'Pages' 탭을 선택한다.'Connect to Git' 버튼을 클릭하여 Git 을 연결해서 배포하는 방식을 선택한다.(이후부터는 GitHub 저장소를 연결해서 배포하는 방법이다.) 3. 'GitHub ' 탭을 선택하고 가운데 'Connect Github' 버튼을 클릭한다. 4. 'only select repositories'를 선택 .. 2025. 4. 26.
배포 플랫폼 비교 Cloudflare, Vercel, AWS, Netlify 배포 플랫폼 비교 Cloudflare, Vercel, AWS, Netlify1. Cloudflarehttps://www.cloudflare.com/기본 성격: 글로벌 CDN(콘텐츠 전송 네트워크)과 보안 서비스 제공업체.주요 기능:DDoS 방어, 방화벽, DNS 관리Cloudflare Pages로 정적 사이트 배포 가능Workers로 서버리스 함수도 가능장점: 빠른 응답 속도, 뛰어난 보안, 무료 요금제로도 충분히 강력함, 자동 배포 가능, SSL 기본 지원단점: 복잡한 백엔드 워크플로우에는 제약이 있음2. Vercelhttps://vercel.com/기본 성격: 프론트엔드 중심의 서버리스 배포 플랫폼주요 기능:Next.js 공식 지원 (Vercel이 만든 프레임워크)Git 연동 자동 배포 (push →.. 2025. 4. 20.
react-circle-flags 만국기 react-circle-flags 만국기react-circle-flags는 React 애플리케이션에서 다양한 국가의 국기를 원형(Circle) 아이콘 형태로 쉽게 사용할 수 있게 해주는 오픈소스 라이브러리입니다. 보통 국가 선택 드롭다운이나 사용자 프로필 등에 자주 사용됩니다.주요 특징원형 형태의 깔끔한 국기 아이콘SVG 기반이라 고해상도에서도 선명React 컴포넌트 형태로 간편한 사용다양한 크기 지원설치 방법npm install react-circle-flags기본 사용법import CircleFlag from 'react-circle-flags';function App() { return ( Hello! );}주요 PropsProp설명예시co.. 2025. 4. 19.
두 라인 사이에 색 채우기 Chart.js 두 라인 사이에 색 채우기 Chart.js Chart.js로 두 라인 사이에 색을 채우되, 두 라인 중 더 높은 라인의 색으로 라인 사이를 채우는 차트를 만들어보았다.차트 내용은 다음과 같다.서로 다르게 움직이는 In temp와 Out temp가 있다.In temp가 Out temp보다 높을 때는 In temp 라인의 아래에 In Temp 라인 색이 채워짐.Out temp가 더 높아지면 반대로 설정.구현의 핵심은 fill 속성이다.fill 속성으로 Chart.js에서 라인 차트 아래 영역을 채우는 방식을 제어한다.fill 속성 구조fill은 라인 차트에서 선 아래를 채울지, 그리고 어떻게 채울지를 정하는 설정이다.각 데이터셋 안에 개별적으로 지정할 수 있다.fill: { target: 1, // 또.. 2025. 4. 13.
react-share 소셜 미디어 공유 버튼 라이브러리 react-share 소셜 미디어 공유 버튼 라이브러리 react-share는 React 애플리케이션에서 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 도와주는 인기 있는 오픈 소스 라이브러리다. 트위터, 페이스북, 카카오톡, 텔레그램 등 다양한 플랫폼에 맞는 공유 버튼을 제공하며, 각 플랫폼의 URL 스킴을 자동으로 처리해줘서 매우 간편하게 사용할 수 있다.주요 특징다양한 소셜 플랫폼 지원: Facebook, Twitter, Telegram, WhatsApp, Reddit, LinkedIn 등아이콘 포함 버튼 제공커스터마이징 가능 (아이콘 크기, 스타일 등)TypeScript 지원설치 방법npm install react-share또는yarn add react-share 기본 사용법 예시예를 들어 페이.. 2025. 4. 13.
Pretendard 폰트 Pretendard 폰트Pretendard는 오픈 소스 산세리프 한글 웹폰트로, 깔끔하고 현대적인 느낌을 주는 글꼴이다.애플의 San Francisco와 비슷한 느낌을 주면서도 한글 지원이 뛰어나서 UI 디자인, 웹사이트, 앱 등 다양한 곳에 많이 사용되고 있다. Orion Cactus라는 디자이너/개발자 (본명: 김용민)님이 주도해서 만들었다.GitHub를 통해 오픈 소스로 배포하고, 많은 디자이너/개발자들이 함께 개선에 참여하고 있다.기존 한글 웹폰트들이 대부분 무겁고 성능이 좋지 않다.한글과 영문의 조합이 어색하거나, UI에서 쓸 만큼 정돈된 폰트가 부족했다.애플의 San Francisco처럼 UI 친화적이면서도 한글을 자연스럽게 표현하는 폰트를 원했다. 그래서 Pretendard는 **"SF Pr.. 2025. 4. 13.

티스토리툴바