qcoding

4) React + Teachable machine 프로젝트 - 배포 (Firebase Hosting 사용 ) + 카카오 애드핏 광고 적용 본문

React

4) React + Teachable machine 프로젝트 - 배포 (Firebase Hosting 사용 ) + 카카오 애드핏 광고 적용

Qcoding 2022. 3. 20. 14:15
반응형

* 해당 글에서는 프로젝트 마지막으로 완성된 react 프로젝트를 Firebase Hosting 서비스를 통해서 배포 하고 배포가 완료된 뒤 카카오 애드핏을 통해 광고를 적용하는 것을 정리하였다.

* 최종완성 사이트
https://politictest-8f628.firebaseapp.com/

나와 닮은 정치인은?

나와 닮은 정치인은? 인공지능으로 알아보기!

politictest-8f628.firebaseapp.com

1) Firebase Hosting

-> 호스팅 서비스를 무료로 이용할 수 있는 것은 Firebase / Amazon / Netlify / Githup 등 여러가지가 있지만 그중에서도 Firebase가 안정적이고, 속도도 빠른 것으로 생각되어 해당 서비스를 사용하였다.

-> 이미 구글링을 하면 React Firebase Hosting에 대한 글들이 많으므로 찾아서 사용하면 되고 여기서는 간략해서 개념에 대해서 설정하도록 한다.

1) Firebase 설치 / 로그인 

npm install firebase-tools -g
firebase login

2) init
--> init은 firebase를 사용할 때 어떤 서비스를 이용할 것이고, 어떤 폴더를 사용할 것인지, githup과 연동을 할 것 인지 등을 묻게 된다.

firebase init

-> firebase init을 실행 하면 위와 같은 단계로 진행되는 데, 호스팅 서비스를 사용할 것이므로 hosting을 선택한다.
또한 어떤 폴더를 public 폴더로 사용할 것이냐고 물어보는데, react의 경우는 npm run build를 수행하게 되면 build폴더에 해당 내용이 들어가게 되므로, build 폴더를 호스팅 해야한다. 그러므로 build를 설정하고, sing-page-app이므로 Yes를 선택한다. Githup과 연동을 할것임을 물어보면 내 경우는 No로 진행하였고, 마지막으로 기존에 있는 index.html을 덮어 쓸 것인지를 물어보는 데 이때 No를 해야한다. 안그러면 Firebase가 가지고 있는 기본적인 index.html로 덮어씌워 버리게 되게 때문이다.

3) 테스트 / 실제배포
-> 실제 배포에 해당하게 된다.

// 이거는 build 폴더를 가지고 local 경로를 통해서 잘 작동하는 지 확인하는 test 방법이다.
firebase serve

// 실제 배포 명령어이다.
firebase deploy

-> 여기서 내가 겪엇던 문제 중 CRA 빌드 시에 실제 홈페이지 경로를 참조하지 못하는 문제가 발생하였다. 이게 무었이냐면 build / index.html 을 보면 여기서는 href에 실제 사이트의 주소인 https://politictest-8f628.firebaseapp.com/ 가 제대로 들어 가있는데, 맨처음 빌드시에는 이게 경로가 표시가 되지 않았던 문제이다.
이렇게 되면 만들어 놓은 og image의 링크가 잘못되어 적용하지 않게 되는 문제가 발생하였다.

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://politictest-8f628.web.app/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><meta property="og:title" content="나와 닮은 정치인은?"/><meta property="og:description" content="나와 닮은 정치인은? 인공지능으로 알아보기!"/><meta property="og:image" content="https://politictest-8f628.web.app/og.png"/><link rel="apple-touch-icon" href="https://politictest-8f628.web.app/logo192.png"/><link rel="manifest" href="https://politictest-8f628.web.app/manifest.json"/><title>인공지능 나와 닮은 정치인찾기</title><script defer="defer" src="https://politictest-8f628.web.app/static/js/main.0b0b69d7.js"></script><link href="https://politictest-8f628.web.app/static/css/main.b5d95a17.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

구글링을 하던 중 아래와 같은 사이트를 발견하였고, 해당 방법으로 문제를 해결하였다.
https://uiyoji-journal.tistory.com/88

[gh-pages] CRA 배포 시 homepage 경로를 참조하지 못할 때

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^ package.json gh-pages를 install한 뒤 script에..

uiyoji-journal.tistory.com

* 해결방법 --> .env 파일을 생성하여 아래와 같이 입력

// .env 파일을 가장 상위에 만들고 아래와 같이 입력
PUBLIC_URL=https://politictest-8f628.web.app/


2) 카카오 애드핏 적용

-> 카카오 애드핏을 적용하려면 카카오 애드핏 사이트에 가입하여 광고단위를 생성하고, 광도 태그를 코드에 입력한 후 다시 배포하면 된다.

1) 코드 적용 
   <ins class="kakao_ad_area" style="display:none;" 
     data-ad-unit    = "DAN-광고단위 id
     data-ad-width   = "320" 
     data-ad-height  = "100"></ins> 
    <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>

2) 빌드
npm run build

3) firebase 배포
firebase deploy

-> 여기서 문제가 react를 사용할 때는
리액트에서는 return 안에서 <script> 태그를 리턴할 수 없다. 는 문제가 있으므로 실제 광고를 넣어야 되는 return 부분에 넣을 수가 없었다. 예전에 프로젝트 했을 때는 react-script-tag나 react-helmet으로 아래와 같이 script 부분을 ScriptTag로 감싸서 사용하였는데, 이렇게 사용하는 것이 맞는 지 싶기도하고 불편하여
# 예전 사용방법

import ScriptTag from "react-script-tag";

 <Kakao_ad>
          <div>
            <ins
              className="kakao_ad_area"
              style={{ display: "none" }}
              data-ad-unit="DAN-광고단위ID"
              data-ad-width="320"
              data-ad-height="100"
            ></ins>
            
            <ScriptTag
              type="text/javascript"
              src="//t1.daumcdn.net/kas/static/ba.min.js"
              async
            ></ScriptTag>
          </div>
</Kakao_ad>

구글링을 하던 중 좋은 사이트를 발견하여 적용하였다.
https://blog.soga.ng/story/39/

[react] 리액트에 카카오 adfit 적용하기

리액트에서 kakao adfit을 적용해서 수익창출을 시작해보자 사실 본 블로그에 adfit을 도입한 목적은 수익창출이 목적이 아니다;; 더 완벽한 사이트를 만들어 나가는 과정을 연습해보려고 한다. 시

blog.soga.ng


--> 아래와 같이 입력하면 광고를 생성할 수 있다. 여기서 className를 변경하면서 여러개의 광고 단위를 생성하는 것도 가능하다.
# 현재 사용방법

// 광고 생성 함수
const KakaoLoadOne=()=>{
      let ins = document.createElement('ins');
      let scr = document.createElement('script');
  
      ins.className = 'kakao_ad_area';
      ins.style = "display:none; width:100%;";
      scr.async = 'true';
      scr.type = "text/javascript";
      scr.src = "//t1.daumcdn.net/kas/static/ba.min.js";
      ins.setAttribute('data-ad-width', '300');
      ins.setAttribute('data-ad-height', '250');
      ins.setAttribute('data-ad-unit', 'DAN-광고 단위 id');
  
      document.querySelector('.adfitOne').appendChild(ins);
      document.querySelector('.adfitOne').appendChild(scr);
    }
    
// useEffect를 통해서 바로 불러옴
    useEffect(() => {
      KakaoLoadOne();
    }, []);


// 광고를 넣을 위치 지정
return (
	<div className='adfitOne'></div>
)
반응형
저작자표시

'React' 카테고리의 다른 글

3) React + Teachable machine 프로젝트 - React를 통한 프로젝트 제작  (1) 2022.03.20
2) React + Teachable machine 프로젝트 - Teachable Machine 모델 생성  (1) 2022.03.20
1) React + Teachable machine 프로젝트 - 닮은꼴 정치인 찾기 개요  (0) 2022.03.20
'React' Related Articles more
Comments