Chrome Dev Summit 2014에서는 다양한 주제와 완전히 새로운 API가 다루어졌지만, 새롭고 반짝이는 것만 다루는 것은 아닙니다.
신규 웹 개발자이거나 새로운 API를 살펴볼 예정인 숙련된 개발자라면 학습, 빌드, 반복이라는 세 가지 단계를 따를 가능성이 큽니다.
맷 가우트가 Chrome 개발자 플랫폼팀에서 이러한 문제를 해결하기 위해 진행 중인 작업을 소개합니다.
알아보기
웹 기초(Web Fundamentals)는 다양한 주제를 다루는 사용 사례 중심 문서 모음입니다. 핵심 목표는 개발자가 거의 또는 전혀 지식이 없는 상태에서 최대한 빨리 권장사항을 구현하도록 하는 것입니다.
웹 기초의 주요 목표 중 하나는 주제에 익숙하지 않은 경우 안내에 따라 '선택 장애'를 최대한 줄이는 것입니다. 애디 오스매니가 Pastry Box에서 이를 완벽하게 설명합니다.
사이트 또는 콘텐츠에 문제가 있거나 웹 기초에서 특정 주제를 다루기를 원하는 경우 GitHub에서 의견을 제출하여 알려주세요.
빌드
새 웹 프로젝트를 시작하는 데 도움이 되도록 웹 시작 키트를 만들었습니다. 필요한 모든 기능이 있습니다.
- 견고한 빌드 프로세스
- 상용구 HTML
- 스타일가이드
빌드 프로세스
빌드 프로세스를 처음 접하는 경우 빌드 프로세스를 파일 세트를 가져와 특정 작업을 실행하고 다른 위치에 새 버전을 출력하는 프로그램으로 생각하는 것이 가장 쉽습니다. 이러한 작업은 로드 시간을 개선하기 위해 파일을 최적화하거나, 발생할 수 있는 오류를 확인하거나, 자동화할 수 있는 작업을 처리합니다.
웹 시작 키트에는 다음과 같은 프로세스가 있습니다.
브라우저가 파일을 빠르게 가져올 수 있도록 CSS 및 JavaScript를 축소 및 연결합니다. 또한 JavaScript는 JSHint를 통해 실행되어 JavaScript 권장사항 및 일반적인 코딩 실수를 확인합니다. 이미지는 imagemin으로 축소되며 이를 사용하면 파일 크기를 대폭 줄일 수 있습니다. 스타일 가이드 CSS를 만드는 프로세스도 있습니다.
다중 기기 HTML용 상용구
새 페이지에 작성하는 첫 번째 HTML 세트는 매우 표준적이며 여러 기기와 화면 크기에서 잘 작동하는 기본 HTML 파일을 빠르게 가져올 수 있는 방법이 있을 수 있습니다.
웹 시작 키트에서는 플랫폼과 사이트 간의 경계를 모호하게 하는 기능을 지원하기 위해 Android, Windows Phone, iOS, Opera Coast의 홈 화면에 추가 및 스플래시 화면을 지원하도록 추가했습니다.
스타일가이드
웹 시작 키트의 마지막 부분은 스타일 가이드입니다.
이렇게 하면 새 프로젝트에 스타일 기반 개발을 장려하는 훌륭한 기본 스타일과 구성요소 세트가 제공됩니다. 요소의 기존 스타일을 변경하고 나만의 스타일을 추가할 수 있습니다.
내년 초에 출시될 예정인 WSK의 다음 버전에서는 스타일 가이드가 서로 조합되는 방식을 간소화하고 Material Design 디자인과 느낌으로 전환하기 위해 노력하고 있습니다. 맷이 Chrome Dev Summit에서 이 기능이 어떻게 표시될지초기 모의를 보여주었는데 아래에서 예시를 확인할 수 있습니다.
반복
새로운 지식을 실천에 옮기기 시작하면 DevTools를 사용하여 작업을 디버그, 개선, 유지보수해야 합니다.
DevTools에 몇 가지 중요한 새 기능이 출시되었습니다. Matt가 다음과 같은 새 기능을 살펴봅니다.
기기 모드
기기 모드는 DevTools의 새로운 섹션으로, CSS에서 미디어 쿼리를 확인하는 동시에 다양한 휴대기기에서 사이트가 어떻게 작동하는지 빠르게 확인할 수 있습니다.
기기 모드의 훌륭한 기능 중 하나는 네트워크 속도를 제한하여 GPRS, EDGE, 3G, DSL 또는 Wi-Fi 연결에서 사용자의 환경을 시뮬레이션할 수 있다는 것입니다.
페인트 프로파일러
타임라인 탭을 열고 녹화 버튼을 누른 적이 있다면 폭포식 그래프에서 페인트 이벤트가 발생하는 것을 보았을 것입니다. 일반적으로 브라우저가 왜 그렇게 했는지 또는 무엇을 하고 있는지 알 수 없는 블랙박스입니다.
페인트 프로파일러는 페인트 중에 브라우저가 정확히 무엇을 하는지에 관한 자세한 정보를 제공합니다.
무효화 추적
이제 DevTools는 가능한 경우 언제든지 페인트 또는 레이아웃이 발생한 이유를 제공합니다. 이는 타임라인, 브라우저 동작에 관해 알아보는 데 유용하며 성능 문제를 방지하기 위해 코드를 최적화할 수 있습니다.
Flame Chart View
타임라인에서 제공되는 정보를 보는 것과는 매우 다른 방식입니다. 이렇게 하면 태스크가 어떻게 중첩되는지, 다른 태스크의 결과로 어떤 브라우저 동작이 발생했는지 훨씬 쉽게 확인할 수 있습니다.
프레임 뷰어
Flame 그래프 보기에서 특정 프레임을 선택하면 페이지에서 컴포지트 레이어로 승격된 요소와 승격된 이유를 살펴볼 수 있습니다.
학습 Cloud Build가 모든 것을 처리합니다 반복
이러한 기능은 개발자가 웹 개발을 빠르게 시작할 수 있도록 Chrome팀에서 제공하는 몇 가지 기능입니다. 웹 기초사항, 웹 시작 키트, Chrome DevTools의 새로운 기능을 확인해 보세요.