Outsider's Dev Story

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

기술 뉴스 #70 : 17-01-15

웹개발 관련

  • 무한 스크롤 vs 페이지네이션 vs '더보기' 버튼 : 50여 개의 이커머스 웹사이트를 기준으로 목록을 탐색할 때 어떤 방식이 좋은지를 연구한 결과를 설명한 글이다. 페이지네이션은 사용성이 많이 떨어지고 무한 스크롤은 압도적으로 많은 제품을 탐색하지만, 개별 제품의 집중도는 떨어지는 결과가 나타났다. 이 글에서는 상품 목록에서는 적은 양을 먼저 로딩한 후 지연 로딩으로 추가 목록을 가져오고 더버기 버튼을 제공하는 방법을 제안하고 있다. 상품목록과 검색결과에서는 다른 접근을 제공해야 하고 뒤로 가기의 중요성도 강조하고 있다. 이커머스 사이트의 결과라 정답은 아닐지라도 그 내용은 읽어볼 만하다.(한국어)
  • SPA 초기 로딩 속도 개선하기 : 웹페이지에 기능이 많아지면서 점점 JavaScript 파일이 무거워지는 가운에 React를 사용하는 SPA 애플리케이션에서 Webpack으로 JS 코드를 나누어 일부는 의존 파일을 정적으로 불러와서 같은 파일로 만들고 일부는 동적으로 웹페이지에서 불러와서 초기속도를 개선하는 과정을 설명한 글이다.(한국어)
  • RxJS - Daum영화에 적용하다 : 최근 Daum 영화 웹사이트 개편에 RxJS를 사용하면서 각 화면에서 어떻게 RxJS를 사용했는지 설명한 글이다.(한국어)
  • Angular 4.0 Release Dates Announced : Angular.js 4.0이 3월에 발표될 예정이다. 이전에 알려졌던 대로 Angular 3.0은 없고 바로 4.0으로 간 뒤 이후에는 6개월마다 메이저 버전이 릴리스 될 예정이다.(영어)
  • Advanced Webpack : Webpack의 개념과 다양한 기능을 정리한 발표자료이다. 고급기능까지 잘 정리되어 있다.(영어)
  • 20 Years of CSS : 1996년 12월 17일 첫 CSS 표준이 발표된 후 20년간의 타임라인을 정리한 웹페이지이다.(영어)
  • 웹에서 SVG 사용하기 - 실습 가이드 : SVG on the web - A Practical Guide의 번역 글로 웹사이트에서 SVG를 사용하는 여러 가지 방법과 접근을 잘 정리한 글이다.(한국어)

그 밖의 프로그래밍 관련

  • DEVELOPER INITIATES I/O OPERATION. YOU WON’T BELIEVE WHAT HAPPENS NEXT : Node.js의 간단한 fs.stat() 호출을 기준으로 Node.js의 자바스크립트 영역에서 바인딩 계층, libuv까지 호출되는 코드를 추적하면서 Node.js가 내부에서 어떻게 처리하는지를 설명한 글이다. 각 설명에 관련 코드에 대한 링크를 연결하고 있어서 자세히 보기에 도움이 된다.(영어)
  • 당신이 AWS 계정을 만들고 가장 먼저 해야 할 일 들과 하지 말아야 할 일 들 : AWS를 처음 사용할 때 계정관리를 하는 방법과 보안을 강화하기 위해서 해야 할 일이 잘 정리되어 있다. AWS가 워낙 복잡하긴 하지만 처음 사용할 때는 IAM을 어떤 식으로 써야 하는지 어려웠는데 이 글대로만 따라 해도 큰 문제는 안 생길 것으로 보인다.(한국어)
  • PostgreSQL 작업기 : PostgreSQL로 운영 중인 500GB 정도의 데이터베이스를 2개의 다른 물리 서버로 이전하는 작업을 무중단으로 진행한 내용이다. 진행한 작업의 쿼리가 다 나와 있어서 비슷한 작업을 할 때 참고하기 좋다.(한국어)

볼만한 링크

  • 위대한 AI(인공지능), 깨어나다 : 뉴욕타임스의 The Great A.I. Awakening의 번역 글로 작년에 구글 번역에 적용된 신경망 번역을 개발하는 과정을 설명한 글이다. 구글이 인공지능을 중심으로 바꾸기로 하면서 내부에 조직을 만들어서 인공지능 연구를 하고 이 연구가 "고양이 논문"에서 구글 번역에 적용해서 서비스하기까지의 구글의 노력과 과정이 이 글에 아주 자세하게 나와 있다. 구글을 중심으로 한 글이지만 인공지능이 IT의 중심으로 발전하는 가운데 그 흐름을 읽을 수 있는 아주 좋은 글이다. 상당히 글이 길지만 읽어 볼 가치가 있다. 이 긴 글을 번역해 주신 분에게 감사할 따름이다.(한국어)
  • 보이지 않는 전우 : OpenSSL 개발팀에 관한 이야기이다. 어떤 사람들이 OpenSSL을 운영하고 있고 중국회사에서 펀딩받아서 15년 만에 만난다는 에세이처럼 간단한 글이지만 그 중심에 OpenSSL이 있다는 점이 무게감이 있다. 오픈소스를 비난할 때 OpenSSL을 예시로 들 때 항상 분노하고는 하는데 전 세계 인터넷의 보안을 소수의 사람이 지키고 있다는 점에서 감사한 마음에 고개를 숙이게 된다.(한국어)
  • 알렉스의 이야기 그리고 서버 개발일지 : 이번 탄핵 시국에 큰 역할을 했던 박근핵닷컴을 개발했던 알렉스님이 사이트를 만든 과정과 사람들에게 주목을 받으면서 늘어나는 동시 접속을 어떻게 대응해서 운영했는지 적은 이야기이다. 이런 시국에 개발자로서 뭔가 할 수 있는 게 없을까 많이들 생각했을 텐데 시기적절하게 나온 완성도 높은 박근핵닷컴의 과정이 궁금했는데 그 궁금증이 해소된 글이다.(한국어)
  • 의미 있는 삽질 Part 2 : 샌프란시스코에서 한식 관련 스타트업에 도전했던 과정과 고민이 잘 나와 있는 글이다. 성공하는 스타트업의 이야기도 좋아하지만, 정답이 없는 이런 도전의 결과와 고민일 잘 정리된 글은 항상 도움이 된다.(내가 음식 쪽 사업에는 전혀 관심이 없음에도...) 글을 쓰신 분의 다음 행보를 응원하지만 유일하게 신경 쓰이는 부분은 웹 개발을 w3school에서 배우신다는 점인 듯.. ㅠ 언제쯤 w3school을 안보는 날이 올지...(한국어)

IT 업계 뉴스

프로젝트

  • mermaid : 마크다운처럼 텍스트로 작성하면 다이어그램이나 플로우차트를 그릴 수 있게 해주는 프로젝트.
  • cross-env : Node.js 라이브러리로 유닉스 스타일 뿐 아니라 윈도우에서도 환경변수를 설정할 수 있는 스크립트.
  • Hero : iOS 트랜지션 라이브러리.
  • streama : 개인 동영상을 Netflix처럼 관리하면서 스트리밍으로 볼 수 있게 하는 프로젝트.
  • Rax : React.js와 호환되는 렌더링 엔진. 참고로 README에 나오는 React.js의 성능이 낮게 나온 것은 NODE_ENV=production이 아니라서 발생한 문제이다.
  • AST explorer : JavaScript, CSS, Handlebars 등을 AST로 만들어서 테스트할 수 있는 웹사이트.
  • Prettier : JavaScript 포매터다. 프로젝트 소개글 참고.

버전 업데이트

2017/01/15 20:18 2017/01/15 20:18