전형적인“동적 언어 실수”를 피하는 방법?

42

최근 대규모 사용자층의 이점을 원했기 때문에 JavaScript에 몇 시간을 쏟았습니다. 그렇게하면서 대부분의 사람들이 동적 인 언어에 귀속되는 패턴을 발견했습니다. 작업이 빠르게 진행되지만 코드가 특정 크기에 도달하면 일반적으로 유형, 철자 및 리팩토링 오류로 많은 시간이 낭비됩니다. 컴파일러가 일반적으로 저를 아끼는 오류. 그리고 다른 모듈에서 오타를 만들 때 논리에서 오류를 찾지 않도록하십시오.

믿을 수 없을 정도의 JavaScript 및 기타 동적 유형 언어를 고려할 때 접근 방식에 문제가 있다고 생각합니다. 아니면 이것은 당신이 지불 해야하는 가격입니까?

더 간결하게 표현하려면 :

~ 2000 LOC로 JavaScript (또는 그 문제에 대한 다른 동적 언어) 프로젝트에 어떻게 접근합니까?
그러한 실수를 저지르는 데 도움이되는 도구가 있습니까? 다소 도움이되는 Facebook과 JSHint의 흐름을 시도했지만 오타는 잡지 않습니다.

javascript programming-practices dynamic-typing

— 톰톰
소스

2

비용을 완화 할 수있는 방법 이 있지만 비용 이 있습니다 .

— dcastro

29

Typescript, Scala.js 또는 Elm과 같은 자바 스크립트로 컴파일되는 정적으로 유형이 지정된 언어로 프로그램을 작성하려고합니다.

— dcastro

6

테스트, 테스트, 추가 테스트 및 범위 보고서

— njzk2

7

~ 2000 LOC는 소규모 프로젝트입니다. 동적 언어가 쉽고 잘하는 것에 쉽게 맞아야합니다. 이런 종류의 규모의 프로젝트로 어려움을 겪고 있다면 동적 언어와 관련된 것보다 프로그래밍 기술에 더 근본적인 문제가 있습니다.

— Jack Aidley

5

@JackAidley 동의하지 않습니다. OP는 식별자의 철자가 올바른지 여부가 아니라 높은 수준의 문제에 초점을 맞추는 데 사용됩니다. 이것이 프로그래밍 기술입니다. 중학교 및 / 또는 도구 지원을 통해 올바른 철자를 보장 할 수 있습니다.

— mucaho

37

특히 JavaScript를 말하면 TypeScript를 대신 사용할 수 있습니다 . 그것은 당신이 말하는 것들 중 일부를 제공합니다. 웹 사이트 인용 :

JavaScript 개발자는 유형을 사용하여 JavaScript 응용 프로그램을 개발할 때 정적 검사 및 코드 리팩토링과 같은 생산성이 높은 개발 도구 및 방법을 사용할 수 있습니다.

그리고 이것은 JS의 상위 집합이므로 기존 코드 중 일부가 TS와 잘 작동합니다.

TypeScript는 오늘날 수백만 명의 JavaScript 개발자가 알고있는 것과 동일한 구문 및 의미에서 시작합니다. 기존 JavaScript 코드를 사용하고 인기있는 JavaScript 라이브러리를 통합하고 JavaScript에서 TypeScript 코드를 호출하십시오.

— VinArrow
소스

11

... 그리고 TypeScript는 본질적으로 Ecmascript 6입니다.

— Robert Harvey

11

어, 그 말이 아파요. 그것은 단지 Microsoft가 항상 동적 언어를 이해하지 못하는 정적 언어 회사라는 것을 보여줍니다. "유형 ... 코드 리팩토링 활성화"? 정말? Microsoft의 PR 부서는 실습으로서의 코드 리팩토링이 스몰 토크 (동적 언어)에서 발명되었으며 Forth (무형 언어) 이전에도 존재했음을 알고 있습니까? 정적 언어도 전에 최초의 자동화 된 리팩토링 도구는 스몰 토크 IDE의 일부라고 했다 십오 일을? 최신 스몰 토크 IDE에는 Java, C # 및 C ++만큼 강력하지 않은 리팩토링 툴이 있습니까? 씨몬

— Jörg W Mittag

5

TypeScript는 그 자체로 훌륭한 언어입니다. 왜 그런 말도 안되는 언어로 시도해야합니까?

— Jörg W Mittag

29

@ 르그 내가 충분히 스몰 토크에 대한 모르겠지만, 본 자바 스크립트 나 파이썬 I마다 하나의 IDE이다 마일 Java 또는 C #에 대한 좋은의 IDE가 할 수있는 일 뒤에. 또한 역동적 인 언어로는 할 수없는 일이 있습니다 (실제로 가장 인기있는 리팩토링 중 일부). 공공 기능 foo(x) { return x.bar;}이나 이와 유사한 것을 가지고 있다고 가정하십시오 . 유형 정보가없고 함수가 공개되어 있으므로 모든 발신자를 알 수 없으므로 클래스 이름을 바꾸면 막대 이름을 baz로 바꿀지 여부를 알 수 없습니다.

— Voo

10

이 답변은 "동적 언어 실수"에 대한 해결책은 동적 인 언어를 전혀 사용하지 않는 것이라고 말합니다.

— bgusach

19

도움이 될 수있는 몇 가지 방법이 있습니다.

단위 테스트

가능한 경우 단위 테스트를 작성하십시오. 수동 테스트에만 의존하거나 야생에서 버그를 찾는 것은 절망적입니다.

프레임 워크 사용

스스로 롤링하고 버그가 발생할 위험이 있기 때문에 가능한 경우 확립 된 프레임 워크를 사용하십시오.

CSS / 고급 언어 선호

CSS 또는 작성중인 고급 언어에 기능을 제공 할 수있는 위치

리 팩터

코드 양을 줄이기 위해 리팩터링합니다. 코드가 적을수록 문제가 발생할 가능성이 줄어 듭니다.

재사용

가능한 기존 코드를 재사용하십시오. 코드가 정확히 일치하지 않더라도 새로 작성하지 않고 복사, 붙여 넣기 및 수정하는 것이 좋습니다.

십오 일

최신 IDE는 일반적으로 Javascript를 지원합니다. 일부 텍스트 편집기도 Javascript를 인식합니다.

— 로비 디
소스

5

사실, 귀하의 조언은 기본적으로 모든 프로그래밍 언어에 적용되며 주로 동적 언어에서 발생하는 오류가 아닌 논리적 실수 를 수정하는 것을 목표 로합니다.

— edmz

1

"당신의 조언은 기본적으로 모든 프로그래밍 언어에 적용됩니다" . 매우 사실-취미 프로젝트에서 완전 뚱뚱한 엔터프라이즈 솔루션으로 기어를 옮기는 것과 비슷한 방식으로, 점점 더 많은 양의 엄격한 요구가 필요합니다. 빨리 벗어납니다. Eric Lippert 는 이것을 매우 잘 설명합니다.

— Robbie Dee

4

"CSS / 고급 언어 선호" — JavaScript와 관련하여이 비트가 무엇을 의미하는지 이해하지 못합니다. 애니메이션과 같은 요소를 JS 코드가 아닌 스타일 시트로 옮기겠다고 말씀하십니까? CSS는 고급 언어와 어떤 관련이 있습니까?

— anotherdave

@anotherdave Javascript의 도메인이었던 많은 것들이 CSS3에서 가능해졌습니다. 일부 기능은보다 엄격한 제어가 적용되는 고급 언어로 이동할 수도 있습니다.

— 로비 디

4

@anotherdave 사람들이 JavaScript와 관련하여하는 대부분의 작업은 관련이없고 부적절합니다. 표준 언어 도구를 제공하는 라이브러리, 표준 HTML 요소를 거의 제공하지 않는 프레임 워크, 앵커, MVC 에뮬레이션, 스타일링, DOM 재 구현, AJAX 추상화, 사소한 객체 렌더링 (SVG 구현), 그렇지 않은 폴리 필링 기능과 같은 기본 기능을 복제하는 코드 사용자에게 이익이됩니다… 작성하는 JS의 양을 최소화해야합니다. JS없이 할 수 있다면 JS없이 할 수 있습니다.

— bjb568

2

아직 언급되지 않은 도구 중 하나 는 단순, 파일 로컬 또는 프로젝트 전체 텍스트 검색 입니다.

간단하게 들리지만 정규 표현식을 포함하면 문서 또는 소스 코드에있는 단어 검색과 같은 기본 필터링에서 고급 필터링까지 수행 할 수 있습니다.

그것은 (정적 분석기 외에) 나에게 효과적인 도구였으며, 2k LOC의 프로젝트 크기를 고려할 때, 특히 내 의견으로는 크지 않지만, 희망적으로 작동 할 것입니다.

— 무 카호
소스

2

grep먼 길을 간다. 너무 역동적 인 일을하지 않으면 트릭을 수행합니다. 그러나 정적 유형 언어의 IDE에 익숙하다면 매우 수동적입니다.

— bgusach

1

현재 대규모 AngularJS 프로젝트에서 수천 줄의 코드를 리팩토링하고 있습니다. 가장 큰 번거 로움 중 하나는 주어진 기능의 정확한 계약을 파악하는 것입니다. 원시 API 응답의 요소가 수정되기 전에 6 층의 코드를 거친 변수에 할당되어 6 층 이상의 코드를 통해 반환되기 때문에 때때로 API 설명서를 읽었습니다.

나의 첫번째 충고는 계약에 의해 디자인하는 것 입니다. TypeScript 또는 JSDoc 이상을 사용하여 특정 입력을 취하고 특정 출력을 생성하며 부작용을 피하고 이러한 기대치를 문서화하십시오.

두 번째 조언은 가능한 한 많은 검사를 구현하는 것입니다. 우리는 AirBnB 표준을 따르고 전체 코드베이스에 eslint를 사용합니다. 커밋 후크는 우리가 항상 표준을 준수하는지 확인합니다. 우리는 당연히 단위 및 수용 테스트 배터리를 보유하고 있으며 모든 커밋은 동료가 검토해야합니다.

텍스트 편집기 (Sublime Text)에서 적절한 IDE (WebStorm)로 전환하면 일반적으로 코드 작업이 훨씬 쉬워졌습니다. WebStorm은 JSDoc을 사용하여 예상 매개 변수 유형에 대한 힌트를 제공하고 잘못된 유형을 제공하거나 잘못된 방식으로 리턴 값을 사용하면 오류를 발생시킵니다.

JavaScript에서 기호 및 게터 / 세터와 같은 새로운 기능은 변수 할당에 어설 션을 추가하여 특정 수준의 품질을 강화하는 데 도움이 될 수 있습니다 (예 : 정수가 범위 내에 있는지 또는 데이터 객체에 특정 속성이 있는지 확인).

불행히도 역동적 인 언어 실수를 예방할 수있는 진정한 해결책은 없다고 생각합니다. 빈도를 줄이는 데 도움이되는 일련의 조치 만 있습니다.

— 니콜라스 불리 아네
소스

0

"2000 LOC로 JavaScript (또는 그 문제에 대한 다른 동적 언어) 프로젝트에 어떻게 접근합니까?"라는 질문에 대한 대답

PDF 양식 응용 프로그램을 개발합니다. Petri의 net 요소와 주석을 사용하여 소스 코드 크기에 관계없이 JavaScript 소프트웨어 개발 프로젝트에 접근합니다. 이 방법은 특정 프로그래밍 언어 기술과 관련이 없습니다. 따라서 다른 "프로그래밍 언어"에 사용될 수 있습니다.

응용 프로그램 논리의 다이어그램을 만듭니다. 다이어그램을 깔끔하게 유지하기 위해 대부분의 주석을 다이어그램과 함께 사용하는 양식에 추가합니다. 양식의 항목에는 특성 또는 함수에 대한 참조가 포함됩니다. 그런 다음 다이어그램의 정보와 양식의 항목을 기반으로 소스 코드를 작성합니다. 이 방법은 작성된 모든 소스 코드가 다이어그램과 양식의 항목에서 직접 매핑되므로 체계적입니다. 코드를 작성할 때 이름 지정 및 코딩 규칙을 따르기 때문에 소스 코드를 쉽게 확인할 수 있습니다.

예를 들어 모든 기능이 프로토 타입이라는 규칙을 선택했습니다. 성능이 문제가되면 생성자의 함수를 선언하여 성능을 향상시킬 수 있습니다. 일부 속성에는 배열을 사용합니다. 다시 성능이 문제가되면 직접 참조를 사용하여 성능을 향상시킬 수 있습니다.

나는 또한 평가를 사용합니다. 소스 코드의 크기를 크게 줄일 수 있습니다. 성능 문제로 인해 응용 프로그램의 시작 또는 초기화 부분에서 eval을 사용합니다. 나는“런타임 로직”에서 절대 사용하지 않는다 – 이것은 내가 따르는 또 다른 코딩 규칙이다.

— 존 프레 더릭 치옹로
소스