38
웹-워크플로우 베스트 프랙티스 김태훈 [email protected] 프론트엔드개발그룹

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

웹-워크플로우 베스트 프랙티스 김태훈 [email protected]

프론트엔드개발그룹

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

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

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

코드 품질 컨벤션에 맞는 코드 작성 코드의 문법과 유효성 보장 안티 패턴 제거 / 잠재적 에러 발생 코드 제거

기능 품질 사용자의 요구사항에 부합하는 기능 구현 다양한 실행 환경에서 동일한 기능 수행(크로스브라우징) 사실상 완성된 제품의 품질을 의미

성능 품질 네트워크 속성을 고려한 요청/응답 속도 최적화 브라우저 렌더링 속도 보장 사용자 인터렉션에 대한 반응 속도 보장

Ñ

웹어플리케이션 품질요소

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

효율성 증가

단순 반복 작업 자동화 생산성 및 효율성 향상 더 중요한 것에 투자

커뮤니케이션

공통 프로세스/가이드 커뮤니케이션 비용절감

품질 보증

버그 발생 코드 방지 잠재적 에러 가능성 낮춤

업무 고도화

지속적 BP 적용 특정 수준 품질 보증 업무 고도화

Ñ

베스트 프랙티스가 필요한 이유

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

프로젝트에 필요한 것

개발환경

프레임워크/라이브러리

품질 측정

자동화

테스트

디렉토리 구조

IDE 저장소

라이브러리

프리 프로세서

프레임 워크

개발스택 모듈 관리

코딩 컨벤션

코드 최적화

접근성 검사

유휴성 검사

품질지표 리포팅

태스크 자동화

테스트 프레임워크

jenkins

CI

테스트 러너

성능 최적화

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

grunt를 통해 각종 품질 요소를 자동으로 검사하고 리포팅 profiling을 통해 성능 최적화

로컬 커밋 정리 후 리모트 저장소에 커밋

최종 품질 검사 및 코드 최적화 빌드/배포 스크립트를 통한 배포 자동화

scafolding

품질검사

코딩

CI/빌드/배포

CVS

팀/프로젝트 별로 정의된 템플릿을 grunt-init을 통해 설정에 맞게 자동 다운로드 라이브러리 관리

지정됐거나 선호하는 IDE로 컨벤션 및 가이드를 준수하며 코딩 그리고 리펙토링

워크 플로우 및 개발도구

로컬 커밋 정리 후 리모트 저장소에 커밋

테스트

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

SCAFFOLDING

Page 8: 웹-워크플로우 베스트프랙티스
Page 9: 웹-워크플로우 베스트프랙티스
Page 10: 웹-워크플로우 베스트프랙티스
Page 11: 웹-워크플로우 베스트프랙티스
Page 12: 웹-워크플로우 베스트프랙티스
Page 13: 웹-워크플로우 베스트프랙티스
Page 14: 웹-워크플로우 베스트프랙티스

CODING

Page 15: 웹-워크플로우 베스트프랙티스
Page 16: 웹-워크플로우 베스트프랙티스
Page 17: 웹-워크플로우 베스트프랙티스
Page 18: 웹-워크플로우 베스트프랙티스

QUALITY

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

코드리뷰 컨벤션 체크 각종 Lint

Validation

N-Wax

YSlow 성능측정 도구 Unused CSS minification

코드 품질 유효성, 접근성 성능

품질 개선 요소

Grunt Task 설정을 통한 자동화

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

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

Page 21: 웹-워크플로우 베스트프랙티스
Page 22: 웹-워크플로우 베스트프랙티스
Page 23: 웹-워크플로우 베스트프랙티스

성능최적화 도구가 제공하는

가이드 라인만 준수해도

최적화 작업의 70~80% 완료

Page 24: 웹-워크플로우 베스트프랙티스
Page 25: 웹-워크플로우 베스트프랙티스
Page 26: 웹-워크플로우 베스트프랙티스
Page 27: 웹-워크플로우 베스트프랙티스

CVS

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

git 도입 비용은 예상보다 높음 팀/프로젝트 별로 git workflow가 있어야 함

도입전략 svn과 git을 같이 사용하는 중간과정을 통해 git 도입 git workflow를 같이 개발하고 교육 높은 분들의 확고한 의지와 인내

Page 29: 웹-워크플로우 베스트프랙티스
Page 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

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

TEST/CI

Page 32: 웹-워크플로우 베스트프랙티스
Page 33: 웹-워크플로우 베스트프랙티스
Page 34: 웹-워크플로우 베스트프랙티스
Page 35: 웹-워크플로우 베스트프랙티스

CI(Continuous Integration)

각자가 작업한 성과물을 한곳에 모아 통합하고 동작하게

모든 소스코드를 한곳에 모음

의존 라이브러리 등에 경로가 연결

필요한 경우 컴파일

품질 측정

유닛 테스트 및 통합 테스트

Page 36: 웹-워크플로우 베스트프랙티스
Page 37: 웹-워크플로우 베스트프랙티스

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

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

Gracias!