[토크아이티] 프런트엔드 개발 시작하기 저자 특강

프런트엔드 개발 시작하기

네네이이버버는는 이이렇렇게게 한한다다!!

NHN Technology services Front-End Development Team ! !

facebook.com/groups/webfrontend

전체적인 웹 개발 프로세스

프런트엔드 워크-플로우

프런트엔드 개발 정의

프런트엔드 개발 정의 1

웹-프런트엔드

사용자가 접하는 영역

사용자에게 보이는 영역

Apache!

WebServer

Nginx!

JSP!

Server-side Script

PHP!

Oracle!

Database

MySQL!

Javascript!

Browser

HTML! CSS!

Flash!

HTTP Protocol

프런트엔드 개 발 영 역

Apache!

WebServer

Nginx!

JSP!

Server-side Script

PHP!

Oracle!

Database

MySQL!

Javascript!

Browser

HTML! CSS!

Flash!

HTTP Protocol

프런트엔드개발팀

마크업

마크업 UI 인터렉션 개발

프런트엔드개발팀

마크업 UI 인터렉션 개발 UI 컴포넌트 개발

프런트엔드개발팀

마크업 UI 인터렉션 개발 UI 컴포넌트 개발

Ajax UI 개발

프런트엔드개발팀

마크업 UI 인터렉션 개발 UI 컴포넌트 개발

Ajax UI 개발 UX 프로토타입 개발

프런트엔드개발팀

! 프런트엔드 개발이란 사용자가 접하는 영역의

리소스와 UI, 인터렉션을 개발하는 것

프런트엔드 개발자 필요한가? 2

문서 수준을 탈피한 UI 인터렉션

문서 수준을 탈피한 UI 인터렉션

사용성&안정성

문서 수준을 탈피한 UI 인터렉션

사용성&안정성

좋은 접근성

문서 수준을 탈피한 UI 인터렉션

헤비 UI 개발

사용성&안정성

좋은 접근성

문서 수준을 탈피한 UI 인터렉션

헤비 UI 개발

사용성&안정성

모바일 웹

좋은 접근성

문서 수준을 탈피한 UI 인터렉션

헤비 UI 개발

사용성&안정성

모바일 웹

긴 생명주기

좋은 접근성

문서 수준을 탈피한 UI 인터렉션

헤비 UI 개발

사용성&안정성

모바일 웹

긴 생명주기

좋은 접근성 전문성

전문성

소프트웨어 공학

방법론

전문성

소프트웨어 공학

방법론

테스트, 리팩토링, 디버깅

전문성 웹표준, 접근성

소프트웨어 공학

방법론

테스트, 리팩토링, 디버깅

전문성 웹표준, 접근성

시맨틱

검색 엔진 최적화

소프트웨어 공학

방법론

테스트, 리팩토링, 디버깅

전문성 웹표준, 접근성

시맨틱

검색 엔진 최적화

소프트웨어 공학

방법론

테스트, 리팩토링, 디버깅

Async, CORS, XSS, CSRF

전문성 웹표준, 접근성

시맨틱

검색 엔진 최적화

Async, CORS, XSS, CSRF

언어, 엔진에 대한 깊은 이해

소프트웨어 공학

방법론

테스트, 리팩토링, 디버깅

! 고수준의 UI를 잘 개발하기 위해선

공학적 지식, 전문성이 요구된다.

전체적인 웹 개발 프로세스 3

프로젝트 기획 시작 / 기획서 산출

프로젝트 기획 시작 / 기획서 산출

프로젝트 기획 시작 / 기획서 산출

기획서 산출 후 디자이너 및 개발자에게 배포

백엔드 설계

백엔드 아키텍처 설계 및 패키지 설계

디자인 작업

마크업 설계

기획서 분석 및 구현 불가능 요소 파악

자바스크립트 설계

기획서 분석 및 구현 불가능 요소 파악

백엔드 설계

백엔드 아키텍처 설계 및 패키지 설계

디자인 작업

마크업 설계

기획서 분석 및 구현 불가능 요소 파악

자바스크립트 설계

기획서 분석 및 구현 불가능 요소 파악

마크업 작업

디자인 산출

마크업 산출

자바스크립트 구현

백엔드 구현

자바스크립트 산출

자바스크립트 구현

백엔드 개발

자바스크립트 구현

백엔드 개발

웹 API 문서 (인터페이스)

! 자바스크립트 개발자가 백엔드 개발 상태를

의존 하지 않고 개발해야한다.

프런트엔드 워크-플로우 4

조직도 트리 심플 프로젝트

기획서 / 스펙 분석

문서 구조 분석 시맨틱

헤더, 아티클 등 시맨틱 요소 파악

공통 요소, 네비 게이션 등 문서 구조 파악

문서 구조 분석 시맨틱 기능 분석 기능 리스트

헤더, 아티클 등 시맨틱 요소 파악

공통 요소, 네비 게이션 등 문서 구조 파악

자 바 스 크 립 트 개 발 이 필 요 한 요소 파악

파악한 자바스크 립트 기능 리스트 작성

기획서 / 스펙 분석

문서 구조 분석 시맨틱 기능 분석 기능 리스트

프로토타이핑 구현 불가능 요소

헤더, 아티클 등 시맨틱 요소 파악

공통 요소, 네비 게이션 등 문서 구조 파악

자 바 스 크 립 트 개 발 이 필 요 한 요소 파악

파악한 자바스크 립트 기능 리스트 작성

구현 가능한 스펙 인지 알 수 없을땐 프로토타이핑

구현 불가능한 요소는 기획자에게 고지 및 스펙 수정

기획서 / 스펙 분석

일정 산출

페이지 별 일정 추정

목 업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출

일정 산출

페이지 별 일정 추정

목 업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출

기능 별 일정 추정

기획서를 기초로 추출한 각 기능별 일정 산출

페이지 별 일정 추정

목 업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출

기능 별 일정 추정

기획서를 기초로 추출한 각 기능별 일정 산출

의사결정

전체적인 프로젝트 기간 스케줄링

일정 산출

명세 작성

개 발 에 필 요 한 정보 파악

유스케이스 작성

시 스 템 의 동 작 을 이해하기 위한 유스 케이스 작성

명세 분석

명세 분석

개발 환경 세팅

버전 관리 시스템

소스 코드의 버전을 안전하게 관리하기 위한 기반 시스템

버전 관리 시스템

소스 코드의 버전을 안전하게 관리하기 위한 기반 시스템

IDE

스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구

개발 환경 세팅

버전 관리 시스템

소스 코드의 버전을 안전하게 관리하기 위한 기반 시스템

IDE

스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구

스캐폴딩

프로젝트 전 선행 되어야할 작업을 자동으로 처리

개발 환경 세팅

버전 관리 시스템

소스 코드의 버전을 안전하게 관리하기 위한 기반 시스템

IDE

스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구

모듈 관리 도구

모 듈 을 관 리 하 기 쉽게 도와주는 도구

개발 환경 세팅

스캐폴딩

프로젝트 전 선행 되어야할 작업을 자동으로 처리

CSS 전처리기

정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구

마크업 개발

CSS 전처리기

정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구

타이핑 도구

HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구

마크업 개발

마크업 설계

공통 요소 분석 전체 구조 설계

마크업 개발

CSS 전처리기

정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구

타이핑 도구

HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구

마크업 단계

컨텐츠의 골격을 잡아가는 작업. 의미있는 시맨틱, 웹표준을 준수한 문서 작성

마크업 설계

공통 요소 분석 전체 구조 설계

마크업 개발

CSS 전처리기

정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구

타이핑 도구

HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구

마크업 단계

컨텐츠의 골격을 잡아가는 작업. 의미있는 시맨틱, 웹표준을 준수한 문서 작성

스타일링 단계

CSS를 활용하여 문 서 를 꾸 미 는 작업

마크업 설계

공통 요소 분석 전체 구조 설계

마크업 개발

CSS 전처리기

정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구

타이핑 도구

HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구

마크업 개발

자바스크립트 개발

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

자바스크립트 개발

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

자바스크립트 개발

테스트 더블

테스트 하기 어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

자바스크립트 개발

테스트 더블

테스트 하기 어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

애너테이션

특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

자바스크립트 개발

테스트 더블

테스트 하기 어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리

웹 API 디자인

백엔드 개발자와 웹 API 인터페이스 정의

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

애너테이션

특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

테스트 더블

테스트 하기 어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리

클래스 설계

도메인을 분석하여 객체 설계

웹 API 디자인

백엔드 개발자와 웹 API 인터페이스 정의

자바스크립트 개발

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

애너테이션

특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석

테스트 러너

작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구

테스트 프레임 워크

테 스 트 코 드 를 작성할 때 필요한 함수 집합

테스트 더블

테스트 하기 어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리

클래스 설계

도메인을 분석하여 객체 설계

구현 개발

설 계 를 토 대 로 실제 코드를 작성 하여 구현

웹 API 디자인

백엔드 개발자와 웹 API 인터페이스 정의

자바스크립트 개발

코드 품질 검증 도구

자바스크립트 코드 의 안티 패턴, 신텍스 오 류 등 을 미 리 검증하는 도구

애너테이션

특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석

자바스크립트 개발

자바스크립트 빌드&배포

난독화&압축

자바스크립트 코드 압축 및 난독화 도구

자바스크립트 빌드&배포

문서화

주석을 파싱하여 문서를 생성하는 도구

난독화&압축

자바스크립트 코드 압축 및 난독화 도구

자바스크립트 빌드&배포

태스크 자동화

압축, 문서화, 검증 테스트 등 개발 간 또는 빌드 전에 실행 되어야할 작업을 자동으로 실행하는 도구

문서화

주석을 파싱하여 문서를 생성하는 도구

난독화&압축

자바스크립트 코드 압축 및 난독화 도구

CI

각 자 가 작 업 한 산출물을 한곳에 모 아 검 증 하 고 통합

자바스크립트 빌드&배포

태스크 자동화

압축, 문서화, 검증 테스트 등 개발 간 또는 빌드 전에 실행 되어야할 작업을 자동으로 실행하는 도구

문서화

주석을 파싱하여 문서를 생성하는 도구

난독화&압축

자바스크립트 코드 압축 및 난독화 도구

성능 최적화

웹사이트 측정

고 성 능 을 위 한 웹 사이트 속도 측정 도구

성능 최적화

웹사이트 측정

고 성 능 을 위 한 웹 사이트 속도 측정 도구

개발자 도구

브라우저 개발자 도구의 네트워크, 타임라인, 프로파 일링 기능

테스트

개발자 테스트

개발 중 지속적인 테스트

테스트

개발자 테스트

개발 중 지속적인 테스트

팀 테스트

개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트

테스트

개발자 테스트

개발 중 지속적인 테스트

팀 테스트

개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트

전문가 테스트

전문 테스트 QA팀 에 서 시 행 하 는 테스트

개발자 테스트

개발 중 지속적인 테스트

팀 테스트

개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트

전문가 테스트

전문 테스트 QA팀 에 서 시 행 하 는 테스트

이슈 관리 시스템

이슈(버그)를 등록 하고 관리할 수 있는 시스템

테스트

도구 및 라이브러리 5

버전 관리 시스템

GIT mercurial subversion

통합 개발 환경

eclipse sublime webstorm aptana

스케폴딩

grunt-init

모듈 관리 도구

node package manager Bower

CSS 전처리기

타이핑 도구

Emmet

코드 품질 검증 도구

테스트 프레임워크&테스트 더블

테스트 러너

압축&난독화

Google closure compiler

문서화&애너테이션

JJSSDDoocc33

태스크 자동화

Grunt Gulp

지속적인 통합(Continuous Integration)

웹사이트 측정

YSlow PageSpeed

개발자 도구

이슈 관리 시스템

끝으로 6

앱의 등장으로 사용자는 더 매끄럽고

미려한 UI를 기대한다.

사용자는 서비스가

안정적으로 동작하길

원한다.

기획자/디자이너는

더 나은 UX를 디자인하고

웹에서 구현되기를

희망한다.

관리자는 빠르게

이슈없는 서비스가

출시될 수 있기를

요구한다.

이 모든게 프런트 엔드 개발자,

우리 손에 달려있습니다.

프런트엔드 개발의 가치를

인정합니다.

감사합니다.