본문 바로가기

전체 글147

광고 수익 방식 CPC CPM 어필리에이트 광고 수익 방식 CPC CPM 어필리에이트광고 수익 방식에는 여러 가지가 있으며, 대표적으로 CPC, CPM, 그리고 **어필리에이트 마케팅(Affiliate Marketing)**이 있습니다. 각 방식은 광고가 수익으로 연결되는 구조가 다르기 때문에, 어떤 모델이 더 적합한지는 콘텐츠의 특성과 트래픽 유형에 따라 달라집니다.1. CPC (Cost Per Click, 클릭당 비용)개념: 방문자가 광고를 클릭할 때마다 수익이 발생하는 구조입니다.주요 플랫폼: Google AdSense, Naver 애드포스트 등.장점: 클릭만 발생하면 수익이 생기므로 비교적 쉽게 수익화 가능.단점: 클릭률(CTR)이 낮으면 수익이 작을 수 있고, 클릭당 단가(CPC)는 광고 종류와 타깃에 따라 크게 달라집니다.2. CPM .. 2025. 5. 2.
react-ga4 react-ga4react-ga4는 React 애플리케이션에서 Google Analytics 4 (GA4) 를 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다.이는 Google이 이전 Universal Analytics에서 GA4로 전환함에 따라 생긴 변화에 대응하기 위해 만들어졌습니다.주요 특징GA4 지원: react-ga는 Universal Analytics에 맞춰져 있고, react-ga4는 GA4 전용입니다.React 친화적 사용법: React 앱 내에서 페이지뷰, 이벤트, 사용자 속성 등을 추적하기 쉽게 해줍니다.SPA 지원: 페이지 리로드 없이 라우팅이 이루어지는 React 환경에서도 정확한 페이지 추적이 가능하도록 설계되어 있습니다.설치 방법npm install react-ga4기본 사용법.. 2025. 5. 1.
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.

티스토리툴바