Download as PDF, PPTX
Uploaded by우영 주
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
토크아이티 저자 특강 발표 자료, 발표 영상 http://www.youtube.com/watch?v=KE4izpusy7o
![[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문](https://cdn.slidesharecdn.com/ss_thumbnails/mean-re-151003142901-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2 오픈세미나]1.무한스크롤성능개선](https://cdn.slidesharecdn.com/ss_thumbnails/1-140804011241-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[H3 2012] 스마트모바일 환경에서의 App.품질관리전략](https://cdn.slidesharecdn.com/ss_thumbnails/d3-121105220000-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2 오픈세미나]4.진보된개발환경 주우영](https://cdn.slidesharecdn.com/ss_thumbnails/d24-140525210100-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기](https://cdn.slidesharecdn.com/ss_thumbnails/toolcon2014-140602234750-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
- 1.
- 2. NHN Technology services Front-EndDevelopment Team !! facebook.com/groups/webfrontend
- 3. 전체적인 웹 개발프로세스 프런트엔드 워크-플로우 프런트엔드 개발 정의
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. 마크업 UI 인터렉션개발 프런트엔드개발팀
- 10. 마크업 UI 인터렉션개발 UI 컴포넌트 개발 프런트엔드개발팀
- 11. 마크업 UI 인터렉션개발 UI 컴포넌트 개발 Ajax UI 개발 프런트엔드개발팀
- 12. 마크업 UI 인터렉션개발 UI 컴포넌트 개발 Ajax UI 개발 UX 프로토타입 개발 프런트엔드개발팀
- 13. !프런트엔드 개발이란 사용자가접하는 영역의 리소스와 UI, 인터렉션을 개발하는 것
- 14.
- 15. 문서 수준을 탈피한 UI인터렉션
- 16. 문서 수준을 탈피한 UI인터렉션 사용성&안정성
- 17. 문서 수준을 탈피한 UI인터렉션 사용성&안정성 좋은 접근성
- 18. 문서 수준을 탈피한 UI인터렉션 헤비 UI 개발 사용성&안정성 좋은 접근성
- 19. 문서 수준을 탈피한 UI인터렉션 헤비 UI 개발 사용성&안정성 모바일 웹 좋은 접근성
- 20. 문서 수준을 탈피한 UI인터렉션 헤비 UI 개발 사용성&안정성 모바일 웹 긴 생명주기 좋은 접근성
- 21. 문서 수준을 탈피한 UI인터렉션 헤비 UI 개발 사용성&안정성 모바일 웹 긴 생명주기 좋은 접근성 전문성
- 22.
- 23.
- 24. 전문성 웹표준, 접근성 소프트웨어 공학 방법론 테스트,리팩토링, 디버깅
- 25. 전문성 웹표준, 접근성 시맨틱 검색 엔진최적화 소프트웨어 공학 방법론 테스트, 리팩토링, 디버깅
- 26. 전문성 웹표준, 접근성 시맨틱 검색 엔진최적화 소프트웨어 공학 방법론 테스트, 리팩토링, 디버깅 Async, CORS, XSS, CSRF
- 27. 전문성 웹표준, 접근성 시맨틱 검색 엔진최적화 Async, CORS, XSS, CSRF 언어, 엔진에 대한 깊은 이해 소프트웨어 공학 방법론 테스트, 리팩토링, 디버깅
- 28. !고수준의 UI를 잘개발하기 위해선 공학적 지식, 전문성이 요구된다.
- 29.
- 30. 프로젝트 기획 시작/ 기획서 산출
- 31. 프로젝트 기획 시작/ 기획서 산출
- 32. 프로젝트 기획 시작/ 기획서 산출 기획서 산출 후 디자이너 및 개발자에게 배포 백엔드 설계 백엔드 아키텍처 설계 및 패키지 설계 디자인 작업 마크업 설계 기획서 분석 및 구현 불가능 요소 파악 자바스크립트 설계 기획서 분석 및 구현 불가능 요소 파악
- 33. 백엔드 설계 백엔드 아키텍처설계 및 패키지 설계 디자인 작업 마크업 설계 기획서 분석 및 구현 불가능 요소 파악 자바스크립트 설계 기획서 분석 및 구현 불가능 요소 파악 마크업 작업 디자인 산출
- 34. 마크업 산출 자바스크립트 구현 백엔드구현 자바스크립트 산출
- 36.
- 37. 자바스크립트 구현 백엔드 개발 웹API 문서 (인터페이스)
- 38. !자바스크립트 개발자가 백엔드개발 상태를 의존 하지 않고 개발해야한다.
- 39.
- 40.
- 41. 기획서 / 스펙분석 문서 구조 분석시맨틱 헤더, 아티클 등 시맨틱 요소 파악 공통 요소, 네비 게이션 등 문서 구조 파악
- 42. 문서 구조 분석시맨틱기능 분석 기능 리스트 헤더, 아티클 등 시맨틱 요소 파악 공통 요소, 네비 게이션 등 문서 구조 파악 자 바 스 크 립 트 개 발 이 필 요 한 요소 파악 파악한 자바스크 립트 기능 리스트 작성 기획서 / 스펙 분석
- 43. 문서 구조 분석시맨틱기능 분석 기능 리스트 프로토타이핑 구현 불가능 요소 헤더, 아티클 등 시맨틱 요소 파악 공통 요소, 네비 게이션 등 문서 구조 파악 자 바 스 크 립 트 개 발 이 필 요 한 요소 파악 파악한 자바스크 립트 기능 리스트 작성 구현 가능한 스펙 인지 알 수 없을땐 프로토타이핑 구현불가능한요소는 기획자에게 고지 및 스펙 수정 기획서 / 스펙 분석
- 44. 일정 산출 페이지 별 일정추정 목 업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출
- 45. 일정 산출 페이지 별 일정추정 목 업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출 기능 별 일정 추정 기획서를 기초로 추출한 각 기능별 일정 산출
- 46. 페이지 별 일정 추정 목업 을 기 초 로 공통요소 분할, 각 페이지별 마크업 일정 산출 기능 별 일정 추정 기획서를 기초로 추출한 각 기능별 일정 산출 의사결정 전체적인프로젝트 기간 스케줄링 일정 산출
- 47. 명세 작성 개 발에 필 요 한 정보 파악 유스케이스 작성 시 스 템 의 동 작 을 이해하기 위한 유스 케이스 작성 명세 분석
- 48.
- 49. 개발 환경 세팅 버전관리 시스템 소스 코드의 버전을 안전하게 관리하기 위한 기반 시스템
- 50. 버전 관리 시스템 소스코드의 버전을 안전하게 관리하기 위한 기반 시스템 IDE 스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구 개발 환경 세팅
- 51. 버전 관리 시스템 소스코드의 버전을 안전하게 관리하기 위한 기반 시스템 IDE 스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구 스캐폴딩 프로젝트 전 선행 되어야할 작업을 자동으로 처리 개발 환경 세팅
- 52. 버전 관리 시스템 소스코드의 버전을 안전하게 관리하기 위한 기반 시스템 IDE 스위칭 비용 줄이고 안락하게 개발하기 위한 통합 개발 환경 도구 모듈 관리 도구 모 듈 을 관 리 하 기 쉽게 도와주는 도구 개발 환경 세팅 스캐폴딩 프로젝트 전 선행 되어야할 작업을 자동으로 처리
- 53. CSS 전처리기 정 적인 C S S 의 단점을 극복할 수 있는 전처리 도구 마크업 개발
- 54. CSS 전처리기 정 적인 C S S 의 단점을 극복할 수 있는 전처리 도구 타이핑 도구 HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구 마크업 개발
- 55. 마크업 설계 공통 요소분석 전체구조 설계 마크업 개발 CSS 전처리기 정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구 타이핑 도구 HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구
- 56. 마크업 단계 컨텐츠의 골격을 잡아가는작업. 의미있는 시맨틱, 웹표준을 준수한 문서 작성 마크업 설계 공통 요소 분석 전체구조 설계 마크업 개발 CSS 전처리기 정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구 타이핑 도구 HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구
- 57. 마크업 단계 컨텐츠의 골격을 잡아가는작업. 의미있는 시맨틱, 웹표준을 준수한 문서 작성 스타일링 단계 CSS를 활용하여 문 서 를 꾸 미 는 작업 마크업 설계 공통 요소 분석 전체구조 설계 마크업 개발 CSS 전처리기 정 적 인 C S S 의 단점을 극복할 수 있는 전처리 도구 타이핑 도구 HTML과 CSS를 빠르게 편집할 수 있도록 도와주는 도구
- 58.
- 59. 자바스크립트 개발 코드 품질검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구
- 60. 자바스크립트 개발 코드 품질검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 테스트 러너 작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합
- 61. 자바스크립트 개발 테스트 더블 테스트하기어려운 컴포넌트(요소)를 대체하는기능을 가진 라이브러리 코드 품질 검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 테스트 러너 작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합
- 62. 자바스크립트 개발 테스트 더블 테스트하기어려운 컴포넌트(요소)를 대체하는기능을 가진 라이브러리 코드 품질 검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 애너테이션 특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석 테스트 러너 작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합
- 63. 자바스크립트 개발 테스트 더블 테스트하기어려운 컴포넌트(요소)를 대체하는기능을 가진 라이브러리 웹 API 디자인 백엔드 개발자와 웹 API 인터페이스 정의 코드 품질 검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 애너테이션 특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석 테스트 러너 작 성 한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합
- 64. 테스트 러너 작 성한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합 테스트 더블 테스트하기어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리 클래스 설계 도메인을분석하여 객체 설계 웹 API 디자인 백엔드 개발자와 웹 API 인터페이스 정의 자바스크립트 개발 코드 품질 검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 애너테이션 특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석
- 65. 테스트 러너 작 성한 테 스 트 코드를 자동으로 실행하고 결과를 산출하는 도구 테스트 프레임 워크 테 스 트 코 드 를 작성할 때 필요한 함수 집합 테스트 더블 테스트하기어려운 컴포넌트(요소)를 대체하는 기능을 가진 라이브러리 클래스 설계 도메인을분석하여 객체 설계 구현 개발 설 계 를 토 대 로 실제 코드를 작성 하여 구현 웹 API 디자인 백엔드 개발자와 웹 API 인터페이스 정의 자바스크립트 개발 코드 품질 검증 도구 자바스크립트코드 의안티패턴,신텍스 오류 등을 미리 검증하는 도구 애너테이션 특 수 한 의 미 를 부 여 하 기 위 해 작성한 주석
- 66.
- 67.
- 68. 자바스크립트 빌드&배포 문서화 주석을 파싱하여 문서를생성하는 도구 난독화&압축 자바스크립트코드 압축 및 난독화 도구
- 69. 자바스크립트 빌드&배포 태스크 자동화 압축,문서화, 검증 테스트 등 개발 간 또는빌드전에실행 되어야할 작업을 자동으로실행하는 도구 문서화 주석을 파싱하여 문서를 생성하는 도구 난독화&압축 자바스크립트코드 압축 및 난독화 도구
- 70. CI 각 자 가작 업 한 산출물을 한곳에 모 아 검 증 하 고 통합 자바스크립트 빌드&배포 태스크 자동화 압축, 문서화, 검증 테스트 등 개발 간 또는빌드전에실행 되어야할 작업을 자동으로실행하는 도구 문서화 주석을 파싱하여 문서를 생성하는 도구 난독화&압축 자바스크립트코드 압축 및 난독화 도구
- 71. 성능 최적화 웹사이트측정 고 성능 을 위 한 웹 사이트 속도 측정 도구
- 72. 성능 최적화 웹사이트측정 고 성능 을 위 한 웹 사이트 속도 측정 도구 개발자 도구 브라우저 개발자 도구의 네트워크, 타임라인, 프로파 일링 기능
- 73. 테스트 개발자 테스트 개발 중지속적인 테스트
- 74. 테스트 개발자 테스트 개발 중지속적인 테스트 팀 테스트 개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트
- 75. 테스트 개발자 테스트 개발 중지속적인 테스트 팀 테스트 개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트 전문가 테스트 전문 테스트 QA팀 에 서 시 행 하 는 테스트
- 76. 개발자 테스트 개발 중지속적인 테스트 팀 테스트 개발이 마무리될 시점에 시행되는 프로젝트 팀 테스 트 전문가 테스트 전문 테스트 QA팀 에 서 시 행 하 는 테스트 이슈 관리 시스템 이슈(버그)를 등록 하고관리할수있는 시스템 테스트
- 77.
- 78. 버전 관리 시스템 GITmercurial subversion
- 79. 통합 개발 환경 eclipsesublime webstorm aptana
- 80.
- 81. 모듈 관리 도구 nodepackage manager Bower
- 82.
- 83.
- 84. 코드 품질 검증도구
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95. 앱의 등장으로 사용자는 더매끄럽고 미려한 UI를 기대한다.
- 96.
- 97. 기획자/디자이너는 더 나은 UX를디자인하고 웹에서 구현되기를 희망한다.
- 98. 관리자는 빠르게 이슈없는 서비스가 출시될수 있기를 요구한다.
- 99. 이 모든게 프런트엔드 개발자, 우리 손에 달려있습니다.
- 100.
- 101.