퍼블리셔, 프론트엔드개발을 시작하다
TRANSCRIPT
퍼블리셔 , 프론트엔드개발을 시작하다2016.12.10하드코딩하는사람들 빼로
프론트엔드개발이란 단어가 너무 길어 발표자료를 짜임새 있게 만들기 어려워서
이하 프론트개발로 줄이겠습니다 .
발표를 준비한 이유
2016 년 하코사의 많은 신규 회원은 ...
열심히퍼블리싱공부해서나중에 좋은프론트개발자가 될거에요 !
HTML, CSS, JavaScript 를
사용하면 프론트개발자가 아닌가요 ?
내가 퍼블리셔인지 프론트개발자인지 아직도 헷갈려 ...사실 같은거 아닌가 !?
3 년의 고민 끝에 내린 결론퍼블리셔 ≠ 프론트엔드개발자
그냥 두 개의 직업을 가지면 안 되는 건가요 ?
아리스토텔레스의 직업1. 철학자2. 수학자3. 천문학자4. 신학자5. 생물학자6. 기상분석가7. ...
발표자 소개 - 빼로퍼블리셔프론트엔드개발자강사작가
고민 말고여러 직업을갖는 걸로 ~!
과연 무엇이 다른걸까 ?
퍼블리셔 , 프론트엔드개발을 시작하다
내가 생각했던 프론트개발 (~2013)
HTML, CSS, JavaScript 를 이용한Markup + CSS Styling + Light 한 UI 개발
∥전통적인 퍼블리싱과 일치
( 그냥 같은 의미라고 생각했음 )
3 년 전 어느 날 있었던 일나는 백앤드만 할 줄 알고 프론트개발을 잘 못해자네가 해줬으면 좋겠어 그럼요 ~
그건 퍼블리셔인제가 할 일 인걸요
3 년 전 어느 날 있었던 일왜 아직도 데이터가 안 붙은거야 !네가 프론트개발을 한다며 !
그걸 제가 어찌 압니끄아아아저는 UI 개발만 하면 되는 줄 알았즈어어어
생각이 바뀐 후의 프론트개발 (~2015)
퍼블리싱HTML 마크업CSS 스타일링
UI 개발JavaScript 를 이용한
이벤트 핸들링데이터바인딩
JavaScript 를 이용한템플릿 작업
퍼블리싱은 프론트개발의 일부이며프론트개발이 가장 넓은 범주의 단어라고 생각
그 후로 2 년간 ...
이야 ~ 이거 백엔드랑 프론트가나뉘니까 굉장히 효율적인걸 ~!
제 결과물이마음에 드시나요 ?
그런데 기분이 이상하네 ...
이렇게 작업하니 좋은 건 알겠는데사람을 채용하려니막상 전부 다 하는 사람은아예 없네 ...
개발자 면접제가 백엔드도 하고 프론트개발도 합니다 .둘 다 잘 해요 .
채용된 후 ...프론트개발 할 줄 안다며 !?왜 퍼블리싱을 못 하는거야 ?
제가 말한 프론트개발은그 프론트개발이 아닌데 ...하아 ... 엄마보고 싶다 ...
그 후 알게된 것은
이 단어를 사용하는 주체는퍼블리셔가 아니라는 것이었다 .
개발자에게 프론트개발이란 ?
직접 만들기 보다는누군가가 잘 만들어 놓은 것을가져가 그대로 사용하는 것ex) bootstrap 이 인기 있는 이유웹에서는 퍼블리싱이 이와 같음즉 화면을 조합하듯이 배치한 후이벤트핸들링을 통하여데이터를 입 / 출력한다 .
개발자에게 프론트개발이란 ?
가장 중요한 것은 데이터기반사고를 한다는 것
현재 생각하는 프론트개발 (2016~)
퍼블리싱HTML 마크업CSS 스타일링
UI 개발슬라이더 등의
비데이터 UI 개발데이터바인딩
템플릿 작업
이 둘은 사용하는 언어만 비슷할 뿐전혀 다른 직업이며 지향하는 가치도 다르다
UI 개발데이터 입력을 위한
이벤트 핸들링퍼블리셔 프론트개발자
퍼블리셔 , 프론트엔드개발을 시작하다
전통적인 웹개발 (Ajax 이전 )
페이지내 태그에 직접 데이터바인딩 하는 형식으로 작업<h1><%=headerTitle%></h1>
※ 특징 1. 한 번 로딩하면 새로고침 하지 않는 이상 다시 불러올 수 없음 2. 데이터를 알 수 없기 때문에 백엔드 개발자가 작업해야 함
현대의 웹 개발※ 특징 1. Ajax 를 이용해 몇 번이고 데이터를 가져올 수 있음 2. 갱신된 데이터를 적용하기 위해 화면을 변경해야 함 3. JavaScript 를 이용해서 화면을 변경함 4. 백엔드와 프론트개발의 완벽한 분업이 가능해짐※ 일반적인 회사의 프로세스 1. 그냥 JavaScript 라는 언어로 프론트 개발을 하면 되는구나 ... 2. 한 페이지에서 이 화면 저 화면을 띄우다 보니 코드가 복잡해짐 3. 일이 많아져서 급하게 JavaScript 프론트개발자를 채용하려고 함 ( 중요 ! ☆☆☆ JavaScript 고수를 찾는게 아님 , 업무를 분담할 사람을 찾음 )
명심해야 할 것 !
1. 프론트개발은 JavaScript 고수만 할 수 있는 것이 아니다 . JavaScript 고수도 있는 것 뿐이다 .
2. 경험에 의한 설계가 중요하다 . 무조건 많이 다양하게 해보자 . 삽질이 피와 살이 된다 .
3. 생각보다 사용하는 문법이 많지 않다 . 겁먹지 말자 !
그럼 도대체 우리가 공부해야하는프론트개발이란 무엇일까 ?
프론트엔드개발의 요소와 중요도
템플릿( 제일 중요 킹왕짱 중요 ☆ ☆ ☆ ☆ ☆이것 때문에 프론트개발자 채용함 )
데이터바인딩( 이건 백엔드가 해도 되고그게 더 나은 경우도 있음 ...)
Ajax( 이것도 백엔드 설정 따라야 해서 혼자서는 못함 , 한 번 정하면 잘 안 바뀜 )
오늘의 주제 , 템플릿(몇 개는 남겨둬야 다음에 또 발표할 게 있으니까 ... ☞☜)
템플릿 스킬의 중요성
전통적인 템플릿의 한계PHP/ASP/JSP 등으로 다음과 같이 개발 ( 줄이 모자라 type=text 생략 )
<% if 데이터가 있다면 for 루프를 돈다 %> <li><input name=“name-<%=i%>” value=“<%=value%>”></li><% else if 데이터가 없다면 %> <li><input name=“name-0” value=“”></li><% end if %>
추가 버튼을 클릭했을 때 추가될 JavaScript 를 작성var tag, length;length = $(‘ul>li’).size();tag = ‘<li><input name=“name-’+length+’” value=“”></li>’;$(‘ul’).append(‘tag’);
전통적인 템플릿의 한계1.간단한 UI 라도 폼이 존재한다면 3벌을 만듦2.형태에 따라 2벌로 작성하는 경우도 많음3.코드가 기하급수적으로 늘어 유지보수 어려움
JavaScript 템플릿을 사용한다면 ?function load(data) { var tag, length; data = data || ‘’; length = $(‘ul>li’).size(); tag = ‘<li><input name=“name-’+length+’” value=“’+data+’”></li>’; $(‘ul’).append(‘tag’);} 데이터가 있을 경우 load(data);
데이터가 없을 경우 load();추가할 경우 load();
대량의 태그를 추가하는 법String 변수 사용법 Array 변수 사용법
대량의 태그를 추가하는 법jQuery Templete
Github: https://github.com/BorisMoore/jquery-tmpl
대량의 태그를 추가하는 법
URL : https://angularjs.org
템플릿 공부 순서1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript 로 호출한다 .2. 현재 있는 화면을 Ajax 를 호출하여 새로운 데이터로 화면을 다시 그린다 .3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다 .4. 두 화면은 일부 같은 화면을 공유한다 . 해당 템플릿을 함수로 분리한다 .5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다 .
템플릿 설계 기본
템플릿 공부 순서1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript 로 호출한다 .2. 현재 있는 화면을 Ajax 를 호출하여 새로운 데이터로 화면을 다시 그린다 .
템플릿 설계 기본
1. 화면 그림(DB 에서 1 번
데이터를 가져옴 )
2. DB 에서 2 번 데이터를호출해서 새 화면을 그림( 새로고침 하면 안됨 )
템플릿 공부 순서3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다 .
템플릿 설계 기본
1 이나 2 로 그린 화면3. 1,2 와 관계없는 전혀
다른 화면이 나옴( 다시 1 이나 2 로 복귀가능 해야 함 )
템플릿 공부 순서4. 두 화면은 일부 같은 화면을 공유한다 . 해당 템플릿을 함수로 분리한다 .5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다 .
템플릿 설계 기본
데이터 있음 데이터 없음
템플릿 공부 순서1. 현재 화면을 그린 데이터 보관하는 프론트 DB 를 만들어 현재 화면이 모두
지워지더라도 프론트 DB 의 데이터만으로 완벽하게 다시 그릴 수 있게 한다 .2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라
데이터 변환 이벤트 발생시 항상 프론트 DB 가 업데이트 되어 프론트 DB 는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다 .
3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며 ,DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다 .
템플릿 설계 심화 – 데이터 기반 사고
템플릿 공부 순서1. 현재 화면을 그린 데이터 보관하는 프론트 DB 를 만들어 현재 화면이 모두
지워지더라도 프론트 DB 의 데이터만으로 완벽하게 다시 그릴 수 있게 한다 .
템플릿 설계 심화 – 데이터 기반 사고
var frontDB = { sn1 : 10431, sn2 : 532, searchKeyword : ‘ 하코사’};
DOM 이 사라졌다고 데이터까지 손실되면 안됨 !
해당 데이터로 다시 호출load(frontDB);
템플릿 공부 순서2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라데이터 변환 이벤트 발생시 항상 프론트 DB 가 업데이트 되어 프론트 DB 는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다 .
템플릿 설계 심화 – 데이터 기반 사고
FrontDB
템플릿 공부 순서3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며 ,DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다 .
템플릿 설계 심화 – 데이터 기반 사고
var data;data = { title : 데이터수집 , city : 데이터수집 , hobby : 데이터수집 , OOOO : 데이터수집 , .......};
load(data);
이벤트 발생시 데이터 수집 프론트 DB 관리시load(frontDB);
항상 최신 데이터가 있음
퍼블리셔 , 프론트엔드개발을 시작하다
그럼 퍼블리셔는 어쩌죠 ?
모든 혼란은 JavaScript 때문
같은 언어를 사용한다고같은 직업이라고 볼 순 없다
JavaScript 를 사용하는 직업퍼블리셔 : UI 개발프론트 / 백앤드 개발자 : 데이터 바인딩 , Node.js
스크립터 ( 전직 플래셔 ) : 인터랙티브 개발 (Canvas)
퍼블리셔와 프론트개발자가추구하는 직업적 가치는
같을 수 없다
퍼블리셔가 하는 일의 본질은 무엇일까 ?
컨텐츠
글 , 이미지 , 비디오 , 오디오 ,인터랙티브 , 모션 등의 컨텐츠
컨텐츠를 언제 , 어디서 , 누구나 즐기도록웹 표준 마크업 , 웹 접근성 준수 ,UI 개발 , 이미지 최적화 등등 ...
이런 상황은 어떨까요 ?이 비디오 파일을 mp4, ogg, webm 으로 인코딩하세요 .
퍼블리셔는브라우저 플랫폼 기반의
컨텐츠 전문가가되어야 한다
퍼블리셔가 프론트개발을 함께 한다면정말 멋진 결과물이 나올 것이라고
확신합니다 .( 물론 그게 쉽진 않아요 ...☞☜)
감사합니다 .