본문 바로가기

분류 전체보기133

AWS 배포 AWS 배포정적 웹사이트(예: React, Vue, HTML/CSS/JS)를 Amazon S3 + CloudFront + Route 53으로 배포하는 방법 S3 + CloudFront + Route53 배포 가이드1. S3 버킷에 정적 파일 업로드AWS 콘솔에서 S3 이동새 버킷 생성이름: 도메인과 동일하게 설정하면 편함 (예: example.com)퍼블릭 엑세스 차단 해제 (정적 웹 호스팅 시 필요)정적 웹 호스팅 활성화버킷 → "속성" → "정적 웹 호스팅" → 활성화인덱스 문서: index.html오류 문서: 404.html 등정적 파일 업로드빌드된 React, Vue, HTML 파일 등 (index.html, js, css 등) 2. 버킷 퍼블릭 액세스 정책 추가 (CloudFront용){ "V.. 2025. 4. 26.
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.

티스토리툴바