본문 바로가기

분류 전체보기149

js-cookie js-cookiejs-cookie는 JavaScript에서 쿠키를 쉽게 설정하고 관리할 수 있도록 도와주는 작은 NPM 라이브러리입니다. 순수 JavaScript로 작성되었으며, 브라우저에서 쿠키를 간단하게 생성, 조회, 삭제할 수 있게 해줍니다.주요 기능1. 쿠키 설정 (Set a cookie)Cookies.set('name', 'value'); 기본적으로 path=/로 설정되며, 브라우저를 닫아도 유지됩니다.유효기간 설정도 가능:Cookies.set('name', 'value', { expires: 7 }); // 7일 동안 유지2. 쿠키 읽기 (Get a cookie)Cookies.get('name'); // => 'value'3. 쿠키 삭제 (Delete a cookie)Cookies.remove.. 2025. 5. 3.
보안 개인정보 보호 noreferrer, noopener 보안 개인정보 보호 noreferrer, noopenerHTML의 태그에서 rel 속성에 사용하는 noreferrer와 noopener는 보안 및 개인정보 보호와 관련된 중요한 값들입니다. 특히 링크가 target="_blank"일 때 매우 중요하게 작용합니다.1. noopener역할: 새 창에서 열리는 페이지(예: target="_blank")가 원래 페이지의 JavaScript window 객체에 접근하는 것을 차단합니다.보안 이유: 원래 페이지를 제어하거나 피싱, 악성 코드 실행 등의 보안 위험을 막기 위해 사용됩니다.Example이렇게 하면, example.com은 window.opener를 통해 원래 페이지를 제어할 수 없습니다.2. noreferrer역할: 위의 noopener의 효과를 포함.. 2025. 5. 2.
광고 수익 방식 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.

티스토리툴바