> 웹 프론트엔드 > JS 튜토리얼 > 깔끔한 코드를 작성하는 방법 – 예제가 포함된 개발자를 위한 팁

깔끔한 코드를 작성하는 방법 – 예제가 포함된 개발자를 위한 팁

Barbara Streisand
풀어 주다: 2024-12-29 14:03:11
원래의
282명이 탐색했습니다.

방이 너무 지저분해서 열쇠를 찾을 수 없다고 상상해 보세요. 곳곳에 옷이 있고, 책이 쌓여 있고, 혼돈이 지배하고 있습니다.

How to Write Clean Code – Tips for Developers with Examples

이제 지저분한 코드에서 작업한다고 상상해 보세요.

이것은 동일한 재앙입니다. 제외 이제 정신을 잃고 있는 것은 두뇌입니다.

How to Write Clean Code – Tips for Developers with Examples
반면에 클린 코드는 흠집 하나 없는 방에 들어가는 것과 같습니다. 모든 것이 정확히 있어야 할 곳에 있습니다. 스트레스가 없습니다. 혼란이 없습니다. 단지 명확성.

진실은 다음과 같습니다. 소프트웨어 개발에 성공하려면 깨끗한 코드를 작성하는 것이 선택 사항이 아닙니다.

복잡한 코드를 작성하고 모든 버그를 고치려고 애쓰는 사람이 될 수도 있고, 깨끗한 코드를 마스터하고 모든 프로젝트를 지배할 수도 있습니다.


클린 코더 vs. 지저분한 코더

그림을 그려드리겠습니다.

다음은 두 가지 유형의 코더의 여정을 보여주는 그래프입니다.

How to Write Clean Code – Tips for Developers with Examples

  • ⚠️ Bad Coder(빨간색 선): 시작은 빠르지만 충돌이 심합니다. 더 많은 줄을 쓸수록 더 많은 문제를 일으킵니다.
  • ⚡ 클린 코드(파란색 선): 느리게 시작되지만 일관성을 유지합니다. 성장은 멈추지 않고 가속화됩니다.

이제 어떤 라인을 따를지 결정하세요.

잘못된 코드의 비용

How to Write Clean Code – Tips for Developers with Examples

이 차트를 설명하기 위해 초기 개발 단계에서 잘못된 코드는 깨끗한 코드보다 변경하는 데 약간 비용이 더 많이 듭니다.

그러나 유지 관리 및 리팩터링 단계로 이동하면 불량 코드의 경우깨끗한 코드의 거의 두 배에 달하는 비용이 들기 때문에 격차가 훨씬 더 커집니다.

레거시 단계에 이르면 잘못된 코드는 비용이 100%에 도달합니다. 이제 업데이트 비용이 엄청나게 비싸지만 깨끗한 코드는 45%로 더 관리하기 쉽습니다.

의심할 바 없이, 잘못된 코드는 소프트웨어 개발에서 비용이 많이 드는 문제입니다.


클린 코드 작성을 위한 10가지 방탄 규칙

1. 의미가 있는 이름을 사용하세요

변수나 함수의 이름을 b 또는 x로 지정하는 것은 범죄입니다. 그들을 뭐라고 부르세요.

// Weak and vague
let b = 5;

// Strong and clear
let numberOfUsers = 5;
로그인 후 복사
로그인 후 복사

불명확한 이름을 쓰는 사람들은자신의 실수를 소유하고 싶지 않습니다. 그런 사람이 되지 마세요.


2. 기능을 레이저 중심으로 유지(SRP)

함수는 한 가지 기능을 완벽하게 수행해야 합니다. 이를 단일 책임 원칙(SRP)이라고 합니다.

좋은 코드는 망치와 같습니다. 10개가 아니라 한 개의 못에 맞았습니다.

// Clean: One job, one focus
function calculateTotal(a, b) {
    return a + b;
}

function logTotal(user, total) {
    console.log(`User: ${user}, Total: ${total}`);
}

// Dirty: Trying to do EVERYTHING
function calculateAndLogTotal(a, b, user) {
    let total = a + b;
    console.log(`User: ${user}, Total: ${total}`);
}
로그인 후 복사
로그인 후 복사

작업을 혼합하면 혼란과 재난이 혼합됩니다.


3. 댓글을 버팀목으로 사용하지 마세요

누군가가 방에 들어올 때마다 문이 하는 일을 설명하지 마세요. 코드는 동일한 방식으로 작동해야 합니다.

// Clean: Self-explanatory
let userAge = 25;

// Messy: Needs an explanation
let a; // This means "age of the user"
로그인 후 복사

댓글은 나쁘지는 않습니다. 하지만 코드가 자립할 수 없다면 이미 실패한 것입니다.


4. 읽을 수 있게 만드세요

당신의 코드를 읽는 사람이 수수께끼를 풀고 있는 듯한 느낌을 준다면 당신은 이미 문제아가 된 것입니다.

// Clean: Reads like a story
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Messy: Feels like chaos
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}
로그인 후 복사

읽기 쉬운 코드는 다른 사람만을 위한 것이 아닙니다. 지금으로부터 6개월 후에는 당신을 위한 것입니다.


5. 당신이 작성한 모든 것을 테스트하세요

테스트 작성하기가 너무 게으른 경우, 코드가 깨졌을 때 불평하지 마세요.

class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
}

// Test it (Unit Test)
const calculator = new Calculator();
console.assert(calculator.add(2, 3) === 5, "Addition failed");
console.assert(calculator.subtract(5, 3) === 2, "Subtraction failed");
로그인 후 복사

테스트는 보험입니다. 무시하고 시간을 두고 도박을 하고 있는 것입니다.


6. 종속성에 주의하세요

종속성은 거래와 같습니다. 올바른 것을 얻으면 승리할 수 있습니다. 잘못 선택하면 후회할 일에 갇히게 됩니다.

// Dependency: Sending emails with Nodemailer
const nodemailer = require('nodemailer');
function sendEmail(to, subject, message) {
    const transporter = nodemailer.createTransport({ /* config */ });
    return transporter.sendMail({ from: "you@example.com", to, subject, text: message });
}
로그인 후 복사

하드코딩 종속성을 피하세요. 안전한 유지 관리를 위해 추상화 또는 구성 파일을 사용하세요.

이것은 하나의 예일 뿐입니다. 개발자는 수백 개의 라이브러리나 종속성을 사용할 수 있습니다.

믿지 말라는 말이 아닙니다. 요즘에는 피하기 어렵습니다. 그러나 코딩 프로젝트에 설치하기 전에 매우 주의해야 합니다.

조직의 소프트웨어 시스템의 보안, 성능, 품질 또는 기능을 확인해야 합니다. 때때로 전체 프로젝트를 망칠 수 있는 위험이 포함되어 있기 때문입니다.

항상 도구를 제어하세요. 도구가 당신을 제어하도록 놔두지 마세요.


7. 보스처럼 프로젝트를 정리하세요

잘 정리된 프로젝트는 차고세일고급 부티크의 차이입니다.

myProject
├── src
│   ├── components
│   ├── services
│   ├── utils
└── tests
로그인 후 복사

이 프로젝트에서 각 폴더를 구성하는 방법은 다음과 같습니다.

How to Write Clean Code – Tips for Developers with Examples

코드베이스가 쓰레기 서랍처럼 보인다면 미래의 자신에 대한 존경심을 이미 잃은 것입니다.

이메일 앱의 견고한 프로젝트 구조:
사용자에게 이메일을 보내는 애플리케이션을 구축한다고 가정해 보겠습니다. 당신의 상사와 같은 깨지지 않는 SOLID 프로젝트 구조는 다음과 같아야 합니다:

How to Write Clean Code – Tips for Developers with Examples


8. 일관성 있는 형식 유지

10가지 성격을 가진 사람처럼 코딩하지 마세요. 형식을 일관되게 유지하세요.

Prettier 또는 ESLint와 같은 도구를 사용하여 일관된 스타일을 강화하세요. 모든 파일이 다르게 보인다면 누구도 고치고 싶어하지 않는 혼란을 야기하는 것입니다.

형식의 일관성은 가독성을 보장하므로 클린 코드의 기본 원칙입니다.

한 번 보세요...

How to Write Clean Code – Tips for Developers with Examples

코드베이스 전체에서 일관되게 들여쓰기하려면 2~4개의 공백을 사용하세요. 탭을 피하세요 다양한 편집기에서 균일성을 유지하세요.

가로 스크롤을 방지하고 가독성을 높이려면 최대 100~120자로 줄을 유지하세요.

관련 논리를 함께 그룹화하고 빈 줄을 사용하여 코드의 개별 블록강조합니다.

마지막으로, 코드를 과도하게 정렬하지 마세요; 대신 들여쓰기를 자연스럽게 논리의 흐름에 따라가도록 하세요.


9. 값 하드코딩 중지

하드코딩은 노력을 가장한 게으름입니다. 살펴보세요:

// Weak and vague
let b = 5;

// Strong and clear
let numberOfUsers = 5;
로그인 후 복사
로그인 후 복사

그래서 하드코딩은 낭떠러지로 가는 지름길입니다.


10. 기능을 짧게 유지하세요

기능이 20줄보다 길 경우 아마도 과도한 작업을 수행하려는 것일 수 있습니다.

// Clean: One job, one focus
function calculateTotal(a, b) {
    return a + b;
}

function logTotal(user, total) {
    console.log(`User: ${user}, Total: ${total}`);
}

// Dirty: Trying to do EVERYTHING
function calculateAndLogTotal(a, b, user) {
    let total = a + b;
    console.log(`User: ${user}, Total: ${total}`);
}
로그인 후 복사
로그인 후 복사

짧은 함수는 샤프 함수입니다. 그들은 매번 목표를 달성했습니다.


??크리스마스 선물!

누구나 지저분한 코드를 작성할 수 있습니다. AI도 쓰레기를 버릴 수 있다.

그런데 깔끔한 코드를 작성한다고요? 그게 아마추어와 프로 프로그래머를 가르는 능력

소프트웨어 개발을 장악하고 싶나요? 깨끗한 코드를 작성하세요. 아주 간단합니다.

그럼 어떻게 깔끔한 코드를 작성할 수 있을까요?

한 가지 말씀드리자면, 방금 이 기사에서 읽은 내용은 제 책 Clean Code Zero to One에 나오는 바다의 물방울에 불과합니다.

How to Write Clean Code – Tips for Developers with Examples

이 10가지 규칙은요? 그냥 표면일 뿐입니다.

이 책은 모든 원칙, 모든 규칙, 모든 기술을 깊이 파고들어 결코 잊지 못할 정도로 명확하고 자세하게 설명되어 있습니다.

수천 개의 디지털 일러스트레이션실제 시나리오로 가득 차 있습니다. 이 그림들은 여러분을 단순한 코딩의 세계로 안내합니다. 본 적이 있습니다.

How to Write Clean Code – Tips for Developers with Examples

진실은: 지저분한 코더는 살아남지 않습니다. 그들은 그들 자신의 혼란에 빠졌습니다. 클린 코더가 지배적입니다. 그들은 시간이 지나도 변하지 않는 소프트웨어를 작성하며, 수정할 수 없는 버그나 추가할 수 없는 기능으로 인해 결코 어려움을 겪지 않습니다.

코드 작성 방식을 구현하는 데 관심이 있다면 이 책은 선택 사항이 아니라 필수입니다.

크리스마스니까 쉽게 하도록 할게요. MERRYCHRISTMAS 프로모션 코드를 사용하여 50% 할인을 받으세요.

너무 오래 기다리지 마세요. 이 혜택은 2024년 12월 31일에 종료됩니다.

아래 링크를 클릭하여 책을 받으세요.

? 지금 깨끗한 코드 0에서 1까지 얻으세요

선택은 당신의 몫입니다. 지저분한 코드를 계속 작성하여 시간과 에너지를 낭비할 수도 있고, 통제권을 갖고 프로젝트를 지배하는 방법을 배우고 BOSS처럼 소프트웨어를 구축할 수도 있습니다.

? 자세한 내용을 보려면 저를 팔로우하세요: @shahancd
? 내 주간 뉴스레터: Horscoder


자세히 알아보기: React에서 깨끗하고 재사용 가능한 구성 요소 작성

위 내용은 깔끔한 코드를 작성하는 방법 – 예제가 포함된 개발자를 위한 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿