본문으로 건너뛰기
黯羽轻扬매일 조금씩

JS 자동화

무료2015-05-16#JS#前端工程化#前端可维护性#前端自动化工具

JS 자동화는 프론트엔드 엔지니어링의 축소판이 아닙니까. 자동화 도구를 사용하면 유지보수성도 향상됩니다. 사람은 기계보다 실수를 더 쉽게 저지르니까요

###서두

당시 필기시험 문제를 풀 때 '프론트엔드 엔지니어링'에 대해 알게 되었습니다. 자동화 도구를 사용하여 개발자가 작은 세부 사항을 완료하고 작업 효율을 향상시키는 것뿐입니다. 하지만 당시에는 유지보수성까지 생각하지는 못했습니다

프로젝트 구축 -> 모듈화 개발 -> 재사용 -> 테스트 -> 디버깅 -> 검증 -> 릴리스 -> 버전 관리, 이 전체 프로세스의 많은环节을 자동화 도구로 인력을 해방하고 프로젝트의 유지보수성을 향상할 수 있습니다

일.자동화의 장단점

js 개발에서 자동 구축 시스템의 장단점은 다음과 같습니다:

###1. 장점

  • 자동 소스 코드 제어를 통해 디버깅용 코드와 향후 릴리스용 코드를 명확히 구분할 수 있어, 개발 단계에서는 온라인 제품에 미치는 영향을 고려할 필요가 없습니다

  • 정적 코드 분석을 자동으로 완료할 수 있습니다 (JSLint, JSHint)

  • 릴리스 전에 여러 가지 방식으로 가공할 수 있습니다 (파일 병합, 코드 압축)

  • 자동화 테스트로 빠르게 오류를 발견할 수 있습니다

  • 반복적인 작업을 다시 수행하기 쉽습니다 (예: 파일 재병합, 코드 압축)

###2. 단점

  • 일부 개발자는 익숙하지 않습니다. 코드 변경 후 다시 구축해야 하기 때문에 전통적인 파일 저장, 페이지 새로고침과는 다릅니다

  • 온라인에 배포된 제품 코드와 개발 단계의 코드가 달라 bug 추적이 어렵습니다

  • 경험이 부족한 개발자는 이러한 자동 구축 시스템을 사용하지 못할 수 있습니다

이.파일 디렉토리 구조

일반적으로 다른 프로젝트는 다른 디렉토리 구조가 필요하지만, 아래에 제시된 몇 가지 원칙은 널리 적용 가능합니다:

  1. 하나의 객체에 하나의 파일

여러 개발자의 변경 충돌을 방지합니다. 파일이 적을수록 충돌 확률이 높아지며, 하나의 객체에 하나의 파일로 이 위험을 최소화할 수 있습니다

  1. 관련 파일을 폴더로 그룹화

이렇게 하면 코드 관리가 더 쉬워지고 기능에 따라 해당 코드를 찾기 쉬워집니다

  1. 서드파티 코드 분리

서드파티 라이브러리는 CDN 으로 도입하는 것이 가장 좋습니다. 이렇게 하면 서드파티 코드에 대한 불필요한 소스 코드 제어가 필요하지 않습니다

  1. 구축 결과물 분리

구축 결과물은 다른 폴더에 배치하고 소스 코드 제어를 수행하지 않아야 합니다. 의도하지 않은 반복 구축으로 인한 시간 소모를 방지합니다

  1. 테스트 코드를 가까이 배치

테스트 코드는 찾기 쉬운 곳에 배치해야 합니다. 예를 들어 소스 코드와 함께 배치하거나 test/디렉토리 내의 소스 코드 경로와 유사한 위치에 배치합니다

삼.자동화 단계

###1. 자동 구축 도구 사용

  • Ant:Java 기반

  • Buildy:NodeJS 기반

  • Gmake:UNIX 팬 선호

  • Jammit:Ruby 기반

  • Jasy:Python 기반

  • Rake:Ruby 기반

  • Sprockets:Rack 기반

###2. 자동 코드 검사 도구 사용

  • JSLint:더글라스가 만든 좋은 도구

  • JSHint:위와 비슷하지만 설정 옵션이 더 많습니다

###3. 자동 파일 병합/가공 도구 사용

파일 병합, 버전 번호 삽입 등은 첫 번째 단계에서 사용한 자동 구축 도구로 처리할 수 있습니다

###4. 코드 경량화/압축 도구 사용

경량화와 압축의 차이는 경량화가 코드 구문 최적화를针对하여 소스 코드를 더 짧게 만드는 반면, 압축은 순수 텍스트 소스 코드 파일을 더 작은 다른 파일로 변환하는 것입니다. 압축 후에는 압축 해제하지 않는 한 편집할 수 없습니다

경량화 도구는 많으며, 저자는 몇 가지를 추천했습니다:

  • YUI Compressor:Yahoo! 의 것, Java 기반, 변수명 단축, 공백 문자 제거, 주석 제거가 가능하며 CSS 경량화도 가능합니다

  • Closure Complier:Google 의 것, Java 기반, 심층 최적화가 가능합니다 (사용하지 않는 메서드 제거, 한 번만 사용되는 메서드를 클로저에投入), YUI 보다 경량화 효과가 더 좋습니다

  • UglifyJS:NodeJS 기반, var 문 병합도 가능합니다

###5. 자동 문서 생성 도구 사용

  • JSDoc:Java 기반

  • YUI Doc:js 로 작성

  • 기타:Docco, Dojo Documentation Tools, JoDoc, Natural Docs, NDoc, PDoc

###6. 자동 테스트 도구 사용

  • YUI Test Selenium Driver:(저자는 항상 Yahoo! 의 것을 앞에 배치하는 것을 좋아합니다, 좋은 직원이에요) YUI 의 유닛 테스트 프레임워크

  • Yeti:각 브라우저를 사용한 js 테스트

  • PhantomJS:WebKit 브라우저 환경을 제공하며 QUnit 과 Jasmine 과 함께 사용 가능

  • JsTestDriver:Google 의 유닛 테스트 프레임워크, 자동 브라우저 테스트 지원

  • Jasmine:행동 주도의 js 테스트 프레임워크

  • QUnit:JQuery 의 유닛 테스트 프레임워크

  • Selenium:기능 테스트 프레임워크, 브라우저 테스트 지원

###7. 모든 자동화 도구 통합

최소한 3 개의 버전을 구축해야 합니다:

  • 개발판

가능한 한 빠를 것이 요구됩니다. 그렇지 않으면 개발자의 전력 질주에 영향을 미칩니다

구체적인 작업:파일 정리 -> 구축 환경 초기화 -> 코드 검사 -> 파일 병합

주의:자동 테스트环节을 포함하지 마십시오. 시간이 걸리므로 개발판 구축은 가능한 한 빠를 것이 요구됩니다

  • 통합판

오류排查에 사용되며, 일정 기간마다 실행하여 오류를 검사하고 보고해야 합니다

구체적인 작업:코드 경량화 -> 테스트 -> 문서 생성

주의:문서 생성环节은 선택 사항입니다. 포함하면 오류 검사에 영향을 미칠 수 있기 때문입니다 (오류는 문서 생성环节에서 발생할 수 있습니다)

  • 릴리스판

0 오류를 보장하며, 안정적이고 신뢰할 수 있는 제품입니다

구체적인 작업:파일 가공 (버전, 저작권 정보 등 추가)

주의:배포 등 릴리스 작업을 포함하는 것을 고려할 수 있습니다. 또는 통합 결과를 직접 가공하여 배포할 수도 있지만, 통합 결과에 문제가 없음을 보장해야 합니다

###8.CI 시스템 사용

CI(Continuous Integration) 시스템은 통합판의 오류排查를 강화하는 데 사용됩니다. 지속적 통합은 일정 기간마다 자동으로 실행되어 코드를 검사하고 오류를 보고하며, 심지어 오류와 관련된 구체적인 개발자에게 연락하기도 합니다

###참고 자료

  • 『Maintainable JavaScript』

###맺음말

이로써 책 전체가 종료되었습니다. 이 책은 淘宝 UED 블로그에서 추천한 것으로, 꽤 좋았고 특별히 난해한 영어 문장도 없었습니다.

200 페이지의 책을 단속적으로 약 3 주 만에 읽었습니다. 너무 느리지도 않았지만, 물론 이 기간 동안『JavaScript 语言精粹』,『The Book of CSS3』도 읽었고, SASS 입문을 배우고, 10 편의 블로그 글을 썼습니다

댓글

아직 댓글이 없습니다

댓글 작성