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

1. 웹-워크플로우 베스트 프랙티스
김태훈 kishu@nhn.com
프론트엔드개발그룹

2. 김태훈 kishu@nhn.com
NHN Technology Services
프론트엔드개발팀장
SADI HTML5 초빙교수
Project Management Professional(PMP)
페이스북 프론트엔드개발그룹 운영
wit.nts-corp.com
facebook.com/groups/webfrontend

3. 코드 품질
컨벤션에 맞는 코드 작성
코드의 문법과 유효성 보장
안티 패턴 제거 / 잠재적 에러 발생 코드 제거
기능 품질
사용자의 요구사항에 부합하는 기능 구현
다양한 실행 환경에서 동일한 기능 수행(크로스브라우징)
사실상 완성된 제품의 품질을 의미
성능 품질
네트워크 속성을 고려한 요청/응답 속도 최적화
브라우저 렌더링 속도 보장
사용자 인터렉션에 대한 반응 속도 보장
Ñ
웹어플리케이션 품질요소

4. 효율성 증가
단순 반복 작업 자동화
생산성 및 효율성 향상
더 중요한 것에 투자
커뮤니케이션
공통 프로세스/가이드 커뮤니케이션 비용절감
품질 보증
버그 발생 코드 방지 잠재적 에러 가능성 낮춤
업무 고도화
지속적 BP 적용
특정 수준 품질 보증
업무 고도화
Ñ
베스트 프랙티스가 필요한 이유

5. 프로젝트에 필요한 것
개발환경
프레임워크/라이브러리
품질 측정
자동화
테스트
디렉토리 구조
IDE
저장소
라이브러리
프리 프로세서
프레임 워크
개발스택
모듈 관리
코딩 컨벤션
코드 최적화
접근성 검사
유휴성 검사
품질지표 리포팅
태스크 자동화
테스트
프레임워크
jenkins
CI
테스트 러너
성능 최적화

6. grunt를 통해 각종 품질 요소를 자동으로 검사하고 리포팅
profiling을 통해 성능 최적화
로컬 커밋 정리 후 리모트 저장소에 커밋
최종 품질 검사 및
코드 최적화
빌드/배포 스크립트를 통한 배포 자동화
scafolding
품질검사
코딩
CI/빌드/배포
CVS
팀/프로젝트 별로 정의된 템플릿을 grunt-init을 통해 설정에 맞게 자동 다운로드
라이브러리 관리
지정됐거나 선호하는 IDE로 컨벤션 및 가이드를 준수하며 코딩
그리고 리펙토링
워크 플로우 및 개발도구
로컬 커밋 정리 후 리모트 저장소에 커밋
테스트

7. SCAFFOLDING

14. CODING

18. QUALITY

19. 코드리뷰
컨벤션 체크
각종 Lint
Validation
N-Wax
YSlow 성능측정 도구
Unused CSS minification
코드 품질
유효성, 접근성
성능
품질 개선 요소
Grunt Task 설정을 통한 자동화

20. 코드리뷰는 가급적 온라인으로 오프라인으로는 싸우고 삐짐 시도때도 없이 NO 일주일에 한두번 날잡아 30분정도 팀원 전체가 집중 리뷰 설계, 로직을 리뷰하는게 아님 컨벤션, 안티패턴 등등을 리뷰

23. 성능최적화 도구가 제공하는 가이드 라인만 준수해도 최적화 작업의 70~80% 완료

27. CVS

28. git 도입 비용은 예상보다 높음
팀/프로젝트 별로 git workflow가 있어야 함
도입전략
svn과 git을 같이 사용하는 중간과정을 통해 git 도입
git workflow를 같이 개발하고 교육
높은 분들의 확고한 의지와 인내

30. 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

31. TEST/CI

35. CI(Continuous Integration)
각자가 작업한 성과물을 한곳에 모아 통합하고 동작하게
모든 소스코드를 한곳에 모음
의존 라이브러리 등에 경로가 연결
필요한 경우 컴파일
품질 측정
유닛 테스트 및 통합 테스트

37. 수많은 방법과 도구 및 프로세스가 있다. 팀/프로젝트 상황에 맞게 tailoring! 베스트 프랙티스를 통해 완벽한 품질을 보장하지는 않지만, 최소한의 품질은 보장하자! 점진적으로 도입하고 지속적으로 개선!

38. Gracias!