Outsider's Dev Story

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

기술 뉴스 #132 : 19-08-15

웹개발 관련

  • Why is modern web development so complicated? A long yet hasty explanation: Part 1! : 현대 웹 개발도구가 상당히 복잡한데 왜 이렇게 복잡해졌는지의 과정을 설명하는 글이다. 모든 도구는 해결하는 문제가 있어서 그 문제점을 이해해야 도구를 이해하고 있다고 설명하면서 지금과 달리 과거에는 JavaScript의 한계가 명확했고 웹 API와의 차이점이 있었기 때문에 jQuery가 오랫동안 이 문제를 해결하였고 그사이에 ECMAScript가 발전했지만 모든 브라우저에서 같은 JavaScript 기능을 지원하지 않았기 때문에 모던 자바스크립트로 코딩하고 싶은 개발자를 위해서 Babel이 등장한 과정까지 설명하고 있다. 이미 복잡한 도구들만 접해서 사용해본 개발자들에게도 많은 도움이 될 것 같다.(영어)
  • 2019년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1, 2 : Angular, React, Vue,js, Web Component, TypeScript, Svelte, Preact 등 대표적인 프레임워크와 라이브러리의 프로젝트 진행 상황과 최근에 추가된 기능 및 향후 계획 등을 정리한 글이다. 모든 프로젝트를 살펴보기가 어려운데 꽤 자세하게 정리되어 있어서 각 프로젝트의 상황을 살펴볼 수 있다.(한국어)
  • The New York Times is still detecting Chrome Incognito Mode after Google’s fix : Google이 Chrome 76에서 시크릿 모드를 탐지 못 하도록 수정했음에도 불구하고 뉴욕타임스가 바로 시크릿 모드를 탐지할 수 있도록 수정했다고 한다. 아직 정확히 어떤 방법으로 탐지하고 있는지는 밝혀지지 않았다.(영어)

그 밖의 개발 관련

  • How I side project : 사이드 프로젝트를 어떻게 진행하는지 설명하는 글이다. 작업하면서 생각난 아이디어 중 일부만 실제로 작업을 하게 되는데 아이디어가 생겼을 때가 가장 동기부여가 높을 때가 바로 작업을 시작해서 간단한 프로토타입을 만든다고 한다. 작업 흐름에 방해되는 걸 막기 위해서 익숙한 도구를 항상 반복해서 쓰고 작업하는 내용을 계속해서 공유하면서 작업한다고 한다.(영어)
  • When a rewrite isn’t: rebuilding Slack on the desktop : Slack이 오래된 데스크톱 앱을 새로운 코드 베이스로 바꾸는 과정을 설명한 글이다. 2012년과는 많이 달라졌으므로 레거시 앱은 DOM을 직접 조작하고 데이터 로딩을 초기에 많이 하면서 워크스페이스마다 프로세스를 띄웠는데 앞의 두 문제는 계속 개선하고 있었지만 워크스페이스 문제는 설계부터 바꿔야 하므로 쉽지 않은 문제였다. 오래된 코드 안에서 새로운 코드를 바꿔가면서 둘을 연결하는 방식으로 개선해 가면서 새로운 코드는 모두 React로 작성하고 데이터는 지연 로딩하면서 한 프로세스에서 여러 워크스페이스를 개선하도록 바꾸기 위해 Redux를 사용했다고 한다. 완전히 새 코드로 전환하려고 몇 가지 규칙을 정해서 개발했으면 완전히 바꾼 뒤에는 워크스페이스가 많아져도 메모리가 많이 늘지 않는 것을 볼 수 있다.(영어)
  • 좋은 git commit 메시지를 위한 영어 사전 : 영어로 커밋 메시지를 사용하는 방법을 정리한 글인데 많이 사용하는 문법들을 상황별로 정리해 놓아서 참고하기 아주 좋다.(한국어)
  • 갈피: 나의 첫 모바일 앱 개발기 : Flutter로 첫 모바일 앱을 올려서 배포한 사이드 프로젝트 경험을 정리한 글이다. 본인이 필요로 하던 독후감 앱을 만들기로 하고 React Native로 앱을 만드는 데 불편을 느껴 처음 써보는 Flutter로 앱을 만들어서 앱스토어에 배포까지 했다. 처음 Dart 언어와 Flutter를 쓰면서 느낀 장단점도 정리되어 있다.(한국어)
  • 로우 레벨로 살펴보는 Node.js 이벤트 루프 : Node.js event loop workflow & lifecycle in low level의 번역 글로 Node.js의 이벤트 루프가 어떻게 동작하는지 설명하고 있다. 이벤트 루프의 구조를 간략하게 설명한 글 때문에 오히려 오해가 많이 쌓였기 때문에 이 글에서 이벤트 루프가 어떤 식으로 동작하는지를 설명하고 진행되는 각 단계를 자세히 설명한 뒤 setTimeout, setImmediate, process.nextTick을 이용한 예제의 동작을 보여주면서 앞에서 설명한 단계에 따라 어떻게 동작하는지를 보여주는데 잘 나와 있다.(한국어)
  • 더 작은 APK를 위한 Android App Bundle에 대해서 : Android에 새로 추가된 앱 번들을 통해 패키지를 동적으로 나누어 받을 수 있게 됨으로써 안드로이드 앱의 용량을 줄인 과정을 설명하고 있다. 실제로 당근마켓 앱의 용량은 36%가 줄었고 설치된 앱의 크기도 21%가 줄었다고 한다.(한국어)
  • 리젝 없이 iOS 구독앱, 한방에 출시하기 : 앱스토어에서 구독 모델이 포함된 앱을 준비할 때 리젝되지 않도록 구독 상품을 만드는 방법부터 구독에 대한 안내에서 리젝사유가 될 수 있어서 조심해야 할 부분을 정리한 글이다. 이런 내용은 처음 해볼 때는 고생을 많이 해볼 수밖에 없어서 미리 해본 분의 정리된 글은 도움이 많이 된다.(한국어)
  • GitHub Actions now supports CI/CD, free for public repositories : 작년에 발표한 GitHub Actions에서 CI/CD를 지원한다고 발표했다. 아직 베타 상태로 11월 13일에 정식으로 이용 가능하게 될 예정이다. 발표 영상은 유튜브에서 볼 수 있다.(영어)
  • A Readable Specification of TLS 1.3 : TLS 1.3의 명세인 RFC 8446을 더 읽기 좋게 설명한 페이지이다.(영어)

인프라 관련

  • 대규모 Kubernetes 클러스터 구축기 : Line에서 4,000개의 팟을 Kuberntes로 운영하면서 점점 늘어나는 앱에 대응하기 위해서 대규모 클러스터를 구성한 과정을 설명한 글이다. Caravan이라는 Kuberntes 클러스터 프로비저닝 서비스를 만들기 위해서 처음에는 Rancher를 사용하다가 한계를 느끼고 kuberadm, ansible, CRD를 조합해서 구성했으면 테스틑 위해서 마스터 노드 20개와 워커노트 999개로 테스트를 하였고 여기서 발견된 etcd 등의 문제를 개선했다고 한다. 이정도 규모를 구성할 조직이 많지는 않겠지만 내용만으로도 흥미롭다.(한국어)

볼만한 링크

  • 하지만, 야크 털 깎기는 재미있다 : 자신의 블로그를 직접 만든 경험을 얘기하면서 개발자들 사이에서 야크 털 깎기(Yak shaving)이 어떻게 유래되었고 야크 털 깎기로 TeX가 어떻게 탄생했는지를 설명하고 있다. 적절함이 필요하지만 야크 털 깎기가 재밌고 의미 있다는데 동의한다.(한국어)
  • 한국 해커톤의 한 걸음 정도의 발전을 위한 제언 1/3 : 해외에서 일하시다가 한국에서 해커톤에 멘토로 참여해 보시고 해커톤을 어떻게 하면 더 나은 행사로 만들 수 있을지에 대한 연재글의 첫 글이다. 이 글에서는 단기간에 제품을 만드는 해커톤에서 PM의 역할이 아주 중요하기 때문에 목적을 이해하고 시장 요구사항을 이해하고 상호 간의 경계선과 협력선을 설정하고 MVP 스코프를 결정하고 팀원의 커뮤니케이션을 향상시키고 초기 테스트에 참여하고 우선순위를 갱신하며 팀원을 응원하는 7가지 PM의 기술을 활용하라고 하고 있다. 실제로 이렇게 되면 꽤 의미 있을 것 같고 여기에서 PM의 기술은 확대해서 회사에서도 충분히 의미가 있을 것 같다.(한국어)
  • 테크니컬 라이팅 컨퍼런스: API the Docs Chicago 2019 방문기 : API The Docs 2019에 참여하고 주요 2개의 세션의 내용을 정리한 글이다. 문서화에 관심은 있지만, 항상 맘에 들게는 못 만들곤 하는데 문서화 쪽을 주 업무로 하는 테크니컬 라이터들이 API 문서를 어떻게 생각하는지 볼 수 있고 Ford에서 DocOps로 사내에 API 문서를 개발자들에게 잘 제공하기 위해 노력한 과정이 잘 나와 있다. "많은 회사가 서드파티 개발자 대상 문서에는 집중하고 노력하는 반면, 내부 개발자용 문서에는 그만큼의 노력을 기울이지 않으리라 추측"한다는 부분에 공감이 간다.(한국어)
  • [플랫폼의 생각법] 우버가 수익을 내기 힘든 몇 가지 이유 : 플랫폼 사업은 안정성을 높고 규모가 커질수록 독점에 이르게 되는 특성이 있지만 우버의 플랫폼은 다른 프로랫폼과는 달리 기사나 승객이 락인될 요소가 없고 네트워크의 규모도 지역적으로 분리되어 규모의 이점을 누리기 어려우며 자율주행도 현재의 핵심인 기사를 퇴출하는 방법인 데다가 연구 결과도 긍정적으로 보기 어렵다고 얘기하고 있다. 이렇게 깊게 생각해 본 적이 없어서 흥미로운 분석이었다.(한국어)
  • 2019년 상반기 회고 : 개발도 잘하시면서 공부랑 공유도 열심히 하시는 이동욱 님의 상반기 회고 글인데 회사와 개인적인 학습, 활동을 너무 열심히 하셔서 글만 봐도 자극될 정도이다.(한국어)

IT 업계 뉴스

  • The LLVM Project is Moving to GitHub : LLVM이 SVN에서 GitHub으로 갈아타기로 했다고 한다. 지난 9개월의 작업으로 2019년 10월 마이그레이션을 완료한다고 한다.(영어)
  • The We Company S-1 : WeWork이 상장을 위해 증권거래소에 S-1 문서를 제출했다.(영어)
  • Automattic + Tumblr : Wordpress를 만드는 Automattic이 블로그형 서비스인 Tumblr를 버라이즌으로부터 인수했다.(영어)
  • 한국 벤처 역사 이민화 이사장 별세…향년 66세 : 한국 벤처-스타트업 생태계 조성에 힘을 쏟아온 창조경제연구회 이민화 이사장님이 지난 3일 별세하셨다. 삼가 고인의 명복을 빕니다.(한국어)

프로젝트

  • NoHQ : 리모트 업무에 도움이 되는 도구를 정리해 놓은 페이지.
  • Glimps : 최근 성장하는 회사, 제품, 분야를 알려주는 서비스. 이 링크에는 레퍼럴 링크가 포함되어 있습니다.

버전 업데이트

2019/08/15 22:37 2019/08/15 22:37

기술 뉴스 #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