JavaScript 프레임워크 생태계의 규정 준수
소개 블로그 게시물에서는 프레임워크와 도구를 빌드하고 사용하여 Google 검색, 지도, 포토와 같은 대규모 웹 애플리케이션을 개발하고 유지 관리하면서 많은 것을 배운 방법을 다뤘습니다. Google은 개발자가 사용자 환경에 부정적인 영향을 미칠 수 있는 코드를 작성하지 못하도록 보호함으로써 프레임워크가 성능 및 애플리케이션 품질의 결과를 바꾸는 데 중요한 역할을 할 수 있음을 입증했습니다.
Google에서는 내부적으로 이 방법론을 설명하기 위해 '규정 준수'라는 용어를 사용했으며, 이 도움말에서는 이 개념을 JavaScript 프레임워크 생태계로 오픈소스로 제공할 계획을 다룹니다.
규정 준수란 무엇인가요?
Google에서는 규정 준수가 진화했습니다. 팀은 광범위한 코드 검토를 수행하고 정확성 문제를 넘어 앱 품질과 유지보수성에 영향을 미치는 사항을 신고하는 경험이 풍부한 소수의 유지관리자를 활용했습니다. 이를 성장하는 앱 개발자 팀으로 확장하기 위해 자동화되고 시행 가능한 방식으로 권장사항을 규정화하는 규정 준수 시스템이 개발되었습니다. 이를 통해 코드 참여자 수와 관계없이 앱 품질과 코드베이스 유지관리성에 대한 기준이 항상 높게 유지되었습니다.
규정 준수는 개발자가 잘 알려진 경로를 계속 유지하도록 하는 시스템입니다. 규정 준수를 통해 확신을 갖고 예측 가능한 결과를 얻을 수 있습니다. 팀의 생산성을 높이고 팀이 성장하고 더 많은 기능이 동시에 개발됨에 따라 확장에 매우 중요합니다. 이를 통해 개발자는 제품 기능을 빌드하는 데 집중할 수 있으며, 세부사항과 성능, 접근성, 보안 등 다양한 영역의 변화하는 환경에서 벗어날 수 있습니다. 누구나 언제든지 규정을 선택 해제할 수 있으며, 팀에서 약속한 사항을 시행할 수 있을 만큼 맞춤설정할 수 있어야 합니다.
규정 준수는 강력한 기본값을 기반으로 하며 작성 시 적용할 수 있는 조치 가능한 규칙을 제공합니다. 이는 다음 3가지 원칙으로 나뉩니다.
1. 강력한 기본값
규정 준수의 기본적인 측면은 개발자가 사용하는 도구에 강력한 기본값이 적용되어 있는지 확인하는 것입니다. 즉, 솔루션이 프레임워크에 내장되어 있을 뿐만 아니라 프레임워크 디자인 패턴을 사용하면 올바른 작업을 쉽게 수행하고 역패턴을 따르기 어렵습니다. 이 프레임워크는 애플리케이션 설계 및 코드 구조를 통해 개발자를 지원합니다.
로드 성능을 위해 모든 리소스 (글꼴, CSS, JavaScript, 이미지 등)를 최적화해야 합니다. 이는 바이트를 자르고, 왕복 횟수를 줄이며, 첫 번째 렌더링, 시각적 준비 상태, 사용자 상호작용에 필요한 항목을 분리하는 등 복잡한 문제입니다. 예를 들어 중요한 CSS를 추출하고 중요한 이미지의 우선순위를 설정합니다.
2. 조치 가능한 규칙
기본적인 최적화를 적용하더라도 개발자는 여전히 선택해야 합니다. 개발자 입력의 양과 관련하여 최적화할 수 있는 다양한 방법이 있습니다.
- 중요한 CSS 인라인 처리와 같이 개발자 입력이 필요 없는 기본값
- 개발자의 선택이 필요합니다. 예를 들어 프레임워크에서 제공하는 이미지 구성요소를 사용하여 이미지 크기를 조절하고 크기를 조정합니다.
- 개발자의 선택 및 맞춤설정이 필요합니다. 예를 들어 중요한 이미지에 태그를 지정하여 먼저 로드합니다.
- 특정 기능이 아니지만 개발자 결정이 필요한 사항입니다. 예를 들어 조기 렌더링을 지연시키는 글꼴이나 동기식 스크립트를 피합니다.
개발자의 결정이 필요한 최적화는 애플리케이션의 성능에 위험을 초래합니다. 기능이 추가되고 팀이 확장되면 가장 경험이 많은 개발자도 끊임없이 변화하는 권장사항을 따라잡을 수 없으며, 시간을 가장 잘 활용하는 방법도 아닙니다. 규정 준수의 경우 개발자가 계속 변경하더라도 애플리케이션이 특정 표준을 계속 충족할 수 있도록 적절한 조치 가능한 규칙이 강력한 기본값만큼 중요합니다.
3. 작성 시간
개발 수명 주기 초기에 성능 문제를 포착하고 방지하는 것이 중요합니다. 코드가 커밋되기 전의 작성 시간은 문제를 포착하고 해결하는 데 가장 적합합니다. 개발 수명 주기에서 문제가 발견되는 시기가 늦을수록 문제를 해결하기가 더 어렵고 비용이 더 많이 듭니다. 이는 정확성 문제에 적용되지만 성능 문제에도 적용됩니다. 이러한 문제 중 상당수는 코드베이스에 커밋된 후에는 소급하여 해결되지 않기 때문입니다.
현재 대부분의 성능 피드백은 문서, 일회성 감사를 통해 부적절한 방식으로 제공되거나 프로덕션에 배포된 후 측정항목 회귀를 통해 너무 늦게 표시됩니다. YouTube는 이 기능을 제작 시점으로 가져오고자 합니다.
프레임워크의 규정 준수
로드 성능에 대한 높은 수준의 사용자 환경을 유지하려면 다음 질문에 답변해야 합니다.
- 최적의 로드란 무엇이며 로드에 부정적인 영향을 미칠 수 있는 일반적인 문제는 무엇인가요?
- 개발자 입력이 필요하지 않은 솔루션은 무엇인가요?
- 개발자가 이러한 솔루션을 사용하고 최적으로 활용하도록 하려면 어떻게 해야 하나요?
- 개발자가 로드 성능에 영향을 미칠 수 있는 다른 선택사항은 무엇인가요?
- 작성 초기에 이러한 선택사항 (#3 및 #4 위)을 알려줄 수 있는 코드 패턴은 무엇인가요?
- 이러한 코드 패턴을 평가하기 위해 어떤 규칙을 수립할 수 있을까요? 작성 시 개발자에게 표시하면서 워크플로에 원활하게 통합하려면 어떻게 해야 하나요?
Google에서 내부적으로 사용하는 규정 준수 모델을 오픈소스 프레임워크로 가져오기 위해 Google팀은 Next.js에서 많은 실험을 진행했으며, Google의 세련된 비전과 계획을 공유하게 되어 기쁩니다. 코드 패턴을 평가할 수 있는 최적의 규칙은 정적 코드 분석과 동적 검사를 조합해야 한다는 사실을 확인했습니다. 이러한 규칙은 다음을 비롯한 여러 표시 경로에 적용될 수 있습니다.
- ESLint
- TypeScript
- 사용자의 개발 서버에서 동적 검사 (DOM 생성 후)
- 모듈 번들러 (webpack)
- CSS 도구 (아직 탐색 중)
다양한 도구를 통해 규칙을 제공하면 규칙이 일관성을 유지하면서 로드 성능에 직접적인 영향을 미치는 모든 사용자 환경 문제를 포함할 수 있습니다. 또한 이러한 규칙은 개발자에게 여러 시점에 표시될 수 있습니다.
- 개발 서버에서 로컬 개발을 진행하는 동안 브라우저와 사용자의 IDE에 경고가 표시되어 개발자에게 작은 코드 변경을 요청합니다.
- 빌드 시간에 해결되지 않은 문제가 사용자의 터미널에 다시 표시됩니다.
간단히 말해 팀은 코어 웹 바이탈 또는 로드 성능과 같이 중요한 결과를 선택하고 모든 코드 참여자가 따라야 하는 관련 규칙 집합을 사용 설정합니다.
이는 새 프로젝트에 매우 적합하지만 전체 규칙 집합을 준수하도록 대규모 코드베이스를 업그레이드하는 것은 쉽지 않습니다. Google은 소스 코드의 개별 라인, 전체 디렉터리, 기존 코드베이스 또는 활발하게 개발되지 않는 앱의 일부와 같은 다양한 수준에서 선택 해제할 수 있는 광범위한 시스템을 보유하고 있습니다. Google은 오픈소스 프레임워크를 사용하는 팀에 이 기능을 제공하기 위한 효과적인 전략을 적극적으로 모색하고 있습니다.
Next.js의 규정 준수
ESLint는 JavaScript 개발자 사이에서 널리 사용되며 Next.js 애플리케이션의 50% 이상이 빌드 워크플로의 일부에서 ESLint를 사용합니다. Next.js v11에서는 개발 및 빌드 시간에 일반적인 프레임워크 관련 문제를 더 쉽게 포착할 수 있도록 커스텀 플러그인 및 공유 가능한 구성이 포함된 즉시 사용 가능한 ESLint 지원을 도입했습니다. 이를 통해 개발자는 작성 시 중요한 문제를 해결할 수 있습니다. 예를 들어 특정 구성요소가 페이지의 HTML 링크 없음과 같이 성능에 해를 끼칠 수 있는 방식으로 사용되거나 사용되지 않는 경우가 여기에 해당합니다. 또는 특정 글꼴, 스타일시트 또는 스크립트가 페이지의 리소스 로드에 부정적인 영향을 미칠 수 있는 경우 예를 들어 동기 스크립트 없음
ESLint 외에도 TypeScript 지원과 함께 v9부터 Next.js에서 개발 및 프로덕션 모두에서 통합 유형 검사가 지원되었습니다. 프레임워크에서 제공하는 여러 구성요소 (이미지, 스크립트, 링크)는 개발자가 웹페이지에 콘텐츠를 추가하는 데 성능이 우수한 접근 방식을 사용할 수 있도록 HTML 요소 (<img>, <script>, <a>)의 확장 프로그램으로 빌드되었습니다. 유형 검사는 할당된 속성과 옵션이 지원되는 값과 유형의 허용 가능한 범위에 있는지 확인하여 이러한 기능의 적절한 사용을 지원합니다. 예시는 필수 이미지 너비 및 높이를 참고하세요.
토스트 및 오버레이로 오류 표시
앞에서 언급한 것처럼 규정 준수 규칙은 여러 영역에 표시될 수 있습니다. 현재 토스트 및 오버레이는 사용자의 로컬 개발 환경 내 브라우저에 직접 오류를 표시하는 방법으로 연구되고 있습니다.
개발자가 사용하는 많은 오류 검사 및 감사 도구 (Lighthouse, Chrome DevTools 문제 탭)는 수동적이며 정보를 검색하려면 일종의 사용자 상호작용이 필요합니다. 개발자는 기존 도구 내에서 직접 오류가 표시되고 문제를 해결하기 위해 취해야 할 구체적인 작업을 제공하는 경우 조치를 취할 가능성이 높습니다.
다른 프레임워크의 규정 준수
규정 준수는 다른 프레임워크(Nuxt, Angular 등)로 확장하는 것을 목표로 먼저 Next.js에서 살펴보고 있습니다. ESLint와 TypeScript는 이미 여러 프레임워크에서 다양한 방식으로 사용되고 있지만, 통합된 브라우저 수준 런타임 시스템이라는 개념이 활발하게 연구되고 있습니다.
결론
규정 준수는 개발자가 간단한 코드 패턴으로 실행할 수 있는 규칙 집합으로 권장사항을 코드화합니다. Aurora팀은 로드 성능에 중점을 두었지만 접근성 및 보안과 같은 다른 권장사항도 동일하게 적용됩니다.
규정 준수 규칙을 따르면 예측 가능한 결과를 얻을 수 있으며, 기술 스택을 기반으로 빌드하면 사용자 환경의 높은 기준을 달성하는 부수적인 효과를 얻을 수 있습니다. 규정 준수를 통해 팀의 생산성이 향상되고 시간이 지남에 따라 팀과 코드베이스가 커져도 애플리케이션의 높은 품질 기준이 유지됩니다.