전체 글 썸네일형 리스트형 YouTube 모바일 웹페이지에서는 동영상이 자동으로 재생된다? 모바일 사파리나 크롬 모바일과 같은 모바일 브라우저에서는 동영상이 자동으로 재생되지 않습니다. autoplay 속성을 사용하거나 JavaScript 함수를 이용해서 자동으로 재생시킬 수 없습니다. 이것은 데이터 네트워크에서 사용자가 의도하지 않게 고용량의 동영상을 시청할 때 발생할 수 있는 비용을 막고자 함입니다. (참고) 결과적으로 클릭과 같은 사용자의 행동이 있어야만 동영상이 재생됩니다. 그런데 우연히 유튜브 모바일 웹에서는 자동으로 동영상이 재생된다는 이야기를 들었습니다. 저 또한 모바일 웹에서 자동으로 동영상을 재생시키려다 포기한 적이 있어 그 방법이 궁금해서 잠시 살펴봤는데, 결론은 자동으로 재생되는 것 처럼 보인다는 것입니다. 자동으로 재생되는 것처럼 보이는 이유는 유튜브 모바일 웹이 Sing.. 더보기 Nginx를 reverse proxy로 사용할 때 POST 요청에서 500 에러 발생 오늘 마주친 문제는 Nginx에서 reverse proxy를 설정해 application server를 연결했을 때, POST 요청을 보내면 500 에러가 발생하는 현상입니다. 요청에 따라 정상적으로 실행되기도 합니다. Nginx를 사용해 많은 개발 작업을 해봤던 분들이라면 한 번쯤 겪었을 듯 한 문제가 아닐까 하는 생각이 듭니다. 문제의 원인은 client_body_buffer_size 보다 큰 값이 post의 body로 전달됐기 때문입니다. 기본 값이 32bit에서는 8K, 64bit에서는 16K인데, 문제를 발생시켰던 요청의 body는 24K가 넘었습니다. 요청 중에 body의 크기가 7K 정도였던 것은 정상적으로 실행된 이유도 함께 알 수 있습니다. client_body_buffer_size를 5.. 더보기 Web Performance Tooling 요약 Web Performance Tooling의 요약입니다. 이 세션에서는 두 명이 동시에 연단에 등록하여 마치 만담을 하듯이 연기하며 성능 개선에 대한 이야기를 풀어갑니다. 종종 이런 형식을 빌려 세션을 진행하는 경우가 있는데 연기를 잘 하지는 못하지만 평범한 형식이 아니라서 개인적으로는 좋아하는 형태입니다. - 성능은 일을 줄이는 기법이고 일을 효과적으로 진행할 수 있는 방법이다.- 성능 개선을 진행하는 기본적인 방법 - 사용자: 사용자가 만족하게 만드는 것이 성능 개선의 목적 - 측정: 프로파일러를 사용. 살펴봐야 할 시간의 종류를 이해하는 것이 중요. - 비용의 해석: 일어나고 있는 일을 이해하는 것 - 병목 지점의 파악: 문제가 있는 지점을 파악 - 개선 시도 - 재측정: 변화가 일으킨 결과를 확인.. 더보기 High performance web user interfaces 요약 Google I/O 2016에서 웹쪽 주제로는 첫 번째 세션이었던 High performance web user interfaces 를 요악합니다. - Progressive Web Apps - 여러 기능을 사용하기 위해서는 HTTPS가 필요 - push messaging, offline 혹은 좋지 않은 접속 상태 (by service worker)- 사용자는 native app처럼 생긴 앱은 native app 처럼 동작하기를 기대한다. - 동작(behaves)은 두 가지로 나뉜다. - performance, interaction- Performance - RAIL - 퍼포먼스를 고려할 때 사용자를 중심에 두고 생각하는 모델 - Response (0.1 sec), Animation (16ms), Idle.. 더보기 DevTools in 2016: Accelerate your workflow 요약 DevTools에 새롭게 추가된 기능에 대한 세션입니다. - 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음- Authoring - Device mode - Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음 - responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음 - 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능 - settings - show the device frame 을 선택하면 기기의 프레임을 보여줌. - 스크린샷 촬영 가능 - 기기를 추가할 수 있고 - device pixel ratio 지정 가능 - ne.. 더보기 Great libraries and tools for great Progressive Web Apps 요약 오늘 본 비디오는 Great libraries and tools for great Progressive Web Apps 입니다. 솔직히 제목에 혹~! 했습니다만 막상 비디오를 다 보고 나니 동영상에 나온 것들을 적용하려면 고민을 많이 해야 할 것 같더군요. 동영상의 내용은 대략 다음과 같습니다. Progressive Web Apps 은 웹에서의 최신 유행어다. - PWA는 최신 기술을 많이 사용하고 - PWA를 만들면 사용자에게 유용하고, 사용성이 높고, 즐거운 경험을 줄 수 있다. PWA를 만드려면 만드는 방법의 변화가 필요하다. - 예전 웹 - 예전에는 고수준의 기능으로 웹페이지를 만들었다. - 이미지를 보여주고 싶으면 이미지 태그를 사용하고, 테이블을 보여주고 싶으면 테이블 태그를 사용했다. - 확.. 더보기 V8, modern JavaScript, and beyond 요약 Google I/O 2016 에서 웹을 주제로 하는 세션 중에 동영상으로 공개된 것은 27편입니다. 이게 전체인지 일부인지는 알 수 없지만 작년에 비하면 상당히 많아졌습니다. 그 중 V8, modern JavaScript, and beyond 라는 세션의 동영상을 간단히 요약해봅니다. V8의 미션 - Speed up real-world performance for modern JavaScript, and enable developers to build a faster future web. - 크롬에서 현재 사용 중인 자바스크립트를 빠르게 동작 시키는 것 - 개발자들이 더 빠른 앱을 만들도록 지원하는 것 - 올바른 도구, 언어의 새로운 기능, 다양한 리소스 등 Real-world performance - .. 더보기 카카오스토리팀의 코드리뷰에 대한 질문과 답 얼마 전 카카오 개발자 블로그에 카카오스토리팀의 코드 리뷰 도입 사례라는 글이 올라왔습니다. 현재 일하고 있는 곳에서 2년이 넘는 시간 동안 진행한 코드 리뷰의 경험을 잘 설명한 글입니다. 제가 쓴 글은 아니지만 코드 리뷰에 참여하고 있는 한 명으로서 이 글을 잘 읽었다는 피드백을 받을 때마다 솔직히 기분은 좋더군요. 여기서는 코드 리뷰 경험에 대한 글을 공개하기 전, 후에 코드 리뷰에 대해 질문받은 내용과 답변에 대해 기억나는대로 정리해보려 합니다. Q. 코드 리뷰가 성공할 수 있었던 이유는 무엇일까요? 1. 리뷰도 개발의 한 과정이라고 생각하는 개발문화입니다. 많은 경우 리뷰를 개발 과정의 일부가 아닌 개발 외적의 일로 여기는 경우가 있는데, 리뷰 자체도 개발의 일부라고 생각하고 일정과 같이 개발에 .. 더보기 이전 1 2 3 4 5 ··· 10 다음