본문 바로가기

웹 프로그래밍/웹 프로젝트22

수익형 웹사이트를 위해 구글 애드센스 적용(Next.js + github pages 배포) 수익형 사이트를 위해 구글 애드센스를 달아보겠다. 나는 도메인에 미리 구글 애드센스 승인을 받아놓은 상태이기 때문에, 승인 과정 없이 광고를 사이트에 게재하는 과정만 담아볼 예정이다. 먼저 구글 애드센스 사이트에 접속한다. Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. adsense.google.com 만약 구글 애드센스에 광고를 게시하고자 하는 사이트를 등록해 두지 않았다면, 사이트 탭으로 가서 사이트부터 등록해야 한다. 나는 이미 사이트가 등록되어 있는 상태이기 때문에 바로 광고 게시 관련 내용부터 살펴보겠다. 광고 스.. 2024. 1. 21.
Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml, robots.txt 생성 및 등록) sitemap.xml, robots.txt 추가 next-sitemap 패키지 설치 npm i next-sitemap 프로젝트 루트 폴더에 next-sitemap.config.js 생성한 뒤 만들고자 하는 사이트맵 정보를 입력해 준다. /** @type {import('next-sitemap').IConfig} */ module.exports = { siteUrl: "내 웹사이트 도메인" || "http://localhost:3000", generateRobotsTxt: true, sitemapSize: 7000, changefreq: "daily", priority: 1, robotsTxtOptions: { policies: [ { userAgent: "*", allow: "/", }, ], }, };.. 2024. 1. 21.
웹 사이트 Favicon 등록 및 SEO 최적화 Favicon Favicon 디자인 favicon을 만들기 위해 canva에서 직접 디자인을 했다. 디자인은 안에서 주는 템플릿을 이용해서 간단하게 만들 수 있다. 캔버스 사이즈는 48x48로 제작했다. Favicon 생성 https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 만든 이미지를 위 사이트에 드래그하면 간단하게 favicon을 생성할 수 있다. 이렇게 생성된 favicon을 favicon이라는 이름으로 변경한 뒤 public 폴더에.. 2024. 1. 20.
GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상 방지) 이전 포스팅에서 GitHub Pages를 이용해 프로젝트 배포까지 마쳤다. Next.js 프로젝트 Github Pages 배포 이전에 React로 이력서 페이지를 만들어 github에 배포한 적이 있다. github을 이용한 배포는 처음이었기에 당시에도 시간이 꽤 걸리기는 했지만 관련 정보가 많기도 했고 단순히 명령어를 입력하는 florescene.tistory.com 이제 배포한 사이트에 유료로 구매한 도메인을 등록하고, 구글 콘솔 및 네이버 서치 어드바이저 등록, 구글 애드센스 적용과정이 남았다. 시행착오를 상당히 많이 거쳤기 때문에 나중을 위해서라도 과정을 등록해 두고 싶었다. 기록을 하지 않으면 금세 휘발되어 버리기 때문에... 커스텀 도메인 등록 나는 hosting.kr 사이트에서 유료 도메인을.. 2024. 1. 20.
Next.js 프로젝트 Github Pages 배포 이전에 React로 이력서 페이지를 만들어 github에 배포한 적이 있다. github을 이용한 배포는 처음이었기에 당시에도 시간이 꽤 걸리기는 했지만 관련 정보가 많기도 했고 단순히 명령어를 입력하는 터미널을 바꾼 것으로 오류가 해결되었기 때문에 배포가 어렵지는 않았다. 하지만 next.js 배포는 더 어려웠다. next.js 배포 방법이 최근에 살짝 변경된 모양이었는데, 그 이유 때문에 검색을 해서 상위권에 올라와 있던 포스팅을 따라 해서는 배포가 정상적으로 진행되지 않았다. 혼자 에러 코드 관련해서 찾아보고 여러 방법으로 배포를 진행해 본 결과 다행히도 웹 사이트 배포에 성공했고, 이후의 웹 사이트 배포에 참고하기 위해 실제로 배포에 사용한 방법을 정리해 보기로 했다. `gh-pages` 패키지 .. 2024. 1. 19.
스톱워치 프로젝트: localStorage에 스톱워치 시간 저장 및 불러오기 프로그램 실행 시 localStorage가 비어있는지 확인하고, 비어있지 않다면(저장된 데이터가 있다면) 데이터를 불러오게 하였다. 데이터를 변경하면서(초기 리셋값은 모두 0) 화면에 보여지는 값도 변경해 주었다. const browserTimeData = localStorage.getItem("stopwatch"); if (browserTimeData !== null) { //localStorage에 데이터가 저장되어 있다면 const parsedData = JSON.parse(browserTimeData);//JSON 형태로 얻어온 데이터를 해석한다. hour = parsedData[0]; min = parsedData[1]; sec = parsedData[2]; tenMillisec = parsed.. 2024. 1. 10.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 14. Back end 메인화면 기능 구현2 (게시물 검색, 유저 정보 수정) 보호되어 있는 글 입니다. 2023. 6. 17.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 13. Back end 메인화면 기능 구현 (조회수 Top3, 전체 글 리스트, 인기검색어 GET) 보호되어 있는 글 입니다. 2023. 6. 15.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 12. Front end 로그아웃 처리 보호되어 있는 글 입니다. 2023. 6. 14.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 11. Back end 비밀번호 암호화 및 Front end 인증 적용 보호되어 있는 글 입니다. 2023. 6. 14.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 10.Back end Spring Security로 인증 처리 구현 보호되어 있는 글 입니다. 2023. 6. 11.
[React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 9. Front end 화면 및 코드 정리 보호되어 있는 글 입니다. 2023. 6. 9.
반응형

티스토리툴바