정보실

웹학교

정보실

javascript 더 나은 JavaScript를 작성하는 실용적인 방법

본문

자바 스크립트를 개선 할 수 있는 실질적인 방법에 대해 이야기하는 충분한 사람들이 보이지 않습니다. 

여기에 더 나은 JS를 작성하는 데 사용하는 몇 가지 주요 방법이 있습니다.


https://dev.to/taillogs/practical-ways-to-write-better-javascript-26d4 


TypeScript 사용 


JS를 개선하기 위해 할 수 있는 가장 중요한 일은 JS를 작성하지 않는 것입니다. 

Uninitiated의 경우 TypeScript (TS)는 JS의 "컴파일 된"수퍼 세트 (TS에서 실행되는 JS에서 실행되는 모든 것)입니다. 

TS는 바닐라 JS 경험 위에 포괄적인 선택적 타이핑 시스템을 추가합니다. 오랜 시간 동안 생태계 전반에 걸쳐 TS 지원이 불편함을 느끼기에 충분하지 못했습니다. 고맙게도, 그 당시는 우리 뒤에 있으며, 대부분의 프레임 워크는 TS를 즉시 지원합니다. 

이제는 TS가 무엇인지에 관해서 같은 페이지에 올랐습니다. 왜 그것을 사용하고 싶은지 이야기 해보십시오.


TypeScript는 "유형 안전(type safety)"을 시행합니다. 


유형 안전성은 컴파일러가 모든 유형이 코드 전체에서 "합법적인"방식으로 사용되고 있는지 확인하는 프로세스를 설명합니다. 즉, 숫자를 취하는 함수 foo를 작성하면 다음과 같습니다.


function foo(someNum: number): number {
  return someNum + 5;
}


그 foo 함수는 숫자로만 호출해야 합니다.


good 


console.log(foo(2)); // prints "7"


no good 


console.log(foo("two")); // invalid TS code


코드에 유형을 추가하는 오버 헤드 외에도 유형 안전 적용에는 단점이 있습니다. 반면에 이익은 무시하기에는 너무 크다. 

유형 안전성은 JS와 같은 무법 언어의 축복인 일반적인 오류 / 버그에 대한 추가 보호 수준을 제공합니다.


typescript 유형을 사용하면 더 큰 응용 프로그램을 리팩토링 할 수 있습니다. 


대형 JS 응용 프로그램을 리팩토링하는 것은 진정한 악몽이 될 수 있습니다. 리팩토링 JS의 고통의 대부분은 기능 서명을 시행하지 않기 때문입니다. 즉, JS 함수를 실제로 "오용"할 수는 없습니다. 예를 들어 1000 개의 다른 서비스에서 사용하는 myAPI 함수가 있는 경우 :


function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}


통화 서명을 조금 변경합니다.


function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}


나는 이 기능이 사용되는 모든 장소 (1000의 장소)에 대해 100 % 확신해야 합니다. 사용법을 올바르게 업데이트 합니다. 심지어 내가 1을 그리워하면 내 자격 증명이 누설 될 수 있습니다. TS와 동일한 시나리오가 있습니다.


before 


function myAPITS(someNum: number, someString: string) { ... }


after 


function myAPITS(someString: string, someNum: number) { ... }


보시다시피, myAPITS 함수는 JavaScript 대응과 동일한 변경을 거쳤습니다. 

그러나 유효한 JavaScript를 생성하는 대신,이 코드는 사용 된 장소의 1000이 현재 잘못된 유형을 제공하기 때문에 잘못된 TypeScript를 생성합니다. 앞서 논의한 "유형 안전성"때문에 1000 개의 사례가 컴파일을 차단하고 사용자의 자격 증명이 유출되지 않습니다. 항상 유익합니다.


TypeScript는 팀 아키텍처 통신을 보다 쉽게 ​​만듭니다. 


TS가 올바르게 설정되면 인터페이스와 클래스를 먼저 정의하지 않고 코드를 작성하기가 어려울 것입니다. 

또한 간결하고 의사 소통이 가능한 아키텍처 제안을 공유하는 방법을 제공합니다. 

TS 이전에는 이 ​​문제에 대한 다른 해결책이 있었지만 아무도 그것을 본질적으로 해결하지 못했으며 추가 작업을 수행하지 않았습니다. 

예를 들어, 백엔드에 대한 새로운 요청 유형을 제안하려면 TS를 사용하여 팀원에게 다음을 보낼 수 있습니다.


interface BasicRequest {
  body: Buffer;
  headers: { [header: string]: string | string[] | undefined; };
  secret: Shhh;
}


이미 코드를 작성해야 했지만 이제는 점진적인 진보를 공유하고 더 많은 시간을 투자하지 않고 피드백을 얻을 수 있습니다. 

나는 TS가 본질적으로 JS보다 덜 버그가 있는지 모릅니다. 

개발자가 인터페이스 및 API를 먼저 정의하도록 강요하면 더 나은 코드가 생성됩니다.


전반적으로, TS는 바닐라 JS의 성숙하고 예측 가능한 대안으로 진화했습니다. 

확실히 바닐라 JS에 익숙해 져야 할 필요가 있지만 요즘 시작되는 대부분의 새로운 프로젝트는 처음부터 TS입니다.


최신 기능 사용 


JavaScript는 세계에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 100 억 명의 사람들이 사용하는 20 년 이상 된 언어가 지금까지 대부분 "알아 냈"것을 기대할 수 있지만 그 반대는 사실입니다. 

최근에는 개발자 경험을 근본적으로 변화시키는 JS (예 : ECMAScript)에 대한 많은 변경과 추가가 이루어졌습니다. 지난 2 년 동안 JS를 쓰기 시작한 누군가로서 나는 편견이나 기대 없이 들어올 수 있는 이점이 있었습니다. 그 결과 언어의 어떤 특징을 활용하고 피할 것인가에 대해 훨씬 더 실용적이고 비 종교적인 선택을하게되었습니다.


async and await 


오랜 시간 동안 비동기식 이벤트 기반 콜백은 JS 개발의 피할 수 없는 부분이었습니다.


전통적인 콜백 


makeHttpRequest('google.com', function (err, result) {
  if (err) {
    console.log('Oh boy, an error');
  } else {
    console.log(result);
  }
});

나는 왜 위가 문제가 되는지 설명하는 시간을 가지지 않을 것입니다. 콜백 문제를 해결하기 위해 새로운 개념 인 "Promises"가 JS에 추가되었습니다. 약속을 통해 비동기식 로직을 작성하고 이전에 콜백 기반 코드를 괴롭히던 중첩 문제를 피할 수 있습니다.


Promises 


makeHttpRequest('google.com').then(function (result) {
  console.log(result);
}).catch(function (err) {
  console.log('Oh boy, an error');
});


콜백에 비해 Promises의 가장 큰 장점은 가독성과 연결 가능성입니다.


Promises은 훌륭하지만 여전히 원하는 것을 남겼습니다. 하루가 끝나면 서약서는 여전히 "원초적"이라고 느끼지 않았습니다. 이 문제를 해결하기 위해 ECMAScript위원회는 Promises을 활용하는 새로운 방법을 추가하기로 결정했습니다.

async and await:


async and await 


try {
  const result = await makeHttpRequest('google.com');
  console.log(result);
} catch (err) {
  console.log('Oh boy, an error');
}


한 가지 주의 할 점은 await가 async로 선언 된 것이어야 합니다.


이전 예제에서 makeHttpRequest의 필수 정의 


async function makeHttpRequest(url) {
  // ...
}


비동기 함수는 정말 멋진 Promise 래퍼이므로 Promise를 직접 기다릴 수도 있습니다. 

이는 async / await 코드와 Promise 코드가 기능적으로 동일하다는 것을 의미합니다. 죄책감 없이 비동기 / 기다림을 자유롭게 사용하십시오.


let and const 


JS가 존재하는 대부분의 경우 가변 범위 한정자 var가 하나만 있었습니다. var에는 범위를 처리하는 방법과 관련하여 꽤 독특하고 흥미로운 규칙이 있습니다. var의 범위 지정 동작은 일관성이 없고 혼동스럽고 예기치 않은 동작이 발생하여 JS의 수명 내내 버그가 발생합니다. 

그러나 ES6의 경우 var, const 및 let에 대한 대안이 있습니다. var를 더 이상 사용하지 않아도 되므로 실제로 사용하지 않아도 됩니다. var를 사용하는 모든 로직은 항상 상응하는 const로 변환 될 수 있고 기반 코드를 사용할 수 있습니다.


const vs let을 사용하는 경우, 항상 모든 것을 const로 선언하는 것으로 시작합니다. const는 훨씬 더 제한적이고 "immutablish"로 보통 더 나은 코드를 생성합니다. let을 사용하는 것이 필요한 "실제 시나리오"는 별로 없지만 let으로 선언 한 1/20 변수를 말할 것입니다. 나머지는 모두 const입니다.


나는 C / C ++에서 const와 같은 방식으로 작동하지 않기 때문에 const가 "immutablish"라고 말했다. JavaScript 런타임에 대한 const의 의미는 const 변수에 대한 참조가 절대로 변경되지 않는다는 것입니다. 이것은 해당 참조에 저장된 내용이 절대로 변경되지 않는다는 의미는 아닙니다. 기본 유형 (숫자, 부울 등)의 경우 const는 단일 메모리 주소이기 때문에 불변 성으로 변환됩니다. 그러나 모든 객체 (클래스, 배열, dicts)에 대해 const는 불변성을 보장하지 않습니다. 


Arrow => Functions 


Arrow 함수는 JS에서 익명 함수를 선언하는 간결한 방법입니다. 익명 함수는 명시 적으로 명명되지 않은 함수를 설명합니다. 일반적으로 익명 함수는 콜백 또는 이벤트 후크로 전달됩니다.


vanilla anonymous function 


someMethod(1, function () { // has no name
  console.log('called');
});


대부분이 스타일에는 "잘못된"것이 없습니다. 바닐라 익명 함수는 범위와 관련하여 "흥미롭게도"행동하므로 많은 예기치 않은 버그가 발생할 수 있습니다. 우리는 화살표 기능 덕분에 더 이상 걱정할 필요가 없습니다. 화살표 코드로 구현 된 동일한 코드가 있습니다.


anonymous arrow function 


someMethod(1, () => { // has no name
  console.log('called');
});


훨씬 더 간결한 것 외에도 화살표 기능에는 훨씬 더 실제적인 범위 지정 동작이 있습니다. 화살표 함수는 정의 된 범위에서 이 함수를 상속합니다.


어떤 경우에는 화살표 함수가 더욱 간결해질 수 있습니다.


const added = [0, 1, 2, 3, 4].map((item) => item + 1);
console.log(added) // prints "[1, 2, 3, 4, 5]"


한 줄에 있는 화살표 함수에는 암시 적 return 문이 포함됩니다. 한 줄 화살표 기능이 있는 대괄호나 세미콜론은 필요 없습니다.


나는 그것을 분명히 하고 싶습니다. 이것은 var 상황이 아니며 바닐라 익명 함수 (특히 클래스 메서드)에 대한 유효한 사용 사례가 여전히 있습니다. 즉, 항상 화살표 함수를 기본으로 설정하면 바닐라 익명 함수를 기본값으로 설정하는 대신 디버깅을 적게 수행하는 것으로 나타났습니다.


평소와 같이 Mozilla 문서는 최고의 리소스입니다. 


스프레드 연산자 ... 


한 객체의 키 / 값 쌍을 추출하여 다른 객체의 하위로 추가하는 것은 매우 일반적인 시나리오입니다. 역사적으로 이를 달성하는 데는 몇 가지 방법이 있었지만 그 모든 방법은 꽤 까다롭습니다.


const obj1 = { dog: 'woof' };
const obj2 = { cat: 'meow' };
const merged = Object.assign({}, obj1, obj2);
console.log(merged) // prints { dog: 'woof', cat: 'meow' }

이 패턴은 매우 일반적이어서 위의 방법은 신속하게 지루해집니다. "확산 연산자"덕분에 다시 사용할 필요가 없습니다.


const obj1 = { dog: 'woof' };
const obj2 = { cat: 'meow' };
console.log({ ...obj1, ...obj2 }); // prints { dog: 'woof', cat: 'meow' }


큰 부분은 배열과도 원활하게 작동한다는 것입니다.


const arr1 = [1, 2];
const arr2 = [3, 4];
console.log([ ...arr1, ...arr2 ]); // prints [1, 2, 3, 4]


아마도 가장 중요한, 최근의 JS 기능은 아니지만 그것은 내가 가장 좋아하는 기능 중 하나입니다.


템플릿 리터럴 (템플릿 문자열) 


문자열은 가장 일반적인 프로그래밍 구조 중 하나입니다. 이것이 네이티브 선언 문자열이 여전히 많은 언어로 지원되지 않는 이유입니다. 오랫동안 JS는 "진절머리 나는 줄"가족이었습니다. 그러나 템플릿 리터럴을 추가하여 JS를 자체 카테고리로 분류했습니다. 템플릿 리터럴은 기본적으로 문자열 작성, 동적 내용 추가, 여러 줄을 연결하는 문자열 작성과 같은 두 가지 가장 큰 문제를 편리하게 해결합니다.


const name = 'Ryland';
const helloString =
`Hello
 ${name}`;


나는 그 코드가 그 자체에 대해 말하는 것으로 생각합니다. 참으로 놀라운 구현입니다.


객체 파괴(Object Destructuring) 


객체 파괴는 데이터를 반복하거나 키에 명시 적으로 액세스 할 필요 없이 데이터 컬렉션 (객체, 배열 등)에서 값을 추출하는 방법입니다.


old way 


function animalParty(dogSound, catSound) {}

const myDict = {
  dog: 'woof',
  cat: 'meow',
};

animalParty(myDict.dog, myDict.cat);


destructuring 


function animalParty(dogSound, catSound) {}

const myDict = {
  dog: 'woof',
  cat: 'meow',
};

const { dog, cat } = myDict;
animalParty(dog, cat);


함수의 서명에서 소멸을 정의 할 수도 있습니다.


destructuring 2 


function animalParty({ dog, cat }) {}

const myDict = {
  dog: 'woof',
  cat: 'meow',
};

animalParty(myDict);


또한 배열과도 작동합니다.


destructuring 3 


[a, b] = [10, 20];

console.log(a); 


페이지 정보

조회 76회 ]  작성일19-07-29 11:37

웹학교