혼돈에서 명료함으로: 깨끗하고 읽기 쉬운 코드베이스를 위한 React 코드 형식 지정-JS 튜토리얼-php.cn

새 프로젝트를 시작할 때 React 개발자들 사이에서 매우 흔히 겪는 경험이 있습니다. 코드가 얼마나 깨끗하고 읽기 쉬운지에 대해 기분이 좋아지기 시작했지만 소수의 함수나 구성 요소를 작성하고 코드베이스가 혼란에 빠지는 것을 천천히 지켜보았습니다. 위에서 아래로, 왼쪽에서 오른쪽으로 스크롤하고, 코드 줄을 반복해서 다시 읽고, 파일에서 파일로 이동하는 자신을 발견하게 됩니다. 기능을 완료하면 해당 기능을 편집하거나 변경하는 것은 고사하고 단일 함수나 변수를 찾는 데 시간이 얼마나 걸리는지 알기 때문에 해당 파일을 다시 열 필요가 없기를 바랍니다.

이 기사에서는 코드베이스를 깔끔하고 읽기 쉽게 만드는 데 있어 형식 지정의 역할을 살펴보겠습니다. 또한 일관된 형식을 달성하기 위한 업계 표준과 모범 사례도 살펴보겠습니다.

코드 형식을 지정하는 이유는 무엇입니까?

형식 지정은 코드의 가독성과 유지 관리에 매우 중요합니다. 그런데 어떻게요?

잘 구성된 코드는 코드의 여러 부분을 시각적으로 구분하는 데 도움이 되므로 논리적 흐름을 더 쉽게 따라갈 수 있습니다. 적절한 들여쓰기는 상위 및 하위 구성 요소, 요소 또는 선택기 간의 관계를 강조합니다. 일관된 형식 지정은 코드를 신속하게 디버그, 수정 및 유지 관리하는 능력을 향상시킵니다. 동일한 서식 규칙을 따르는 팀원들과 협업하면 혼동 없이 서로의 코드를 이해하기가 더 쉬워집니다.

좋은 서식 지정의 또 다른 이점은 정신적 부담 감소입니다. 깔끔한 코드를 사용하면 이해하는 데 정신적 노력이 덜 필요하므로 형식이 잘못된 코드 블록을 해독하는 대신 새로운 문제를 해결하는 데 더 집중할 수 있습니다.

팀이 일관된 스타일을 고수하면 개인 취향에 맞게 코드 블록을 다시 포맷하는 데 시간을 낭비하지 않고 모두가 기여할 수 있습니다. 좋은 형식 지정은 코드베이스에 규율과 전문성을 더해 줍니다.

마지막으로 도구 호환성이 중요한 장점입니다. 개발자는 일관된 형식을 사용하는 린터, 추가 기능 및 IDE를 사용합니다. 이러한 도구를 최대한 활용하고 자동 완성 및 오류 강조와 같은 기능을 활용하려면 코드베이스에 적절한 형식이 필요합니다. 그런데 어떻게 그걸 달성할 수 있나요?

코드베이스 형식화에는 무엇이 포함됩니까?

코드베이스 형식 지정에 관해 말할 때 우리는 일반적으로 들여쓰기, 줄 길이, 명명 규칙, 간격, 중괄호 및 괄호, 일관된 따옴표 사용, 세미콜론 사용, 파일 및 폴더 구조, 적절한 사용 등 여러 측면을 언급합니다. 댓글. 이제 이것이 어떻게 사용되고 구현되는지에 대한 업계 표준을 살펴보겠습니다.

들여쓰기
들여쓰기는 공백을 사용하여 코드를 계층 구조로 시각적으로 구성하는 것입니다. 여기서 업계 표준은 2~4개의 공백을 사용하고 탭 사용을 피하는 것입니다. JavaScript 및 React에 대한 Airbnb 스타일 가이드에 따르면 공백 2개를 사용해야 합니다. 이는 일관된 중첩 수준을 유지하고 코드의 전반적인 가독성을 향상시키기 때문입니다.
줄 길이
여기서 줄 길이는 한 줄에 작성하는 코드가 얼마나 멀리 확장되어야 하는지를 나타냅니다. 여기서 업계 표준은 80~100자 사이의 줄을 유지하는 것입니다. 많은 가이드, 특히 PEP 8 이상에서는 80자를 권장합니다. 가로 스크롤을 방지하고 일반적으로 다양한 화면 크기에서 잘 작동하기 때문입니다. 하지만 이것이 코딩할 때 계산되어야 한다는 뜻인가요? 아니요, 적어도 vscode와 같은 코드 편집기를 사용할 때는 그렇지 않습니다. 아래 이미지는 특정 줄에 몇 개의 문자가 있는지 확인하는 방법을 보여줍니다. 아래 이미지는 현재 44번째 줄에 있고 93번째 문자에 있음을 보여줍니다. 기본 설정을 터치하지 않은 경우 vsCode 편집기 오른쪽 하단에서 찾을 수 있습니다.

From Chaos to Clarity: Formatting React Code for a Clean and Readable Codebase

명명 규칙

이는 일관된 방식으로 사물의 이름을 지정하기 위한 일련의 규칙을 나타냅니다. 읽기, 이해 및 유지 관리가 쉬운 코드를 작성하려면 명확하고 의미 있고 정확한 이름 지정이 필수적입니다. 변수 및 함수에 대해 가장 널리 사용되는 명명 규칙은 다음을 사용하는 것입니다. camelCase(각 단어의 첫 글자를 대문자로 만들고 공백을 사용하지 않고 구문에서 단어를 구분하는 방법). 반응 구성 요소의 경우 특히 PascalCase를 사용해야 합니다. 구성 요소의 첫 글자는 반응 문서에 명시된 대로 대문자여야 하고 상수의 경우 대문자를 사용하는 것이 좋습니다. 이 섹션에서는 명명 정의를 수행하지 않았습니다. 깊이 있게 명명하려면 여기서는 이 글이 너무 길어질 것입니다. 더 자세히 알아보려면 명명 규칙에 대한 이 기사를 확인하세요.
간격
Spacing의 경우 특히 특정 연산자를 조합하여 사용하면 다른 작업을 수행하므로 명확성을 위해 연산자 주위에 공백을 추가하는 것이 좋습니다. 또한 코드의 논리적 섹션을 구분하기 위해 빈 줄을 사용하는 것이 좋습니다. 함수 선언 및 논리에서 빈 줄 공간 변수 선언 및 할당을 그룹화하고 사용해 보세요.
중괄호와 괄호
에어비앤비 스타일 가이드에 따르면 매달린 중괄호가 없어야 합니다. 즉, 모든 닫는 중괄호 또는 괄호가 해당하는 여는 중괄호 또는 괄호와 올바르게 정렬되어야 함을 의미합니다.
일관된 인용
따옴표를 사용할 때는 프로젝트 전체에서 작은 따옴표 '' 또는 큰 따옴표 ""를 사용하고 두 따옴표를 불필요하게 조합하여 사용하는 것을 피하는 것이 좋습니다.
세미콜론
인용문과 마찬가지로 표현식, 할당 및 코드 줄을 끝내기 위해 세미콜론을 사용하거나 세미콜론을 전혀 사용하지 않을 것을 결정하십시오. 그러나 결정이 무엇이든 간에 이를 고수하고 일관성을 유지하십시오. 저는 개인적으로 자동 세미콜론 삽입과 관련된 문제를 피하기 위해 세미콜론을 사용하는 것을 권장합니다.
파일 및 폴더 구조
프로젝트 크기 및 기술 스택과 같은 파일 및 폴더 구조 요소의 경우 대부분 파일 및 폴더의 구조를 결정하지만 따라야 할 두 가지 일반 규칙이 있습니다. 1 관련 파일을 그룹화합니다. 2 의미 있는 파일 이름을 사용하세요.
댓글
코드베이스는 코드와 쉽게 클러스터될 수 있으므로 주석을 과도하게 사용하여 상황을 악화시키지 마십시오. 좋은 명명 규칙이 있고 안티 패턴이 없는 깔끔한 코드를 작성한다면 일반적으로 주석 사용을 피할 수 있습니다. 로버트 c처럼요. Martin은 "주석이 본질적으로 나쁜 것은 아니지만" "코드 자체에서 의도를 표현하지 못했다는 신호"인 경우가 많다고 말합니다. 주석은 코드에 자리를 잡고 코드 블록이 작동하는 방식이 아니라 코드가 존재하는 이유를 보여줍니다. 이므로 코드에 명확하지 않은 결정이나 해결 방법이 포함된 경우 주석을 사용해야 합니다. 따라서 코드의 방식을 설명할 필요가 없도록 안티 패턴을 피하고 코드가 이미 표현한 내용을 설명하지 마세요.