Download - 2.네이버 프론트엔드 김지태
프론트엔드개발이야기NHN����������� ������������������ Technology����������� ������������������ Services����������� ������������������ 프론트엔드개발팀의����������� ������������������ 개발����������� ������������������ 이야기
in����������� ������������������ 광주
1
14년 6월 26일 목요일
2
김지태 [email protected] Technology Services My Works:
Line for Firefox OS
삼성 CHS 프로젝트
네이버 윙버스
네이버 모바일 날씨
사내 시스템 개발
14년 6월 26일 목요일
프론트-엔드 개발?
3
14년 6월 26일 목요일
4
웹(Web)
14년 6월 26일 목요일
4
웹(Web)
HTML
CSS
Javascript
프론트-엔드
14년 6월 26일 목요일
4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASPWebSER-VER
DB
14년 6월 26일 목요일
4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASPWebSER-VER
DB
14년 6월 26일 목요일
4
웹(Web)
HTML
CSS
Javascript
프론트-엔드 백-엔드
JAVA
PHP
ASPWebSER-VER
DB
HTTP Protocol
14년 6월 26일 목요일
프론트-엔드 개발 in 웹
개발언어 : HTML, CSS, JavaScript
웹 브라우저에서 동작 할 수 있는 언어를 이용하여 사용자가 이용하는 웹 페이지를 만드는 작업
웹 사이트가 다이나믹한 UI 로 구성되어 있어 프론트-엔드 개발의 역할이 중요
JavaScript를 지원하지 않을 경우 제대로 이용하지 못하는 서비스 증가
5
14년 6월 26일 목요일
자바스크립트 없는 웹
6
14년 6월 26일 목요일
네이버 포탈
7
14년 6월 26일 목요일
구글 지도
8
14년 6월 26일 목요일
YouTube
9
14년 6월 26일 목요일
페이스북
10
14년 6월 26일 목요일
프론트-엔드 개발 in NAVER
11
프론트-엔드
14년 6월 26일 목요일
프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업
14년 6월 26일 목요일
프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
14년 6월 26일 목요일
프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
JavaScript를 이용하여 복잡한 사용자 UI를 구현 하거나 Ajax를 이용하여 백-엔드와 통신부분을 개발
14년 6월 26일 목요일
프론트-엔드 개발 in NAVER
11
프론트-엔드
마크업 JavaScript
JavaScript를 이용하여 복잡한 사용자 UI를 구현 하거나 Ajax를 이용하여 백-엔드와 통신부분을 개발
HTML5 및 node.js를 등장으로 웹앱, 데스크탑 애플리케이션, 백-엔드 서비스까지 개발 범위를 확장
14년 6월 26일 목요일
!KEY POINT
글로벌 IT 기업들도 자바스크립트를 사용하여 풍부한 사용자 경험을 제공하고 있음
사용자에게 제공하는 UI 가 복잡해짐에 따라 자바스크립트 개발이 웹 서비스 개발에서 중요한 역할을 함
프론트-엔드 기술이 다양한 플랫폼으로 영역이 확대되고 있음
네이버에서의 프론트-엔드 개발은브라우저 기술로 사용자 UI를 개발하는 것
12
14년 6월 26일 목요일
네이버 프론트-엔드 개발
13
14년 6월 26일 목요일
소속 : NHN Technology Services / UIT 개발실
팀원 : 14명 + @
역할 :
- 네이버 서비스 프론트엔드 개발
- 최신 IT 기술 R&D
- 프론트엔드 교육 커리큘럼 운영
- 페이스북 프론트엔드개발 그룹 운영
https://www.facebook.com/groups/webfrontend/
프론트엔드개발팀
14
14년 6월 26일 목요일
프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일
프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일
프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일
프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일
프론트-엔드 개발 프로세스
15
기획
마크업
디자인 프론트-엔드
스펙분석
기술협의
개발진행
배포/테스트
백-엔드
14년 6월 26일 목요일
샘플 프로젝트 - 자판기
* 실제 사내 교육 과정으로 활용 중16
14년 6월 26일 목요일
스펙 분석
17
14년 6월 26일 목요일
18
UI/상세기획 분석
프레임워크 선택
라이브러리 선택
일정 산출
14년 6월 26일 목요일
UI & 상세기획서 분석
19
14년 6월 26일 목요일
UI & 상세기획서 분석
19
14년 6월 26일 목요일
UI & 상세기획서 분석
19
음료수����������� ������������������ 디스플레이����������� ������������������ 영역1.����������� ������������������ 음료수����������� ������������������ 출력2.����������� ������������������ 음료수����������� ������������������ 가격����������� ������������������ 출력3.����������� ������������������ 클릭시����������� ������������������ 물건����������� ������������������ 구매4.����������� ������������������ 재고����������� ������������������ 없을����������� ������������������ 경우����������� ������������������ 품절����������� ������������������ 표시
14년 6월 26일 목요일
UI & 상세기획서 분석
19
음료수����������� ������������������ 디스플레이����������� ������������������ 영역1.����������� ������������������ 음료수����������� ������������������ 출력2.����������� ������������������ 음료수����������� ������������������ 가격����������� ������������������ 출력3.����������� ������������������ 클릭시����������� ������������������ 물건����������� ������������������ 구매4.����������� ������������������ 재고����������� ������������������ 없을����������� ������������������ 경우����������� ������������������ 품절����������� ������������������ 표시
돈����������� ������������������ 투입����������� ������������������ 영역1.����������� ������������������ 투입된����������� ������������������ 돈����������� ������������������ 출력2.����������� ������������������ 지폐����������� ������������������ &����������� ������������������ 동전����������� ������������������ 투입(드롭)3.����������� ������������������ 반환����������� ������������������ 클릭시����������� ������������������ 돈����������� ������������������ 반환
14년 6월 26일 목요일
UI & 상세기획서 분석
19
음료수����������� ������������������ 디스플레이����������� ������������������ 영역1.����������� ������������������ 음료수����������� ������������������ 출력2.����������� ������������������ 음료수����������� ������������������ 가격����������� ������������������ 출력3.����������� ������������������ 클릭시����������� ������������������ 물건����������� ������������������ 구매4.����������� ������������������ 재고����������� ������������������ 없을����������� ������������������ 경우����������� ������������������ 품절����������� ������������������ 표시
돈����������� ������������������ 투입����������� ������������������ 영역1.����������� ������������������ 투입된����������� ������������������ 돈����������� ������������������ 출력2.����������� ������������������ 지폐����������� ������������������ &����������� ������������������ 동전����������� ������������������ 투입(드롭)3.����������� ������������������ 반환����������� ������������������ 클릭시����������� ������������������ 돈����������� ������������������ 반환
내����������� ������������������ 지갑����������� ������������������ 영역1.돈����������� ������������������ 종류에����������� ������������������ 따라����������� ������������������ 돈����������� ������������������ 출력2.내가����������� ������������������ 가진����������� ������������������ 돈����������� ������������������ 출력3.돈은����������� ������������������ 드래그����������� ������������������ 가능4.드래그시����������� ������������������ 돈은����������� ������������������ 복사5.드래그시����������� ������������������ 내가����������� ������������������ 가진����������� ������������������ 돈이����������� ������������������ 감소
14년 6월 26일 목요일
UI & 상세기획서 분석
19
음료수����������� ������������������ 디스플레이����������� ������������������ 영역1.����������� ������������������ 음료수����������� ������������������ 출력2.����������� ������������������ 음료수����������� ������������������ 가격����������� ������������������ 출력3.����������� ������������������ 클릭시����������� ������������������ 물건����������� ������������������ 구매4.����������� ������������������ 재고����������� ������������������ 없을����������� ������������������ 경우����������� ������������������ 품절����������� ������������������ 표시
돈����������� ������������������ 투입����������� ������������������ 영역1.����������� ������������������ 투입된����������� ������������������ 돈����������� ������������������ 출력2.����������� ������������������ 지폐����������� ������������������ &����������� ������������������ 동전����������� ������������������ 투입(드롭)3.����������� ������������������ 반환����������� ������������������ 클릭시����������� ������������������ 돈����������� ������������������ 반환
내����������� ������������������ 지갑����������� ������������������ 영역1.돈����������� ������������������ 종류에����������� ������������������ 따라����������� ������������������ 돈����������� ������������������ 출력2.내가����������� ������������������ 가진����������� ������������������ 돈����������� ������������������ 출력3.돈은����������� ������������������ 드래그����������� ������������������ 가능4.드래그시����������� ������������������ 돈은����������� ������������������ 복사5.드래그시����������� ������������������ 내가����������� ������������������ 가진����������� ������������������ 돈이����������� ������������������ 감소
상태����������� ������������������ 표시����������� ������������������ 영역(콘솔)1.����������� ������������������ 각����������� ������������������ 상황에����������� ������������������ 따라����������� ������������������ 로그����������� ������������������ 출력2.����������� ������������������ 최신����������� ������������������ 로그가����������� ������������������ 아래로����������� ������������������ 노출3.����������� ������������������ 스크롤은����������� ������������������ 항상����������� ������������������ 최하단
14년 6월 26일 목요일
UI & 상세기획서 분석
19
음료수����������� ������������������ 디스플레이����������� ������������������ 영역1.����������� ������������������ 음료수����������� ������������������ 출력2.����������� ������������������ 음료수����������� ������������������ 가격����������� ������������������ 출력3.����������� ������������������ 클릭시����������� ������������������ 물건����������� ������������������ 구매4.����������� ������������������ 재고����������� ������������������ 없을����������� ������������������ 경우����������� ������������������ 품절����������� ������������������ 표시
돈����������� ������������������ 투입����������� ������������������ 영역1.����������� ������������������ 투입된����������� ������������������ 돈����������� ������������������ 출력2.����������� ������������������ 지폐����������� ������������������ &����������� ������������������ 동전����������� ������������������ 투입(드롭)3.����������� ������������������ 반환����������� ������������������ 클릭시����������� ������������������ 돈����������� ������������������ 반환
내����������� ������������������ 지갑����������� ������������������ 영역1.돈����������� ������������������ 종류에����������� ������������������ 따라����������� ������������������ 돈����������� ������������������ 출력2.내가����������� ������������������ 가진����������� ������������������ 돈����������� ������������������ 출력3.돈은����������� ������������������ 드래그����������� ������������������ 가능4.드래그시����������� ������������������ 돈은����������� ������������������ 복사5.드래그시����������� ������������������ 내가����������� ������������������ 가진����������� ������������������ 돈이����������� ������������������ 감소
상태����������� ������������������ 표시����������� ������������������ 영역(콘솔)1.����������� ������������������ 각����������� ������������������ 상황에����������� ������������������ 따라����������� ������������������ 로그����������� ������������������ 출력2.����������� ������������������ 최신����������� ������������������ 로그가����������� ������������������ 아래로����������� ������������������ 노출3.����������� ������������������ 스크롤은����������� ������������������ 항상����������� ������������������ 최하단
기술����������� ������������������ 이슈가����������� ������������������ 없는지����������� ������������������ 확인
14년 6월 26일 목요일
20
UI/상세기획 분석
프레임워크 선택
라이브러리 선택
일정 산출
14년 6월 26일 목요일
프레임워크
반복적으로 만들어야 하는 로직은 프레임워크에 의존하여 개발
프레임워크 규칙에 의해 개발자들이 일관된 코드를 작성 할 수 있는 환경을 마련
21http://designzum.com/2014/02/19/top-best-javascript-framework-2014/
14년 6월 26일 목요일
프레임워크 트렌드
22
14년 6월 26일 목요일
프레임워크 선택
23
14년 6월 26일 목요일
프레임워크 선택
23
프레임워크까지����������� ������������������ 필요는����������� ������������������ 없지만����������� ������������������ 공부삼아서����������� ������������������ 프레임워크����������� ������������������ 하나����������� ������������������ 써볼까?
14년 6월 26일 목요일
프레임워크 선택
23
프레임워크까지����������� ������������������ 필요는����������� ������������������ 없지만����������� ������������������ 공부삼아서����������� ������������������ 프레임워크����������� ������������������ 하나����������� ������������������ 써볼까?
프레임워크는����������� ������������������ 필수가����������� ������������������ 아닌����������� ������������������ 선택
14년 6월 26일 목요일
24
UI/상세기획 분석
프레임워크 선택
라이브러리 선택
일정 산출
14년 6월 26일 목요일
라이브러리
DOM 컨트롤, 데이터 컨트롤, 모바일 UI, 템플릿 엔진 등 정해진 목적에 따라 만들어진 코드들의 집합
프레임워크와는 다르게 각 코드들의 연관 관계가 크게 없음
25http://html5experts.kr/archives/2039
14년 6월 26일 목요일
라이브러리 선택
26
14년 6월 26일 목요일
라이브러리 선택
26
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
DOM����������� ������������������ 컨트롤은����������� ������������������ 어떤걸로����������� ������������������ 하면����������� ������������������ 좋을까?
많은����������� ������������������ 기능이����������� ������������������ 필요����������� ������������������ 없으니����������� ������������������ 경량화����������� ������������������ 라이브러리를����������� ������������������ 쓸까?
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
DOM����������� ������������������ 컨트롤은����������� ������������������ 어떤걸로����������� ������������������ 하면����������� ������������������ 좋을까?
많은����������� ������������������ 기능이����������� ������������������ 필요����������� ������������������ 없으니����������� ������������������ 경량화����������� ������������������ 라이브러리를����������� ������������������ 쓸까?
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
돈을����������� ������������������ 드래그����������� ������������������ &����������� ������������������ 드롭해야����������� ������������������ 하는����������� ������������������ 스펙이����������� ������������������ 있으니까����������� ������������������ 콤포넌트를����������� ������������������ 가져다����������� ������������������ 써야지.
DOM����������� ������������������ 컨트롤은����������� ������������������ 어떤걸로����������� ������������������ 하면����������� ������������������ 좋을까?
많은����������� ������������������ 기능이����������� ������������������ 필요����������� ������������������ 없으니����������� ������������������ 경량화����������� ������������������ 라이브러리를����������� ������������������ 쓸까?
14년 6월 26일 목요일
라이브러리 선택
26
음료수����������� ������������������ 데이터를����������� ������������������ 컨트롤����������� ������������������ 할때����������� ������������������ 편하도록...
돈을����������� ������������������ 드래그����������� ������������������ &����������� ������������������ 드롭해야����������� ������������������ 하는����������� ������������������ 스펙이����������� ������������������ 있으니까����������� ������������������ 콤포넌트를����������� ������������������ 가져다����������� ������������������ 써야지.
DOM����������� ������������������ 컨트롤은����������� ������������������ 어떤걸로����������� ������������������ 하면����������� ������������������ 좋을까?
많은����������� ������������������ 기능이����������� ������������������ 필요����������� ������������������ 없으니����������� ������������������ 경량화����������� ������������������ 라이브러리를����������� ������������������ 쓸까?
네이버에서는����������� ������������������ 자체적으로����������� ������������������ 제작한����������� ������������������ 라이브러리를����������� ������������������ 많이����������� ������������������ 사용하고����������� ������������������ 있습니다.
14년 6월 26일 목요일
27
UI/상세기획 분석
프레임워크 선택
라이브러리 선택
일정 산출
14년 6월 26일 목요일
일정 산출
개발자가 직접 스펙 분석 후 일정 산출
회의, 휴식 시간, 리서치 등 실제 개발시간 외에 일상적으로 소모되는 시간도 개발 일정에 포함하여 추정
프로젝트 스펙이 복잡하거나 투입 인원이 많을 경우 플래닝 포커 게임을 통해 일정 추정의 오차를 줄임
28
14년 6월 26일 목요일
플래닝포커?
애자일 프로젝트 관리에서 일정 추정시 많이 사용하는 방법
모든 팀원이 일정 추정에 참여하여 스펙 이해도 증가
토론을 통해 팀원 모두가 동의할 수 있는 일정 추정 가능
29
14년 6월 26일 목요일
플래닝포커 방법
1. 스펙을 잘아는 사람이 팀원들에게 스펙 설명2. 스펙을 듣고 각자가 가진 숫자카드 하나씩 제출3. 가장 큰 숫자와 가장 작은 숫자를 낸 사람의 의견을 듣고, 다시 숫자카드 제출4. 숫자가 통일될때까지 반복적으로 숫자 카드를 제출5. 의견 일치가 안될 경우 토론을 통해 의견 조율 후 평균값으로 일정 산출
30
14년 6월 26일 목요일
!KEY POINT
스펙 분석을 철저하게 할 수록 개발 이슈 감소
프레임워크 사용 여부는 필수가 아닌 선택
개발자간 협의를 통해 사용할 라이브러리를 선택하여 중복된 라이브러리 사용 방지
객관적인 일정 산출 방법을 도입하여 일정 추정에 정확도 부여
데드라인(오픈일정)이 촉박하게 정해진 프로젝트는...
31
14년 6월 26일 목요일
기술 협의
32
14년 6월 26일 목요일
33
마크업 협의
API 협의
14년 6월 26일 목요일
마크업 구조 협의
일부 UI 콤포넌트를 사용하게 될 경우 정해진 마크업 구조가 존재하므로 해당 구조에 맞게 개발되도록 마크업 조직에 협조 요청
UI 를 신규 개발 할 경우 마크업 개발자와의 긴밀한 협업이 필요
개발 경험이 많은 마크업 개발자일수록 자바스크립트 작업을 고려하여 마크업 개발 진행
34
14년 6월 26일 목요일
35
마크업 협의
API 정의
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
프론트-엔드 개발에서는 Ajax 를 통해 데이터를 요청 후 UI 렌더링 작업을 진행
스펙을 분석하여 백-엔드 개발자와 API 에 대한 협의 진행
API를 기준으로 샘플 데이터를 만들어 프론트-엔드 개발 진행
36
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
API 정의 및 샘플 데이터 작성
37
14년 6월 26일 목요일
!KEY POINT
기술 이슈가 있을 경우 바로 협의를 통해 스펙 조절
특정 콤포넌트를 사용하게 될 경우 마크업 조직과 협의
데이터 API 를 사용하게 될 경우 백-엔드 개발자와 협의
API에서 제공하는 데이터를 미리 정의하여 개발 진행
프로젝트 진행시 타 부서와의 커뮤니케이션은 중요
38
14년 6월 26일 목요일
개발 진행
39
14년 6월 26일 목요일
40
저장소 세팅
프로젝트 세팅
프레임워크/라이브러리 설치
구조 설계
14년 6월 26일 목요일
저장소 세팅
git 을 이용하여 코드 버전 관리 진행
저장소 관리 도구로 gitlab을 사용하고 있으며 오픈소스 프로젝트 저장소로 유명한 github와 유사한 인터페이스를 가지고 있음
41
14년 6월 26일 목요일
42
저장소 세팅
프로젝트 세팅
프레임워크/라이브러리 설치
구조 설계
14년 6월 26일 목요일
프로젝트 세팅
Yeoman, Grunt-init, HTML5 boilerplate, github 등을 활용하여 프로젝트 초기화 비용 감소
프로젝트 구조를 스캐폴딩 후 배포하여 다른 프로젝트 진행시 재활용
43
14년 6월 26일 목요일
44
저장소 세팅
프로젝트 세팅
프레임워크/라이브러리 설치
구조 설계
14년 6월 26일 목요일
프레임워크 & 라이브러리 설치
npm, bower 와 같은 패키지 관리 도구의 출현으로 쉽게 라이브러리 관리 가능
패키지/라이브러리 파일은 코드 버전 관리에 포함하지 않고 패키지 관리 도구를 통해 각 개발자가 관리하므로 저장소 용량 절약에 도움
패키지 검색 사이트를 운영
NPM : https://www.npmjs.org
Bower: http://bower.io/search/
45
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
14년 6월 26일 목요일
프레임워크 및 라이브러리 bower를 통해 설치
프레임워크 & 라이브러리 설치
46
--save 옵션을 사용하면 자동으로 bower.json 파일에 설치된 라이브러리 디펜던시가 추가됨
14년 6월 26일 목요일
이후 라이브러리 설치시 간단한 명령어로 일괄 설치가 가능
프레임워크 & 라이브러리 설치
47
14년 6월 26일 목요일
이후 라이브러리 설치시 간단한 명령어로 일괄 설치가 가능
프레임워크 & 라이브러리 설치
47
14년 6월 26일 목요일
이후 라이브러리 설치시 간단한 명령어로 일괄 설치가 가능
프레임워크 & 라이브러리 설치
47
14년 6월 26일 목요일
이후 라이브러리 설치시 간단한 명령어로 일괄 설치가 가능
프레임워크 & 라이브러리 설치
47
14년 6월 26일 목요일
이후 라이브러리 설치시 간단한 명령어로 일괄 설치가 가능
프레임워크 & 라이브러리 설치
47
14년 6월 26일 목요일
48
저장소 세팅
프로젝트 세팅
프레임워크/라이브러리 설치
구조 설계
14년 6월 26일 목요일
구조 설계
최근의 JavaScript는 복잡한 UI를 가진 어플리케이션을 구현하기때문에 구조 설계 필요
대부분의 개발자가 백-엔드 개발에 익숙하여 객체 지향 구조 설계
최근 객체 지향 구조 설계방식이 JavaScript의 장점을 해치는 것 같아 다양한 개발 방식 도입 시도
프레임워크를 사용할 경우 프레임워크에서 지향하는 설계방식을따라 구조 설계
49
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
50
14년 6월 26일 목요일
구조 설계
51
14년 6월 26일 목요일
구조 설계
51
14년 6월 26일 목요일
!KEY POINT
프로젝트 시작시 개발환경을 세팅(프레임워크, 라이브러리 다운로드)에 많은 리소스 낭비
yeoman, bower, npm, grunt 등을 활용하여 관련 프레임워크&라이브러리들을 쉽게 관리
사용하는 프레임워크, 개발자들의 역량, 프로젝트종류에 따라 구조 설계 작업이 필요
52
14년 6월 26일 목요일
배포 / 테스트
53
14년 6월 26일 목요일
코드 배포 작업
1. CSS, JS 파일 병합 작업
2. CSS, JS 코드 압축 및 난독화 작업
3. 병합된 CSS, JS 파일로 html 경로 수정
4. API 문서 생성 및 정리 작업
54
14년 6월 26일 목요일
코드 배포 작업
1. CSS, JS 파일 병합 작업
2. CSS, JS 코드 압축 및 난독화 작업
3. 병합된 CSS, JS 파일로 html 경로 수정
4. API 문서 생성 및 정리 작업
54
추가����������� ������������������ 개발을����������� ������������������ 할때����������� ������������������ 마다����������� ������������������ 반복����������� ������������������ 수행
14년 6월 26일 목요일
55
배포 자동화
성능 최적화
기능 테스트
서비스 적용
14년 6월 26일 목요일
배포 자동화
반복적인 작업이 필요할 경우 Grunt 를 이용하여 자동화
Copy, Clean, Uglifyjs, JSDoc 플러그인을 자주 사용
CoffeeScript, SASS 등 전처리 언어도 플러그인으로 자동화 가능
이미 수 많은 Grunt 플러그인이 제작되어 활용
56
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
57
14년 6월 26일 목요일
배포 자동화
58
14년 6월 26일 목요일
배포 자동화
58
14년 6월 26일 목요일
배포 자동화
58
14년 6월 26일 목요일
배포 자동화
58
14년 6월 26일 목요일
배포 자동화
58
14년 6월 26일 목요일
59
배포 자동화
성능 최적화
기능 테스트
서비스 적용
14년 6월 26일 목요일
성능 최적화
YSlow, PageSpeed 등 성능 최적화 도구 이용
60
14년 6월 26일 목요일
성능 최적화
성능최적화 도구가 제공하는 가이드 라인만 준수해도 최적화 작업의 70~80% 완료
61
14년 6월 26일 목요일
성능 최적화
Chrome 개발자 도구가 제공하는도구를 통해 추가 최적화 작업 진행
Network 네트워크 요청에 대한 정보를 분석하여 리소스 최적화
Timeline 불필요한 이벤트 및 메모리 낭비 분석
Profiles JavaScript CPU 사용율 분석
62
14년 6월 26일 목요일
63
배포 자동화
성능 최적화
기능 테스트
서비스 적용
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자 프로젝트 팀
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자 프로젝트 팀 전문 QA
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자 프로젝트 팀 전문 QA
이슈 관리 시스템
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자 프로젝트 팀 전문 QA
이슈 관리 시스템
14년 6월 26일 목요일
기능 테스트
64
1차 테스트 2차 테스트 최종 테스트
개발자 프로젝트 팀 전문 QA
이슈 관리 시스템
서비스 적용14년 6월 26일 목요일
65
배포 자동화
성능 최적화
기능 테스트
서비스 적용
14년 6월 26일 목요일
서비스 적용
백-엔드 개발자에게 동작하는 샘플 페이지와 코드를 전달하여
배포 요청
몇몇 프로젝트의 경우 프론트-엔드 개발자가 서비스 페이지에
직접 적용
66
14년 6월 26일 목요일
!KEY POINT
반복적인 작업들은 Grunt 작업 관리 도구를 활용하여 자동화
배포시 수 많은 Grunt 플러그인 활용
성능 측정도구(YSlow, Pagespeed 등)가 제시해 주는가이드라인을 수행하여 웹 페이지 성능 최적화 70~80% 달성
크롬 개발자 도구처럼 성능 모니터링을 제공하는 툴 적극 활용
67
14년 6월 26일 목요일
네이버 프론트-엔드 개발 사례
68
14년 6월 26일 목요일
네이버 윙버스
국내(네이버 지도), 해외(구글 지도) API 를 통해 여행 정보 연동
각각의 API 를 랩핑하여 윙버스만의 라이브러리 제작
현재 서비스 종료
69
14년 6월 26일 목요일
네이버 자동차 모바일
네이버 Jindo 라이브러리를 사용하여 개발
이미지 플리킹, 컨텐츠 플리킹, 탭 컨텐츠 등 다이나믹한 사용자 UI 제공
70
14년 6월 26일 목요일
Line for Firefox OS
웹 기반 OS 인 Firefox OS 위에 작동하는 프론트-엔드 기술로 제작
localStorage, Indexeddb, web worker 등 HTML5 스펙 활용
실시간 데이터 수신을 위해 long-polling push 처리
Firefox OS 네이티브 API 활용(카메라, sdcard, 갤러리 등)
71https://marketplace.firefox.com/app/line
14년 6월 26일 목요일
2014 네이버 지방선거
프론트-엔드 기술을 활용 하여 득표율 레이싱 개발
개표 진행 상황을 실시간으로 서버와 통신하여 여러 가지 차트 형태로 사용자에게 빠른 정보를 제공
72
14년 6월 26일 목요일
테트리스 게임
네이버 D2 in 부산 세미나에서 발표한 테트리스
HTML5 스펙들을 활용하여 클라이언트 개발
mongodb, express, nodejs를 활용하여 테트리스 게임서버 개발
프론트-엔드 기술로 프론트-엔드 부터 백-엔드까지 Full-Stack을 구현
73
14년 6월 26일 목요일
!KEY POINT
많은 서비스가 사용자에게 보다 편리하고 다양한 경험을 제공하기 위해서 프론트-엔드 기능 개발에 집중
웹이 구동되는 디바이스가 늘어남에 따라 웹기술로 제작 가능한 서비스의 범위 확대
기존에 플래시, Silver light 등의 도움을 받아야 했던 기능을 HTML5 최신 스펙을 활용하여 구현 가능
node.js 의 등장으로 자바스크립트 만으로 웹 서비스 full-stack 개발 가능한 환경 도래
74
14년 6월 26일 목요일
75
14년 6월 26일 목요일
75
사실 프로그래머라는 직업을 모르는 사람도 많습니다.
14년 6월 26일 목요일
75
사실 프로그래머라는 직업을 모르는 사람도 많습니다.
14년 6월 26일 목요일
76
14년 6월 26일 목요일
76
웹 개발자가 아니면브라우저가 뭔지도 알지 못합니다.
14년 6월 26일 목요일
76
웹 개발자가 아니면브라우저가 뭔지도 알지 못합니다.
14년 6월 26일 목요일
76
웹 개발자가 아니면브라우저가 뭔지도 알지 못합니다.
인터넷
14년 6월 26일 목요일
76
웹 개발자가 아니면브라우저가 뭔지도 알지 못합니다.
인터넷
14년 6월 26일 목요일
76
웹 개발자가 아니면브라우저가 뭔지도 알지 못합니다.
인터넷
14년 6월 26일 목요일
77
그렇지만
14년 6월 26일 목요일
78
14년 6월 26일 목요일
78
수 많은 IT기기의 등장으로
14년 6월 26일 목요일
78
수 많은 IT기기의 등장으로웹 서비스의 영역은 점차 확대되고 있습니다.
14년 6월 26일 목요일
79http://www.internetlivestats.com/internet-users/
14년 6월 26일 목요일
전세계 인구 약 70억
79http://www.internetlivestats.com/internet-users/
14년 6월 26일 목요일
전세계 인구 약 70억
인터넷 이용자 약 30억
79http://www.internetlivestats.com/internet-users/
14년 6월 26일 목요일
전세계 인구 약 70억
인터넷 이용자 약 30억
79http://www.internetlivestats.com/internet-users/
14년 6월 26일 목요일
전세계 인구 약 70억
인터넷 이용자 약 30억
79http://www.internetlivestats.com/internet-users/
전세계 인구의
41%
14년 6월 26일 목요일
80
14년 6월 26일 목요일
80
그 많은 사람들이 우리가 하는일은 잘 모르지만
14년 6월 26일 목요일
80
그 많은 사람들이 우리가 하는일은 잘 모르지만
우리가 만드는 웹을 이용하고 있습니다.
14년 6월 26일 목요일
81
14년 6월 26일 목요일
81
14년 6월 26일 목요일
81
사용자에게 다양한 경험을 제공해줄 수 있도록
14년 6월 26일 목요일
81
사용자에게 다양한 경험을 제공해줄 수 있도록끊임없이 노력하고 있습니다.
14년 6월 26일 목요일
82
14년 6월 26일 목요일
82
조금 더 나은 웹을 만들기 위해 끊임없이 노력하는
14년 6월 26일 목요일
82
조금 더 나은 웹을 만들기 위해 끊임없이 노력하는
우리는 프론트엔드 개발자 입니다
14년 6월 26일 목요일