Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

기술 뉴스 #93 : 18-01-01

웹개발 관련

  • A Tinder Progressive Web App Performance Case Study : 데이팅 앱인 Tinder가 서비스를 PWA로 변경하면서 성능 개선에 사용한 부분을 정리한 글이다. PWA로 전환해서 사용자가 얼마나 빨리 서비스를 이용할 수 있게 되었고 여기서 성능을 개선하기 위해서 라우트 기반으로 코드 스플릿팅을 하고 preload를 적용하고 CSS 로딩 전략을 적용하는 듯 각 방법에 대해 자세한 설명과 얼마나 효과를 보았는지가 잘 나와 있다. 꼭 PWA가 아니더라고 알아둘 만한 팁이다.(영어)
  • Introducing rUXt: Visualizing Real User Experience Data for 1.2 million Websites : 구글 크롬이 공개한 Chrome User Experience Report(CrUX)의 데이터를 분석해서 백만 개 사이트의 실제 사용자가 데스크톱, 폰, 태블릿과 네트워크 속도에 따라 페이지를 로딩하는 성능이 어느 정도 나오는지를 시각적으로 보여주는 Real User Experience Test (rUXt)를 공개했다. 자신의 사이트를 타 사이트와 비교해 볼 때 유용하다.(영어)
  • The ultimate CSS battle: Grid vs Flexbox : CSS Grid와 Flexbox를 어떤 용도로 사용해야 하는지를 설명하는 글이다. 두 스펙이 비슷한 부분도 있고 차이도 있는데 이 글에서 일차원 레이아웃을 잡는 경우는 Flexbox를 쓰고 이차원 이상의 레이아웃을 잡을 때에는 CSS Grid를 쓰라고 하고 있고 레이아웃을 잡을 때 이 둘을 어떻게 섞어 쓰는지 예제로 보여주고 있다.(영어)
  • HTML5.2와 HTML5.1과의 차이점 : 새로 발표된 HTML 5.2에서 달라진 점을 정리한 글이다. 한번 읽어보면 좋다.(한국어)
  • Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler : 최근에 새로 나온 번들러 Parcel에 대한 글이다. Parcel에 대한 모든 것이라지만 실제로는 Getting started 정도의 문서이고 parcel이 zero configuration을 강조하고 있으므로 얼마나 간단한 설정으로 번들링을 할 수 있고 React, Vue, Typescript에서 사용할 수 있는지도 보여주고 있다. 이 글을 보면 어느 정도 Parcel의 사용법을 알 수 있다.(영어)

그 밖의 프로그래밍 관련

  • Netflix: What Happens When You Press Play? : 넷플릭스가 서비스를 어떻게 제공하는지 설명한 글이다. 소프트웨어 구현과 관련된 부분이라기보다는 넷플릭스가 사용자에게 서비스를 제공하려고 아키텍처를 어떻게 구성해서 사용하고 있는지를 설명한 글인데 너무 길어서 읽기가 힘들지만 이 정도 규모의 서비스가 아키텍처를 어떻게 구성해서 동영상을 스트리밍하는지 알 수 있는 좋은 글이다. 넷플릭스가 데이터센터와 AWS를 어떻게 사용하고 동영상을 추천은 어떤 식으로 하고 있으며 직접 CDN을 구성해서 사용하는 이유까지 자세히 나와 있다. 아키텍처의 복잡함에 비교해서는 꽤 쉽게 쓰여서 깊은 지식이 없더라도 읽어볼 만 하다. 넷플릭스가 자사의 CDN 장비인 OCA를 ISP의 네트워크 안에 넣어서 별도로 데이터센터를 구축하지 않고 이용하고 있다는 점에 꽤 놀랐다.(영어)
  • Learn JavaScript Promises by Building a Promise from Scratch : 비동기 처리에 많이 사용하는 Promise의 간단한 버전을 직접 구현해 보고 Promise가 동작하는 방식을 설명하는 글이다. 간단한 버전이라 실제 Promise와 똑같이 동작하지는 않지만 이런 기능을 작성할 때 내부에서는 어떤 식으로 처리하는지 참고해 보기 좋다.(영어)
  • Start your open-source career : 오픈 소스 경력을 쌓기 위해 시작하는 방법을 설명하는 글이다. 이전에 성공적인 오픈소스 프로젝트를 만드는 방법에 관해서 얘기하자 어떻게 오픈소스를 시작하냐는 질문을 많이 받아서 정리한 글이라고 한다. 간단하게 사용하는 라이브러리나 환경의 코드를 읽어보고 기여할 수 있는걸 찾아보고 간단한 도구를 찾거나 더는 운영 안 되는 프로젝트를 이어 받아보는 게 좋은 시작점이고 만들고 싶은게 생기면 직접 만들어서 운영해 보기를 권하고 있다. 본인이 어떤 마음으로 오픈 소스 프로젝트를 하기 시작했는지부터 구체적인 접근방법까지 잘 정리되어 있다.(영어)
  • 비트코인 논문 한국어 번역판 (ver0.8) : 비트코인을 만든 사토시 나카모토가 작성한 9페이지짜리 비트코인 논문을 한국어로 번역해서 PDF로 공개한 글이다. 이제 관련 기술에 대한 글도 꽤 있지만, 최초의 논문을 읽어보는 것 꽤 의미 있다고 생각한다.(한국어)

볼만한 링크

  • 그들만의 망 중립성을 넘어서: 본질적 기원과 ‘궁극의 유저’ : 미국의 망 중립성 폐기와 관련해서 망 중립성에 대한 개념 정리와 미국이 폐기하기까지의 과정이 정리되어 있다. 이글을 통해서 미국이 망 중립성을 기간 사업자로 구분하지 않고 정보서비스로 구분해서 폐기했다는 것을 알게 되었다. 망 중립성 폐기와 관련된 영향에 관한 내용도 나와 있어서 IT 관계자로서 알아둘 만한 정보이다.(한국어)
  • Tacotron 2: Generating Human-like Speech from Text : 구글에서 텍스트를 더 사람처럼 읽어주는 새로운 TTS 엔진 Tacotron 2를 공개했다.(영어)

IT 업계 뉴스

프로젝트

  • Docusaurus : Facebook에서 공개한 오픈소스 프로젝트로 오픈 소스 프로젝트에서 사용하는 문서 웹사이트를 쉽게 만들고 관리할 수 있도록 도와주는 도구이다. Markdown을 사용하고 문서의 버저닝, 검색 등을 고려하고 있고 필요한 경우 번역을 지원할 수 있다.
  • Popmotion : JavaScript 모션 라이브러리.
  • Rendertron : 헤드리스 크롬을 이용해서 PWA를 봇에 제공할 수 있게 해주는 서버.
  • github-profile-summary : GitHub 활동 내역을 기반으로 시각화해주는 사이트.

버전 업데이트

2018/01/01 20:11 2018/01/01 20:11