정보실

웹학교

정보실

javascript 견고한 JavaScript 작성 : 7 가지 모범 사례

본문

1. Use factory functions 


팩토리 함수가 무엇인지 모르는 경우 단순히 객체를 반환하는 함수 (클래스 또는 생성자가 아님)입니다. 이 간단한 개념을 통해 JavaScript 및 해당 기능을 활용하여 강력한 응용 프로그램을 만들 수 있습니다.


https://dev.to/jsmanifest/write-more-robust-javascript-7-best-practices-4c8 


new 키워드로 호출 될 때 더 이상 공장 함수가 아님을 알아야 합니다.


Why factory functions? 


팩토리 함수를 사용하면 클래스 또는 new 키워드와 관련이 없는 객체 인스턴스를 쉽게 생성 할 수 있습니다.


본질적으로 의미하는 것은 궁극적으로 함수로 취급되므로 객체, 함수 및 약속을 구성하는 데 사용할 수 있다는 의미입니다. 즉, 팩토리 함수를 혼합하여 일치 시켜 향상된 팩토리 함수를 만든 다음 다른 함수 또는 객체와 계속 작성하여 더욱 향상된 함수를 만들 수 있습니다. 가능성은 끝이 없습니다.


우리가 그것을 고려하여 좋은 코드 관행과 결합하면 실제로 빛나기 시작합니다.


다음은 팩토리 함수의 간단한 예입니다.


function createFrog(name) {
  const children = []

  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')


팩토리 함수를 충분히 사용하면 클래스 생성자에 비해 재사용 성이 향상된다는 것을 깨닫기 시작합니다. 

결과적으로 팩토리 함수가 임의의 객체를 반환하므로 코드가 줄어들고 시간 리팩토링이 쉬워지며 코드 간 관리가 쉬워집니다.


2. 생성자를 작성할 때 .prototype에 메소드 추가 


JavaScript를 처음 사용하는 경우 이 섹션은 JavaScript에 대한 경험이 처음 2 년 동안 있는 것처럼 조금 새롭습니다.


클래스는 이미 프로토 타입에 메소드를 첨부하므로 클래스에는 적용되지 않습니다.


생성자의 예는 다음과 같습니다.


function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}


아래 예제처럼 도약 방법을 직접 연결하는 대신 왜 이렇게 합니까?


function Frog(name, gender) {
  this.name = name
  this.gender = gender

  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

프로토 타입에 메소드를 직접 연결하면 생성자가 작성한 모든 인스턴스간에 메소드가 공유됩니다.


다시 말해, 마지막 예제를 사용하여 (this.leap = function () {...}에서) 3 개의 개별 개구리를 만들면 3 개의 별도 복사본이 만들어집니다. 

도약 방법은 항상 동일하게 유지되며 인스턴스에 대한 자체 사본이 필요하지 않기 때문에 문제가 됩니다.


결과적으로 피할 수 있었을 때 성능이 저하됩니다. 실생활에서 frogs는 아마도 자신의 이름과 성별을 가지므로 인스턴스 수준에서 생성하는 것이 합리적이므로 this.name 및 this.gender 속성은 인스턴스에서 정의해야 합니다.


다음은 널리 사용되는 요청 패키지에서 사용되는 이 방법의 예입니다.


3. 차별화 할 때 기존 .type 속성을 사용하십시오. 


이 연습은 오늘날에도 널리 사용되도록 잘 작동합니다. React 개발자 인 경우, 특히 Redux와 함께 일할 때 이미 매일 보고 있을 것입니다.


유사한 접근 방식을 사용하면 개발 과정에서 문서화가 매우 뛰어나므로 개발 과정에서 매우 쉽게 사용할 수 있습니다.


function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. TypeScript 사용 


TypeScript는 형식 안전성에 대한 강력한 방어 기능을 제공하고 버그가 발생하기 전에 버그를 잡을 수 있는 기능으로 인해 JavaScript 커뮤니티에서 널리 채택되었습니다.


TypeScript를 사용하면 컴파일러가 코드를 실행하기 전에 코드의 잠재적 오류에 대한 경고를 감지하고 표시 할 수 있습니다.


그러나 이것이 TypeScript를 채택하는 것이 어떤 상황에 적합한 지에 대한 완전한 이유 목록에 가깝지는 않습니다. TypeScript의 가장 좋은 점 중 하나는 주요 브라우저가 이전 버전의 JavaScript로 컴파일 되어 궁극적으로 이전 브라우저에서 실행될 수 있기 때문에 주요 브라우저에서 지원하기 전에 JavaScript의 새로운 기능을 사용할 수 있다는 것입니다.


5. Write tests 


프로젝트를 진행하고 있고 진지하게 계획하고 있다면 앱을 보다 예측 가능하고 오류가 덜 발생하며 향후 변경에 대해 탄력성을 갖도록 테스트를 수행해야 합니다. 다시 말해, 프로젝트를 미래에 대비할 계획이라면 코드 전체에서 테스트를 설정하는 것보다 더 좋은 방법은 없습니다. 코드에 테스트를 많이 넣을수록 실제 환경에 배포 할 때 더 많은 확신을 갖게 됩니다.


테스트에 대한 가장 좋은 부분은? 버그가 발생하기 전에 버그를 잡아낼 수 있다는 사실 만으로도 그 능력을 원하는 사람은 없습니까? 확실해요! 그래서 프로젝트에서 단위 테스트를 작성합니다.

테스트 프레임 워크 및 도구 시작에 대한이 게시물을 읽으면 오늘날 사용 중인 도구 유형을 시작할 수 있습니다.


6. 함수를 가능한 단순하게 유지하십시오 


우리 모두 알다시피, JavaScript에서는 하나 이상의 기능을 수행하는 거대한 함수를 가질 수 있습니다.


프로그래밍을 처음 접했을 때 좋은 느낌을 받았을 수도 있습니다. 큰 코드를 작성했을 때 제 자신에 대해 매우 기분이 좋았습니다. 그것은 기본적으로 나에게 가장 큰 의미가 있었고 내가 작성한 코드의 블록 일 때 뿐만 아니라 문제 없이 코드가 실행되는 것을 볼 수 있는 많은 자신감을 얻었습니다. 소년 오 소년, 그때 나는 매우 순진했다!


유지 관리가 쉽고 간단하며 오류가 적은 코드를 작성하려면 가능한 한 간단하고 작게 유지하는 것이 가장 좋습니다. 간단할수록 개별 테스트가 더 쉽습니다.


함수형 프로그래밍 패러다임을 더 좋아하는 경우 특히 관련이 있습니다. 기능이 한 가지 일을 하고 잘해야 한다는 것은 상식입니다.


7. JSON.parse 또는 JSON.stringify를 사용할 때는 항상 try / catch를 사용하는 것이 좋습니다. 


JavaScript에서 JSON을 입력으로 JSON.parse 메소드에 전달하면 올바른 형식의 JSON이 첫 번째 인수로 예상됩니다. 

형식이 잘못되면 JSON 구문 분석 오류가 발생합니다.


JSON 구문 분석 오류로 인한 위험은 잘못된 JSON을 수신하면 앱이 중단된다는 것입니다. 

최근에 다른 내부 패키지가 JSON을 래핑 하지 않아 웹 프로젝트 중 하나가 실패한 직장에서 상황에 처했습니다. 

이로 인해 웹 페이지가 실패하고 내부 패키지가 수정하지 않으면 이 오류를 피할 수 없었습니다. JavaScript 런타임이 중단 되었기 때문에 발생했습니다.

SyntaxError: Unexpected token } in JSON at position 107


> 문자와 같은 이상한 문자를 수신 할 수 있으므로 항상 유효한 JSON 입력을 기대해서는 안됩니다.


결론 


이것으로 이 부분을 마치겠습니다. 나는 이것이 당신이 가치 있는 것을 알기를 바랍니다. 앞으로 더 많은 것을 지켜보십시오!



페이지 정보

조회 17회 ]  작성일20-01-25 16:53

웹학교