이미지 저장¹

• 페이지에서 JavaScript를 통해 이미지 추출
  • 캔버스에서 이미지 추출
  • 서버에서 이미지 가져오기
• DevTools 프로토콜을 사용하여 이미지 추출

const tree = await page._client.send('Page.getResourceTree')

for (const resource of tree.frameTree.resources) {
  const { content } = await page._client.send(
    'Page.getResourceContent',
    { frameId: String(page.mainFrame()._id), url: resource.url },
  )
  const contentBuffer = Buffer.from(content, 'base64')
}

page.on('response', async (response) => {
  const url = response.url()
  const buffer = await response.buffer()
})

Footnotes

1. Saving Images from a Headless Browser ↩

setExtraHTTPHeaders 호출하기

await page.setExtraHTTPHeaders(headers)

인터셉트로 가로채기

await page.setRequestInterception(true)

page.on('request', (request) => {
  const headers = {
    ...request.headers()
  }

  interceptedRequest({ headers })
})

httpOnly, secure 플래그 쿠키값이 필요한 경우 CDPSession 실행 후 클라이언트와 통신한다.

const client = await page.target().createCDPSession()
const data = await client.send('Network.getAllCookies')

로컬에 해당 쿠키정보를 임시로 저장해서 재활용하고 만료 시 갱신하는 방법을 사용.

fs.writeFileSync('cookies.json', JSON.stringify(data))

const { cookies } = JSON.parse(fs.readFileSync('cookies.json', 'utf8'))
await page.setCookie(...cookies)

hash 링크로 연결될 경우 스크롤위치가 최상단으로 위치하기 때문에 문제(헤더가 고정일 경우)가 있을수도 있어서 scroll-margin-top으로 제어가 가능한 부분을 설명하고 있다.

• Add scroll margin to all elements which can be targeted - Piccalilli¹
• Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks
• Prevent content from being hidden underneath a fixed header by using scroll-margin-top – Bram.us

---

Footnotes

1. 2ex 유닛을 사용하여 선택한 글꼴의 x 높이의 상대적인 크기로 설정. ↩

function getReverseGeocodeData() {
  const response = Maps.newGeocoder()
    .setLanguage('ko')
    .reverseGeocode(40.758577, -73.984464)

  return response.results.map((result) => {
    return {
      formatted_address: result.formatted_address,
      lat: result.geometry.location.lat,
      lng: result.geometry.location.lng,
    }
  })
}

• reverseGeocode(latitude, longitude)
• setLanguage(language)

• Objects - GitHub Docs¹
  • repository
  • issue
• GitHub Next | Flat Data
  • GitHub - githubocto/flat-demo-google-sheets: A Flat Data GitHub Action demo repo
  • GitHub - mathiasbynens/covid-19-vaccinations-germany: Historical data on COVID-19 vaccination doses administered in Germany, per state.
• GitHub Code Search (Preview)²
• Writing workflows - GitHub Docs
  • Skipping workflow runs - GitHub Docs
  • Create and Publish a GitHub Action in Typescript - ULTIMATE 2023 GUIDE | Leonardo Montini
  • Publishing a simple client-side JavaScript package to npm with GitHub Actions | Simon Willison’s TILs

---

Footnotes

1. GitHub GraphQL API를 통해 쿼리할 수 있는 다양한 개체에 대한 개요. ↩

2. https://grep.app/ ↩

# /home/USERNAME/.zshrc

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

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

A complete, cross-platform solution to record, convert and stream audio and video.

---

# $1 = frames로 사용될 파일들
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"
}

# $1 = 자를 영상, $2 = 시작, $3 = 끝, $4 = output 파일
# Example: cutVideo input.mp4 00:00:00 00:01:00 output.mp4
cutVideo() {
  ffmpeg -i $1 -ss $2 -to $3 -c:v copy -c:a copy $4
}

---

• FFmpeg - Ultimate Guide | IMG.LY Blog

• Command Line Interface Guidelines

---

• zx
• dax
• Stricli
• Wez’s Terminal

---

• CLI: improved¹
• Create Aliases in Bash²
• View Mac Calendar from Command Line³
• Where X=Bash
• WezTerm
• Bash 파라미터 확장 — ${file#* } 로 일괄 이름 변경
• .zshrc — 시작 디렉터리를 Downloads 로
• youtube-dl — --referer 로 403 우회
• npm 스크립트 이름 — npm_lifecycle_event
• 빌드 timestamp — $(date +%s)
• SQLite 탐색 도구 아이디어 — Telescope · VS Code · Bun 단일 실행 파일

---

Footnotes

1. cat, du, find…등등등 기존 명령어에서 개선이 가능한 부분을 설명해주고 있다. ↩

2. 간단한 alias 설정과, arguments값을 받을 수 있도록 .bash_profile에 설정하는 방법 소개 ↩

3. cal이 단순한 달력을 보여주지만 ical-buddy는 맥에 연결된 달력을 보여주는 유틸리티 ↩

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

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,
})