[d2대학생세미나] frontend개발자가...

28
Front-End 개발자가 들려주는 개발 이야기 작성자: 손찬욱 과장 공통플랫폼개발랩 NAVER Corp.

Upload: naver-d2

Post on 15-Jan-2015

4.769 views

Category:

Technology


3 download

DESCRIPTION

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

TRANSCRIPT

Page 1: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

Front-End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

작성자:����������� ������������������  손찬욱����������� ������������������  과장����������� ������������������  

공통플랫폼개발랩����������� ������������������  

ⓒ����������� ������������������  NAVER����������� ������������������  Corp.����������� ������������������  

Page 2: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

손찬욱����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  공통플랫폼개발랩����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  공공S/W����������� ������������������  아키텍처팀����������� ������������������  ����������� ������������������  ����������� ������������������  Jindo����������� ������������������  Mobile����������� ������������������  Component����������� ������������������  개발����������� ������������������  ����������� ������������������  네이버����������� ������������������  모바일웹����������� ������������������  기술지원����������� ������������������  ����������� ������������������  “쉽고����������� ������������������  빠른����������� ������������������  모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발”����������� ������������������  

Page 3: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

Front����������� ������������������  End����������� ������������������  진화의����������� ������������������  시작����������� ������������������  

Page 4: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

4����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

1.����������� ������������������  Web이����������� ������������������  나오기����������� ������������������  까지����������� ������������������  

network����������� ������������������  

App����������� ������������������   Res����������� ������������������  Server����������� ������������������  

Res����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  App����������� ������������������   Res����������� ������������������  

자원(Resource)이����������� ������������������  중복?����������� ������������������  공유하고����������� ������������������  싶은데…⋯����������� ������������������  

소프트웨어(App)변경����������� ������������������  시마다����������� ������������������  PC에����������� ������������������  다시����������� ������������������  설치해야����������� ������������������  하나?����������� ������������������  ����������� ������������������  

App����������� ������������������  

HTTP����������� ������������������  

Page 5: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

5����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

2.����������� ������������������  Server����������� ������������������  중심의����������� ������������������  Web����������� ������������������  Architecture����������� ������������������  (Thin����������� ������������������  client)����������� ������������������  

network����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  Server����������� ������������������  

Res����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  S/W����������� ������������������   Res����������� ������������������  

App����������� ������������������  

HTTP����������� ������������������  

HTML����������� ������������������  CSS����������� ������������������  Javascript����������� ������������������  

Java,����������� ������������������  Servlet,����������� ������������������  JSP����������� ������������������  C#,����������� ������������������  ASP.NET����������� ������������������  C,����������� ������������������  C++����������� ������������������  …⋯����������� ������������������  

View����������� ������������������  영역����������� ������������������  Programming����������� ������������������  영역����������� ������������������  

Page 6: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

6����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

3.����������� ������������������  Web����������� ������������������  기술의����������� ������������������  발전����������� ������������������  

Ajax����������� ������������������  (Asynchronous����������� ������������������  Javascript����������� ������������������  And����������� ������������������  XML)����������� ������������������  

Page 7: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

7����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

3.����������� ������������������  Web����������� ������������������  기술의����������� ������������������  발전����������� ������������������  

HTTP����������� ������������������  request����������� ������������������  

HTTP����������� ������������������  response����������� ������������������  

action����������� ������������������  

BLOCK����������� ������������������  

action����������� ������������������  

HTTP����������� ������������������  requ

est����������� ������������������  

HTTP����������� ������������������  resp

onse����������� ������������������  

None-Ajax����������� ������������������  

Ajax����������� ������������������  전체����������� ������������������  페이지����������� ������������������  전환����������� ������������������  없이…⋯����������� ������������������  Block����������� ������������������  없이…⋯����������� ������������������  

서버당����������� ������������������  처리����������� ������������������  User수����������� ������������������  증가로����������� ������������������  

비용감소����������� ������������������  Request����������� ������������������  용량����������� ������������������  감소로����������� ������������������  

비용감소����������� ������������������  

Application����������� ������������������  

Page 8: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

8����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  Web����������� ������������������  Application의����������� ������������������  확산����������� ������������������  

Page 9: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

9����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

5.����������� ������������������  Front����������� ������������������  End����������� ������������������  영역����������� ������������������  (Rich����������� ������������������  client)����������� ������������������  

HTML����������� ������������������  CSS����������� ������������������  Javascript����������� ������������������  

Java,����������� ������������������  Servlet,����������� ������������������  JSP����������� ������������������  C#,����������� ������������������  ASP.NET����������� ������������������  C,����������� ������������������  C++����������� ������������������  …⋯����������� ������������������  

network����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  Server����������� ������������������  

Res����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  S/W����������� ������������������   Res����������� ������������������  

HTTP����������� ������������������  

View����������� ������������������  영역����������� ������������������  Programming����������� ������������������  영역����������� ������������������  

App����������� ������������������  

App����������� ������������������  App����������� ������������������  

Programming����������� ������������������  영역����������� ������������������  Back-End����������� ������������������  

Front-End����������� ������������������  

Javascript����������� ������������������  

Res����������� ������������������  

HTML5����������� ������������������  CSS3����������� ������������������  

Res����������� ������������������  

Page 10: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

10����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

6.����������� ������������������  Front����������� ������������������  End����������� ������������������  영역����������� ������������������  수요의����������� ������������������  증가����������� ������������������  ����������� ������������������  

Google����������� ������������������  Trend����������� ������������������  

Page 11: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

11����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

6.����������� ������������������  Front����������� ������������������  End����������� ������������������  영역����������� ������������������  수요의����������� ������������������  증가����������� ������������������  ����������� ������������������  

Indeed����������� ������������������  

Page 12: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

12����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

6.����������� ������������������  Front����������� ������������������  End����������� ������������������  영역����������� ������������������  수요의����������� ������������������  증가����������� ������������������  ����������� ������������������  

Forbes����������� ������������������  

포브지가����������� ������������������  예측한����������� ������������������  미래의����������� ������������������  고액����������� ������������������  연봉����������� ������������������  직업����������� ������������������  

Page 13: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

13����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

What

Page 14: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

14����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

1.����������� ������������������  Language����������� ������������������  

HTML����������� ������������������  

CSS����������� ������������������  

Javascript����������� ������������������  

Page 15: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

15����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

network����������� ������������������  

HTTP����������� ������������������  

S/W����������� ������������������   Res����������� ������������������  

Front-End����������� ������������������  

Back-End����������� ������������������  DNS,����������� ������������������  CDN,����������� ������������������  Cache,����������� ������������������  TCP/IP,����������� ������������������  Socket,����������� ������������������  Proxy,����������� ������������������  …⋯����������� ������������������  

Cross-Browsing,����������� ������������������  Web����������� ������������������  Accessibility,����������� ������������������  Responsive����������� ������������������  Web,����������� ������������������  Image����������� ������������������  format,����������� ������������������  Resource����������� ������������������  Optimization,����������� ������������������  Performance(Cache,����������� ������������������  Prefetching,����������� ������������������  lazy����������� ������������������  loading,����������� ������������������  H/W����������� ������������������  Acc,����������� ������������������  CSS����������� ������������������  splite,����������� ������������������  …⋯),����������� ������������������  Security����������� ������������������  (Cross����������� ������������������  origin����������� ������������������  resource����������� ������������������  sharing,����������� ������������������  XSS,����������� ������������������  …⋯),����������� ������������������  Internal����������� ������������������  browser����������� ������������������  (Rendering,����������� ������������������  Memory����������� ������������������  management,����������� ������������������  single����������� ������������������  thread,����������� ������������������  gc,����������� ������������������  …⋯),����������� ������������������  …⋯����������� ������������������  

Front-End����������� ������������������  

2.����������� ������������������  Technical����������� ������������������  

Page 16: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

16����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

MVC����������� ������������������  

3.����������� ������������������  Library����������� ������������������  &����������� ������������������  Framework����������� ������������������  &����������� ������������������  Tools����������� ������������������  

DOM����������� ������������������   UI����������� ������������������  

Graphic/Chart����������� ������������������  

Test����������� ������������������  

Lazy/����������� ������������������  Template����������� ������������������  

����������� ������������������  ����������� ������������������  a.����������� ������������������  Library����������� ������������������  &����������� ������������������  Framework����������� ������������������  

Page 17: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

17����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

3.����������� ������������������  Library����������� ������������������  &����������� ������������������  Framework����������� ������������������  &����������� ������������������  Tools����������� ������������������  

Browser����������� ������������������  개발자����������� ������������������  도구����������� ������������������  

Network����������� ������������������  

형상관리����������� ������������������  

Task/Build����������� ������������������  

Package����������� ������������������  

Test����������� ������������������  

����������� ������������������  ����������� ������������������  b.����������� ������������������  Tools����������� ������������������  

Page 18: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

18����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

중요한����������� ������������������  것은����������� ������������������  ����������� ������������������  

선택을����������� ������������������  할����������� ������������������  수����������� ������������������  있는����������� ������������������  능력����������� ������������������  

필수가 아닌 선택

•  서비스의����������� ������������������  특징����������� ������������������  파악����������� ������������������  •  회사����������� ������������������  규모����������� ������������������  및����������� ������������������  인력����������� ������������������  상황����������� ������������������  •  Library,����������� ������������������  framework의����������� ������������������  장단점����������� ������������������  •  라이선스����������� ������������������  비용����������� ������������������  •  …⋯����������� ������������������  

Tool, Library, Framework은 생산성 향상을 위한 도구일 뿐

3.����������� ������������������  Library����������� ������������������  &����������� ������������������  Framework����������� ������������������  &����������� ������������������  Tools����������� ������������������  

Page 19: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

19����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  무한����������� ������������������  컨텐츠����������� ������������������  

����������� ������������������  ����������� ������������������  

좌,우����������� ������������������  플리킹����������� ������������������  

자동완성����������� ������������������  

기술이슈����������� ������������������  여부����������� ������������������  점검����������� ������������������  

Page 20: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

20����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

서비스����������� ������������������  특징����������� ������������������  ����������� ������������������  •  네이버����������� ������������������  메인은����������� ������������������  국내����������� ������������������  80%����������� ������������������  검색����������� ������������������  점유율을����������� ������������������  가지고����������� ������������������  있을����������� ������������������  정도로����������� ������������������  많은����������� ������������������  사용자와����������� ������������������  다양한����������� ������������������  환경의����������� ������������������  사용자가����������� ������������������  접속����������� ������������������  

•  identity를����������� ������������������  확보하기����������� ������������������  위해����������� ������������������  네이버����������� ������������������  Look&Feel����������� ������������������  •  검색의����������� ������������������  시작이����������� ������������������  되는����������� ������������������  페이지����������� ������������������  

네이버����������� ������������������  개발����������� ������������������  인력����������� ������������������  ����������� ������������������  •  Jindo,����������� ������������������  jQuery에����������� ������������������  익숙한����������� ������������������  개발����������� ������������������  인력이����������� ������������������  있음����������� ������������������  

구분����������� ������������������   JindoJs����������� ������������������   JQuery����������� ������������������  Mobile����������� ������������������  

용량����������� ������������������   하����������� ������������������   중����������� ������������������  

Cross-browsing����������� ������������������  상����������� ������������������  

(국내����������� ������������������  단말기에����������� ������������������  완벽호환)����������� ������������������  하����������� ������������������  

개발생산성����������� ������������������   중����������� ������������������   상����������� ������������������  

플리킹����������� ������������������  컴포넌트����������� ������������������  

O����������� ������������������   O����������� ������������������  

무한스크롤����������� ������������������  컴포넌트����������� ������������������  

O����������� ������������������   3’rd����������� ������������������  파티에����������� ������������������  있음����������� ������������������  

기술����������� ������������������  지원����������� ������������������   지원조직����������� ������������������  존재����������� ������������������   없음����������� ������������������  

디자인변경����������� ������������������   쉬움����������� ������������������   어려움����������� ������������������  

초기����������� ������������������  로딩속도����������� ������������������   상����������� ������������������   중����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

Page 21: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

21����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

형상관리����������� ������������������  환경����������� ������������������  ����������� ������������������  •  Git����������� ������������������  기반의����������� ������������������  gitlab����������� ������������������  시스템에����������� ������������������  환경����������� ������������������  구성����������� ������������������  

Framework����������� ������������������  설치����������� ������������������  •  Bower를����������� ������������������  이용하여����������� ������������������  jindo����������� ������������������  환경����������� ������������������  구성����������� ������������������  

CI����������� ������������������  서버����������� ������������������  설치����������� ������������������  •  Jenkins를����������� ������������������  이용하여����������� ������������������  CI����������� ������������������  환경����������� ������������������  구성����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

Page 22: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

22����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

Front����������� ������������������  End의����������� ������������������  관심사는����������� ������������������  “사용자의����������� ������������������  인터렉션”����������� ������������������  

UI����������� ������������������  영역을����������� ������������������  기준으로����������� ������������������  기능����������� ������������������  영역����������� ������������������  설계����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

UI����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

UI����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

UI����������� ������������������  ����������� ������������������  

panelUI����������� ������������������  

Panel����������� ������������������  Manager����������� ������������������  

panelUI����������� ������������������  panel

UI����������� ������������������  

PanelModel����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

Page 23: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

23����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

4.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

IDE����������� ������������������  로����������� ������������������  개발����������� ������������������  •  SublimeText,����������� ������������������  WebStorm,����������� ������������������  Eclipse,����������� ������������������  intelliJ����������� ������������������  등을����������� ������������������  활용����������� ������������������  ����������� ������������������  

Web����������� ������������������  browser로����������� ������������������  기능����������� ������������������  테스트����������� ������������������  •  Cross-browsing����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

단위����������� ������������������  테스트����������� ������������������  작성����������� ������������������  •  Qunit을����������� ������������������  이용하여����������� ������������������  모듈����������� ������������������  단위����������� ������������������  테스트����������� ������������������  

Page 24: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

24����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

3.����������� ������������������  ����������� ������������������  네이버����������� ������������������  개발����������� ������������������  (예)����������� ������������������  

배포����������� ������������������  작업����������� ������������������  자동화����������� ������������������  •  Grunt의����������� ������������������  task를����������� ������������������  이용����������� ������������������  •  Js,css����������� ������������������  머지����������� ������������������  및����������� ������������������  압축����������� ������������������  ����������� ������������������  •  Image����������� ������������������  최적화����������� ������������������  •  단위����������� ������������������  테스트����������� ������������������  자동화����������� ������������������  

요구사항����������� ������������������  분석����������� ������������������  

Framework,����������� ������������������  Library����������� ������������������  선정����������� ������������������  

개발����������� ������������������  환경����������� ������������������  준비����������� ������������������  

설계����������� ������������������  

개발����������� ������������������  /����������� ������������������  테스트����������� ������������������  

배포����������� ������������������  환경����������� ������������������  준비����������� ������������������  

Page 25: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

25����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

Page 26: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

26����������� ������������������  /����������� ������������������  Front����������� ������������������  End����������� ������������������  개발자가����������� ������������������  들려주는����������� ������������������  개발����������� ������������������  이야기����������� ������������������  

어떻게����������� ������������������  얻는가?����������� ������������������  ����������� ������������������  

Javascript����������� ������������������  Weekly����������� ������������������  HTML����������� ������������������  Weekly����������� ������������������  CSS����������� ������������������  Weekly����������� ������������������  Node����������� ������������������  Weekly����������� ������������������  Responsive����������� ������������������  Design����������� ������������������  Weekly����������� ������������������  …⋯����������� ������������������  

HTML5Rocks.com����������� ������������������  블로그����������� ������������������  …⋯����������� ������������������  

Page 27: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기
Page 28: [D2대학생세미나] frontend개발자가 들려주는 개발 이야기

Front����������� ������������������  End����������� ������������������  반격의����������� ������������������  서막����������� ������������������  

감사합니다.����������� ������������������