14.1 자바 스크립트 템플릿 엔진 도입 : Handlebars 템플릿 엔진 적용
Handlebars 자바스크립트 라이브러리 추가 (/src/main/resources/static)
14.1 자바스크립트 템플릿 엔진
javascript template engine 검색
MyBatis는 SQL template engine
https://colorlib.com/wp/top-templating-engines-for-javascript/
/Users/nana/git/bitcamp-study/mylist-boot/app/src/main/resources/static
https://handlebarsjs.com/installation/#npm-or-yarn-recommended
npm install handlebars
dist : distribution
<script src="../node_modules/handlebars/dist/handlebars.min.js"></script>↑ 이 자바스크립트 파일에 Handlebars 라는 이름으로 객체를 정의해놓음
// 템플릿 엔진 준비
var template = Handlebars.compile("<p>{{name}} 님 반갑습니다!</p>");
// 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
var obj = new Object();
obj.name = "홍길동";
var str = template(obj);
console.log(str);
sql 코드를 xml 파일에 분리시키는 거랑 똑같음
https://handlebarsjs.com/installation/#usage
script 태그로 감싼다
나중에 사용할 html 코드 일부를 별도로 분리하는 용도로 쓴다
<script>
<p>{{name}} 님 반갑습니다!</p>
</script>
script 태그 안에 자바스크립트 코드 있는 줄 알았는데 아니어서 에러 냄
script 태그 안에는 js 코드
기본은 type="text/javascript"
<script type="text/ohora">
<p>{{name}} 님 반갑습니다!</p>
</script>type="text/ohora"
ohora 라고 쓰면 다른 개발자가 혼동할 수 있음
의미있게 이름을 써야 함
<script type="text/x-handlebars-template">
<p>{{name}} 님 반갑습니다!</p>
</script>type="text/x-handlebars-template"
텍스트는 텍스트인데 자바스크립트는 아니므로 무시해버린다
웹 브라우저는 화면에 출력하지 않고 무시해버린다
script 태그에 id를 부여한다
id="template1"
<script id="template1" type="text/x-handlebars-template">
<p>{{name}} 님 반갑습니다!</p>
</script> // 템플릿 엔진에서 사용할 HTML 조각을 가져오기
var tamplate1 = document.querySelector("#template1");
console.log(template1.innerHTML);
script 태그 안에 있는 html을 넘긴다
Handlebars.compile(template1.innerHTML)
이제 자바스크립트 안에 html은 없다
// 템플릿 엔진에서 사용할 HTML 조각을 가져오기
var tamplate1 = document.querySelector("#template1");
// 템플릿 엔진 준비
var template = Handlebars.compile(template1.innerHTML);이름 변경
template → htmlGenerator
// 템플릿 엔진에서 사용할 HTML 조각을 가져오기
var tamplate1 = document.querySelector("#template1");
// 템플릿 엔진 준비
var htmlGenerator = Handlebars.compile(template1.innerHTML);
// 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
var obj = {
name: "임꺽정"
};
var str = htmlGenerator(obj);
console.log(str);
실무에서는 변수를 따로 안 만들고 파라미터에 객체를 바로 넘긴다
// 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
var str = htmlGenerator({
name: "임꺽정"
});템플릿 엔진의 파라미터 값으로 자바스크립트 객체를 넘기는데 그 객체 안에는 template 안에 들어갈 값을 담고 있어야 한다
// 템플릿 엔진에서 사용할 HTML 조각을 가져오기
var tamplate1 = document.querySelector("#template1");
// 템플릿 엔진 준비
var htmlGenerator = Handlebars.compile(template1.innerHTML);
// 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
var str = htmlGenerator({
name: "임꺽정"
});
console.log(str);id 이름 변경
template1 → tr-template
값이 들어갈 자리에 중괄호 2개 적기 {{ }}
<script id="tr-template" type="text/x-handlebars-template">
<tr>
<td>{{no}}</td>
<td><a href="view.html?no={{no}}">{{name}}</a></td>
<td>{{email}}</td>
<td>{{tels.[0].tel}}</td>
<td>{{company}}</td>
</tr>
</script>id="tr-template"
fetch("/contact/list")
.then(function(response) {
return response.json();
})
.then(function(contacts) {
var tbodyContent = "";
for (var contact of contacts) {
// 값이 들어있는 객체를 가지고 템플릿 엔진을 실행하여 HTML을 생성한다.
var str = htmlGenerator(contact);
tbodyContent += str;
}
tbody.innerHTML = tbodyContent;
});굳이 반복문을 돌리면서 tr 태그를 만들지 말고
https://handlebarsjs.com/guide/builtin-helpers.html#each
this는 파라미터 객체를 가리킨다
배열에서 한 개를 꺼내서 실행
fetch("/contact/list")
.then(function(response) {
return response.json();
})
.then(function(contacts) {
// 서버에서 받은 연락처 배열을 가지고 템플릿 엔진을 실행하여 tbody 콘텐트를 생성한다.
tbody.innerHTML = htmlGenerator(contacts);
});자바스크립트 안에 html 코드가
카드는 div 태그
div 태그 안에 이미지
15.1 MyBatis 고급 기능 활용 : 테이블 조인과 동적 SQL 다루기
select
c.contact_no,
c.name,
c.email,
c.company,
t.ct_no,
t.tt_no,
t.tel
from
ml_contact c
left outer join ml_cont_tel t on c.contact_no=t.contact_no
order by
c.name asc
15.1 MyBatis 고급 기능
90-MyList프로젝트2 / 43 페이지
① 테이블 조인과 자바 객체
(연락처) (전화번호)
연락처
new Contact()
같은 데이터의 경우 한 개의 객체만 생성
전화번호
new ContactTel()
데이터당 한 개의 객체 생성
new Contact() - new ContactTel() ← 포함 관계 (aggregation)
연락처가 전화번호를 포함한다
<resultMap type="contact" id="contactMap">
<id column="contact_no" property="no"/>
<result column="name" property="name"/>
<result column="email" property="email"/>
<result column="company" property="company"/>
<collection property="tels" ofType="contactTel">
<id column="ct_no" property="no"/>
<result column="tt_no" property="telTypeNo"/>
<result column="tel" property="tel"/>
</collection>
</resultMap>MyBatis가 자동으로 만든다
Contact 객체는 하나만 만든다
ContactTel 객체는 3개를 만든다
리스트에 담아서 List<Contact> tel에 꽂는다
http://localhost:8080/contact/list
전화번호가 없는 사람은 어떻게 될까
반드시 outer join을 해야 유관순 데이터도 나온다
http://localhost:8080/contact/index.html
select
c.contact_no,
c.name,
c.email,
c.company,
t.ct_no,
t.tt_no,
t.tel
from
ml_contact c
left outer join ml_cont_tel t on c.contact_no=t.contact_no
where
c.contact_no=#{no}
select를 여러 번 하는 것보다 join 하는 게 시간이 적게 걸린다
기존의 insert문은 데이터 1개만 추가할 수 있음
<insert id="insertTel" parameterType="ContactTel">
insert into ml_cont_tel(contact_no, tt_no, tel)
values(#{contactNo}, #{telTypeNo}, #{tel});
</insert>한 번에 여러 개 추가할 수 있게 하자
ContactDao 인터페이스에 insertTels() 메서드 추가
int insertTels(List<ContactTel> tels);https://mybatis.org/mybatis-3/dynamic-sql.html
<insert id="insertTels" parameterType="list">
insert into ml_cont_tel(contact_no, tt_no, tel)
values
<foreach collection="list" item="tel" separator=",">
(#{contactNo}, #{telTypeNo}, #{tel})
</foreach>
</insert>ContactDao 인터페이스
int insertTels(@Param("contactNo") int contactNo, @Param("tels") List<ContactTel> tels);@Param("contactNo") ← SQL Mapper에서 사용할 이름
@Param("tels") ← SQL Mapper에서 사용할 이름
<insert id="insertTels">
insert into ml_cont_tel(contact_no, tt_no, tel)
values
<foreach collection="tels" item="tel" separator=",">
(#{contactNo}, #{telTypeNo}, #{tel})
</foreach>
</insert> <insert id="insertTels">
insert into ml_cont_tel(contact_no, tt_no, tel)
values
<foreach collection="tels" item="contactTel" separator=",">
(#{contactNo}, #{contactTel.telTypeNo}, #{contactTel.tel})
</foreach>
</insert><foreach collection="tels" item="contactTel" separator=",">
tels 에서 하나 꺼낸 걸 contactTel 이라고 하겠다
@Override
@Transactional // 다음 메서드는 트랜잭션 안에서 실행하도록 설정한다.
public int add(Contact contact) {
contactDao.insert(contact);
contactDao.insertTels(contact.getNo(), contact.getTels());
return 1;
}
입력한 개수만큼 동적으로 SQL문 생성
@Override
@Transactional
public int update(Contact contact) {
int count = contactDao.update(contact);
if (count > 0) {
contactDao.deleteTelByContactNo(contact.getNo()); // 전화번호 변경 전에 기존 전화번호를 모두 삭제한다.
contactDao.insertTels(contact.getNo(), contact.getTels());
}
return count;
}https://mybatis.org/mybatis-3/dynamic-sql.html
if문은 우리에게 맡기겠음..
세션을 사용해서 로그인
파일 업로드
facebook 로그인
