Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

기술 뉴스 #131 : 19-08-01

웹개발 관련

  • 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로 나눈 나머지로 해시 슬롯값을 정한 것도 흥미로운 부분이다.(한국어)
  • How to get the GitHub Student Developer Pack without a student ID : GitHub에서 13세 이상 학생에게 제공하는 GitHub Student Developer Pack을 학교 이메일이나 ID가 없어도 신청하는 방법을 설명하는 글이다. 이 Pack에는 $12,000상당의 상용 개발 관련 서비스들이 포함되어 있다.(영어)
  • The Top 10 Most Common Mistakes I’ve Seen in Go Projects : Go 언어로 코딩할 때 많이 실수하는 사례를 정리해서 이유를 설명하는 글이다. Enum을 마샬링할 때 하는 실수나, 벤치마크를 정확하게 하는 법, 오류 처리, Slice 초기화 등이 정리되어 있다.(영어)
  • Map, Filter and Reduce – Animated : 배열에서 많이 사용하는 map, filter, reduce의 동장방식을 애니메이션으로 설명하는 글이다.(영어)

인프라 관련

볼만한 링크

  • 오픈소스를 금지당한 사람들의 몸부림 : GitHub이 최근 이란, 시리아, 북한, 쿠바 등의 접근을 갑자기 제한하면서 개발자들이 github-do-not-ban-us라는 페이지를 만들어서 제한을 풀어 달라고 것을 요구하고 있는데 이 내용을 정리한 글이다.(한국어)
  • (번역) 2019년 7월 2일 Cloudflare 장애 보고서 : Cloudflare에서 올린 장애 보고서를 번역한 글이다. 지난 뉴스레터에도 소개했지만 방화벽에서 사용했던 정규표현식이 CPU를 100% 사용하면서 30분간 장애가 발생했는데 이 글에서 Cloudflare가 어떤 배포 규칙을 가지고 있고 이번 장애는 왜 발생하게 되었는지가 자세히 나와 있다. 원글이 길어서 못 읽어봤다면 번역 글이라서 훨씬 읽기 편할 것이다.(한국어)
  • Introducing Duotone : Font Awesome에서 2가지 색상의 아이콘을 지원한다. 2가지 레이어를 이용해서 아이콘을 만들어서 색상을 지정할 수 있고 두 색의 교체나 투명도를 조정할 수 있다. 이는 Font Awesome Pro에서 이용할 수 있다.(영어)

IT 업계 뉴스

프로젝트

  • Puppeteer for Firefox : 헤드리스 크롬을 제어하는 API를 제공해 주는 Puppeteer에서 Firefox를 지원하려는 프로젝트로 아직 실험상태이다.
  • Nuclio : 데이터 파이프라인을 만들 수 있는 서버리스 플랫폼으로 Kubernetes를 지원한다.
  • Byteboard : Google에서 공개한 기술 면접 도구로 기존 방식보다 기술 평가를 효과적으로 할 수 있다고 한다.

버전 업데이트

2019/08/01 03:21 2019/08/01 03:21
Response : No Trackback , No Comment

Comments

기술 뉴스 #130 : 19-07-15

웹개발

  • Google's robots.txt Parser is Now Open Source : Google이 robots.txt 파서를 오픈소스로 공개했다. 이 파서는 C++로 작성되었고 다루기 쉽지 않은 robots.txt의 다양한 문제를 해결한 Google의 경험이 녹아 들어있다.(영어)
  • #1 React + Storybook + Puppeteer + Jest 개발환경 구축하기 : React와 Storybook 구성을 설명한 뒤에 여기서 Jest 테스트를 설정하고 결과 HTML을 이전 테스트와 비교해서 달라졌을 경우 테스트가 깨지도록 하고 여기에 Puppeteer로 스크린샷을 찍어서 달라진 부분을 눈으로 쉽게 확인할 수 있도록 설정하는 과정을 설명하고 있다.(한국어)

그 밖의 개발 관련

  • Seriously, stop using RSA : 예외 없이 어는 RSA를 쓰면 안 된다고 설명하는 글이다. 대부분 개발자가 RSA가 안전하다고 생각하지만(나도 그런 줄 알고 있었다) 그렇지 않고 암호 쪽은 몰라서 완전히 이해하지 못했지만, RSA에 지정하는 파라미터를 잘못 사용하기가 너무 쉽고 공격 취약점도 존재하며 TLS 1.3에서도 RSA를 사용하지 않는다고 한다. ECC나 Diffie-Hellman 기반을 사용하거나 Curve25519를 추천하는데 Curve25519는 libsodium이라는 좋은 구현체도 있으니 이를 쓰라고 하고 있다.(영어)
  • 소프트웨어 환멸감 : 요즘은 엔지니어링에서 효율을 추구하고 제대로 만들려는 노력이 거의 없어서 환멸감이 들 정도라는 내용의 글이다. 하드웨어가 좋아지면서 소프트웨어는 오히려 너무 느려져서 웹사이트조차도 제대로 보여주지 못하고 OS나 애플리케이션의 용량은 불필요하게 너무 크고 개발 의존성은 꼬여있고 빌드 시간도 너무 오래 걸리는데 아무도 관심 없다고 얘기하고 있다. 가끔 불평할 때도 있지만 개발하면서 이런 부분은 당연히 넘어갔던 것 같아서 반성해보게 만드는 글이다.(한국어)
  • 멀티모듈 설계 이야기 with Spring, Gradle : 배달의 민족에서 멀티 모듈 프로젝트로 개발을 하면서 공통 모듈에 너무 많은 로직이 들어가고 서로 의존성이 섞여서 관리가 어려워진 문제를 해결하기 위해 각 모듈의 개방/폐쇄 원칙을 지켜서 각 모듈이 자신의 할 일만 하고 서로의 관심사를 분리할 수 있도록 구성한 과정을 설명하고 있다.(한국어)
  • 문서 엔지니어링과 API 문서화 : 라인에서 API 문서화를 고민하는 도큐먼트 엔지니어가 사내 API 및 REST API의 문서화를 어떻게 할지를 고민해서 YAML과 Markdown으로 데이터와 문서를 분리해서 작업한 내용을 정리한 글이다. 대부분의 회사는 문서화 도구를 자체적으로 만들어서 문서화하기가 쉽지 않긴 하지만 오픈소스 도구들도 비슷한 접근을 하므로 이 글에서 대부분의 API 문서화 도구가 어떤 접근을 하고 있는지 이해할 수 있다.(한국어)
  • 여러 개의 JDK를 설치하고 선택해서 사용하기 : JDK의 버전이 다양해 짐에 따라 개발할 때도 여러 버전이 필요한 경우가 많아지는데 여러 버전의 JDK를 설치하고 관리할 수 있는 도구의 사용법을 설명하고 차이점을 설명하는 글이다.(한국어)

인프라 관련

  • Intro Guide to Dockerfile Best Practices : Dockerfile을 작성할 때 빌드 시간과 이미지 크기를 줄이고 유지보수하기 좋게 만드는 팁을 정리한 글이다.(영어)
  • AWS EBS(Elastic Block Storage) 비용 최적화 : AWS에서 스토리지로 이용할 수 있는 EBS의 성능을 잘 활용하면서 비용도 최적화하기 위해서 EBS의 중요 지표인 IOPS를 설명하고 EBS 스토리지 유형에 따라 IOPS를 어느 정도 이용할 수 있는지 설명하고 있다. EBS를 쓸 때 이해해야 할 중요한 개념을 잘 설명하고 있고 실제 운영할 때 이 지표를 CloudWatch에서 확인해서 적절한 스토리지 타입을 선택하도록 안내하고 있다.(한국어)
  • Kustomize - The right way to do templating in Kubernetes : kubectl v1.14에 포함된 kustomize를 이용해서 Kubernetes YAML 설정 파일을 템플릿화해서 사용하는 방법과 환경과 필요에 따라 환경변수, 시크릿, 이미지 변경 등을 어떻게 하는지 설명하고 있다.(영어)
  • Building your own kubernetes CRDs : Kubernetes에서 자신만의 리소스를 만들 수 있는 CRD를 직접 만드는 방법을 설명하는 글이다. Git 웹 훅을 등록해서 받는 CRD를 만들기 위해 kubebuilder로 프로젝트를 생성하고 Go 언어로 CRD를 만드는 방법을 설명하고 전체 예제 코드를 제공하고 있다.(영어)
  • Traefik cluster as Ingress Controller for Kubernetes : Kubernetes에서 Traefik을 Ingress 컨트롤러로 사용하기 위해서 Traefik 클러스터를 구성하는 방법을 설명하고 있다. 이 글에서는 KV 스토어로 Consul을 사용하고 있다.(영어)
  • KAFKA와 그 친구들 : Kafka가 왜 모니터링이 어려운지 설명하고 모니터링에 사용할 수 있는 도구를 소개하는 발표자료다.(한국어)

볼만한 링크

  • Cloudflare outage caused by bad software deploy : 지난 2일 밤 10시 42분 경(KST 기준) Cloudflare에 장애가 나면서 Cloudflare 서비스를 사용하는 대부분의 서비스가 502 페이지를 보면서 장애가 났다. Notion, Medium 등 대부분의 서비스에서 같은 장애가 났는데 방화벽 규칙을 새로 적용하면서 CPU를 100% 사용하게 되는 잘못된 정규 표현식이 포함되면서 이 장애가 발생했다. 이 장애는 해당 규칙을 롤백하면서 30분 정도만에 장애가 해결되었다. 좀 더 자세히 설명된 Details of the Cloudflare outage on July 2, 2019를 보면 배포에 많은 보호장치가 있지만 WAF 규칙은 공격을 빠르게 막기 위해서 이러한 보호장치를 사용하고 있지 않았고 정규 표현식에 포함된 백트래킹 때문에 CPU를 100%까지 사용하는 문제가 발생했다고 한다.(영어)
  • Zoom Zero Day: 4+ Million Webcams & maybe an RCE? Just get them to visit your website! : Zoom에서 미팅 링크를 다른 사람한테 보내면 클릭만으로 간단히 미팅에 들어오는 것을 보고 이게 어떻게 가능한지 추적하다가 Zoom 앱이 로컬에 19421 포트로 웹서버를 띄워두고 localhost:19421로 보낸 요청을 웹서버가 받아서 앱을 실행하고 사용자가 미팅에 들어갈 수 있게 하고 있다고 한다. 이 웹서버는 Zoom 앱이 안 켜고 있을 때도 백그라운드로 켜져 있고 심지어 앱을 지워도 다시 설치하는 등의 일을 하는데, 이 웹서버를 이용해서 계속 앱이 켜지게 하는 DoS 공격을 하거나 사용자의 허락도 없이 카메라를 켠 채로 미팅에 강제로 들어오게 하는 공격도 가능하다고 한다. 이를 Zoom 팀에 보고하고 90일이 지나서 그 내용을 공개했지만, 아직 취약점이 완전히 해결되지 않았다.(영어)
  • 애플, 새로운 폰트 'New York' 공개 : Apple에서 San Francisco 폰트에 이어 New York 폰트를 공개했고 iOS 13에 적용될 예정이다.(한국어)

IT 업계 뉴스

  • DEEPMIND RESEARCH ON LADDER : DeepMind의 스타크래프트 2 에이전트인 AlphaStar가 AI 연구의 일환으로 배틀넷에서 익명으로 게임을 할 것이라고 한다.(영어)

프로젝트

  • Hermes : React Native에서 앱 실행을 빠르게 하고 용량도 줄일 수 있도록 최적화된 JavaScript 엔진을 Facebook에서 공개했다.
  • Git.WTF : Git에서 겪을 수 있는 문제와 해결책을 모아서 정리해 놓는 사이트.
  • Puppeteer recorder : 웹사이트 조작을 녹화해서 Puppeteer 코드로 만들어 주는 크롬 익스텐션.
  • Kui Shell : CLI 명령어를 받아서 웹뷰로 시각화를 해주는 클라우드 네이티브 개발 도구.
  • GeekNews : 해커뉴스 형식으로 기술/스타트업 뉴스를 공유하고 댓글을 남기거나 투표할 수 있는 사이트.
  • Speakeasy : 일회성 패스코드 등 2팩터 인증을 구현할 수 있는 Node.js 라이브러리.
  • Fusuma : Markdown과 MDX로 장표를 만들 수 있는 Node.js 도구.
  • Google Network : 원하는 곳을 클릭하면 데이터를 어디서 받아오는지 시각화해서 보여주면서 구글 네트워크가 퍼블릭 인터넷보다 얼마나 빠른지 보여주는 웹사이트.


버전 업데이트

2019/07/15 23:36 2019/07/15 23:36
Response : No Trackback , No Comment

Comments

: 1 : ... 5 : 6 : 7 : 8 : 9 : 10 : 11 : 12 : 13 : ... 725 :