Gatsby 블로그에 Adsense 적용 자신의 블로그에 광고를 게시하기 위해서는 구글의 애드센스(Adsense)를 사용해야 합니다. html 코드를 에 직접 넣는 방법도 있으나 gatsby 플러그인을 사용하면 더 간단하게 적용할 수 있고, 매번 페이지를 생성할때마다 head에 넣어줄 필요가 없어서 적용 및 관리가 편하다는 장점이 있습니다. 방법 1. 개츠비 애드센스 플러그인 적용 우선 플러그인을 설치해봅시다. 아래 명령어와 같이 gatsby-plugin-google-adsense 플러그인을 npm 또는 yarn 통해 설치를 합니다. # npm npm install --save gatsby-plugin-google-adsense # 또는 yarn yarn add gatsby-plugin-google-ad..

permission_hanlder 라이브러리 flutter 에서 카메라와 같이 기기 권한 획득을 위해 편리하게 사용할 수 있는 라이브러리가 있습니다. 본 글에서는 permission_hanlder 라이브러리를 사용하면 쉽게 권한 획득을 할 수 있기 때문에, 해당 라이브러리를 사용해서 권한 획득하는 방법에 대해 소개합니다. 우선 아래 명령어를 통해 설치합니다. flutter pub add permission_handler 권한 획득하기 가이드 문서에도 설명이 잘되어 있으나 간단하게 정리하면, 아래와 같이 권한 획득 요청을 할 수 있습니다. if (await Permission.camera.request().isGranted) { // 권한 획득에 성공했을때에 대한 처리 로직 } else { // 실패한 경..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

플러터 프로젝트에 원하는 프로젝트 적용하기 본 글에서는 네이버 나눔글꼴을 플러터(flutter) 프로젝트에 적용하는 방법에 대해 소개합니다. https://hangeul.naver.com/font/nanum 네이버 글꼴 모음 네이버가 만든 150여종의 글꼴을 한번에 만나보세요 hangeul.naver.com 물론 어떤 폰트를 사용하더라도 적용하는 방법은 동일합니다. 우선, 적용할 폰트를 다운로드 받은 뒤에 프로젝트에 옮깁니다. 본 글에서는 프로젝트 root에 assets/fonts 라는 디렉토리를 생성하도록 하겠습니다. 그리고, 해당 폴더에 다운로드 받은 폰트를 넣습니다. pubspec.yaml 폰트 설정 이미지든 폰트든 리소스 파일을 사용하려면 pubspec.yaml 파일에 정의해햐 합니다. 플러터 프..

WebView 웹뷰(webview)는 네이티브 앱에서 웹 컨텐츠를 띄우기 위해 사용하는 기술입니다. 예시를 들면, 모바일 앱 내에서 결제를 진행할 때, 결제 창을 별도의 브라우저를 띄울 필요 없이 앱 내부에서 바로 웹 화면을 띄울 수 있습니다. 위와 같은 방법으로도 사용할 수 있지만, 스타트 업과 같이 작은 규모의 회사에서는 안드로이드와 iOS 개발, 2개 플랫폼에 대해 모두 개발하기에 리소스가 많이 들기 때문에 웹 개발을 한 뒤 네이티브 앱에 웹 뷰를 띄어서 서비스를 제공하기도 합니다. Flutter에서 Webview 띄우기 flutter에서 손쉽게 웹 뷰를 사용 할 수 있도록 도와주는 라이브러리가 있습니다. 본 글에서는 flutter 개발 팀에서 만든 라이브러리인 webview_flutter 를 사용..

빙 웹 마스터 등록하기 저번에는 네이버 서치어드바이저에 블로그를 등록을 했었습니다. 네이버 서치어드바이저 등록 방법은 아래 글을 참고해주세요. 2023.09.26 - [블로그 운영] - 티스토리 블로그에 "네이버 서치어드바이저" 쉽게 연동하기 (코드 수정 없음) 티스토리 블로그에 "네이버 서치어드바이저" 쉽게 연동하기 (코드 수정 없음) 네이버 웹 마스터 등록 네이버에서 자신의 블로그 글이 검색이 될 수 있도록 하려면, 네이버 서치어드바이저에 자신의 블로그를 등록하는 과정이 필요합니다. 우선, 네이버 웹 마스터 사이트로 bluemiv.tistory.com 이번에는 마이크로소프트의 Bing 웹마스터에 등록하는 방법에 대해 소개하도록 하겠습니다. 우선 아래 사이트로 접속하여 "로그인"을 합니다. https:..

네이버 웹 마스터 등록 네이버에서 자신의 블로그 글이 검색이 될 수 있도록 하려면, 네이버 서치어드바이저에 자신의 블로그를 등록하는 과정이 필요합니다. 우선, 네이버 웹 마스터 사이트로 접속합니다. 구글이나 네이버에 "네이버 웹 마스터" 를 입력해도 되고, 아래 링크를 타고 접속하셔도 됩니다. https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com "사이트 등록"에서 자신의 블로그 주소를 입력합니다. 예시를 들면 아래와 같이 입력합니다. https://bluemiv.tistory.com 블로그 소유 확인 입력을 하고 나면 해당 블로그가 자신이 소유한 블로그가 맞는지 확인하는 과..

tailwindcss tailwindcss는 자주 사용하는 css를 모아놓은 라이브러리로 편리한 유틸리티 css 라이브러리입니다. tailwindcss에는 정말 많은 스타일들이 이미 정의가 되어있어서, 따로 css를 작성할 필요없이 class(className)에만 추가를 하면 스타일이 입혀집니다. 예를 들어, 둥근 사각형을 만든다고 했을때 아래와 같이 html 코드에 class 속성을 추가하고, border-radius 값을 정의해줘야 합니다. .rounded-rectangle { width: 50px; height: 50px; border-radius: 0.25rem; } 만약, tailwindcss 를 사용하게 된다면 훨씬 간단해집니다. (사용하지 않았을때 코드와 비교했을때, 훨씬 간단하게 작성할 ..

아오리의 행방불명 노원점 주말에 라멘이 먹고 싶어져서 여자친구와 "아오리의 행방불명" 노원점에 다녀왔습니다. 예전에 빅뱅의 "승리"가 운영하던 일본라멘 프랜차이즈인데, 한때 인기가 많았던 기억이 있네요. 지금은.. 버닝썬 사건 때문에 브랜드 이미지가 많이 추락한거 같긴하네요 입구에 들어가면 바로 앞에 음식을 주문할 수 있는 포스기가 있습니다. 매장에서 먹을건지 포장해서 먹을건지 선택할 수 있어요. 저희는 매장에서 먹고 가기로 했습니다 저희는 "아오리라멘" 세트를 주문했는데, 사진을 찍은줄 알았는데 사진이 안남아있네요.. 주문이 나오기 전에 가게를 한번 둘러봤습니다. 일러스트?가 있는데 센과치히로의 행방불명이 생각나는 그림이네요. 주문을 하고 나서 원하는 자리에 앉아서, 테이블 위에 번호가 적힌 영수증을 ..

여러가지 방법으로 크롬 extension을 만들 수 있지만, 본 글에서는 React 를 사용해서 크롬 extension을 만드는 방법에 대해 소개합니다. React 프로젝트 생성하기 우선 extension으로 만들 리액트 프로젝트를 CRA를 사용해서 생성합니다. 본 글에서는 타입스크립트 기반의 리액트 프로젝트를 생성하도록 하겠습니다. yarn create react-app my-chrome-app --template typescript chrome extension 만들기 manifest 설정 변경 생성된 프로젝트의 public 디렉토리를 보면 manifest.json 파일이 있습니다. manifest.json 파일은 브라우저에 이 앱에 대한 정보를 알려주는 파일입니다. 이 앱이 크롬 익스텐션이라고 브라..