퍼블리셔 , 프론트엔드 개발 을 시작 하 다 by 정석 양 10293 views 
 프론트엔드 로 시작 하 는 웹 개발 . .. by Eun Cho 10403 views 
 [ 토크 아이 티 ] 프런트 엔드 개발 시작 하 기 저자 특강 by 우영 주 10393 views 
 최전방 생존 법 - 프론트엔드 개발자 로 살아가 기 by Hyeonjin Cho 10396 views 
 초보 개발자 를 위한 웹 프론트엔드 개발 101 by Chang W . Doh 6824 views 
 ECMAScript 6 의 새로운 것 들 ! by WooYoung Cho 18240 views 
 44 . 886 visualizaciones 
 , Front - End Developer at NAVER 
 프론트엔드 와 실무 경험담 을 위주 로 설명 한 프레젠테이션 입니다 . 
 Yohan Han , Researchers at ( 주 ) 성훈 정보 통신 
 이렇게 감사 한 슬라이드 를 작성 해 주 시 다니 ㅋ 잘 보 고 갑니다 : ) 
 Hyeongjin Kim , 주임 at NHN Technology Services 
 Byungyoung David Han , Software Engineer / Researcher at Software Engineer ( Researcher ) 
 SeongjinHong 5 
 Minhyuk Ji 
 1 . 웹 FRONT - END 실무 이야기 NAVER   이진권 lee . jinkwon @ navercorp . com 
 2 . 짧 게 나마 , 실무 이야기 전 에 FE 에 대한 이야기 를 먼저 할까 합니다 . 
 3 . 대부분 이 생각 하 시 는   FRONT - END 개발 은 , CSS 를 작성 하 고 ,   HTML 을 작성 하 고 ,   Javascript 를 작성 해서 , 사용 자 웹 페이지 를 만듭니다 . 
 4 . FRONT - END ? 
 5 . 이런 일 을 하 는 사람 들 이 맞 습니다 . 난이도 가 어렵 지 않 다고 생각 하 는 사람 들 도 많 구요 .   그리고 , 
 6 . 대다수 의 프로젝트 에 는 ,   FE 개발자 가 필요 하 지 않 습니다 . 
 7 . 페이지 에 넣 을 인라인 스크립트 작성  ( 파일 분리 필요 없 는 정적 페이지 개발 ) 폼 유효 성 검사 재 사용 이 필요 없 는 View 코드 작성 공통 모듈 ( jindo / query ) 로 만 페이지 개발 이 가능 할 때 
 8 . 서버 개발 자 분 들 이 하 셔도 되 요 대부분 의 스펙 은 서버 개발자 가 개발 해도 충분  ( 더불 어 엄청 잘 하 세요 ) 화면 동작 만 잘 하 면 됩니다 View 단 은 금방 고칠 수 있 어요 
 9 . 모바일 은 JMC 만 있 으면 거의 다 구현 됩니다 . 플리 킹 스크롤 
 10 . 요새 풀 스택 개발자 들 은 다 할 수 있 어요 연봉 1 억 짜리 풀 스택 개발자 를 고용 했으니 , 다 잘 할 수 있 을 꺼 에요 . 일정 은 변경 할 수 없 으니 2 달 안 에 끝내 죠 . 아마 다 잘 될 꺼 에요 .   근데 최신 브라우저 에서 만 . 
 11 . 사실 , 우리 에게 FE 개발자 가 필요 한 이유 는 ,   저희 가 주로 받 는 요청 사항 에 들 어 있 습니다 . 
 12 . 크로스 브라우저 대응 아래 브라우저 에서 모두 잘 동작 하 게 해 주 세요 . IE 6 , 7 은 동작 은 다 안 되 도 화면 깨지 지 않 게 해 주 세요 . Internet Explorer ( 6 , 7 ) 8 , 9 , 10 , 11   Firefox   Chrome   Safari   Another Browser coming soon ( Spartan ) 
 13 . 멀티 모바일 디바이스 대응 모바일 의 아래 브라우저 에서 는 당연히 잘 동작 해야 해요 .   4 층 에 테스트 실 이 있 으니까 거기 가 서 테스트 하 고 오 세요 . iOS Safari iOS Naver App Browser Android OS Version 2 . 3 , 3 , 4 , 5 Samsung , App Browser , Mobile Chrome Android Mobile Chrome + System WebKit 
 14 . 기획 / 디자인 과 합의점 찾 기 웹 으로 다 구현 가능 한 거 아니 에요 ?   어떤 사이트 보 니까 잘 되 던데 . 우리 최소 대응 스펙 은 진저브레드 인데요 , 정말 멋진 UX 를 구현 하 고 싶 어요 . 근데 오픈 일 은 2 주 남 았 어요 . 될까요 ? 이 스펙 으로 전체 커버리지 는 이런 문제 가 있 어요 . 성능 최대한 고려 해서 , 이 커버리지 로 구현 하 겠 습니다 .   IE 8 ~, Android 2 . 3 ~, Chrome , Firefox 
 15 . 프로토 타이핑 도 합니다 . 이런 서비스 를 개발 하 려고 하 는데요 ,   기술 적 으로 웹 에서 구현 이 가능 할까요 ? 이 스펙 빠르 게 프로토 타이핑 해 주 세요 . ( * 화면 보여 주 면서 ) 이거 될까요 ? 
 16 . 성능 최적화 기능 구현 은 잘 됐 는데 , 느려요 . 네이버 메인 은 빠르 던데 모바일 에서 더 부드럽 게 구현 이 안 될까요 ? 인 스타 그램 앱 에서 스르륵 효과 가 멋지 던데 우리 웹 은 뚝뚝 끊겨서 이상 해요 . 제 폰 은 갤럭시 s 3 인데 우리 서비스 가 너무 느려요 . 메뉴 를 누를 때 마다 왜 이렇게 깜박거리 죠 ? 
 17 . 유지 보수 가 가능 한 JS 개발 이 프로젝트 일단 기능 만 추가 하 죠 . 리 펙 토 링 ( 채무 청산 ) 은 나중 에 하 고요 . JS 코드 는 유연 하 니 편할 대로 작성 하 세요 .   다음 에 누군가 잘 유지 보수 해 주 시 겠 죠 . 유연 하 다는 말 은 , 다른 말 로 “ 플 젝 마다 구조 가 다르 다 ” 입니다 . 
 18 . 유지 보수 가 가능 한 JS 개발 다른 FE 개발자 가 작성 한 걸 유지 보수 하 더라도 한참 은 헤매 야 합니다 . 일관 성 이 있 다면 , 유지 보수 가 한결 편리 합니다 . 기존 프로젝트 에 접근 하 여 , 기본 적 인 코딩 컨벤션 정립 및 FE 개발 환경 구축 을 합니다 . 
 19 . 웹 트렌드 는 아직 도 변화 중 새로운 웹 기술 , 새로운 스펙 은 계속 발전 하 고 , 변화 를 감지 하 고 스위칭 할 Follower 필요 합니다 .   이런 것 들 과 함께 요 . ECMA Script 6 ( Babel , traceur ) Web Components React , Angular 2 , Polymer And more . 
 20 . 정리 해 보 면 , 
 21 . FE 개발자 들 의 일 은 , CSS , HTML , JS 을 이용 하 여 ,   화면 로직 을 설계 , 구현 하 고 , 프로토 타이핑 을 하 여 가능 성 을 확인 한 다음 ,   테스트 를 해서 ,   UI 컴포넌트 작성 , 통신 API 를 작성 합니다 .   개발 / 기획 / 디자인 소통 창구 역할 을 수행 하 기 도 하 구요 ,   성능 최적화 를 하 여 좀 더 빠르 고 나 은 웹 어플리케이션 을 위해 노력 합니다 .   물론 최신 웹 스펙 과 함께 요 . 
 22 . 그렇 다면 요샌 어떻게 개발 을 할까요 ? 
 23 . 고도 화 된 프론트엔드 개발 1 . 디자인 패턴 유입 2 . MVC 구조 에 따른 웹 어플리케이션 개발 3 . Framework / Library 의 다양 화  ( jQuery 하나 로 끝나 는 게 아닌 ) 4 . 프론트엔드 도구 의 다양 화 5 . 차기 JS 스펙 은 계속 발전 중 ( ES 6 , ES 7 ) 
 24 . ( 요새 ) 하 고 있 는 개발 프로세스 
 25 . 1 . 요구 사항 분석 ( 스펙 회의 ) 1 ) 서버 개발 에서 된다고 했 다가 브라우저 커버리지 때문 에 FE 개발자 에게 HELP ! IE 에서 안 되 요 ! ! ( 실제로 이런 경우 많 습니다 ) 2 ) 애초 에 서비스 기획 / 설계 당시 부터 프론트엔드 개발자 가 포함 되 는 게 좋 습니다 . 3 ) 이번 서비스 에 이 스펙 을 꼭 넣 어야 해요 . ( 구현 가능 성 판단 및 일정 산정 . 프로토 타이핑 일정 이 포함 되 곤 합니다 ) 
 26 . 2 . 프레임워크 / 라이브러리 선정 
 27 . 프레임워크 / 라이브러리 선정 JQUERY / JINDO 하나 면 다 되 는 거 아니 야 ? 일반 적 인 상황 에서 는 충분 하 지만 , 좀 더 고차원 의 어플리케이션 개발 은 부족 합니다 . 유지 보수 가 용이 한 프로젝트 를 위해선 적절 한 라이브러리 선정 이 매우 중요 합니다 . 
 28 . 3 . 환경 세팅 ANT YUI 빌드 정도 면 되 는 거 아니 야 ? 충분 합니다 . 하지만 , 더 좋 은 툴 들 이 너무 많이 있 습니다 . 다양 한 종류 의 프론트엔드 개발 을 도와 주 는 도구 들 이 오픈 소스 로 공개 되 어 있 습니다 . 그리고 ,   Minification 만 으로 는 부족 하 죠 . 
 29 . 자바 스크립트 개발 환경 고도 화 JS 개발 환경 은 node . js 로 인해 정말 많 은 발전 을 했 고 , 주로 아래 와 같 은 툴 들 이 있 습니다 . grunt , grunt - init   gulp   yeoman   bower   karma   browser - sync 
 31 . 이걸 합쳐서 , BUILD TASK JS 최적화 ( Min & Uglify ) , JS 코드 품질 검증 ( JS Lint ) , JS 테스트 수행 ( test code run with browser ) , CSS 최적화 ( Min ) , CSS Image sprite 자동 화 , HTML , CSS 리소스 를 js 로 변환 , ALL FILE CONCAT to THE _ ONE . js , checkout Flash file BUILD 태 스 크 를 수행 하 면   3 초 만 에 우리 가 원 하 는 ,   result . min . js 산출물 파일 생성 
 32 . 여러 가지 귀찮 은 작업 을 커맨드 한 번 에 . 
 33 . 4 . 개발 / 테스트 
 34 . 여러 브라우저 에서 테스트 하 기 여러 가지 솔루션 이 있 습니다 . BrowserSync   Browser Stack SauceLabs   Many Virtual Machines 
 35 . 테스트 방식 선택 • 무료 로 할려면 , ( 로컬 에 세팅 하 기 ) • BrowserSync • VM 환경 세팅 • 돈 내 고 편하 게 하 려면 , ( 그냥 서비스 이용 하 기 ) • SauceLabs • Browser Stack 
 36 . 가상 머신 테스트 준비 modern . ie : IE test VM 이미지 무료 로 받 기 Genymotion : Android VM Xcode : iOS VM ( Simulator ) 
 37 . VM 기본 셋 필요 에 따라 더 설치 하 기 도 합니다 .   Genymotion VirtualBox 브라우저 삼총사 
 38 . BROWSER - SYNC 테스트 환경 을 ( 극 적 으로 ) 도와 주 는 도구 입니다 .   태 스 크 러너 ( grunt / gulp ) 를 통해 쉽 게 run 할 수 도 있 습니다 . weinre 자동 세팅 ( Remote Debugging ) Click & Scroll position & Form action 동기 화 자동 화면 갱신 ( 리소스 / 코드 변경 시 ) 
 39 . 우리 개발 환경 엔 이렇게 쓰 고 있 습니다 . 폴더 서 gulp bs 를 하 면 자동 으로 서버 가 뜹니다 . 
 40 . BROWSER STACK 웹 베이스 가상 머신 테스트 ( 설치 없이 ) 
 41 . SAUCELABS https : / / saucelabs . com / 
 42 . SAUCELABS 앞서 본 브라우저 스택 과 유사   셀레 니 움 이나 remote test 환경 지원 이 좋 습니다 . 멀티 브라우저 에서 테스트 를 자동 화 시킬 수 있 습니 다 . 서비스 를 사용 해서 요 . 우리 파트 에서 도 직접 사용 할 수 있 을지 고민 중 인 서비스 입니다 . 
 43 . CI 와 함께 UI 테스트 
 44 . FRONT - END PACKAGING MANAGER 프론트엔드 패 키 징 매니저 , bower   기존 엔 jquery 를 받 으려면 jquery 사이트 를 들 어 가 서 봐야 했 습니다 . 이제 커맨드 만 으로 간단히 받 아 올 수 있 어요 . command 유 틸로 설치 하 는 jquery 는 ,   bower install jquery 
 45 . 마지막 , 5 . 성능 최적화 
 46 . 성능 최적 화 는 , 조금 만 그리고 ( draw ) , 조금 만 연산 하 기 Repaint / Reflow 최소 화 리소스 로컬 캐 싱 활용 ( Local Storage ) UI 인터페이스 응답 성 최대한 보장 빌드 를 이용 한 파일 크기 최적화 
 47 . BACK - END , FRONT - END 한 집 생활 기존 / 신규 프로젝트 에 프론트엔드 집짓기 
 48 . 실무 프로젝트 1 . 어떤 공통 모듈 공통 으로 사용 하 는 어떤 모듈 개발 모든 리소스 ( image , html ) 는 리퀘스트 수 를 줄이 기 위해 js 파일 하나 로 패 키 징 해야 합니다 . 
 49 . AS - IS 파일 하나 에 5000 줄 이 넘 었 습니다 .   앞 으로 고통 스러운 유지 보수 가 될 게 뻔 해요 . 
 50 . 집짓기 시작 기존 현황 은 ,   loc 5000 짜리 단일 파일 1 개 로 관리   공통 라이브러리 인 특성 상 유지 보수 업무 가 많 았 습니다 . 진입 방식 ?   프론트엔드 프로젝트 폴더 생성 과 동시 에 , 기능 단위 로 파일 을 분리   Markup / CSS 리소스 파일 분리 ( 유지 보수성 )   프론트엔드 빌드 환경 세팅 
 51 . TO - BE JS 파일 안 에 있 던 리소스 분리 유틸리티 함수 추출 기능 단위 파일 분리 gulp 를 이용한 빌드 환경 세팅 
 52 . 변환 결과 굳이 , 여러 파일 로 나눌 필요 가 있 을까요 ? 네 . 꼭 필요 해요 .   5000 줄 짜리 클래스 파일 을 유지 보수 하 는 건   정말 고통 스러운 일 입니다 . 
 53 . 얻 은 것 과 잃 은 것 프론트엔드 개발 관점 에서 유지 보수 가 편리 해졌 습니다 . 피쳐 개발 중간 에 HOTFIX 나 긴급 수정 이 생겨도 문제 없 어요 . 빌 드시 , 패키지 내부 에 자동 으로 빌드 날짜 가 추가 되 니까 서비스 의 배포 상태 점검 이 용이 해요 . 
 54 . 하지만 , 기존 개발 자 분 들 이 쓰 시 기 가 어려워 졌 습니다 . 
 55 . 그렇게 복잡 하 지 않 습니다 . 몇 가지 만 기억 하 신다면 요 . 
 56 . 세팅 된 환경 은 사용 은 쉽 습니다 . 1 . node . js 설치 를 하 고 , 2 . 해당 폴더 로 가 서 , 3 . npm install 만 해 주 면 , 빌드 준비 끝 4 . app / src 안 에 변경 이 필요 한 파일 수정 후 , 5 . 마지막 으로 , gulp publish 커맨드 로 산출물 생성 6 . 코드 커밋 
 57 . / app / resources   리소스 를 저장 할 폴더 / app / src   플레이어 소스 코드 저장 폴더 / coverage   코드 커버리지 산출 폴더 / dist   최종 산출물 저장 폴더 / test   테스트 관련 파일 기타 환경 세팅 관련 파일 들 
 58 . 환경 세팅 후 얻 은 또 다른 것 CI 연동 을 통한 빌드 / 테스트 자동 화 
 59 . NODE 덕분 에 서버 에서 브라우저 를 띄울 수 가 있 습니다 . 커맨드 로 ,   웹 페이지 캡쳐  ( 리눅스 에서 도 가능 ) 
 60 . 이걸로 , UI 테스트 도 가능 합니다 . 
 61 . 실무 프로젝트 2 . 플러그인 구현 이 이미 잘 되 어 있 어요 . 동작 도 잘 하 고요 . 하지만 조금 개선 해서 다른 서비스 에서 도 쓸 수 있 게 하 면 좋 겠 어요 . 이번 에 다른 스펙 을 구현 할 껀 데 한 페이지 에 이 모듈 을 여러 개 붙일 수 있 나요 ? 
 62 . 개선 포인트 접근 기존 구조 파악 단일 페이지 에서 한 개 의 모듈 만 초기 화 가능  ( 인 스턴스 기반 이 아님 )   신규 피쳐 개발 과 함께 구조 개선 필요 개선 방향 jQuery 플러그인 ( 모듈 ) 으로 개발 을 하 고 , 인 스턴스 기반 으로 여러 개 를 만들 수 있 게 하 기 위해 파일 구조 전면 변경 
 63 . AS - IS 모든 코드 는 window scope 에 있 었 습니다 . 초기 화 는 한 개 의 업 로 더 만 가능 . 
 64 . TO - BE 신규 컴포넌트 는 , 원 하 는 갯 수 만큼 초기 화 할 수 있 습니다 .   API 는 jQuery 를 따르 기 때문 에 간단 합니다 . 
 65 . 디렉 토리 구조 bower _ components   외부 라이브러리 coverage   코드 커버리지 측정 산출물   jsdoc   api 문서 spec   test 관련 코드   src   실제 소스 코드   기타 환경 관련 파일 들 
 66 . 사실 이 프로젝트 디렉 토리 를 서버 저 장소 에 놓 을 필요 는 없 습니다 . command util 인 bower 를 이용 해 특정 디렉 토리 에 라이브러리 설치 도 가능 합니다 . 
 67 . 실무 프로젝트 3 .   동적 인 인터렉션 의 프로젝트 프론트 개발 분량 이 매우 많 고 , 동적 인 인터렉션 이 많 아요 . 개발 기간 도 짧 고요 . 프로젝트 변화 가 잦 습니다 . 개발 시간 을 최대 한 줄 이 고 싶 어요 . 
 68 . 그렇 다면 , 서버 와 프론트 역할 을 완전히 분리 하 는 게 어떨까 요 ? 프론트엔드 의 빌드 주체 는 , 프론트엔드 개발 에서 . 서버 프로젝트 디렉 토리 의 static 폴더 에 전체 빌 드 산출물 을 빌드 ( html , css , js ) FE 에서 수행 한 빌드 산출물 은 곧 실제 서비스 까지 
 69 . 장단점 이 있 을까 ? 장점 ?   파일 히스토리 관리 , 머지 부탁 필요 없 음 .  ( 공유 메일 작성 안 해도 됨 )   FE to Server 통합 요청 프로세스 의 간소 화  ( 산출물 공유 가 전혀 불 필요 . 시간 절약 이 많이 되 었 어요 ) 단점 ?   FE 에서 기존 에 서버 개발자 의 view 레이어 에 대한 책임 을 일부 가져가 야 해요 . ( jsp 코드 적용 , 등 ) 
 70 . 그래도 문제 는 있 었 습니다 . 매번 서버 저 장소 에 최종 산출물 코드 를 커 밋 해야 하 는 번거 로움 이 있 습니다 . 빌드 를 하 는 주체 가 다른 사람 이 되 면 , 저 장소 의 산출물 파일 에 Conflict 가 발생 합니다 . 
 71 . 그래서 , 이런 생각 이 들 었 습니다 . 
 72 . 프론트엔드 빌드 도구 들 도 서버 빌드 타임 에 실행 하 면 어떨까 요 ? 
 73 . MAVEN - FRONTEND front - end 역할 을 위임 하 는 대신 ,   FE 빌드 를 서버 에서 자동 으로 실행 해 주 는 방식 입니다 . Front - End 에서 개발 과 환경 세팅 을 하 고 , 빌드 요청 은 maven 플러그인 을 사용 해 실행 만 해 주 면 , 빌드 서버 에서 빌 드시 자동 으로 product js 코드 가 생성 됩니다 .   https : / / github . com / eirslett / frontend - maven - plugin 
 74 . 물론 의존 모듈 은 , 자동 으로 설치 됩니다 .  ( Node . js , NPM ) 개발 하 던 모듈 이 들 어 있 는 서비스 서버 는 maven 기반 이 아니 라서 , 다른 모듈 에 테스트 를 해 보 았 습니다 . 
 75 . POM . XML   frontend - maven - plugin 추가 환경 세팅 은 , 프론트엔드 개발자 가 원 하 는 대로 가능 함 bower , npm , karma , gulp , grunt   모두 사용 가능 
 77 . MAVEN INSTALL node . js 자동 설치 의존 모듈 자동 설치   자동 으로 프론트엔드 빌드 
 78 . 결과 , 배 포용 코드 생성 완료 
 79 . 개발 환경 을 잘 몰라도 , 빌드 서버 에서 자동 으로 빌 드 시킬 수 있 습니다 . 
 80 . 더 나 은 개발 환경 을 위해 , 지금 도 계속 고민 하 고 있 습니다 .   제 가 편하 고 ,   제 동료 들 이 편하 게 할 수 있 게 . 
 81 . FIN . THANKS 
 82 . APPENDIX 
 83 . BASELINE FOR FRONT - END DEVELOPERS : 2015 http : / / rmurphey . com / blog / 2015 / 03 / 23 / a - baseline - for - front - end - developers - 2015 / 1 . ES 6 2 . Modules 3 . Build Tools 4 . Testing 5 . Process Automation 6 . Code Quality 7 . Client - Side Templating 8 . node . js