레이블이 파비콘인 게시물을 표시합니다. 모든 게시물 표시
레이블이 파비콘인 게시물을 표시합니다. 모든 게시물 표시

2024년 10월 14일 월요일

제작한 웹프로그램을 도메인에 붙이기(+도메인URL)

By 

제작한 웹프로그램을 도메인에 붙이기

도메인을 withmake.co.kr/favicon-generator와 같이 변경하려면, 다음 단계를 통해 설정할 수 있습니다.

1. 블로그 설정에서 페이지 경로 수정하기

  • Blogspot의 Blogger 대시보드로 이동합니다.
  • 원하는 블로그 게시물(현재 블로그 포스트)을 편집하거나 새로 생성합니다.
  • URL 끝부분의 슬러그를 "favicon-generator"로 설정하여 새로운 페이지 경로를 생성합니다.

2. 커스텀 도메인 연결 설정

  • 이미 withmake.co.kr 도메인이 Blogspot에 연결되어 있다면, 게시물의 URL 경로를 favicon-generator로 변경하여 원하는 경로로 접근이 가능합니다.
  • 예: https://withmake.co.kr/favicon-generator.

3. 리디렉션 설정 (선택 사항)

  • 사용자가 예전의 블로그 주소를 입력해도 새 주소로 자동 이동하도록 리디렉션 설정을 고려할 수 있습니다.
  • 이를 위해서는 DNS 설정에서 특정 경로로 리디렉션하거나 Blogger에서 직접 리디렉션 설정을 할 수 있습니다.

이와 같은 방식으로 원하는 도메인과 경로로 콘텐츠를 접근 가능하도록 만들 수 있습니다. 더 궁금한 점이나 설정에 어려움이 있다면 추가적으로 도와드릴게요!

Share:  Facebook Twitter Google+
Read More

2024년 10월 10일 목요일

파비콘 생성기 블로그 배포 가이드

By 

파비콘 생성기 블로그 배포 가이드

1. 독립 웹 애플리케이션으로 빌드하기

  1. 새로운 React 프로젝트 생성:
npx create-react-app favicon-generator 
cd favicon-generator
src/App.js를 이전에 만든 FaviconGenerator 컴포넌트로 교체합니다.

  1. 필요한 경우 Tailwind CSS를 설정합니다.

  2. 애플리케이션을 빌드합니다:

    npm run build

2. 빌드된 파일 호스팅

  • 빌드된 파일을 정적 호스팅 서비스(예: GitHub Pages, Netlify, Vercel)에 업로드합니다.
  • 호스팅 서비스에서 제공하는 URL을 기록해 둡니다.

3. 블로그에 삽입하기

블로그 플랫폼에 따라 다음 방법 중 하나를 선택합니다:

iframe 사용

JavaScript로 동적 삽입

(function()
   { var iframe = document.createElement('iframe'); 
       iframe.src = 'https://your-hosting-url.com'; 
           iframe.width = '100%';
           iframe.height = '500px'; 
       iframe.frameBorder = '0'; 
     document.getElementById('favicon-generator').appendChild(iframe); 
})
();

외부 스크립트 로드 (고급)

  1. 빌드된 앱의 main.js 파일을 별도로 호스팅합니다.
  2. 블로그에 다음 코드를 추가합니다: 
<div id="root"></div> <script src="https://your-hosting-url.com/static/js/main.js"></script>

주의사항

  • 호스팅 서비스의 CORS 설정을 확인하세요.
  • 블로그 플랫폼의 보안 정책을 확인하고 필요한 경우 조정하세요.
  • 반응형 디자인을 위해 iframe 크기를 조절할 수 있습니다.

이 가이드를 따라 파비콘 생성기를 블로그의 핫스팟 섹션에 성공적으로 통합할 수 있을 것입니다.

Share:  Facebook Twitter Google+
Read More

구글 블로그스팟 - 파비콘 생성기 구현하기

By 

구글 블로그스팟에서 파비콘 생성기 구현하기

구글 블로그스팟(Blogger)에 React 컴포넌트를 직접 삽입하는 것은 불가능합니다. 하지만 다음 단계를 따라 비슷한 기능을 구현할 수 있습니다.

1. 정적 호스팅 서비스 사용

  1. GitHub Pages, Netlify, Vercel 등의 정적 호스팅 서비스를 사용하여 React 앱을 배포합니다.
  2. 새로운 GitHub 저장소를 만들고 React 프로젝트를 푸시합니다.
  3. 선택한 호스팅 서비스에 연결하고 배포합니다.

2. 블로그스팟 템플릿 수정

  1. Blogger 대시보드에서 "테마" > "HTML 수정"으로 이동합니다.
  2. </head> 태그 바로 앞에 다음 스크립트를 추가합니다:
htmlCopy
<scriptsrc="https://unpkg.com/react@17/umd/react.production.min.js"></script><scriptsrc="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><scriptsrc="[YOUR_DEPLOYED_APP_URL]/static/js/main.[HASH].js"></script><linkhref="[YOUR_DEPLOYED_APP_URL]/static/css/main.[HASH].css"rel="stylesheet">
  1. <body> 태그 내에 React 앱을 마운트할 div를 추가합니다:
htmlCopy
<divid="favicon-generator-root"></div>
  1. </body> 태그 바로 앞에 다음 스크립트를 추가합니다:
htmlCopy
<script>ReactDOM.render(React.createElement(FaviconGenerator),document.getElementById('favicon-generator-root'));</script>

3. 커스텀 가젯 추가

  1. Blogger 대시보드에서 "레이아웃" > "가젯 추가"로 이동합니다.
  2. "HTML/JavaScript" 가젯을 선택합니다.
  3. 다음 코드를 입력합니다:
htmlCopy
<divid="favicon-generator-container"></div><script>// React 앱이 로드될 때까지 대기functioncheckReactLoaded(){if(window.FaviconGenerator){ReactDOM.render(React.createElement(FaviconGenerator),document.getElementById('favicon-generator-container'));}else{setTimeout(checkReactLoaded,100);}}checkReactLoaded();</script>
  1. 가젯을 원하는 위치에 배치합니다.

4. CORS 설정

  1. React 앱의 package.json에 homepage 필드를 추가합니다:
    jsonCopy
    "homepage":"https://your-github-username.github.io/your-repo-name"
  2. 배포된 앱의 도메인을 Blogger의 CORS 허용 목록에 추가합니다.

5. SEO 및 성능 최적화

  1. React 앱을 최적화하여 로딩 시간을 최소화합니다.
  2. 필요한 경우 lazy loading을 구현합니다.
  3. 메타 태그를 적절히 설정하여 SEO를 개선합니다.

6. 테스트 및 디버깅

  1. 다양한 브라우저와 기기에서 기능을 테스트합니다.
  2. 개발자 도구를 사용하여 오류를 확인하고 수정합니다.

이 방법을 통해 구글 블로그스팟에서 React 기반의 파비콘 생성기를 사용할 수 있습니다. 단, 블로그스팟의 제한사항으로 인해 완벽한 통합은 어려울 수 있으며, 사용자 경험이 독립 웹 앱에 비해 떨어질 수 있습니다.

Share:  Facebook Twitter Google+
Read More