Footnotes

  1. flexbox | 파일명에 ellipsis 효과 적용, 단 파일 확장자는 제외한다. ↩

  2. :truncated 개념이 없기 때문에 스크립트로 ResizeObserver와 영역값을 체크해서 구현한 내용. ↩

#css#ellipsis
#108

인라인 요소에 bold 스타일이 적용될 경우 레이아웃 시프팅 현상이 발생하기 때문에 해당 이슈를 해결하는 방법들.

Footnotes

  1. text-shadow로 우회하는 방법이 주 해결방법으로 올라왔다. ↩

  2. content 속성과, grid 레이아웃을 이용한 방법. ↩

#css#layout shift#bold
#107

최신 CSS 기능 및 트렌드

레이아웃과 반응형 디자인

CSS 애니메이션 및 효과

텍스트 및 타이포그래피

스타일 가이드 및 접근성

CSS와 JavaScript의 조합

CSS 아키텍처 및 모듈화

background

#css#bookmarks
#106

discard1

git checkout -- ./index.js

// 마지막 커밋 시의 상태로 되돌립니다.
git reset --hard

리모트 브랜치 가져오기

git remote update

Footnotes

  1. 명령어로 discard를 하려면 ↩

#git
#105
# 마지막 커밋 해시
git log --pretty=format:'%h' -n 1

# 유저정보
git config user.name
git config user.email
#git
#101

Using Slack Slash Commands to Send Data from Slack into Google Sheets

  1. 사람들이 추천한 책을 기록한다
  2. 슬랙 -> 구글시트
  3. 슬랙 커맨드 설정 /book + 구글앱스 스크립트 url 연결1
  4. POST로 전송 받은 데이터값을 기반으로 데이터 처리 완료

Footnotes

  1. 꿀벌개발일지 :: 구글 앱스 스크립트에서 비동기 작업 추가하기 doPost에서 비동기 처리 ↩

#google_apps_script#slack
#97

homebrew, brew1

brew bundle dump
brew bundle

Footnotes

  1. https://gist.github.com/cbcruk/b417d085163bb7d7244dd1815885b8cb ↩

#brew
#96

이미지 저장1

  • 페이지에서 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 ↩

#puppeteer#image
#93

setExtraHTTPHeaders 호출하기

await page.setExtraHTTPHeaders(headers)

인터셉트로 가로채기

await page.setRequestInterception(true)

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

  interceptedRequest({ headers })
})
#puppeteer#headers
#92

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)
#puppeteer#cookies
#91
19 중 14페이지
이전 페이지다음 페이지