web front-end 개발과정 살펴보기

61
Web Front-End 개발과정 살펴보기 윤지수 SK Planet 2015. 07

Upload: -

Post on 06-Aug-2015

2.994 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: WEB Front-End 개발과정 살펴보기

Web����������� ������������������  Front-End����������� ������������������  개발과정����������� ������������������  살펴보기

윤지수 SK Planet2015. 07

Page 2: WEB Front-End 개발과정 살펴보기

이����������� ������������������  문서는,����������� ������������������  

웹����������� ������������������  프론트엔드����������� ������������������  개발과정의����������� ������������������  많은����������� ������������������  것들을����������� ������������������  담고����������� ������������������  있습니다.����������� ������������������  ����������� ������������������  

본인도����������� ������������������  막상����������� ������������������  지키기����������� ������������������  어려운����������� ������������������  것들이며����������� ������������������  표준도����������� ������������������  아닙니다.����������� ������������������  

이를����������� ������������������  참고로����������� ������������������  프론트엔드����������� ������������������  개발의����������� ������������������  특징을����������� ������������������  이해하고,����������� ������������������  

어울리는����������� ������������������  개발과정을����������� ������������������  만들기����������� ������������������  바랍니다.

Page 3: WEB Front-End 개발과정 살펴보기

3가지����������� ������������������  주제를����������� ������������������  다룹니다

FE관점에서의����������� ������������������  

서비스개발����������� ������������������  절차

개발����������� ������������������  컨벤션빌드����������� ������������������  /����������� ������������������  배포

Page 4: WEB Front-End 개발과정 살펴보기

1.

FE관점에서의����������� ������������������  

서비스개발����������� ������������������  절차

개발����������� ������������������  컨벤션빌드����������� ������������������  /����������� ������������������  배포

Page 5: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

크게����������� ������������������  4단계����������� ������������������  그리고,����������� ������������������  

JavaScript개발자����������� ������������������  위주의����������� ������������������  절차

Page 6: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발자도����������� ������������������  기획(?)해야����������� ������������������  하는����������� ������������������  단계.

Page 7: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기술����������� ������������������  검토����������� ������������������  &����������� ������������������  Prototyping

기획 설계 개발 검증

Page 8: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

WHY����������� ������������������  ?

HOW����������� ������������������  ?

기획자가����������� ������������������  기획할����������� ������������������  때����������� ������������������  손놓고����������� ������������������  있으면����������� ������������������  큰일남.����������� ������������������  ����������� ������������������  

초기에����������� ������������������  개발비용을����������� ������������������  적합하게����������� ������������������  할����������� ������������������  수����������� ������������������  있는����������� ������������������  시기.����������� ������������������  

프로토타이핑을����������� ������������������  통해서����������� ������������������  개발����������� ������������������  위험요소����������� ������������������  제거.����������� ������������������  ����������� ������������������  

기능과����������� ������������������  인터랙션에����������� ������������������  대한����������� ������������������  컨세서스����������� ������������������  확립.

기획단계에서����������� ������������������  적극����������� ������������������  미팅����������� ������������������  참여.����������� ������������������  

가벼운����������� ������������������  코드����������� ������������������  기반의����������� ������������������  프로토타이핑����������� ������������������  구현으로����������� ������������������  동작되는����������� ������������������  실체를����������� ������������������  미리미리����������� ������������������  공유.����������� ������������������  

기획 설계 개발 검증

기술����������� ������������������  검토����������� ������������������  &����������� ������������������  Prototyping

Page 9: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

브라우저����������� ������������������  지원환경과����������� ������������������  개발����������� ������������������  여건����������� ������������������  확인

기술����������� ������������������  검토����������� ������������������  &����������� ������������������  Prototyping

Page 10: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

브라우저����������� ������������������  지원환경과����������� ������������������  개발����������� ������������������  여건����������� ������������������  확인

WHY����������� ������������������  ?

HOW����������� ������������������  ?

브라우저����������� ������������������  지원환경과����������� ������������������  개발기간은����������� ������������������  어느정도����������� ������������������  비례.����������� ������������������  

프로젝트를����������� ������������������  위한����������� ������������������  여건은����������� ������������������  대부분����������� ������������������  완전하지����������� ������������������  못함.

지원해야����������� ������������������  할����������� ������������������  OS/브라우저를����������� ������������������  확인하여����������� ������������������  브라우저별����������� ������������������  ����������� ������������������  인터랙션이����������� ������������������  다를����������� ������������������  수����������� ������������������  있음을����������� ������������������  합의.����������� ������������������  

(점진적����������� ������������������  개선이라는����������� ������������������  것이����������� ������������������  있음.����������� ������������������  모든����������� ������������������  브라우저에서����������� ������������������  동일할����������� ������������������  필요가����������� ������������������  있을까?)����������� ������������������  

개발서버,����������� ������������������  테스트자동화를����������� ������������������  위한����������� ������������������  각종����������� ������������������  유료����������� ������������������  도구,����������� ������������������  협업팀의����������� ������������������  리소스,����������� ������������������  각종����������� ������������������  개발����������� ������������������  시스템����������� ������������������  등을����������� ������������������  충분히����������� ������������������  확인.

기획 설계 개발 검증

기술����������� ������������������  검토����������� ������������������  &����������� ������������������  Prototyping

Page 11: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

시간을����������� ������������������  투자할수록����������� ������������������  ����������� ������������������  

비용이����������� ������������������  절감되는시기.

Page 12: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

Test����������� ������������������  Case����������� ������������������  도출

기획 설계 개발 검증

Page 13: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

Test����������� ������������������  Case����������� ������������������  도출

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

이것이����������� ������������������  있다면����������� ������������������  개발자가����������� ������������������  개발중에����������� ������������������  수시로����������� ������������������  테스트����������� ������������������  할����������� ������������������  수����������� ������������������  있음.����������� ������������������  

기획서에����������� ������������������  대한����������� ������������������  보충자료로����������� ������������������  활용할����������� ������������������  수����������� ������������������  있음.����������� ������������������  ����������� ������������������  

내가����������� ������������������  개발을����������� ������������������  어느정도����������� ������������������  한����������� ������������������  것인지����������� ������������������  중간중간����������� ������������������  가늠할����������� ������������������  수����������� ������������������  있음.

개발자����������� ������������������  또는����������� ������������������  테스트전문요원이����������� ������������������  작성하며,����������� ������������������  개발자는����������� ������������������  그내용을����������� ������������������  이����������� ������������������  시기에����������� ������������������  반드시����������� ������������������  확인.����������� ������������������  

개발자는����������� ������������������  이를����������� ������������������  토대로����������� ������������������  개발task����������� ������������������  도출하는데����������� ������������������  활용����������� ������������������  가능.����������� ������������������  

기획서와����������� ������������������  1:1����������� ������������������  매핑될수록����������� ������������������  좋음.����������� ������������������  ����������� ������������������  

추가된����������� ������������������  내용을����������� ������������������  계속����������� ������������������  업데이트함으로써����������� ������������������  ‘얼마나����������� ������������������  많은����������� ������������������  추가����������� ������������������  요구사항이����������� ������������������  있었는지����������� ������������������  표시가능’����������� ������������������  

사용자����������� ������������������  입장에서����������� ������������������  어떻게����������� ������������������  인터랙션이����������� ������������������  이뤄지는지����������� ������������������  작성.����������� ������������������  

ex)����������� ������������������  ‘하단����������� ������������������  노란색����������� ������������������  영역을����������� ������������������  마우스를����������� ������������������  클릭했을����������� ������������������  때����������� ������������������  번쩍하면서����������� ������������������  1초간����������� ������������������  위쪽����������� ������������������  파란색영역이����������� ������������������  새로운����������� ������������������  내용을����������� ������������������  바뀐다’����������� ������������������  

수시로����������� ������������������  쉽게����������� ������������������  볼����������� ������������������  수����������� ������������������  있는����������� ������������������  곳에����������� ������������������  작성해서����������� ������������������  확인.����������� ������������������  ����������� ������������������  

브라우저별����������� ������������������  test����������� ������������������  case를����������� ������������������  다르게����������� ������������������  작성할����������� ������������������  필요����������� ������������������  있음.

Page 14: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  task(feature)����������� ������������������  도출

Page 15: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

개발����������� ������������������  task(feature)����������� ������������������  도출

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

분석되지����������� ������������������  않은만큼����������� ������������������  리스크를����������� ������������������  남겨두고����������� ������������������  가는����������� ������������������  것.����������� ������������������  

일정����������� ������������������  예측을����������� ������������������  조금이라도����������� ������������������  정확하게����������� ������������������  하기����������� ������������������  위해.

1-2-3-4-5…⋯����������� ������������������  depth를����������� ������������������  파고들어����������� ������������������  최대한����������� ������������������  자세하게����������� ������������������  나누기.����������� ������������������  

UI����������� ������������������  인터랙션을����������� ������������������  자세하게����������� ������������������  표현.����������� ������������������  

무엇을,����������� ������������������  누가,����������� ������������������  언제,����������� ������������������  어떻게,누구와����������� ������������������  해야����������� ������������������  할지를����������� ������������������  표현.����������� ������������������  

‘backlog����������� ������������������  template'����������� ������������������  을����������� ������������������  찾아봐도����������� ������������������  도움.����������� ������������������  

엑셀은����������� ������������������  이런거����������� ������������������  하라고����������� ������������������  있는����������� ������������������  것임.����������� ������������������  

주니어/시니어����������� ������������������  모두����������� ������������������  다����������� ������������������  달라붙어서����������� ������������������  작업.(어쩔����������� ������������������  수����������� ������������������  없다����������� ������������������  ..개발자가����������� ������������������  직접해야����������� ������������������  한다)

Page 16: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

일정����������� ������������������  예측����������� ������������������  (일정은����������� ������������������  산정이����������� ������������������  아니라����������� ������������������  그저����������� ������������������  예측)

Page 17: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

일정을����������� ������������������  예측하는����������� ������������������  건����������� ������������������  품질을����������� ������������������  사수하기����������� ������������������  위해서임.����������� ������������������  

아무����������� ������������������  말도����������� ������������������  안하면����������� ������������������  정해진����������� ������������������  일정내로����������� ������������������  다����������� ������������������  되는����������� ������������������  줄����������� ������������������  안다.����������� ������������������  

일정을����������� ������������������  근거로����������� ������������������  기능과����������� ������������������  일정에����������� ������������������  대한����������� ������������������  trade-off����������� ������������������  를����������� ������������������  해야����������� ������������������  함.

개발����������� ������������������  task����������� ������������������  를����������� ������������������  기초로����������� ������������������  시간을����������� ������������������  취합하여����������� ������������������  일정����������� ������������������  예측.����������� ������������������  

모든����������� ������������������  잡다구리����������� ������������������  한����������� ������������������  일을����������� ������������������  다����������� ������������������  포함해서����������� ������������������  예측. (각종미팅,����������� ������������������  데모,����������� ������������������  워크샵,����������� ������������������  휴가,����������� ������������������  리팩토링,����������� ������������������  개발중����������� ������������������  테스트시간,����������� ������������������  그리고도����������� ������������������  버퍼약간����������� ������������������  더)����������� ������������������  

브라우저별����������� ������������������  지원비용����������� ������������������  까지도����������� ������������������  포함����������� ������������������  ����������� ������������������  

(특정����������� ������������������  브라우저의����������� ������������������  이상����������� ������������������  동작으로����������� ������������������  인한����������� ������������������  삽질����������� ������������������  시간을����������� ������������������  버퍼로����������� ������������������  당연히����������� ������������������  포함해야����������� ������������������  함)����������� ������������������  

일정����������� ������������������  산정은����������� ������������������  sprint����������� ������������������  나����������� ������������������  milestone����������� ������������������  단위로����������� ������������������  계속����������� ������������������  예측하고����������� ������������������  주변에����������� ������������������  공유해주기.

일정����������� ������������������  예측����������� ������������������  (일정은����������� ������������������  산정이����������� ������������������  아니라����������� ������������������  그저����������� ������������������  예측)

Page 18: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

Back-End����������� ������������������  개발자와����������� ������������������  역할����������� ������������������  분담

Page 19: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

좋은����������� ������������������  서비스는����������� ������������������  프론트-백엔드의����������� ������������������  역할이����������� ������������������  분명하고����������� ������������������  조화로와야����������� ������������������  가능.����������� ������������������  

back-end해야����������� ������������������  할����������� ������������������  것을����������� ������������������  front-end에서����������� ������������������  하거나����������� ������������������  그����������� ������������������  반대의����������� ������������������  경우가����������� ������������������  생김.

API����������� ������������������  interface����������� ������������������  설계는����������� ������������������  Font-end����������� ������������������  개발자가����������� ������������������  고객이라고����������� ������������������  생각하는����������� ������������������  마인드����������� ������������������  갖기.(조심.����������� ������������������  백엔드����������� ������������������  개발자가����������� ������������������  안좋아함)����������� ������������������  

XHR����������� ������������������  통신과정을����������� ������������������  처리하는데����������� ������������������  효율적이지����������� ������������������  않은����������� ������������������  부분이����������� ������������������  없는지����������� ������������������  협의.(불필요한����������� ������������������  요청을����������� ������������������  자주보내야한다던가)����������� ������������������  

첫����������� ������������������  페이지����������� ������������������  로딩과정을����������� ������������������  어떻게����������� ������������������  구현해야,����������� ������������������  무지����������� ������������������  빠른����������� ������������������  첫페이지를����������� ������������������  만들지����������� ������������������  협의.����������� ������������������  

빌드/배포����������� ������������������  단계에서����������� ������������������  client-server����������� ������������������  구현물을����������� ������������������  어떻게����������� ������������������  해서����������� ������������������  통합하고����������� ������������������  자동화����������� ������������������  할����������� ������������������  수����������� ������������������  있을지����������� ������������������  협의.

Back-End����������� ������������������  개발자와����������� ������������������  역할����������� ������������������  분담

Page 20: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  컨벤션����������� ������������������  정하기

Page 21: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  컨벤션����������� ������������������  정하기

WHY����������� ������������������  ?

HOW����������� ������������������  ?

나����������� ������������������  혼자����������� ������������������  개발하는����������� ������������������  것이����������� ������������������  아니다.����������� ������������������  

계속����������� ������������������  돌아가게����������� ������������������  하는����������� ������������������  서비스를����������� ������������������  만들기����������� ������������������  위한����������� ������������������  기반.

coding����������� ������������������  convention����������� ������������������  은����������� ������������������  어떤����������� ������������������  것을����������� ������������������  기준으로����������� ������������������  할지����������� ������������������  어떻게����������� ������������������  검증할지,����������� ������������������  

jslint����������� ������������������  룰을����������� ������������������  사용할지,����������� ������������������  어떤����������� ������������������  기준을����������� ������������������  적용할지,����������� ������������������  

commit����������� ������������������  단위는?����������� ������������������  commit����������� ������������������  log는����������� ������������������  어떤����������� ������������������  convention����������� ������������������  을����������� ������������������  할지,����������� ������������������  

test����������� ������������������  code는����������� ������������������  어느수준으로����������� ������������������  구현할지,����������� ������������������  ����������� ������������������  

빌드를����������� ������������������  어떤����������� ������������������  방식으로����������� ������������������  어떤����������� ������������������  주기로����������� ������������������  할지.

Page 22: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

code����������� ������������������  design

Page 23: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

code����������� ������������������  and����������� ������������������  fix����������� ������������������  (x)����������� ������������������  ����������� ������������������  

javascript����������� ������������������  언어의����������� ������������������  유연성이����������� ������������������  우릴����������� ������������������  공격할����������� ������������������  것이다����������� ������������������  !

서비스����������� ������������������  UI����������� ������������������  코드의����������� ������������������  구조����������� ������������������  잡기.����������� ������������������  ����������� ������������������  

설계����������� ������������������  결과물����������� ������������������  업데이트����������� ������������������  잘����������� ������������������  되게����������� ������������������  하는����������� ������������������  법����������� ������������������  고민..����������� ������������������  ����������� ������������������  

namespace����������� ������������������  기준����������� ������������������  설정.����������� ������������������  

모듈화와����������� ������������������  class����������� ������������������  단위는����������� ������������������  어떤����������� ������������������  단위로,����������� ������������������  어떻게����������� ������������������  구현할지����������� ������������������  ����������� ������������������  

(jquery����������� ������������������  plugin?,����������� ������������������  javacript����������� ������������������  prototype?,����������� ������������������  es6����������� ������������������  class?)����������� ������������������  

의존성을����������� ������������������  어떻게����������� ������������������  구현할지.(require����������� ������������������  ?����������� ������������������  es6����������� ������������������  import?)����������� ������������������  

개발����������� ������������������  디렉토리����������� ������������������  룰����������� ������������������  셋����������� ������������������  정의.����������� ������������������  

사용할����������� ������������������  라이브러리����������� ������������������  정하고����������� ������������������  관리하기.����������� ������������������  

만들����������� ������������������  UI컴포넌트와����������� ������������������  사용할����������� ������������������  UI컴포넌트����������� ������������������  구분해두기.

code����������� ������������������  design

Page 24: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

쉬어가는����������� ������������������  페이지..����������� ������������������  

아직����������� ������������������  개발����������� ������������������  전..

Page 25: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

지금까지����������� ������������������  것을����������� ������������������  정리하고����������� ������������������  ����������� ������������������  

그걸����������� ������������������  기준으로,����������� ������������������  

잘����������� ������������������  지키며����������� ������������������  개발하기����������� ������������������  돌입!

Page 26: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

목표����������� ������������������  수립����������� ������������������  /����������� ������������������  데모����������� ������������������  반복����������� ������������������  진행����������� ������������������  

Page 27: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

목표����������� ������������������  수립����������� ������������������  /����������� ������������������  데모����������� ������������������  반복����������� ������������������  진행����������� ������������������  

WHY����������� ������������������  ?

HOW����������� ������������������  ?

계속����������� ������������������  자주����������� ������������������  보여주지����������� ������������������  않으면����������� ������������������  나중에����������� ������������������  딴����������� ������������������  소리����������� ������������������  듣는다.����������� ������������������  

UI����������� ������������������  개발은����������� ������������������  직접����������� ������������������  써����������� ������������������  봐야����������� ������������������  그����������� ������������������  느낌을����������� ������������������  안다.(미리미리����������� ������������������  수정할����������� ������������������  기회가����������� ������������������  생김)

적당한����������� ������������������  iteration����������� ������������������  주기를����������� ������������������  설정하고����������� ������������������  계획수립/데모����������� ������������������  주기적으로����������� ������������������  실행.����������� ������������������  

데모는����������� ������������������  모든����������� ������������������  협업관련����������� ������������������  자들이����������� ������������������  다����������� ������������������  볼����������� ������������������  수����������� ������������������  있고����������� ������������������  쓸����������� ������������������  수����������� ������������������  있게����������� ������������������  공유.����������� ������������������  

동시에����������� ������������������  일정을����������� ������������������  예측하고����������� ������������������  공유.����������� ������������������  

회사의����������� ������������������  표준����������� ������������������  개발����������� ������������������  방법론을����������� ������������������  따르되����������� ������������������  융통성����������� ������������������  있게����������� ������������������  의미를����������� ������������������  상기하며����������� ������������������  재활용.����������� ������������������  

(프로세스를����������� ������������������  지키는����������� ������������������  것이����������� ������������������  아닌����������� ������������������  가치를����������� ������������������  지키며����������� ������������������  활용하려고����������� ������������������  노력)

Page 28: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

자주����������� ������������������  쉽게����������� ������������������  build하기

Page 29: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

자주����������� ������������������  쉽게����������� ������������������  build하기

WHY����������� ������������������  ?

HOW����������� ������������������  ?

잦은����������� ������������������  통합은����������� ������������������  나중����������� ������������������  문제를����������� ������������������  미리����������� ������������������  발견할����������� ������������������  기회(좀����������� ������������������  뻔하고����������� ������������������  당연한����������� ������������������  이야기..)����������� ������������������  

성능도����������� ������������������  확인하기도����������� ������������������  하고.

Javascript����������� ������������������  -����������� ������������������  CI����������� ������������������  연동을����������� ������������������  통해서����������� ������������������  구현����������� ������������������  (jenkins,����������� ������������������  Travis����������� ������������������  (github연동))����������� ������������������  

grunt����������� ������������������  또는����������� ������������������  gulp����������� ������������������  를����������� ������������������  통한����������� ������������������  빌드.(watch����������� ������������������  기능����������� ������������������  활용)

image : http://iamemmanouil.com/

Page 30: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  중����������� ������������������  기본����������� ������������������  Test����������� ������������������  case����������� ������������������  점검

Page 31: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  중����������� ������������������  기본����������� ������������������  Test����������� ������������������  case����������� ������������������  점검

WHY����������� ������������������  ?

HOW����������� ������������������  ?

개발����������� ������������������  중간중간����������� ������������������  미리미리����������� ������������������  문제를����������� ������������������  스스로����������� ������������������  발견할����������� ������������������  수����������� ������������������  있음.����������� ������������������  

기능의����������� ������������������  완전함을����������� ������������������  스스로����������� ������������������  확인����������� ������������������  할����������� ������������������  수����������� ������������������  있음.

Test����������� ������������������  case����������� ������������������  항목을����������� ������������������  기준으로����������� ������������������  sprint����������� ������������������  demo를����������� ������������������  하면서,����������� ������������������  ����������� ������������������  

TC의����������� ������������������  중요성을����������� ������������������  프로젝트����������� ������������������  멤버들이����������� ������������������  더����������� ������������������  느낄����������� ������������������  수����������� ������������������  있게����������� ������������������  하기.����������� ������������������  

개발자가����������� ������������������  스스로����������� ������������������  TC를����������� ������������������  기준으로����������� ������������������  개발����������� ������������������  중����������� ������������������  자가����������� ������������������  테스트����������� ������������������  실시.

Page 32: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

test����������� ������������������  code����������� ������������������  구현.

Page 33: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

test����������� ������������������  code����������� ������������������  구현.

WHY����������� ������������������  ?

HOW����������� ������������������  ?

내����������� ������������������  코드����������� ������������������  품질의����������� ������������������  보증����������� ������������������  수표.����������� ������������������  

함수가����������� ������������������  기능단위로����������� ������������������  간결해진다.����������� ������������������  ����������� ������������������  

기타����������� ������������������  등등...

일단����������� ������������������  왜����������� ������������������  해야����������� ������������������  하는지����������� ������������������  공감하고����������� ������������������  출발.����������� ������������������  ����������� ������������������  

TDD를����������� ������������������  할지는����������� ������������������  동료와����������� ������������������  협의����������� ������������������  후����������� ������������������  진행.(컨세서스����������� ������������������  무지����������� ������������������  중요)����������� ������������������  

어떤류의����������� ������������������  함수를,����������� ������������������  어느정도의����������� ������������������  커버리지를����������� ������������������  목표로����������� ������������������  할����������� ������������������  것인가.����������� ������������������  

core����������� ������������������  기능이나����������� ������������������  common����������� ������������������  기능은����������� ������������������  test����������� ������������������  code는����������� ������������������  가급적����������� ������������������  구현하는걸로.����������� ������������������  

qunit,����������� ������������������  jasmin����������� ������������������  등����������� ������������������  참고할����������� ������������������  수����������� ������������������  있는����������� ������������������  예제가����������� ������������������  풍부함.����������� ������������������  

gulp����������� ������������������  /����������� ������������������  grunt����������� ������������������  build����������� ������������������  단계에서����������� ������������������  콘솔기반의����������� ������������������  테스트����������� ������������������  pass/fail����������� ������������������  확인����������� ������������������  가능.����������� ������������������  

(phantomJS����������� ������������������  등����������� ������������������  활용)

Page 34: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

code����������� ������������������  review.

https://blog.bitbucket.org/2012/10/09/introducing-the-redesigned-bitbucket/

Page 35: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

팀����������� ������������������  단위의����������� ������������������  튼튼한����������� ������������������  코드����������� ������������������  만들기.����������� ������������������  

개개인의����������� ������������������  성장은����������� ������������������  팀의����������� ������������������  성장.����������� ������������������  

공개하는����������� ������������������  것만으로도����������� ������������������  코드����������� ������������������  품질이����������� ������������������  좋아짐.

건전한����������� ������������������  토론����������� ������������������  문화가����������� ������������������  형성되는����������� ������������������  것도����������� ������������������  중요.����������� ������������������  

기분����������� ������������������  나쁘지����������� ������������������  않는����������� ������������������  분위기����������� ������������������  조성.����������� ������������������  

online����������� ������������������  방식도����������� ������������������  추천.����������� ������������������  ����������� ������������������  

소스����������� ������������������  저장����������� ������������������  전에����������� ������������������  리뷰단계를����������� ������������������  거치도록����������� ������������������  프로세스화����������� ������������������  가능.

code����������� ������������������  review.

Page 36: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

개발����������� ������������������  기간����������� ������������������  만큼����������� ������������������  시간이����������� ������������������  소요될����������� ������������������  수도����������� ������������������  있는,

Page 37: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

도구����������� ������������������  학습이����������� ������������������  중요.

Page 38: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

도구����������� ������������������  학습이����������� ������������������  중요.

WHY����������� ������������������  ?

HOW����������� ������������������  ?

Front-end����������� ������������������  는����������� ������������������  대체로����������� ������������������  디버깅이����������� ������������������  어려움.����������� ������������������  

반면����������� ������������������  다양하고����������� ������������������  쓸만한����������� ������������������  도구들이����������� ������������������  계속����������� ������������������  나오고����������� ������������������  있음.

JIRA와����������� ������������������  같은����������� ������������������  이슈트래킹����������� ������������������  도구를����������� ������������������  잘����������� ������������������  쓰는����������� ������������������  건����������� ������������������  기본.����������� ������������������  ����������� ������������������  

chrome����������� ������������������  developer����������� ������������������  tool����������� ������������������  잘����������� ������������������  사용하기.(source,����������� ������������������  console,element����������� ������������������  등)����������� ������������������  

fiddler를����������� ������������������  활용한����������� ������������������  운영서비스����������� ������������������  파일����������� ������������������  치환����������� ������������������  테스트.����������� ������������������  

weinre나����������� ������������������  Ghostlab����������� ������������������  을����������� ������������������  활용한����������� ������������������  모바일웹����������� ������������������  remote����������� ������������������  디버깅.����������� ������������������  

virtualBox를����������� ������������������  활용한����������� ������������������  로컬기반����������� ������������������  테스트.

Page 39: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

도구����������� ������������������  학습이����������� ������������������  중요.

이미지 : https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/?utm_source=dlvr.it&utm_medium=facebook

Mobile����������� ������������������  web����������� ������������������  -����������� ������������������  USB로����������� ������������������  쉽게����������� ������������������  연결하여����������� ������������������  inspection!����������� ������������������  (chrome,����������� ������������������  safari)

Page 40: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

도구����������� ������������������  학습이����������� ������������������  중요.

이미지 : https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/?utm_source=dlvr.it&utm_medium=facebook

Mobile����������� ������������������  web����������� ������������������  쓸만한����������� ������������������  유료����������� ������������������  도구����������� ������������������  활용����������� ������������������  (회삿돈)

Page 41: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

도구����������� ������������������  학습이����������� ������������������  중요.

특히����������� ������������������  모바일����������� ������������������  디버깅����������� ������������������  도구는����������� ������������������  계속����������� ������������������  발전하고����������� ������������������  있으며,����������� ������������������  ����������� ������������������  

새로운����������� ������������������  도구를����������� ������������������  계속����������� ������������������  지켜보고����������� ������������������  사용해야����������� ������������������  함.

Page 42: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

좀����������� ������������������  어려운����������� ������������������  ..성능����������� ������������������  검증/개선

Page 43: WEB Front-End 개발과정 살펴보기

1.����������� ������������������  FE관점에서의����������� ������������������  서비스����������� ������������������  개발절차

기획 설계 개발 검증

WHY����������� ������������������  ?

HOW����������� ������������������  ?

개발����������� ������������������  단계에서����������� ������������������  이미����������� ������������������  충분히����������� ������������������  확인했지만서도,,����������� ������������������  출시전����������� ������������������  이야기는����������� ������������������  반드시����������� ������������������  이슈로����������� ������������������  등장.

초기화면은����������� ������������������  일단����������� ������������������  빠르게(server����������� ������������������  rendering,����������� ������������������  request����������� ������������������  count,����������� ������������������  resources����������� ������������������  size����������� ������������������  신경쓰기)����������� ������������������  

chrome����������� ������������������  개발자도구의����������� ������������������  Tileline����������� ������������������  ,����������� ������������������  network,����������� ������������������  audit����������� ������������������  기능����������� ������������������  잘����������� ������������������  익혀보기.����������� ������������������  

javascript����������� ������������������  동적����������� ������������������  로딩����������� ������������������  사용하기.����������� ������������������  

의외로����������� ������������������  javascript����������� ������������������  코딩����������� ������������������  기법은����������� ������������������  아주����������� ������������������  큰����������� ������������������  차이가����������� ������������������  없음.����������� ������������������  

gulp,����������� ������������������  grunt����������� ������������������  를����������� ������������������  pagespeed로����������� ������������������  연동해서����������� ������������������  빌드����������� ������������������  단계에서����������� ������������������  성능����������� ������������������  측정하기.

좀����������� ������������������  어려운����������� ������������������  ..성능����������� ������������������  검증/개선

Page 44: WEB Front-End 개발과정 살펴보기

2.

FE관점에서의����������� ������������������  

서비스개발����������� ������������������  절차

개발����������� ������������������  컨벤션빌드����������� ������������������  /����������� ������������������  배포

Page 45: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

1.����������� ������������������  라이브러리����������� ������������������  선택.

모바일웹에서����������� ������������������  jquery����������� ������������������  와����������� ������������������  같은����������� ������������������  기본����������� ������������������  라이브러리가����������� ������������������  필요할까?����������� ������������������  

최근����������� ������������������  모바일����������� ������������������  브라우저는����������� ������������������  ES5����������� ������������������  수준까지����������� ������������������  잘����������� ������������������  지원하고����������� ������������������  있으며����������� ������������������  HTML5,CSS3����������� ������������������  많은����������� ������������������  기능을����������� ������������������  잘����������� ������������������  지원함.����������� ������������������  

기본����������� ������������������  프레임워크����������� ������������������  없이도����������� ������������������  부족하고����������� ������������������  선택적으로����������� ������������������  다양한����������� ������������������  polyfill����������� ������������������  라이브러리를����������� ������������������  활용.

기본����������� ������������������  라이브러리.

Page 46: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

1.����������� ������������������  라이브러리����������� ������������������  선택.

2015년����������� ������������������  현재는����������� ������������������  ES6����������� ������������������  방식의����������� ������������������  코딩패턴의����������� ������������������  인기가����������� ������������������  말도����������� ������������������  못함.����������� ������������������  ����������� ������������������  

babel,����������� ������������������  Traceur����������� ������������������  등의����������� ������������������  transpiler의����������� ������������������  도움으로����������� ������������������  ES6����������� ������������������  문법을����������� ������������������  당장����������� ������������������  쓸����������� ������������������  수����������� ������������������  있음.

기본����������� ������������������  라이브러리.

function timeout(duration = 0) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); })}

var p = timeout(1000).then(() => { return timeout(2000);}).then(() => { throw new Error("hmm");}).catch(err => { return Promise.all([timeout(100), timeout(200)]);})

code : https://github.com/lukehoban/es6features

Page 47: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

1.����������� ������������������  라이브러리����������� ������������������  선택.

Framework

AngularJS����������� ������������������  ,����������� ������������������  reactJS,����������� ������������������  BackboneJS����������� ������������������  과����������� ������������������  같은����������� ������������������  대표����������� ������������������  프레임워크����������� ������������������  중����������� ������������������  고르기.����������� ������������������  (http://todomvc.com/����������� ������������������  같은����������� ������������������  걸����������� ������������������  써보면서����������� ������������������  비교해����������� ������������������  보자)����������� ������������������  

잘����������� ������������������  모르겠으면����������� ������������������  가장����������� ������������������  잘����������� ������������������  아는����������� ������������������  걸����������� ������������������  쓰는����������� ������������������  것도����������� ������������������  방법.����������� ������������������  

닭����������� ������������������  잡는데����������� ������������������  소잡는����������� ������������������  칼을����������� ������������������  잡지는����������� ������������������  말기.����������� ������������������  이����������� ������������������  모든����������� ������������������  게����������� ������������������  필수는����������� ������������������  아니다라는..����������� ������������������  

팀단위����������� ������������������  사용이라면����������� ������������������  구성원들간에����������� ������������������  충분한����������� ������������������  학습이����������� ������������������  선행되야����������� ������������������  함.����������� ������������������  ����������� ������������������  

프레임워크를����������� ������������������  쓰는����������� ������������������  것보다����������� ������������������  ‘구조설계’를����������� ������������������  어떻게����������� ������������������  잘����������� ������������������  하는가가����������� ������������������  더����������� ������������������  중요함.����������� ������������������  

이왕이면����������� ������������������  단순하고����������� ������������������  좀더����������� ������������������  직관적인����������� ������������������  상대적으로����������� ������������������  쉬운����������� ������������������  프레임워크를����������� ������������������  사용하는����������� ������������������  것을����������� ������������������  권장.����������� ������������������  (reactJS����������� ������������������  살짝����������� ������������������  추천)

Page 48: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

2.����������� ������������������  컴포넌트����������� ������������������  개발

재사용이����������� ������������������  가능한����������� ������������������  수준으로����������� ������������������  개발해야����������� ������������������  함.����������� ������������������  

몇����������� ������������������  가지����������� ������������������  페이지에서����������� ������������������  재사용이����������� ������������������  가능한����������� ������������������  수준으로����������� ������������������  개발����������� ������������������  할����������� ������������������  수����������� ������������������  있게����������� ������������������  설계.����������� ������������������  

몇����������� ������������������  군데서����������� ������������������  실제����������� ������������������  사용하면서����������� ������������������  재사용����������� ������������������  성을����������� ������������������  높여줌.����������� ������������������  

option����������� ������������������  과����������� ������������������  custom����������� ������������������  event����������� ������������������  를����������� ������������������  잘����������� ������������������  활용하면서����������� ������������������  재사용성����������� ������������������  높여주기.����������� ������������������  

라이브러리간����������� ������������������  의존성을����������� ������������������  없애서����������� ������������������  stand-alone����������� ������������������  방식����������� ������������������  개발을����������� ������������������  통해����������� ������������������  재사용성����������� ������������������  높여줌.

new Donut( document.querySelector(".chart-wrap"), { core : { radius:150, nMilliSecondCycle:500, sRandomColorType : "brightness500a" }, htPiece : { "Project Manager" : {"data" : 2}, "DB Developer" : {"data" : 3}, "UX Researcher" : {"data" : 4}, "Designer" : {"data" : 5}, "WEB Developer" : {"data" : 9}, "Tester" : {"data" : 3}, "salesman" : {"data" : 5} } }).runAnimation();

Page 49: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

3.����������� ������������������  코딩컨벤션����������� ������������������  &����������� ������������������  형상관리����������� ������������������  툴.

구글����������� ������������������  javascript����������� ������������������  style����������� ������������������  guide����������� ������������������  등����������� ������������������  적절한����������� ������������������  style을����������� ������������������  참고해서����������� ������������������  팀����������� ������������������  만의����������� ������������������  규칙����������� ������������������  만들어����������� ������������������  두기.����������� ������������������  

규칙이����������� ������������������  지나치게����������� ������������������  복잡하지����������� ������������������  않도록����������� ������������������  주의.����������� ������������������  가급적����������� ������������������  쉽게����������� ������������������  기억할����������� ������������������  수����������� ������������������  있는����������� ������������������  필수����������� ������������������  규칙만����������� ������������������  만들고����������� ������������������  나머지는����������� ������������������  자율성����������� ������������������  보장.����������� ������������������  

javascript����������� ������������������  의����������� ������������������  경우����������� ������������������  anti-pattern����������� ������������������  등이����������� ������������������  많으니����������� ������������������  이를����������� ������������������  규칙에����������� ������������������  포함할����������� ������������������  수����������� ������������������  있음(jslint����������� ������������������  ,����������� ������������������  jshint����������� ������������������  참고)����������� ������������������  

JavaScript Language Rulesvar Constants Semicolons Nested functions Function Declarations Within Blocks Exceptions Custom exceptions Standards features Wrapper objects for primitive types Multi-level prototype hierarchies Method and property definitions delete Closures eval() with() {} this for-in loop Associative Arrays Multiline string literals Array and Object literals Modifying prototypes of builtin objects Internet Explorer's Conditional Comments

JavaScript Style RulesNaming Custom toString() methods Deferred initialization Explicit scope Code formatting Parentheses Strings Visibility (private and protected fields) JavaScript Types Comments Providing Dependencies With goog.provide Compiling Tips and Tricks

Google JavaScript Style Guide

Page 50: WEB Front-End 개발과정 살펴보기

2.����������� ������������������  개발����������� ������������������  컨벤션.

4.����������� ������������������  코드����������� ������������������  형상����������� ������������������  관리.

master����������� ������������������  브랜치를����������� ������������������  중심으로����������� ������������������  어떻게����������� ������������������  개발-릴리즈����������� ������������������  할지����������� ������������������  결정.����������� ������������������  

브랜치����������� ������������������  네이밍����������� ������������������  규칙����������� ������������������  설정(beta,����������� ������������������  rc����������� ������������������  등)����������� ������������������  

버전����������� ������������������  규칙����������� ������������������  필요.(major-minor)����������� ������������������  -����������� ������������������  유명����������� ������������������  라이브러리����������� ������������������  참고����������� ������������������  가능.����������� ������������������  

tagging����������� ������������������  이름은����������� ������������������  어떻게����������� ������������������  할지.����������� ������������������  

긴급버전����������� ������������������  브랜치����������� ������������������  생성도����������� ������������������  고려.����������� ������������������  

back-end의����������� ������������������  규칙이����������� ������������������  있다면����������� ������������������  비슷하게����������� ������������������  맞추기.

이미지 참고 : http://websites-development.com/blog/git-methodology

Page 51: WEB Front-End 개발과정 살펴보기

3.

FE관점에서의����������� ������������������  

서비스개발����������� ������������������  절차

개발����������� ������������������  컨벤션빌드����������� ������������������  /����������� ������������������  배포

Page 52: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

Page 53: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

grunt,����������� ������������������  gulp����������� ������������������  를����������� ������������������  활용해보자.����������� ������������������  

nodeJS����������� ������������������  기반����������� ������������������  front-end����������� ������������������  전용����������� ������������������  빌드����������� ������������������  툴!

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 54: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

//겁나 많은 모듈들..충분히 쓸만한 게 넘쳐난다.

var path = require('path'); var gulp = require('gulp'); var gutil = require('gulp-util'); var clean = require('gulp-clean'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var filesize = require('gulp-filesize'); var less = require('gulp-less'); var changed = require('gulp-changed'); var watch = require('gulp-watch');

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 55: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 56: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

gulp.task('threejssrc-build', function () {

gulp.src(paths.threejs)

.pipe(concat('three.merge.min.js'))

.pipe(jshint(‘.jshintrc')).

.pipe(jshint.reporter(‘default'))

.pipe(uglify())

.pipe(gulp.dest('./example/threejs/dist/'))

});

gulp.task('minify-css', function() {

return gulp.src(paths.threecss)

.pipe(minifyCss({compatibility: 'ie8'}))

.pipe(rename({extname: '.min.css'}))

.pipe(gulp.dest('./example/threejs/dist/'))

});

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 57: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

gulp.task('threejssrc-build', function () {

gulp.src(paths.threejs)

.pipe(concat('three.merge.min.js'))

.pipe(jshint(‘.jshintrc')).

.pipe(jshint.reporter(‘default'))

.pipe(uglify())

.pipe(gulp.dest('./example/threejs/dist/'))

});

gulp.task('minify-css', function() {

return gulp.src(paths.threecss)

.pipe(minifyCss({compatibility: 'ie8'}))

.pipe(rename({extname: '.min.css'}))

.pipe(gulp.dest('./example/threejs/dist/'))

});

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 58: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

빠른����������� ������������������  화면����������� ������������������  로딩을����������� ������������������  위해����������� ������������������  자원����������� ������������������  요청을����������� ������������������  최소화����������� ������������������  하고,����������� ������������������  크

기를����������� ������������������  최소화����������� ������������������  해야����������� ������������������  함.배포����������� ������������������  전����������� ������������������  소스코드의����������� ������������������  품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있어야����������� ������������������  함.

gulp.task('threejssrc-build', function () {

gulp.src(paths.threejs)

.pipe(concat('three.merge.min.js'))

.pipe(jshint(‘.jshintrc')).

.pipe(jshint.reporter(‘default'))

.pipe(uglify())

.pipe(gulp.dest('./example/threejs/dist/'))

});

gulp.task('minify-css', function() {

return gulp.src(paths.threecss)

.pipe(minifyCss({compatibility: 'ie8'}))

.pipe(rename({extname: '.min.css'}))

.pipe(gulp.dest('./example/threejs/dist/'))

});

gulp.task("testOnConsole", function () {

return gulp.src("./example/threejs/test/threejs.test.html")

.pipe(mochaPhantomJS());

});

gulp.task('browser-sync-threejs', function () {

browserSync.init(null, {

server: {

baseDir: ['./example/threejs/', './'],

index: 'main.html'

}

});

});

gulp.task('watch', function() {

gulp.watch('./example/threejs/src/*.js').on('change',

browserSync.reload);

});

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

Page 59: WEB Front-End 개발과정 살펴보기

3.����������� ������������������  빌드����������� ������������������  /����������� ������������������  배포.

<execution> <id>npm install</id> <goals> <goal>npm</goal> </goals>

<!-- optional: default phase is "generate-resources" --> <phase>generate-resources</phase>

<configuration> <!-- optional: The default argument is actually "install", so unless you need to run some other npm command, you can remove this whole <configuration> section. --> <arguments>install</arguments> </configuration></execution>…

code : https://github.com/eirslett/frontend-maven-plugin

<execution> <id>gulp build</id> <goals> <goal>gulp</goal> </goals>

<!-- optional: the default phase is "generate-resources" --> <phase>generate-resources</phase>

<configuration> <!-- optional: if not specified, it will run gulp's default task (and you can remove this whole <configuration> section.) --> <arguments>build</arguments> </configuration></execution>……

1.����������� ������������������  FE����������� ������������������  배포����������� ������������������  ?

back-end����������� ������������������  build����������� ������������������  툴에����������� ������������������  통합하는����������� ������������������  것도����������� ������������������  효율적.

Page 60: WEB Front-End 개발과정 살펴보기

끝����������� ������������������  !

FE관점에서의����������� ������������������  

서비스개발����������� ������������������  절차

개발����������� ������������������  컨벤션빌드����������� ������������������  /����������� ������������������  배포

Page 61: WEB Front-End 개발과정 살펴보기

감사합니다.

윤지수 [email protected]