그림 문자에서 Zenn의 글의 확장 기능인 "Zenn Feel Lucky"를 찾습니다.

젠의 글에서 설정한 그림문자를 활용하는 방법을 생각해봤다.

그래픽 문자를 표시하려면 확장 아이콘을 클릭합니다.
그림 문자를 선택하면 그림 문자가 설정된 글만 열 수 있습니다.
평소 기사 제목에서 찾기 때문에 새로운 발견이 있을 수 있습니다!
https://chrome.google.com/webstore/detail/zenn-feel-lucky/hjdfacaikojhdejlhmedcehggcpgnnaj
― Fin ―

프로그램 소개

이러면 끝낼 수 없어요. 제가 만든 프로그램과 공부한 것들을 소개해 드릴게요.
(Zenn의 API를 마음대로 두드리기 때문에 문제가 있으면 대응할 수 있다🙏)
popup.js

const WEB_HOST = 'https://zenn.dev'
const API_HOST = 'https://api.zenn.dev'

// ZennのAPIを利用して記事を取得
window.addEventListener('load', () => {
  const count = 9
  const order = Math.random() < 0.5 ? 'daily' : 'latest'
  const page = Math.floor(Math.random() * 50)
  const params = new URLSearchParams({ count, order, page })

  fetch(`${API_HOST}/articles?${params}`, { mode: 'no-cors' })
    .then((response) => response.json())
    .then((data) => createItems(data))
})

// 絵文字の要素を作成して表示
const createItems = (data) => {
  const container = document.getElementById('container')

  const baseItem = document.createElement('a')
  baseItem.className = 'item'
  baseItem.target = '_blank'
  baseItem.rel = 'noopener'

  const articles = data.articles || []

  // 取得した記事をランダムな順番で表示
  while (articles.length) {
    const i = Math.floor(Math.random() * articles.length)
    const article = articles.splice(i, 1)[0]

    const username = article.user.username
    const slug = article.slug

    const item = baseItem.cloneNode()
    item.href = `${WEB_HOST}/${username}/articles/${slug}`
    item.textContent = article.emoji

    container.appendChild(item)
  }

  // twemoji適用
  twemoji.parse(container)
}

fetch

HTTP 요청은 fetch(url)만 건너뛸 수 있습니다.

fetch('http://example.com/data.json')
  .then(response => response.json()) // レスポンスから JSON を取得する
  .then(data => console.log(data)) // JSON データをコンソールに出力

여기서 수신할 수 있는 response는 JSON 데이터가 아니기 때문에 json()를 이용하여 응답에서 JSON을 얻는다.json() 이외에도 blob()와text() 등의 방법이 있다.
객체를 두 번째 매개변수에 전달하여 옵션을 적용할 수도 있습니다.
POST로 JSON의 데이터를 보낼 때는 이런 프로그램입니다.

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(obj)
})

평소에 axios에 의존하고fetch도 좋아요!

URLSearchParams

URL 뒤에 있는 매개변수를 간단하게 작성하고 조작할 수 있는 클래스입니다.

// オブジェクトから作成
const param = new URLSearchParams({ foo: 'abc', bar: 100 })
console.log(param.toString()) // -> "foo=abc&bar=100"

// 文字列をパースして操作
const param = new URLSearchParams('foo=abc')
param.append('bar', 100)
param.set('foo', 'xyz')
console.log(param.toString()) // -> "foo=xyz&bar=100"

처음 알았어요.요청 매개 변수를 만드는 데 사용합니다!

Twemoji

그림 문자를 그림 파일 (pg/svg) 으로 바꾸는 프로그램 라이브러리입니다.
이번에는 투모지.js 읽기 및 수동 적용
리액트로 Twemoji를 표현할 때 이용하는 것 같다react-emoji-render!
그림 문자가 평탄하고 귀여운 디자인이어서 좋아요!

최후

기사에 그림문자를 설정하는 것을 좋아하기 때문에 활용할 수 있는 방법을 생각해 냈다.
이 확장을 사용하여 새로운 발견을 찾으세요!
시청해주셔서 감사합니다.🙇