Outsider's Dev Story

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

기술 뉴스 #94 : 18-01-15

웹개발 관련

  • Front-End Performance Checklist 2018 : Smashing Magazine에서 웹사이트의 성능을 높이기 위해 점검해 봐야 할 내용을 체크리스트로 만들어서 PDF와 Apple Pages 포맷으로 배포했다. 이 체크리스트에는 개발 전에 준비해야 할 부분, 성능 목표, 환경 구성, 빌드 최적화, 에셋 최적화, 전송 최적화, HTTP/2, 테스트와 모니터링 등으로 나누어서 좋은 성능을 위해 필요한 부분이 잘 정리되어 있다.(영어)
  • Introducing Immer: Immutability the easy way : Immutable.js처럼 불변성을 보장하는 JavaScript 라이브러리 immuer에 대한 소개 글이다. 내부 소스를 아직 안 봤지만 Proxy를 이용하는 것으로 보이며 produce라는 함수로 간단하게 불변 객체를 만들 수 있는 API를 제공하고 있다.(영어)
  • 2017 JavaScript Rising Stars : JavaScript 관련 프로젝트들을 프레임워크, 빌드 도구, 생태계 등으로 분류해서 2017년에 GitHub 스타를 많이 받은 순서대로 보여주는 페이지이다. 누적 스타 수는 오래된 프로젝트가 많게 마련인데 이 페이지는 2017년에 증가한 스타 수만 집계하고 있어서 2017년에 주목받는 프로젝트를 살펴볼 수 있다.(영어)

그 밖의 프로그래밍 관련

  • pipenv 소개 : Python의 패키지 관리 도구인 pipenv의 기본 사용방법을 설명한 글이다. 얼마 전에 pyenv, pip, virtualenv를 함께 사용하다가 pipenv로 바꿔보려다가 좀 헷갈렸던 적이 있는데 pipenv의 기본 접근이 쉽게 잘 정리되어 있다.(한국어)
  • ethereum White Paper : 이더리움의 백서를 어떤 분이 한국어로 번역해 주셨다. 꽤 긴 글인데 이더리움의 기반이 되는 내용이 담겨 있으므로 읽어볼 가치가 있다.(한국어)

볼만한 링크

  • Review of Popular Interface Design Trends in 2017 : 2017년에 많이 사용된 디자인 트랜드를 정리한 글이다. 히어로 배너에 애니메이션의 사용, 프레임 없는 레이아웃, 모노크롬 UI 등 2017년에 많이 사용된 트랜드를 특징별로 구분하고 각 디자인 요소를 설명한 내용이다. 각 요소를 디자인적으로 아주 깊게 분석하진 않지만, 전체적인 디자인 요소들을 파악해 보기 좋다.(영어)
  • [번역] 챗봇 제작 기술 선택을 위한 최상의 안내서 : The Ultimate Guide To Designing A Chatbot Tech Stack의 번역 글로 Chatbot을 만들 때 이미 시장에 존재하는 수많은 서비스와 기술 스택을 선택하기 전에 고려해야 할 10가지 질문을 정리한 글이다. 채팅 인터페이스부터, 대화 흐름, 자연어 처리, 언어 지원까지 다양한 질문에 따라 요구사항에 적합한 서비스와 기술 스택을 추천하고 있다.(한국어)
  • 블록체인 거래소의 활황 어떻게 접근할 것인가? : 가상화폐를 어떻게 바라봐야 하는지를 정리한 글인데 글쓴이가 가상화폐의 지금 상황을 어떻게 보고 있고 어느 부분에 가치가 있다고 생각하는지가 나와 있다. 옳고 그름을 떠나서 가상화폐를 보는 시각이 잘 정리된 글이다.(한국어)
  • 프로그래밍에서 인지 편향 : 개발자가 프로그래밍하면서 영향받을 수 있는 인지 편향을 정리한 글을 번역한 글이다. "과도한 가치 폄하", "이케아 효과", "어설픈 최적화", "계획 오류", "최신 편향" 등을 간단하게 정리해 놓았는데 전혀 영향 안 받을 수는 없겠지만 염두에 두고 있을 필요는 있어 보인다.(한국어)
  • 소울부스터 개발 후기 : 소울부스터의 초기 개발을 위해 개발 총괄로 참여해서 서비스를 개발하고 개발팀을 구축한 이야기이다. 서비스의 특징부터 각 기술을 선택한 이유, 초기 스타트업에서 개발팀을 구축하는 태도까지 잘 나와 있고 코파운더가 아니라 초기 빌딩을 계약으로 진행하고 빠진 부분도 흥미롭다.(한국어)

IT 업계 뉴스

  • Kernel-memory-leaking Intel processor design flaw forces Linux, Windows redesign : CPU 취약점으로 커널의 메모리를 볼 수 있는 사태를 정리한 글이다. 현 상황에서는 OS 패치로 이 문제를 해결해야 하므로 패치 후에 성능 저하가 꽤 일어나는 것으로 알려져 있고 이번 취약점이 어떻게 발생하는지에 대한 간단할 설명도 나와 있다.(영어)
  • What’s behind the Intel design flaw forcing numerous patches? : 이번 CPU 취약점이 발생한 프로세서 설계 결함을 설명하는 글이다. 커널을 잘 몰라도 이해하기 쉽게 커널이 메모리를 관리하면서 사용자 프로그램과 커널이 사용하는 메모리 영역을 어떻게 분리하고 성능을 높이기 위해서 어떤 접근을 취하고 있는지를 설명하고 있다. 이 글을 보면 지금 계속 커지고 있는 보안 사고에 대해 기본적인 이해할 수 있다.(영어)
  • 구글, 성능저하 없이 Spectre 취약점 패치 가능한 Retpoline 공개 : 구글에서 Spectre 취약점을 성능저하 없이 패치 가능한 방법을 공개했다.(한국어)


프로젝트

  • majestic : Jest 테스트 프레임워크로 작성한 테스트를 UI로 보고 실행할 수 있는 일랙트론 앱.
  • immuer : Proxy를 이용해서 불변 객체를 만드는 JavaScript 라이브러리.
  • Stimulus : Rails 팀에서 만든 JavaScript 프레임워크
  • Nerv : IE8을 지원하고 React 16과 호환되는 JavaScript 라이브러리.
  • TOAST UI Editor : NHN 엔터테인먼트에서 만든 오픈소스 마크다운 WYSIWYG 에디터.
  • ASCIIFlow Infinity : 코드나 터미널 등에서 사용할 다이어그램 등을 ASCII 코드로 그릴 수 있는 웹사이트.
  • Python 2.7 Countdown : Python 2.7을 지원하는 2020년 4월 12일까지 남은 시각을 보여주는 사이트.

버전 업데이트

2018/01/15 15:53 2018/01/15 15:53

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