PWA 하루 만에 도입하기(삽질기) : 개발 일정 중 여유가 생긴 날 숨고 웹서비스에 PWA를 도입한 과정을 설명한 글이다. 작업하는 시간까지 설명하면서 PWA를 살펴보고 서비스 워커를 연결한 뒤에 백그라운드 푸시 알림을 보내려고 시도하다가 시간이 늦어서 포어그라운드 푸시를 구현하면서 삽질한 과정까지 잘 나와 있어서 하루의 개발 과정을 생생히 보는 듯한 재미가 있다.(한국어)
After 13 Years of Polyfills : 요즘은 활동이 많지 않지만 예전에는 꽤 유명한 JavaScript 개발자였던 WebReflection이 13년 동안 Polyfill 라이브러리를 작성한 경험을 적은 글이다. Polyfill은 비표준 기능이나 구현 수준때문에 브라우저 간 차이 나는 부분을 메꾸고 같은 API로 사용하도록 하는 라이브러리를 얘기한다. 2006년 IE4를 타깃으로 한 JSL부터해서 브라우저가 발전하면서 다양한 Polyfill 라이브러리를 작성하면서 Polyfill 영역이 하나의 라이브러리로 전체를 커버하거나 기능별로 Polyfill하는 방향으로 발전하다가 지금은 Babel이 주로 이 영역을 담당하고 있다고 생각한다. 낮은 브라우저를 지원하면 최신 브라우저에도 Polyfill이 적용된 코드가 들어가므로 필요할 때마다 Polyfill를 CDN에서 가져와서 사용할 수 있는 ungap 프로젝트를 설명하고 있다. 예전에 자주 보던 블로그의 저자라서 그런지 읽으면서 더 반가웠다.(영어)
Bypassing anti-incognito detection in Google Chrome : Chrome의 시크릿 모드로 웹사이트에 접속했을 때 웹사이트에서 이를 탐지하는 방법을 설명한 글이다. Chrome 74 이전에는 FileSystem API가 시크릿 모드에서 막힌 것을 이용했고 74버전부터는 임시 스토리지의 크기가 사용 가능한 스토리지의 50%라서 2.4GB일 때 시크릿 모드에서는 최대 120MB이므로 2.4GB 이상의 스토리지는 보통 있을 거라고 가정하고 탐지할 수 있다고 설명하고 있다. 웹사이트에서 사용자가 시크릿 모드로 들어온 것을 굳이 탐지해서 뭔가 하는 것은 좋지 않다고 보지만 또 이런 게 필요한 경우도 있고 접근 방법이 흥미로워서 남겨둔다.(영어)
Getting to Know Puppeteer Using Practical Examples : Chrome을 제어할 수 있는 라이브러리인 Puppeteer의 사용 방법을 정리한 글이다. Peppeteer로 무언가 자동화하려고 할 때 디버깅, 페이지 조작, 마우스 조작, 이벤트 감시 등 필요한 기능의 사용법을 설명하고 성능 측정이나 프로파일링까지 설명하고 있어서 지금의 Puppeteer로 어디까지 할 수 있는지 쉽게 배울 수 있는 글이다.(영어)
Bypassing CAPTCHAs with Headless Chrome : 웹사이트에서 사람인지 봇인지를 구분하기 위해서 사용하는 CAPTCHA 중 Google의 reCAPTCHA를 2Captcha와 Puppeteer를 이용해서 자동으로 뚫는 방법을 설명하는 글로 전체 소스 코드도 제공하고 있다. 물론 설정 방법을 설명할 뿐이고 reCAPTCHA를 뚫는 부분은 2Captcha에 맡기고 있다.(영어)
그 밖의 개발 관련
LINE Manga 데이터베이스 샤딩 – 서버 엔지니어 편 : LINE Manga에서 사용자와 데이터가 증가하면서 기존 MySQL의 부하가 커져서 MySQL을 샤딩해서 사용하도록 변경한 과정을 설명한 글이다. 기존과 새 샤드 DB에 이중으로 쓰는 방식으로 마이그레이션을 6단계에 걸쳐서 진행했다. 서비스가 커지면 대부분 DB에 부하가 커지기 때문에 비슷한 고민을 많이 할 텐데 각 단계에서 고민한 부분이 잘 나와 있고 나중에 샤드를 늘리기 위해서 65,535로 나눈 나머지로 해시 슬롯값을 정한 것도 흥미로운 부분이다.(한국어)
(번역) 2019년 7월 2일 Cloudflare 장애 보고서 : Cloudflare에서 올린 장애 보고서를 번역한 글이다. 지난 뉴스레터에도 소개했지만 방화벽에서 사용했던 정규표현식이 CPU를 100% 사용하면서 30분간 장애가 발생했는데 이 글에서 Cloudflare가 어떤 배포 규칙을 가지고 있고 이번 장애는 왜 발생하게 되었는지가 자세히 나와 있다. 원글이 길어서 못 읽어봤다면 번역 글이라서 훨씬 읽기 편할 것이다.(한국어)
Introducing Duotone : Font Awesome에서 2가지 색상의 아이콘을 지원한다. 2가지 레이어를 이용해서 아이콘을 만들어서 색상을 지정할 수 있고 두 색의 교체나 투명도를 조정할 수 있다. 이는 Font Awesome Pro에서 이용할 수 있다.(영어)
Comments