A Comprehensive Guide To HTTP/2 Server Push : HTTP/2의 Server Push를 이용하면 HTML 문서를 불러올 때 필요한 정적 파일을 서버가 같이 보내줄 수 있는데 Link 헤더를 이용해서 Server Push를 어떻게 사용하는지 설명하고 설정 별로 성능 테스트를 진행해서 어느 정도의 차이가 나는지 보여주고 있다. 마지막으로 캐시 문제 등 Server Push를 사용할 때 주의해야 할 점까지 나와 있어서 HTTP/2에서 Server Push를 사용할 때 한번 읽어보기 좋은 글이다.(영어)
Preload, Prefetch And Priorities in Chrome : <link rel="preload">와 <link rel="prefetch">의 동작이 어떻게 다르고 Chrome 내에서 네트워크 우선순위를 어떻게 배정하는지를 설명한 글이다. 간단히는 preload는 현재 페이지의 필수적인 에셋이라 우선 다운로드를 해야 할 때 사용하고 prefetch는 페이지 이동 후에 사용해야 하는 것을 미리 받아놓는 용도이다. 둘의 차이점을 확실히 이해하면 상황에 맞게 활용할 수 있고 이를 적용하면서 실수로 중복 다운로드를 하는 문제나 Server Push와는 어떻게 분리해서 써야 하는지가 잘 나와 있다.(영어)
GPU Animation: Doing It Right : 웹사이트에서 GPU 가속을 이용하기 위해 transform: translateZ(0)나 will-change: transform 속성을 사용하는데, 애니메이션을 사용할 때 브라우저가 어떻게 동작하고 GPU 가속을 하면 브라우저와 GPU가 화면을 어떻게 구성해서 그리는지를 자세히 설명하고 있다. GPU 가속을 할 때 메모리 사용량이 증가하는 이슈에 대해서도 자세히 나와 있어서 애니메이션을 사용할 때 최적화된 웹사이트를 만들 기에 어떤 부분을 고려해야 할지 잘 이해할 수 있다. 마지막에는 브라우저별로 개발자도구에서 GPU 가속에 대한 최적화를 어떻게 디버깅할 수 있는지까지 설명하고 있다.(영어)
Chrome and Firefox Phishing Attack Uses Domains Identical to Known Safe Sites : xn-- 접두사로 브라우저에 유니코드 표현을 punnycode로 하게 해서 사용자가 보기에는 같은 도메인으로 보이지만 실제로는 다른 유니코드를 사용해서 HTTPS 안전함으로 정상 표시되는 똑같은 사이트를 만들 수 있음을 설명한 글이다. 이 글에서는 epic.com이라는 헬스케어 사이트의 피싱사이트를 만들어서 실제 사이트와 같게 보임을 설명하고 있고 이 문제는 Chrome과 Firefox에서만 취약한데 Chrome 58에서는 이 문제가 수정되었다.(영어)
그 밖의 프로그래밍 관련
DOCKERCON 2017 HIGHLIGHTS DAY 1, DAY 2 : 이번에 DockerCon에서 발표된 내용을 정리한 글이다. Docker 이미지에 멀티 스테이지가 생겨서 컨테이너를 만들 때 단계별로 이미지를 분리해서 구성할 수 있게 되었고 컨테이너 전용 OS를 구성할 수 있는 LinuxKit, Docker의 새 이름인 Moby를 공개했다. 요즘 Docker 쪽이 나오는 게 많아서 헷갈리는데 기존 Docker 프로젝트가 Moby라는 이름으로 바뀌었고(저장소 명이 변경됨) Moby를 이용해서 Docker CE와 Docker EE라는 제품이 나오는 형태가 되었다. 엄청 헷갈리지만, 아무튼 그렇게 됐다.(영어)
Announcing the new GitHub Developer Program : GitHub에서 제공하는 개발자 프로그램이 개선되었다. 유료사용자에게만 제공하던 기존과 달리 모든 사용자가 참여할 수 있게 되었고 레벨이 적용되어 GitHub API에 대한 정보를 받을 수 있는 Level 1부터 API로 앱을 만들어서 공개하면 지원받을 수 있는 Level 2, 3 등 다양해졌다.(영어)
볼만한 링크
Painting with Code : Airbnb에서 Sketch를 사용하면서 디자이너와 엔지니어 협업 문제를 해결하려고 노력하다가 보통 하는 작업과는 반대로 React 컴포넌트를 작성하면 이를 이용해서 Skectch 파일을 만들어서 협업할 수 있도록 한 과정을 설명한 글이다. 이 작업의 결과로 React Sketch.app을 만들어서 오픈소스로 공개했다.
트위터는 왜 모니터링을 2번이나 만들었을까? : 트위터가 내부 시스템 모니터링을 두 번 만들었는데 1.0에서 어떤 문제가 있었고 이 문제를 해결하기 위해 2.0에서 확장성이나 UI 부분에서 어떻게 해결했는지를 정리한 글이다.(한국어)
팀 공용 계정 비밀번호 관리하기 : pass라는 GPG 기반의 패스워드 관리 도구를 이용해서 팀에서 공용으로 사용하는 비밀 정보를 관리하는 방법을 설명한 글이다. git을 이용해서 프로젝트를 공유해서 팀원이 전체가 사용하고 pass가 암복호화하는 방법을 설명하면서 팀원이 어떻게 복호화해서 사용하고 새로운 팀원이 왔을 때 어떻게 추가하는지까지 설명할 수 있다. 개인적으로는 Vault로 비슷한 목적을 이루려고 하고 있지만 pass를 이용한 방법도 흥미로운 방법이다.(영어)
macOS Sierra에서 원화 대신 백 쿼트 입력하기 : 최근 macOS 업데이트해서 한글에서는 백틱(`) 대신 원 표시(₩)가 입력되도록 바뀌었는데 마크다운 등을 많이 사용하는 개발자들은 항상 옵션 키랑 같이 누르거나 하는 큰 불편함이 생겼다. 이 글의 내용으로 패치를 하면 백틱을 그대로 사용할 수 있다.(한국어)
프로젝트
Tamper Chrome : 크롬에서 HTTP 요청을 디버깅하거나 수정해서 요청해 볼 수 있는 크롬 익스텐션.
TodoMVC for the RealWorld : 예제로 활용할 수 있도록 Medium 같은 사이트를 프론트엔드는 Angular 2, React.js, Angular 1.5로 구성하고 백엔드는 Django, Node.js, Rails로 구성한 프로젝트.
pkg : Node.js 프로젝트를 Node.js가 설치되지 않은 환경에서도 실행할 수 있도록 OS별로 패키징하는 도구.
postal : 메일 서버를 직접 돌릴 수 있는 오픈소스 플랫폼으로 Ruby로 작성되었다.
`macOS Sierra에서 원화 대신 백 쿼트 입력하기 ` 정말 좋은 정보 감사합니다 :)
네네 저도 저글 덕에 편해졌네요