코드 세척: 생각하게 만들지 마세요-JS 튜토리얼-php.cn

Washing your code: don’t make me think

클린 코드에 관한 내 책 "코드 세척"에서 발췌한 내용을 읽고 계십니다. PDF, EPUB, 단행본, Kindle 에디션으로 제공됩니다. 지금 사본을 받으세요.

기발한 코드는 우리가 이전에 본 적이 없는 언어 기능이 어떻게 작동하는지 알고 싶어 하는 면접 질문이나 언어 퀴즈에서 볼 수 있는 것입니다. 이 모든 질문에 대한 나의 대답은 "코드 검토를 통과하지 못할 것입니다"입니다.

일부 사람들은 간결함과 명확성을 혼동합니다. 단축 코드(간결함)가 항상 가장 명확한 코드(명확성)는 아니며, 그 반대인 경우가 많습니다. 코드를 짧게 만드는 것은 고귀한 목표이지만 가독성을 희생하면서까지 이루어져서는 안 됩니다.

동일한 아이디어를 코드로 표현하는 방법에는 여러 가지가 있으며 일부 방법은 다른 방법보다 이해하기 쉽습니다. 우리는 항상 우리 코드를 읽는 다음 개발자의 인지 부하를 줄이는 것을 목표로 해야 합니다. 즉각적으로 명확하지 않은 것을 발견할 때마다 우리는 두뇌 자원을 낭비하게 됩니다.

정보: 나는 이 장의 이름을 Steve Krug의 웹 사용성에 관한 책에서 같은 이름으로 "훔쳤습니다".

JavaScript의 어두운 패턴

몇 가지 예를 살펴보겠습니다. 답변을 다루고 이 코드 조각이 무엇을 하는지 추측해 보세요. 그런 다음 정답이 몇 개인지 세어보세요.

예 1:

const percent = 5;
const percentString = percent.toString().concat('%');

로그인 후 복사

이 코드는 숫자에 % 기호만 추가하므로 다음과 같이 다시 작성해야 합니다.

const percent = 5;
const percentString = `${percent}%`;
// → '5%'

로그인 후 복사

예 2:

const url = 'index.html?id=5';
if (~url.indexOf('id')) {
  // Something fishy here…
}

로그인 후 복사

~ 기호를 비트 NOT 연산자라고 합니다. 여기서 유용한 효과는 indexOf()가 -1을 반환하는 경우에만 거짓 값을 반환한다는 것입니다. 이 코드는 다음과 같이 다시 작성되어야 합니다.

const url = 'index.html?id=5';
if (url.includes('id')) {
  // Something fishy here…
}

로그인 후 복사

예 3:

const value = ~~3.14;

로그인 후 복사

비트 NOT 연산자의 또 다른 모호한 사용법은 숫자의 소수 부분을 버리는 것입니다. 대신 Math.floor()를 사용하세요:

const value = Math.floor(3.14);
// → 3

로그인 후 복사

예 4:

if (dogs.length + cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

이것은 잠시 후에 이해할 수 있습니다. 두 배열 중 하나에 요소가 있는지 확인합니다. 하지만 더 명확하게 설명하는 것이 좋습니다.

if (dogs.length > 0 && cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

예 5:

const header = 'filename="pizza.rar"';
const filename = header.split('filename=')[1].slice(1, -1);

로그인 후 복사

이 내용을 이해하는 데 시간이 좀 걸렸습니다. filename="pizza"와 같은 URL의 일부가 있다고 가정해 보세요. 먼저 문자열을 =로 나누고 두 번째 부분인 "pizza"를 가져옵니다. 그런 다음 첫 번째 문자와 마지막 문자를 잘라서 피자를 얻습니다.

여기에서는 정규식을 사용하겠습니다.

const header = 'filename="pizza.rar"';
const filename = header.match(/filename="(.*?)"/)[1];
// → 'pizza'

로그인 후 복사

또는 URLSearchParams API를 사용하면 더욱 좋습니다.

const header = 'filename="pizza.rar"';
const filename = new URLSearchParams(header)
  .get('filename')
  .replaceAll(/^"|"$/g, '');
// → 'pizza'

로그인 후 복사

그런데 이 인용문은 이상합니다. 일반적으로 URL 매개변수 주위에는 따옴표가 필요하지 않으므로 백엔드 개발자에게 문의하는 것이 좋습니다.

예 6:

const percent = 5;
const percentString = percent.toString().concat('%');

로그인 후 복사

위 코드에서는 조건이 true일 때 객체에 속성을 추가하고, 그렇지 않으면 아무것도 하지 않습니다. 거짓 값의 구조 분해에 의존하기보다는 구조 분해할 객체를 명시적으로 정의할 때 의도가 더 분명해집니다.

const percent = 5;
const percentString = `${percent}%`;
// → '5%'

로그인 후 복사

저는 일반적으로 객체의 모양이 변하지 않는 것을 선호하므로 조건을 값 필드 내부로 이동합니다.

const url = 'index.html?id=5';
if (~url.indexOf('id')) {
  // Something fishy here…
}

로그인 후 복사

예 7:

const url = 'index.html?id=5';
if (url.includes('id')) {
  // Something fishy here…
}

로그인 후 복사

이 멋진 단일 라이너는 0에서 9까지의 숫자로 채워진 배열을 만듭니다. Array(10)는 10개의 빈 요소로 배열을 만든 다음, 키() 메서드는 키(0부터 숫자)를 반환합니다. ~ 9)를 반복자로 사용하고 스프레드 구문을 사용하여 일반 배열로 변환합니다. 폭발하는 머리 이모티콘…

for 루프를 사용하여 다시 작성할 수 있습니다.

const value = ~~3.14;

로그인 후 복사

코드에서 루프를 피하고 싶지만 루프 버전이 더 읽기 쉽습니다.

중간에 Array.from() 메서드를 사용하게 됩니다.

const value = Math.floor(3.14);
// → 3

로그인 후 복사

Array.from({length: 10})은 10개의 정의되지 않은 요소로 배열을 생성한 다음 map() 메서드를 사용하여 0부터 9까지의 숫자로 배열을 채웁니다.

Array.from()의 지도 콜백을 사용하면 더 짧게 작성할 수 있습니다.

if (dogs.length + cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

명시적 map()은 약간 더 읽기 쉽고 Array.from()의 두 번째 인수가 수행하는 작업을 기억할 필요가 없습니다. 또한 Array.from({length: 10})은 Array(10)보다 약간 더 읽기 쉽습니다. 약간이지만.

그럼 점수는 몇 점인가요? 제 생각엔 3/7쯤 될 것 같아요.

회색 영역

일부 패턴은 정교함과 가독성 사이의 경계를 넘습니다.

예를 들어 부울을 사용하여 거짓 배열 요소(이 예에서는 null 및 0)를 필터링합니다.

if (dogs.length > 0 && cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

저는 이 패턴이 수용 가능하다고 생각합니다. 학습이 필요하지만 대안보다 낫습니다.

const header = 'filename="pizza.rar"';
const filename = header.split('filename=')[1].slice(1, -1);

로그인 후 복사

그러나 두 변형 모두 falsy 값을 필터링하므로 0이나 빈 문자열이 중요한 경우 정의되지 않음 또는 null을 명시적으로 필터링해야 합니다.

const header = 'filename="pizza.rar"';
const filename = header.match(/filename="(.*?)"/)[1];
// → 'pizza'

로그인 후 복사

코드의 차이점을 명확하게 만듭니다.

동일해 보이는 두 줄의 까다로운 코드를 보면 어떤 면에서는 다르다고 생각하지만 아직 차이점을 찾지 못했습니다. 그렇지 않으면 프로그래머가 복사하여 붙여넣는 대신 반복되는 코드에 대한 변수나 함수를 생성할 가능성이 높습니다.

예를 들어 프로젝트에서 사용하는 두 가지 도구인 Enzyme과 Codeception에 대한 테스트 ID를 생성하는 코드가 있습니다.

const header = 'filename="pizza.rar"';
const filename = new URLSearchParams(header)
  .get('filename')
  .replaceAll(/^"|"$/g, '');
// → 'pizza'

로그인 후 복사

이 두 코드 줄의 차이점을 즉시 발견하는 것은 어렵습니다. 10가지 차이점을 찾아야 했던 두 장의 사진을 기억하시나요? 이것이 바로 이 코드가 독자에게 하는 일입니다.

저는 일반적으로 극단적인 코드 건조에 대해 회의적이지만 이는 좋은 사례입니다.

정보: 분할 및 정복 또는 병합 및 완화 장에서 반복하지 마세요 원칙에 대해 자세히 설명합니다.

const percent = 5;
const percentString = percent.toString().concat('%');

로그인 후 복사

이제 두 테스트 ID의 코드가 정확히 동일하다는 것은 의심의 여지가 없습니다.

더 까다로운 예를 살펴보겠습니다. 각 테스트 도구에 대해 서로 다른 명명 규칙을 사용한다고 가정해 보겠습니다.

const percent = 5;
const percentString = `${percent}%`;
// → '5%'

로그인 후 복사

이 두 코드 줄의 차이점은 눈에 띄기 어렵고 이름 구분 기호(- 또는 _)가 여기서 유일한 차이점인지 확신할 수 없습니다.

이러한 요구 사항이 있는 프로젝트에서는 이 패턴이 여러 곳에서 나타날 가능성이 높습니다. 이를 개선하는 한 가지 방법은 각 도구에 대한 테스트 ID를 생성하는 기능을 만드는 것입니다.

const url = 'index.html?id=5';
if (~url.indexOf('id')) {
  // Something fishy here…
}

로그인 후 복사

이미 훨씬 나아졌지만 아직 완벽하지는 않습니다. 반복되는 코드가 여전히 너무 큽니다. 이 문제도 해결해 보겠습니다.

const url = 'index.html?id=5';
if (url.includes('id')) {
  // Something fishy here…
}

로그인 후 복사

작은 함수를 사용하는 극단적인 경우인데, 저는 일반적으로 코드를 이만큼 나누지 않으려고 노력합니다. 하지만 이 경우에는 잘 작동합니다. 특히 프로젝트에 새 getTestIdProps() 함수를 사용할 수 있는 위치가 이미 많은 경우에는 더욱 그렇습니다.

거의 동일해 보이는 코드에도 미묘한 차이가 있는 경우가 있습니다.

const value = ~~3.14;

로그인 후 복사

여기서 유일한 차이점은 매우 긴 이름을 사용하여 함수에 전달하는 매개변수입니다. 함수 호출 내에서 조건을 이동할 수 있습니다.

const value = Math.floor(3.14);
// → 3

로그인 후 복사

이렇게 하면 유사한 코드가 제거되어 전체 코드가 더 짧아지고 이해하기 쉬워집니다.

코드를 약간 다르게 만드는 조건을 만날 때마다 우리는 스스로에게 질문해야 합니다. 이 조건이 정말 필요한가요? 대답이 "예"라면 우리는 다시 자문해 보아야 합니다. 특정 조건이 실제로 필요하지 않은 경우도 많습니다. 예를 들어, 서로 다른 도구에 대한 테스트 ID를 별도로 추가해야 하는 이유는 무엇입니까? 다른 도구의 테스트 ID를 사용하도록 도구 중 하나를 구성할 수 없나요? 충분히 깊이 파고들면 아무도 답을 모르거나 원래 이유가 더 이상 관련이 없다는 것을 알 수 있습니다.

다음 예를 고려해보세요.

if (dogs.length + cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

이 코드는 두 가지 극단적인 경우, 즉 자산Dir이 존재하지 않는 경우와 자산Dir이 배열이 아닌 경우를 처리합니다. 또한 객체 생성 코드도 중복됩니다. (그리고 중첩된 삼항에 대해서는 이야기하지 말자…) 중복과 최소한 하나의 조건을 제거할 수 있습니다:

if (dogs.length > 0 && cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

Lodash의 CastArray() 메소드가 배열에 정의되지 않은 것을 래핑하는 것이 마음에 들지 않습니다. 이는 예상했던 것과는 다르지만 결과는 더 간단합니다.

지름길 피하기

CSS에는 단축 속성이 있으며 개발자는 이를 과도하게 사용하는 경우가 많습니다. 아이디어는 단일 속성이 동시에 여러 속성을 정의할 수 있다는 것입니다. 좋은 예는 다음과 같습니다.

const header = 'filename="pizza.rar"';
const filename = header.split('filename=')[1].slice(1, -1);

로그인 후 복사

다음과 같습니다.

const header = 'filename="pizza.rar"';
const filename = header.match(/filename="(.*?)"/)[1];
// → 'pizza'

로그인 후 복사

네 줄이 아닌 한 줄의 코드로 무슨 일이 일어나고 있는지는 여전히 명확합니다. 요소의 네 면 모두에 동일한 여백을 설정했습니다.

이제 다음 예를 살펴보세요.

const percent = 5;
const percentString = percent.toString().concat('%');

로그인 후 복사

그들이 하는 일을 이해하려면 다음 사항을 알아야 합니다.

여백 속성에 4개의 값이 있는 경우 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다.
세 개의 값이 있는 경우 순서는 위쪽, 왼쪽/오른쪽, 아래쪽입니다.
값이 두 개인 경우 순서는 위/아래, 왼쪽/오른쪽입니다.

이로 인해 불필요한 인지 부하가 발생하고 코드를 읽고, 편집하고, 검토하기가 더 어려워집니다. 저는 그런 속기를 피합니다.

약칭 속성의 또 다른 문제는 변경하지 않으려는 속성의 값을 설정할 수 있다는 것입니다. 다음 예를 고려해보세요:

const percent = 5;
const percentString = `${percent}%`;
// → '5%'

로그인 후 복사

이 선언은 Helvetica 글꼴군, 글꼴 크기 2rem을 설정하고 텍스트를 이탤릭체와 굵게 만듭니다. 여기서 볼 수 없는 것은 줄 높이도 기본값인 보통으로 변경된다는 것입니다.

나의 경험 법칙은 단일 값을 설정할 때만 단축 속성을 사용하는 것입니다. 그렇지 않으면 저는 장기 부동산을 선호합니다.

다음은 몇 가지 좋은 예입니다.

const url = 'index.html?id=5';
if (~url.indexOf('id')) {
  // Something fishy here…
}

로그인 후 복사

피해야 할 몇 가지 예는 다음과 같습니다.

const url = 'index.html?id=5';
if (url.includes('id')) {
  // Something fishy here…
}

로그인 후 복사

단축 속성을 사용하면 실제로 코드가 짧아지지만 읽기가 상당히 어려워지므로 주의해서 사용하세요.

병렬 코드 작성

조건을 제거하는 것이 항상 가능한 것은 아닙니다. 그러나 코드 분기의 차이점을 더 쉽게 발견할 수 있는 방법이 있습니다. 제가 가장 좋아하는 접근 방식 중 하나는 제가 병렬 코딩이라고 부르는 것입니다.

다음 예를 고려해보세요.

const value = ~~3.14;

로그인 후 복사

개인적인 불만일 수도 있지만, 반환문의 수준이 달라서 비교하기 어려운 것이 마음에 들지 않습니다. 이 문제를 해결하기 위해 else 문을 추가해 보겠습니다.

const value = Math.floor(3.14);
// → 3

로그인 후 복사

이제 두 반환 값 모두 동일한 들여쓰기 수준에 있으므로 비교하기가 더 쉽습니다. 이 패턴은 오류를 처리하는 조건 분기가 없을 때 작동하며, 이 경우 조기 반환이 더 나은 접근 방식이 될 것입니다.

정보: 조건 회피 장에서 조기 반품에 대해 설명합니다.

또 다른 예는 다음과 같습니다.

if (dogs.length + cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

이 예에는 브라우저에서 링크처럼 작동하고 앱에서 확인 모달을 표시하는 버튼이 있습니다. onPress prop의 반대 조건으로 인해 이 논리를 보기가 어렵습니다.

두 조건을 모두 긍정적으로 만들어 보겠습니다.

if (dogs.length > 0 && cats.length > 0) {
  // Something fishy here…
}

로그인 후 복사

이제 플랫폼에 따라 onPress 또는 링크 소품을 설정한다는 것이 명확해졌습니다.

구성 요소의 Platform.OS === '웹' 조건 수 또는 조건부로 설정해야 하는 prop 수에 따라 여기서 멈추거나 한 단계 더 나아갈 수 있습니다

조건부 prop을 별도의 변수로 추출할 수 있습니다.

const header = 'filename="pizza.rar"';
const filename = header.split('filename=')[1].slice(1, -1);

로그인 후 복사

그런 다음 매번 전체 조건을 하드코딩하는 대신 다음을 사용하세요.

const header = 'filename="pizza.rar"';
const filename = header.match(/filename="(.*?)"/)[1];
// → 'pizza'

로그인 후 복사

어차피 앱에서는 사용하지 않기 때문에 타겟 prop도 웹 브랜치로 옮겼습니다.

20대 때는 기억하는 것이 큰 문제가 아니었어요. 나는 내가 읽은 책과 내가 진행하고 있던 프로젝트의 모든 기능을 기억할 수 있었습니다. 이제 마흔 살이 되니 더 이상 그렇지 않아요. 나는 이제 어떤 트릭도 사용하지 않는 간단한 코드를 중요하게 생각합니다. 저는 검색 엔진, 문서에 대한 빠른 액세스, 코드에 대해 추론하고 모든 것을 머릿속에 담아두지 않고도 프로젝트를 탐색하는 데 도움이 되는 도구를 중요하게 생각합니다.

우리는 현재의 나를 위해 코드를 작성하는 것이 아니라 몇 년 후의 우리를 위해 코드를 작성해야 합니다. 까다롭거나 불분명한 코드를 해독하지 않고도 생각하는 것은 어렵고 프로그래밍에는 많은 것이 필요합니다.

생각해 보세요: