JavaScript 스타일 가이드

GitLab 프론트엔드 개발에서 사용하는 JavaScript 코딩 스타일 규칙과 모범 사례를 설명합니다.

대부분의 JavaScript 스타일 지침은 Airbnb JavaScript 스타일 가이드 와 함께 제공되는 린터를 사용하여 관리합니다. Airbnb에서 정한 스타일 지침 외에도, 아래에 몇 가지 특정 규칙이 추가로 나열되어 있습니다. yarn run lint:eslint:all 또는 yarn run lint:eslint $PATH_TO_FILE 을 실행하여 로컬에서 ESLint를 실행할 수 있습니다. 준비 완료 신호 # 기능 테스트가 JavaScript 초기화를 기다려야 할 때는 사용자에게 보이는 관찰 가능한 결과를 우선적으로 사용하세요. 준비 완료 신호는 페이지에 확인할 만한 적절한 UI 상태가 없을 때만 추가하세요. 해당 초기화 로직이 완료될 때 설정되는, 정확하게 범위가 지정된 data-* 속성을 사용하세요: document.body.dataset.rightSidebarInitialized = 'true'; page-initialised 와 같은 타이머 기반 클래스를 완료 신호로 사용하지 마세요. 타임아웃은 초기화가 완료되었음을 증명하지 못합니다. 기능 테스트 동기화 패턴에 대해서는 wait_for_requests 또는 wait_for_all_requests 를 절대 사용하지 마세요 를 참조하세요. forEach 사용 지양 # 데이터를 변경(mutate)할 때는 forEach 사용을 피하세요. 데이터를 변경할 때는 forEach 대신 map , reduce , filter 를 사용하세요. 이렇게 하면 함수 내에서의 변경을 최소화하여 Airbnb 스타일 가이드 와 일치합니다. // bad users.forEach((user, index) => { user.id = index; }); // good const usersWithId = users.map((user, index) => { return Object.assign({}, user, { id: index }); }); 매개변수 수 제한 # 함수나 메서드의 매개변수가 3개를 초과하는 경우, 매개변수 대신 객체를 사용하세요. // bad function a(p1, p2, p3, p4) { // ... }; // good function a({ p1, p2, p3, p4 }) { // ... }; DOM 이벤트 처리 시 클래스 사용 지양 # 클래스의 유일한 목적이 DOM 이벤트를 바인딩하고 콜백을 처리하는 것이라면, 함수를 사용하는 것을 권장합니다. // bad class myClass { constructor(config) { this.config = config; } init() { document.addEventListener('click', () => {}); } } // good const myFunction = () => { document.addEventListener('click', () => { // handle callback here }); } 생성자에 엘리먼트 컨테이너 전달 # 클래스가 DOM을 조작하는 경우, 엘리먼트 컨테이너를 매개변수로 받으세요. 이렇게 하면