• 혜택은 웹뷰로 존재함
• GraphQL을 사용 중

useSWR(
  `{
    pages {
      user_group
      highlight_color
      page_list {
        type
        page_id
        page_name
        is_new
      }
    }
  }`,
  (query) => request('https://api.zigzag.kr/api/2/graphql', query)
)

# /home/USERNAME/.zshrc

HOME="/mnt/c/Users/cbcru"
DL="$HOME/Downloads"

if [[ $PWD == $HOME ]]; then
    cd $DL
fi

extractFrames() {
  ffmpeg -i $1 -vf fps=30 output_frame_%d.png
}

# $1 = frames로 사용될 파일들
# $2 = output 파일
# Example: concatFrames ./frame_%5d.png output.webm
concatFrames() {
  ffmpeg -framerate 30 -i $1 -c:v libvpx-vp9 -pix_fmt yuva420p $2
}

# $1 = frame로 사용될 파일
# $2 = output 파일
# Example: frameToVideo frame.jpg output.mp4
frameToVideo() {
  ffmpeg -loop 1 -i $1 -c:v libx264 -t 10 -pix_fmt yuv420p $2
}

# $1 = 인코딩할 영상 video.mp4
# $2 = output 파일명
encodingVideo() {
  ffmpeg -an -i $1 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 "${$2}.mp4"
  ffmpeg -i "${$2}.mp4" -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis "${$2}.webm"
}

---

• Encoding Video

서버/프론트 구분이 없는 환경일 경우 옜날에는 이렇게 세팅해서 개발

const bs = require('browser-sync').create()

bs.init({
  port: 8081,
  https: false,
  proxy: 'http://localhost:8080',
  serveStatic: [
    {
      route: '/resources',
      dir: 'src/main/webapp/resources',
    },
  ],
  files: 'src/main/webapp/resources/**/*',
  open: false,
})

서비스워커로 fetch를 감지해서 해당 기능을 구현한다는 내용. 개인적으로는 mock은 간단하게 구현 가능할 것 같은데 이미 같은 기능의 잘 만들어진 라이브러리들이 있으니까 아이디어 정도로 생각하면 될 것 같다.

addEventListener('fetch', e => { 
  // e.request
  // e.respondWith
})

• How To Run a Proxy Server Inside Your Browser | by Danny Moerkerke | Better Programming
• MSW – Seamless API mocking library for browser and Node | Mock Service Worker

charles

• The Android Emulator and Charles Proxy: A Love Story | by Mark Dappollone | Medium
• Is it possible to rewrite a status code with Charles Proxy? - Stack Overflow

fiddler

• Web Performance Calendar » Fiddler AutoResponder¹

mitmproxy

• mitmproxy로 iOS 기기의 네트워크 트래픽 살펴보기 :: Outsider’s Dev Story
• Android nougat 이상 emulator에서 mitmproxy 사용하기 | by Jungwook Park | kjcoop | Medium

---

Footnotes

1. AutoResponder기능을 어떻게 활용 가능한지 알려주는 내용. delay 추가로 응답 시간 조절이 가능하므로 font, script 로딩 시간을 늘려서 시각적으로 확인이 가능하다. ↩

localtunnel은 쉽게 테스트하고 공유할 수 있도록 로컬 호스트를 공개합니다! 다른 사람들이 변경 사항을 테스트하도록 하기 위해 DNS를 엉망으로 만들거나 배포할 필요가 없습니다.

app.listen(PORT, async () => {
  const tunnel = await localtunnel({
    port: PORT,
    subdomain: name,
  })

하지만 너무 느려서 ngrok 쓰는게 현실적일수도 있겠다. -20220917

• awesome-tunneling
• cloudflared
• ngrok
• localxpose

---

• How to test webhooks on localhost¹

---

Footnotes

1. 로컬 환경에서 웹훅 테스트를 위해, API 엔드포인트를 만들고 localtunnel이나 ngrok을 사용하기. ↩

• Monorepo Explained
• Monorepos are changing how teams build software – Vercel

# 특정 패키지에 모듈을 설치해야한다면
yarn workspace <workspace_name> <command>

// package.json 파일에 로컬 경로를 지정하는 방법. 파일 시스템에 있는 패키지 디렉터리를 사용할 수 있음.

{
  "dependencies": {
    "bar": "file:../foo/bar"
  }
}

---

• package.json | npm Docs

CSV와는 다르다! CSV와는!

const fs = require('fs')
const XLSX = require('xlsx')

const buf = fs.readFileSync('developer_labels_20181221.xlsx')
const workbook = XLSX.read(buf, { type: 'buffer' })

const roa = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {
  header: 1,
})

const result = roa
  .slice(1)
  .map((item) => item.slice(1, 4))
  .filter((item) => item.some(Boolean))
  .reduce(
    (p, n) => {
      const [key, en, ko] = n
      const newKey = key.toLowerCase().replace(/\-/g, '_')

      p['en'][newKey] = en
      p['ko'][newKey] = ko

      return p
    },
    { en: {}, ko: {} }
  )

fs.writeFileSync('en.json', JSON.stringify(result.en), 'utf8')
fs.writeFileSync('ko.json', JSON.stringify(result.ko), 'utf8')

---

• sheetjs