26. 전통적인 웹개발(Ajax이전)
페이지내 태그에 직접 데이터바인딩 하는 형식으로 작업
<h1><%=headerTitle%></h1>
※특징
1. 한 번 로딩하면 새로고침 하지 않는 이상 다시 불러올 수 없음
2. 데이터를 알 수 없기 때문에 백엔드 개발자가 작업해야 함
27. 현대의 웹 개발
※특징
1. Ajax를 이용해 몇 번이고 데이터를 가져올 수 있음
2. 갱신된 데이터를 적용하기 위해 화면을 변경해야 함
3. JavaScript를 이용해서 화면을 변경함
4. 백엔드와 프론트개발의 완벽한 분업이 가능해짐
※ 일반적인 회사의 프로세스
1. 그냥 JavaScript라는 언어로 프론트 개발을 하면 되는구나...
2. 한 페이지에서 이 화면 저 화면을 띄우다 보니 코드가 복잡해짐
3. 일이 많아져서 급하게 JavaScript 프론트개발자를 채용하려고 함
(중요! ☆☆☆ JavaScript 고수를 찾는게 아님, 업무를 분담할 사람을 찾음)
28. 명심해야 할 것!
1. 프론트개발은 JavaScript 고수만 할 수 있는 것이 아니다.
JavaScript 고수도 있는 것 뿐이다.
2. 경험에 의한 설계가 중요하다. 무조건 많이 다양하게 해보자.
삽질이 피와 살이 된다.
3. 생각보다 사용하는 문법이 많지 않다. 겁먹지 말자!
30. 프론트엔드개발의 요소와 중요도
템플릿(제일 중요 킹왕짱 중요 ☆ ☆ ☆ ☆ ☆
이것 때문에 프론트개발자 채용함)
데이터바인딩
(이건 백엔드가 해도 되고
그게 더 나은 경우도 있음...)
Ajax
(이것도 백엔드 설정 따라야 해서
혼자서는 못함, 한 번 정하면 잘
안 바뀜)
33. 전통적인 템플릿의 한계
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’);
34. 전통적인 템플릿의 한계
1. 간단한 UI라도 폼이 존재한다면 3벌을 만듦
2. 형태에 따라 2벌로 작성하는 경우도 많음
3. 코드가 기하급수적으로 늘어 유지보수 어려움
35. 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();
39. 템플릿 공부 순서
1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript로 호출한다.
2. 현재 있는 화면을 Ajax를 호출하여 새로운 데이터로 화면을 다시 그린다.
3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다.
4. 두 화면은 일부 같은 화면을 공유한다. 해당 템플릿을 함수로 분리한다.
5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다.
템플릿 설계 기본
40. 템플릿 공부 순서
1. 아무 것도 없는 화면에서 body 내의 태그 전체를 JavaScript로 호출한다.
2. 현재 있는 화면을 Ajax를 호출하여 새로운 데이터로 화면을 다시 그린다.
템플릿 설계 기본
1. 화면 그림
(DB에서 1번
데이터를 가져옴)
2. DB에서 2번 데이터를
호출해서 새 화면을 그림
(새로고침 하면 안됨)
41. 템플릿 공부 순서
3. 특정 이벤트 발생시 그 화면을 지우고 완전히 다른 화면을 그린다.
템플릿 설계 기본
1이나 2로 그린 화면
3. 1,2와 관계없는 전혀
다른 화면이 나옴
(다시 1이나 2로 복귀가
능 해야 함)
42. 템플릿 공부 순서
4. 두 화면은 일부 같은 화면을 공유한다. 해당 템플릿을 함수로 분리한다.
5. 공유하는 화면은 데이터가 있을 때도 있고 없을 때도 있다.
템플릿 설계 기본
데이터 있음 데이터 없음
43. 템플릿 공부 순서
1. 현재 화면을 그린 데이터 보관하는 프론트DB를 만들어 현재 화면이 모두
지워지더라도 프론트DB의 데이터만으로 완벽하게 다시 그릴 수 있게 한다.
2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라
데이터 변환 이벤트 발생시 항상 프론트DB가 업데이트 되어
프론트 DB는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다.
3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며,
DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다.
템플릿 설계 심화 – 데이터 기반 사고
44. 템플릿 공부 순서
1. 현재 화면을 그린 데이터 보관하는 프론트DB를 만들어 현재 화면이 모두
지워지더라도 프론트DB의 데이터만으로 완벽하게 다시 그릴 수 있게 한다.
템플릿 설계 심화 – 데이터 기반 사고
var frontDB = {
sn1 : 10431,
sn2 : 532,
searchKeyword : ‘하코사’
};
DOM이 사라졌다고 데이터까지 손실되면 안됨!
해당 데이터로 다시 호출
load(frontDB);
45. 템플릿 공부 순서
2. 이벤트가 발생하는 순간 필요한 모든 데이터를 수집하는 것이 아니라
데이터 변환 이벤트 발생시 항상 프론트DB가 업데이트 되어
프론트 DB는 가장 마지막에 업데이트된 최신 정보가 항상 존재해야 한다.
템플릿 설계 심화 – 데이터 기반 사고
FrontDB
46. 템플릿 공부 순서
3. 이렇게 관리될 경우 화면을 다시 그릴 때 데이터를 수집할 필요가 없으며,
DOM 손상에 따른 데이터 유실도 걱정할 필요가 없다.
템플릿 설계 심화 – 데이터 기반 사고
var data;
data = {
title : 데이터수집,
city : 데이터수집,
hobby : 데이터수집,
OOOO : 데이터수집,
.......
};
load(data);
이벤트 발생시 데이터 수집 프론트DB관리시
load(frontDB);
항상 최신 데이터가 있음