Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

웹-워크플로우 베스트프랙티스

2,576 views

Published on

프론트엔드 개발 워크플로우 관점에서 품질을 보장할 수 있는 효율적인 프랙티스를 소개합니다.

Published in: Software
  • Be the first to comment

웹-워크플로우 베스트프랙티스

  1. 1. 웹-워크플로우 베스트 프랙티스 김태훈 kishu@nhn.com 프론트엔드개발그룹
  2. 2. 김태훈 kishu@nhn.com NHN Technology Services 프론트엔드개발팀장 SADI HTML5 초빙교수 Project Management Professional(PMP) 페이스북 프론트엔드개발그룹 운영 wit.nts-corp.com facebook.com/groups/webfrontend
  3. 3. 코드 품질 컨벤션에 맞는 코드 작성 코드의 문법과 유효성 보장 안티 패턴 제거 / 잠재적 에러 발생 코드 제거 기능 품질 사용자의 요구사항에 부합하는 기능 구현 다양한 실행 환경에서 동일한 기능 수행(크로스브라우징) 사실상 완성된 제품의 품질을 의미 성능 품질 네트워크 속성을 고려한 요청/응답 속도 최적화 브라우저 렌더링 속도 보장 사용자 인터렉션에 대한 반응 속도 보장 Ñ 웹어플리케이션 품질요소
  4. 4. 효율성 증가 단순 반복 작업 자동화 생산성 및 효율성 향상 더 중요한 것에 투자 커뮤니케이션 공통 프로세스/가이드 커뮤니케이션 비용절감 품질 보증 버그 발생 코드 방지 잠재적 에러 가능성 낮춤 업무 고도화 지속적 BP 적용 특정 수준 품질 보증 업무 고도화 Ñ 베스트 프랙티스가 필요한 이유
  5. 5. 프로젝트에 필요한 것 개발환경 프레임워크/라이브러리 품질 측정 자동화 테스트 디렉토리 구조 IDE 저장소 라이브러리 프리 프로세서 프레임 워크 개발스택 모듈 관리 코딩 컨벤션 코드 최적화 접근성 검사 유휴성 검사 품질지표 리포팅 태스크 자동화 테스트 프레임워크 jenkins CI 테스트 러너 성능 최적화
  6. 6. grunt를 통해 각종 품질 요소를 자동으로 검사하고 리포팅 profiling을 통해 성능 최적화 로컬 커밋 정리 후 리모트 저장소에 커밋 최종 품질 검사 및 코드 최적화 빌드/배포 스크립트를 통한 배포 자동화 scafolding 품질검사 코딩 CI/빌드/배포 CVS 팀/프로젝트 별로 정의된 템플릿을 grunt-init을 통해 설정에 맞게 자동 다운로드 라이브러리 관리 지정됐거나 선호하는 IDE로 컨벤션 및 가이드를 준수하며 코딩 그리고 리펙토링 워크 플로우 및 개발도구 로컬 커밋 정리 후 리모트 저장소에 커밋 테스트
  7. 7. SCAFFOLDING
  8. 8. CODING
  9. 9. QUALITY
  10. 10. 코드리뷰 컨벤션 체크 각종 Lint Validation N-Wax YSlow 성능측정 도구 Unused CSS minification 코드 품질 유효성, 접근성 성능 품질 개선 요소 Grunt Task 설정을 통한 자동화
  11. 11. 코드리뷰는 가급적 온라인으로 오프라인으로는 싸우고 삐짐 시도때도 없이 NO 일주일에 한두번 날잡아 30분정도 팀원 전체가 집중 리뷰 설계, 로직을 리뷰하는게 아님 컨벤션, 안티패턴 등등을 리뷰
  12. 12. 성능최적화 도구가 제공하는 가이드 라인만 준수해도 최적화 작업의 70~80% 완료
  13. 13. CVS
  14. 14. git 도입 비용은 예상보다 높음 팀/프로젝트 별로 git workflow가 있어야 함 도입전략 svn과 git을 같이 사용하는 중간과정을 통해 git 도입 git workflow를 같이 개발하고 교육 높은 분들의 확고한 의지와 인내
  15. 15. Create New Project • Setting Project • Setting Permission Integration • Code Review • Accept Merge Request Fork Repository • Fork blessed Project in gitlab • Add intergration manager to member Developer Private Setting • Clone Fork Repository • add remote upstream 5 7 6 : Deploy Pull from upstream • Rewriting History • Push to fork repository • New Merge Request Project Member • Project Source View • Compare Source Code 6 : Integration Manager Developer Project Role
  16. 16. TEST/CI
  17. 17. CI(Continuous Integration) 각자가 작업한 성과물을 한곳에 모아 통합하고 동작하게 모든 소스코드를 한곳에 모음 의존 라이브러리 등에 경로가 연결 필요한 경우 컴파일 품질 측정 유닛 테스트 및 통합 테스트
  18. 18. 수많은 방법과 도구 및 프로세스가 있다. 팀/프로젝트 상황에 맞게 tailoring! 베스트 프랙티스를 통해 완벽한 품질을 보장하지는 않지만, 최소한의 품질은 보장하자! 점진적으로 도입하고 지속적으로 개선!
  19. 19. Gracias!

×