지난 5년 동안 저는 코딩 기술을 향상시키기 위해 끊임없이 노력해 왔으며 그 중 하나는 가장 권장되는 코딩 스타일을 배우고 따르는 것이었습니다.
이 가이드는 일관되고 우아한 코드를 작성하는 데 도움을 주고 코드 가독성과 유지 관리성을 향상시키는 몇 가지 조언을 포함합니다. 커뮤니티 내에서 가장 널리 받아들여지는 지침에서 영감을 얻었지만 내 선호도에 더 적합하도록 일부 수정했습니다.
저는 풀 스택 JavaScript 개발자이고 제가 작성한 모든 메모는 제 기술 스택(MEVN)에만 적용되며 다른 스택에는 적용되지 않을 수 있다는 점을 언급할 가치가 있습니다.

일반 규칙

코드 중복 방지

동일한 코드 블록(또는 관리 가능한 차이점이 있는)을 여러 곳에 작성해야 하는 경우 이를 함수로 병합하고 이후에는 언제든지 함수를 호출하는 것이 필수입니다. 필요합니다.

느슨한 결합을 고려하라

기능은 독립적으로 작동해야 합니다. 즉, 입력과 출력이 동일하게 유지되는 한 하나의 기능을 편집해도 다른 기능에 절대로 영향을 미치지 않아야 합니다. 각 기능은 다른 기능의 정의에 대해 알지 못하고 별도의 구성 요소로 작동해야 합니다. 이 상황에서는 매개변수만 알고 있으며, 누가 함수를 호출하든 동일한 입력은 항상 동일한 결과를 반환합니다.

선언

무엇보다도 변수를 항상 선언해야 한다는 점을 기억하세요.
변수를 재할당하지 않을 경우 const 키워드를 사용하세요. 그러나 중첩된 요소를 다시 할당하려는 경우에도 객체 또는 배열인 변수에 대해서는 여전히 const를 사용할 수 있습니다.
모듈을 요구하고 항상 const 키워드를 사용하여 상수 변수를 정의하십시오.
const를 사용할 수 없는 경우 let 키워드를 사용하고, 이전 브라우저를 지원해야 하는 경우에만 var 키워드를 사용하세요.

기능

기능은 다음으로 제한되어야 합니다.

• 4개의 변수
• 4개의 매개변수
• 코드 30줄(주석 무시)
• 4개의 분기(if-else, while, for, or-and, switch-case)

코드 라인은 100자 이내로 제한해야 하며, 기능을 그룹화/정리하기 위해서는 관련 기능을 최대한 가깝게 유지하는 것이 좋습니다.
가능할 때마다 화살표 함수 구문을 기존 대안에 대한 권한을 부여합니다.

문자열

일반 문자열 리터럴에는 작은따옴표 '(큰따옴표 " 대신)를 사용하지만, 내장된 변수/표현식, 여러 줄 문자열, 작은따옴표 문자가 포함된 문자열의 경우 템플릿 리터럴을 사용합니다.

명명

변수 이름을 지정할 때 일관성을 유지하는 것이 중요합니다. 이는 서로 다른 페이지의 변수가 동일한 데이터를 담당하는 경우 이름이 동일해야 함을 의미합니다.

변수, 함수, 메소드 및 매개변수의 이름은 자기 설명적이어야 합니다. 즉, 누구나 이름만 보고 포함된 데이터에 대해 알 수 있어야 합니다(또는 최소한 공정하게 추측할 수 있어야 함).

상수 변수는 대문자여야 하며 단어는 밑줄로 구분되어야 합니다. 함수, 변수, 메서드는 camelCase 구문을 따라야 하며, CSS 클래스와 ID는 kebab-case 구문을 따라야 합니다.

댓글

댓글은 항상 대문자로 시작해야 하며 100자로 제한됩니다. 코드 줄은 동일한 규칙을 따른다는 점을 기억하실 수 있지만, 줄에 두 가지가 모두 포함된 경우 최대 150자를 초과할 수 있습니다.
함수를 설명하는 주석은 호출되는 위치가 아닌 정의된 위치에 작성해야 합니다.

줄 길이가 150자를 초과하지 않는 한 한 줄 코드 뒤에 주석을 배치하세요. 이러한 경우와 여러 줄 코드의 경우 주석을 맨 위에 넣으십시오.

if 문은 조건문 뒤에 주석을 달아야 합니다.

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

한 줄 주석에는 // 이중 슬래시를 사용하고 여러 줄 주석에는 /* */를 사용하는 것을 기억하세요. 한 줄 코드나 조건문에 여러 줄 주석을 추가할 때 /* */ 안에 넣어서 /*가 코드 앞에 쓰여지고 주석이 다음 줄에서 시작되고 */가 새 줄에 쓰여집니다. 선.

if (conditionIsTrue) { /*
        Put your comment here
        Put your comment here
    */
    doSomeThing();
}

functionName(parameter), /*
    Put your comment here
    Put your comment here
*/

기능 설명 주석

/** */로 래핑된 함수 위에 주석을 배치합니다.

• @param {type} 변수 이름 설명을 사용하여 매개변수를 설명합니다.
• 매개변수가 둘 이상의 변수 유형을 허용할 수 있는 경우 @param {type1 | type2} 변수이름 설명.
• 매개변수가 선택사항이고 없을 수 있는 경우 @param {type} [variableName] 설명을 사용하세요.
• 매개변수에 기본값이 있는 경우(실제로 기본값을 가질 수 있으려면 선택 사항이어야 함) @param {type} [variableName="value"] 설명을 사용하세요.
• @returns {type} 설명을 사용하여 함수 출력을 설명합니다.

/**
 * Describing the function here
 * @param {type} normalVariable A normal variable
 * @param {type1 | type2} multiTypeVariable A variable with multiple expected types
 * @param {type} [variableWithDefaultValue="value"] An optional variable that has a default value in case of being absent when calling the function 
 * @param {type} [optionalVariable] An optional variable
 * @returns {type} description
*/
const functionName = (normalVariable, multiTypeVariable, variableWithDefaultValue, optionalVariable) => {
    doSomeThing();
}

req 및 res 매개변수가 있는 서버 기능과 관련하여 요청 매개변수를 설명할 필요가 없습니다. @returns 설명을 사용하여 응답만 설명합니다.

/**
 * Describing the function here
 * @returns description
 */
functionName = (req, res) => {
    doSomeThing();
}

일반적으로 req, res, next, to, from 매개변수를 설명할 필요가 없습니다.

HTML 파일에서는 을 사용하여 코드의 여러 부분을 구분합니다. 따라서 사용자는 각 부분을 쉽게 식별할 수 있습니다.

코드 중간에 주석을 작성할 경우에는 /* */를 사용하세요.

const calc_result = (firstNumber * secondNumber)/* Explain the reason for the multiplication */   thirdNumber;

톱니 모양

후행 공백은 금지됩니다.
표현식, 연산자, 기호 주위에 항상 공백을 두는 것을 기억하세요. 그리고 쉼표와 중괄호 뒤에도 공백을 두는 것을 기억하세요. 이러한 것들이 줄의 마지막 문자가 아닌 경우입니다.
빈 줄은 파일 끝(모든 파일은 빈 줄로 끝나야 함), 마지막으로 가져온 모듈 뒤, 템플릿, 스크립트 및 스타일 태그를 구분하는 CSS 규칙 세트 사이에서만 허용됩니다(및 필수).
들여쓰기에는 탭을 사용하고 정렬에는 공백을 사용하는 것을 잊지 마세요.

주문하다

• 몽구스 스키마의 변수와 구성 요소의 Vue 반응 상태를 알파벳 순서로 정렬하지만 나머지 시간에는 가장 짧은 것부터 가장 긴 것까지 줄을 정렬합니다.
• 라우트 메소드를 put, get, post, delete의 순서로 정렬하고 각 메소드는 알파벳 순서로 되어 있으며 모든 경로는 URL을 기준으로 그룹화되어야 합니다.

요약

분명히 이것은 최고의 조언은 아니지만 클린 코드 원칙을 배우는 데 관심이 있는 모든 사람에게 확실한 출발점을 제공한다고 믿습니다.
또한, 이러한 규칙을 엄격하게 준수하는 것이 처음에는 어려워 보일 수 있지만 연습을 하면 훨씬 더 간단해집니다.

장기적인 코드베이스 작업 시 현재 프로젝트의 가이드라인이 부족하더라도 이를 준수해야 한다는 점을 강조하는 것이 필수적입니다. 프로젝트 지침을 진지하게 재검토하고 싶다면 가장 유익한 수정 사항을 고려하여 점진적으로 프로젝트에 적용하세요.

표지 이미지 출처: Pexels의 Luis Gomes 사진