JavaScript에 적용되는 깨끗한 코드 - 첫 번째 부분: 시작하기 전

이 글은 일련의 재미있는 문장 중의 첫 번째 편으로 모두가 알고 있는 주제, 즉'깨끗한 코드'를 깊이 있게 연구하지만 자바스크립트에 응용할 것이다.
이 시리즈에서 우리는 깨끗한 코드에 대한 고전적인 기교를 토론할 것이다. 모든 프로그래머는 이런 기교를 알아야 하지만, 그것들은 특정한 자바스크립트/TypeScript 언어에 응용된다.

Part I. Before your start.

소개하다.
먼저 깨끗한 코드의 개념을 되돌아보는 것이 중요하다.
1. 코드 냄새와 재구성

A code smell is a surface indication that usually corresponds to a deeper problem in the system — Martin Fowler
Bad code smells can be an indicator of factors that contribute to technical debt — Robert C. Martin

내가 보기에 Martin Fowler와 Robert C.Martin의 정의는 호환된다. 왜냐하면Fowler의 정의는 소프트웨어 문제의 단서를 나타내고 Martin의 정의는 코드 냄새로 인한 부작용을 가리킨다.
2. 또 다른 재미있는 용어는 기술 채무이다.

Technical debt is a concept in software development that reflects the implied cost of additional rework caused by choosing an easy solution now instead of using a better approach that would take longer.

따라서 생활 자체와 마찬가지로 우리의 이상은 부채를 지지 않는 것이다. 그러나 이를 위해 우리는 건강한 경제(경험이 풍부한 프로그래머와 인프라, 부정적인 결과가 없는 상황에서 개발을 허용해야 한다)를 가져야 한다.그러나 현실 생활에서 때때로 우리는 대출을 받아 대학에 가서 공부하거나 우리의 첫 번째 차를 구매해야 한다. 우리의 채무는 통제하에서 조금씩 이자를 지불해야 한다.소프트웨어에서, 그것은 완전히 같아야 한다. 우리는 반드시 계약 채무를 지불해야 하며, 우리는 잠시 후에 지불할 수 있다.저축과 취업 없이 수백만 명의 집을 사려는 사람은 아무도 없을 것이다. 이런 채무가 우리의 소프트웨어 실패를 초래한다.
따라서 코드 재구성은 외부 행위를 바꾸지 않고 기존 컴퓨터 코드를 재구성하는 과정이다.

재구성은 소프트웨어의 비기능 속성을 개선했다.

의 장점은 코드의 가독성을 높이고 복잡성을 낮추는 것을 포함한다.

이것들은 원본 코드의 유지보수성을 높일 수 있다.

확장성을 향상시키기 위해 보다 표현적인 내부 아키텍처를 만듭니다.

네가 시작하기 전에
JavaScript의 깨끗한 코드의 예시를 보기 전에 팀워크에 중요한 조언들이 매우 중요하다.

인류가 읽을 수 있다
코드는 반드시 인류가 읽을 수 있는 것이어야 한다.컴퓨터가 그것을 어떻게 처리할지 생각하지 마라. 왜냐하면 우리의 코드 (Transilators) 를 변환하는 많은 도구가 있기 때문이다.따라서 가장 중요한 것은 코드가 인간이 읽을 수 있다는 것이다. 코드를 개발할 때 가장 긴 작업 시간은 코드를 읽는 것이지 코드를 작성하는 것이 아니기 때문이다.
다음은 같은 그룹의 사용자에 대한 세 가지 예입니다.이 세 가지 예 중 어느 것이 더 읽을 만합니까?어느 것이 당신의 더 적은 지능 노력을 필요로 합니까?이것이 바로 네가 코드를 구축해야 하는 방식이다.

    const users = [{ id: 1, name: “Carlos Caballero”, memberSince: “1997–04–20”, favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”] }, { id: 2, name: “Antonio Villena”, memberSince: “2014–08–15”, favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”] }, { id: 3, name: “Jesús Segado”, memberSice: “2015–03–15”, favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”] } ];

    /***********************/

    const users = [
    { id: 1, name: “Carlos Caballero”, memberSince: “1997–04–20”, favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”] },
    { id: 2, name: “Antonio Villena”, memberSince: “2014–08–15”, favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”] },
    { id: 3, name: “Jesús Segado”, memberSice: “2015–03–15”, favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”] },
    ];


    /***********************/

    const users = [{
     id: 1,
     name: “Carlos Caballero”,
     memberSince: “1997–04–20”,
     favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”],
    },
    {
     id: 2,
     name: “Antonio Villena”,
     memberSince: “2014–08–15”,
     favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”],
    },
    {
     id: 3,
     name: “Jesús Segado”,
     memberSince: “2015–03–15”,
     favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”],
    }];

영어로 발전하다
나는 영어를 할 줄 모른다. 사실 내가 이 업계에서 가장 큰 문제는 나의 모국어에 비해, 나는 영어로 양호하고 재미있는 대화를 거의 할 수 없다는 것이다.그러나 수업 시간에 나는 학생들에게 반드시 영어로 코드를 작성해야 한다고 알려주었다. 그래서 나의 모든 코드는 영어로 작성되었다.네가 운 좋게 영어를 하지 않는 한 엉터리 영어를 사용하는 것이 모국어를 사용하는 것보다 낫다.전 세계의 비즈니스가 모두 영어를 사용하기 때문이다.너는 좋아할 수도 있고 싫어할 수도 있지만, 세계의 모든 사람들은 영어가 다른 나라와 교류할 때 사용하는 언어라는 것을 안다. 내가 전에 너에게 말했듯이, 너는 대부분의 시간을 코드를 읽는다.한 언어의 코드를 읽을 때 변수나 함수 이름을 알 수 없고 모든 코드가 암호화될 것이라고 상상해 보세요.
따라서 영어가 모국어가 아니더라도 영어에서 발전해야 한다.우리는 업무 중에 영어를 배울 것이다.어쨌든 나를 생각해 보면 나는 현지인이 아니지만 매일 영어를 읽고 쓴다. 물론 잘못도 있지만 우리는 서로를 이해해야 한다. 왜냐하면 한 언어를 사용할 때 가장 중요한 것은 상대방이 우리의 뜻을 이해하도록 하는 것이기 때문이다.
다음 코드 세션이 무엇을 하는지 추측해 보세요. 당신의 언어는 매우 기본적입니다.즉, 아래의 코드 세션은 서로 다른 언어와 영어를 사용한다. (분명히 그 중의 예시 언어가 당신의 모국어라면 이해할 수 있을 것이다.)어떤 상황에서든, 만약 당신이 여러 언어에 통달한 사람이라면, 구글에서 번역을 하고, 코드를 다른 당신이 모르는 언어로 번역하며, 코드의 기능을 추측해 보세요.

    const benutzer = {
     id: 1,
     name: “John Smith”,
     mitgliedVon: “1997–04–20”,
    };

    Gehaltserhöhung(benutzer, 1000); 

    /***********************/

    const użytkownik = {
     id: 1,
     imię: “John Smith”,
     członekZ: “1997–04–20”,
    };
    wzrostWynagrodzeń(użytkownik, 1000);

    /***********************/

    const user = {
     id: 1,
     name: “John Smith”,
     memberSince: “1997–04–20”,
    };
    increaseSalary(user, 1000);

팀워크
옛날에 한 프로그래머가 소프트웨어 프로젝트를 개발하고 있었는데... 얼마나 아름다운 이야기인가!이것이 바로 우리가 혼자서 소프트웨어 개발을 배우는 방식이다.우리는 컴퓨터의 코드 입력과 문제 해결에 직면해 있지만, 오늘은 단독으로 소프트웨어를 개발하는 사람이 없다.
따라서 우리는 팀에서 일하는 것을 고려해야 한다.초보 프로그래머 간의 영원한 토론:

공백 또는 탭 탭을 사용합니다.

함수 이름이나 낮은 줄 옆에 있는 키를 엽니다.

문장 끝에 점수를 붙인다.

너는 이 논점들이 합리적이라고 생각하니?죄송하지만, 이 토론은 터무니없습니다. 모든 팀원들이 이 결정에 동의한 후에 코드를 수정하고 규범화하는 개발 도구를 사용하기 때문입니다.
프로그래머가 프로젝트 파일을 열고 코드를 읽기 시작했을 때, 개발팀은 통합되었다. 그는 코드가 자기가 작성한 것인지 동료가 작성한 것인지 추측할 수 없었다.이것은 완벽한 팀 개발점이다. 우리는 이미 위대한 프로그래머가 되었다.만약 우리가 누가 코드를 썼는지 알아야 한다면, GIT 같은 강력한 도구가 있을 것이다.
따라서 팀에서 직접 작업하기 위해서는 다음이 필요합니다.
특정 IDE를 사용할 의무가 없으므로 표준이 있습니다.editorconfig는 모든 팀 구성원의 완벽한 IDE를 사용할 수 있도록 합니다.모든 사람은 하나의 세계이다. 모든 사람이 웹스토어, VScode, Eclipse를 사용해야 하는 것은 아니다. 왜냐하면 기존의 기준이 우리가 기본적인 구조화 요소를 설정할 수 있기 때문이다. 예를 들어.구성 기준을 편집합니다.
.editorconfig는 개발자가 서로 다른 편집기와 IDE 사이의 일치된 인코딩 스타일을 정의하고 유지하는 데 도움을 줍니다.

    root = true

    [*]
    end_of_line = lf
    insert_final_newline = true

    [*.{js,py}]
    charset = utf-8

    [*.py]
    indent_style = space
    indent_size = 4

    [Makefile]
    indent_style = tab

    [*.js]
    indent_style = space
    indent_size = 2

    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2

lint는 우리가 만든 규칙에 따라 코드 형식의 오류를 발견할 수 있도록 합니다. 모든 언어는 자신의 lint를 가지고 있으며, 개발 언어를 볼 수 있습니다. 모든 언어에서 설정하고 사용해야 합니다.프로토콜은 동일합니다. 어떤 항목에서는 코드가 원하는 방식으로 완성되지 않을 수도 있지만, 적어도 이런 식으로 코드를 계속 입력할 수 있고, 코드를 변경하는 사람을 IDE에 의뢰해서 코드를 생성할 때 문제가 되지 않도록 할 수 있습니다.

    {
     “globals”: {
     “myModule”: true
     },
     “env”: {
     “browser”: true
     },
     “rules”: {
     “no-unused-vars”: “error”,
     “quotes”: [“warning”, “double”]
     }
    }

    const a = ‘a’;
    const b = a;
    const c = b;

업계에서 널리 사용되고 있는 도구는Prettier라고 하는데, linter 규칙에 따라 코드의 형식 (IDE 플러그인) 을 실시간으로 변경할 수 있다.이것은 우리가 반드시 해결해야 할 문제에 전념할 수 있게 하고, 그 외에, 우리는 단결된 단체로서 깨끗한 코드를 생성하고 있다.


결론
이 글에서 우리는 몇 가지 기본 요점을 정리한 후에 깨끗한 코드 실천과 건의를 해결하려고 시도했다.우리가 논의한 원칙은 모든 개발자에게 통용된다.

기계가 아닌 인간을 위해 읽을 수 있는 코드를 작성한다.대부분의 경우, 당신과 배우자의 코드를 포함해서 코드를 읽을 수 있습니다.

영어로 쓴다.오늘은 국제 언어이기 때문에 우리는 반드시 국제화해야 한다. 왜냐하면 이렇게 해야만 우리가 세계의 어떤 사람과 코드를 공유할 수 있기 때문이다.

팀워크.유니버설 규칙을 만들고 도구에 의존하여 모든 사람을 위해 코드를 통일적으로 생성합니다.개발진의 다른 구성원들의 습관을 보지 말고 프로젝트 전체를 한 사람이 작성한 것처럼 보여야 한다.