Home-theater-designers
복잡한 JavaScript 프로젝트를 관리하려면 코드에서 단순성, 가독성 및 유지 관리 용이성을 유지하는 것이 필수적입니다. 명명 규칙을 일관되게 준수하는 것이 이 목표를 달성하는 열쇠입니다.
변수, 부울, 함수, 상수, 클래스, 구성 요소, 메서드, 전용 함수, 전역 변수 및 파일은 일관된 명명 규칙이 필요한 JavaScript 요소입니다. 이러한 모든 구성 요소에 걸쳐 표준화된 명명 규칙을 구현하여 코드 구성 및 이해력을 개선하여 장기적으로 시간과 노력을 절약할 수 있습니다.
오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.
1. 변수 명명
JavaScript에서 데이터는 변수에 저장됩니다. 변수의 기능을 정확하게 반영하는 설명이 포함된 이름을 선택하는 것이 중요합니다. 예를 들어 사용자 이름 또는 총 가격 변수 이름이 아니라 엑스 .
변수 이름을 지정하는 좋은 방법은 다음과 같습니다.
let totalPrice = 100;
let userName = "John";
설명이 포함된 변수 이름을 사용하여 코드 가독성을 높일 수 있습니다.
2. 부울 이름 지정
두 개의 값만 가질 수 있는 변수, 즉 둘 중 하나 진실 또는 거짓 , 부울로 알려져 있습니다. 부울 변수의 목적을 나타내는 적절한 이름을 선택하는 것이 중요합니다.
설명을 위해 다음과 같은 변수 이름을 선택하는 대신 사실이다 , 당신은 함께가는 것을 선호해야합니다 유효한 또는 hasValue .
다음 인스턴스를 고려하십시오.
let isValid = true;
let hasValue = false;
이 예에서 설명이 포함된 부울 변수 이름은 변수가 무엇을 나타내는지 명확하게 합니다.
3. 명명 기능
JavaScript의 함수는 특정 작업을 수행하기 위한 독립적인 코드 단위를 나타냅니다. 코드의 다른 부분에서 호출하거나 호출할 수 있는 코드 블록이며 독립적인 엔터티로 작동합니다.
함수의 이름을 효과적으로 지정하려면 목적을 전달하는 설명이 포함된 이름을 사용하십시오. 예를 들어 대신 함수 생성 푸 , 다음과 같은 더 설명적인 이름을 선택하십시오. 사용자 입력 확인 또는 계산합계 가격 .
예를 들어:
function calculateTotalPrice(price, quantity) {
return price * quantity;
}
function validateUserInput(input) {
return input !== undefined && input !== null;
}
4. 명명 상수
상수는 재할당할 수 없는 변수입니다. 상수 이름을 지정할 때 모든 대문자와 밑줄을 사용하여 단어를 구분하는 것이 중요합니다.
예를 들어:
const MAX_PRICE = 1000;
const MIN_PRICE = 0;
이 예에서는 모든 대문자와 밑줄을 사용하여 상수 이름의 단어를 구분했습니다.
5. 명명 클래스
JavaScript에서는 클래스라는 청사진을 사용하여 개체를 만들 수 있습니다. . 완벽한 이름 지정 관행을 달성하려면 모든 단어의 첫 글자를 대문자로 지정하는 이름 지정 규칙인 PascalCase를 실행하는 것이 가장 중요합니다.
예를 들어:
class ShoppingCart {
constructor(make, model) {
this.make = make;
this.model = model;
}
}
이 예에서 클래스 쇼핑 카트 PascalCase를 사용하여 명명되었습니다. 즉, 클래스 이름의 각 단어의 첫 글자는 대문자로 표시되며 단어 사이에 공백이나 밑줄이 없습니다.
6. 구성 요소 이름 지정
구성 요소는 최신 소프트웨어 개발, 특히 React와 같은 프레임워크 , 재사용 가능한 코드를 강조합니다.
복잡한 사용자 인터페이스나 애플리케이션을 더 작고 관리하기 쉬운 부분으로 나누면 여러 프로젝트에서 재사용할 수 있는 구성 요소를 생성하여 개발 시간을 줄이고 코드 효율성을 높일 수 있습니다.
다시 말하지만 구성 요소 이름 지정에 PascalCase 이름 지정 규칙을 사용하는 것이 좋습니다. 이는 구성 요소 이름에서 각 단어의 첫 글자를 대문자로 표시하는 것을 의미합니다.
이러한 규칙은 구성 요소를 다른 코드 세그먼트와 구별하여 식별 및 조작을 단순화하는 데 도움이 됩니다.
function Button(props) {
return <button>{props.label}</button>;
}
이 예에서는 구성 요소의 이름을 지정하는 데 PascalCase 명명 규칙이 사용되었습니다. 단추 .
7. 명명 방법
메소드 이름을 지정할 때 메소드가 수행하는 작업을 성공적으로 전달하는 설명적인 이름을 사용하는 것이 중요합니다. 메소드는 객체와 관련된 기능이기 때문입니다.
예를 들어:
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
startEngine() {
// code to start engine
}
stopEngine() {
// code to stop engine
}
}
}
설명이 포함된 이름( startEngine , stopEngine )가 이 예제의 메서드에 사용되어 의도한 목적을 쉽게 이해할 수 있습니다.
8. 개인 함수 이름 지정
비공개로 정의된 함수는 정의된 개체 내에서만 액세스하도록 제한됩니다. 함수가 비공개임을 나타내기 위해 선행 밑줄(_)을 추가하는 것이 중요합니다.
예를 들면 다음과 같습니다.
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
_startEngine() {
// code to start engine
}
_stopEngine() {
// code to stop engine
}
}
이 예에서 선행 밑줄을 사용하여 함수가 비공개임을 나타냅니다.
9. 전역 변수 이름 지정
전역으로 분류된 변수는 코드 베이스의 모든 부분에서 액세스할 수 있습니다. 이러한 전역 변수의 이름을 지정할 때 의도한 목적을 효과적으로 전달하는 명확하고 설명적인 이름을 사용하는 것이 중요합니다.
예를 들어:
const MAX_PRICE = 1000;
const MIN_PRICE = 0;
function checkPrice(price) {
if (price > MAX_PRICE) {
// code to handle high prices
} else if (price < MIN_PRICE) {
// code to handle low prices
}
}
10. 파일 이름 지정
효율적인 파일 구성은 성공적인 JavaScript 프로젝트 관리의 중요한 측면입니다. 능률적이고 일관된 명명 규칙을 보장하려면 소문자와 하이픈을 사용하여 파일 이름 내에서 단어를 구분하는 것이 중요합니다.
JavaScript는 대소문자를 구분하는 언어이기 때문에 소문자가 선호됩니다. 즉, 해당 언어는 소문자와 대문자를 다르게 취급합니다. 파일 이름에 소문자를 사용하면 코드에서 파일을 참조할 때 일관성을 유지하고 혼동을 피할 수 있습니다.
유튜브 하이라이트 댓글이란?
파일 이름에는 공백이 허용되지 않으므로 하이픈은 파일 이름에서 단어를 구분하는 데 사용됩니다. 밑줄 또는 낙타 케이스와 같은 다른 대안도 사용할 수 있지만 일반적으로 가독성을 위해 하이픈이 선호됩니다.
또한 하이픈을 사용하면 화면 판독기 또는 기타 보조 기술을 사용하는 사용자가 파일 이름에 더 쉽게 액세스할 수 있습니다.
my-app/
├── src/
├── components/
├── button.js
├── input-field.js
├── utils/
├── string-utils.js
├── date-utils.js
├── app.js
├── index.js
이 예에서는 소문자와 하이픈을 사용하여 파일 이름에서 단어를 구분합니다.
JavaScript에서 명명 규칙을 따르는 것의 중요성
좋은 명명 규칙을 따르는 것은 JavaScript에서 깨끗하고 유지 관리 가능한 코드를 작성하는 데 필수적인 측면입니다. 이러한 규칙을 따르면 특히 부피가 큰 코드를 처리해야 하는 일부 JavaScript 프레임워크에서 코드를 더 읽기 쉽고 유지 관리할 수 있으므로 장기적으로 시간과 노력을 절약할 수 있습니다.