책을 읽으면서 공부한 내용입니다.
책 제목: 스프링 부트와 AWS로 혼자 구현하는 웹 서비스
4장에서 배운 내용 (책 162쪽)
4-1. 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이
4-2. 머스테치의 기본 사용 방법
4-3. 스프링 부트에서의 화면 처리 방식
4-4. js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법
4-5. js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법
4-1. 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이
템플릿 엔진: 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어이다.
쉽게 말해 웹 사이트의 화면을 어떤 형태로 만들지 도와주는 양식이다.
서버 템플릿 엔진: Spring+JSP, Freemaker, ... - 서버에서 구동된다
클라이언트 템플릿 엔진: View - 브라우저에서 작동된다
-
서버 템플릿 엔진을 이용한 화면 생성
서버에서 Java 코드를 문자열로 만든 뒤(서버에서 화면 생성) 이 문자열을 HTML로 변환하여 브라우저로 전달한다. -
클라이언트 템플릿 엔진을 이용한 화면 생성
서버에서는 Json, Xml 형식의 데이터만 전달하고 이를 클라이언트에서 조합(브라우저에서 화면 생성)한다.
머스테치: 수많은 언어를 지원하는 가장 심플한 템플릿 엔진
다른 템플릿 엔진과 비교했을 때 머스테치의 장점은 다음과 같다.
- 문법이 상대적으로 심플
- 로직 코드를 사용할 수 없어 뷰 역할과 서버 역할의 명확한 분리 가능
- Mustache.js, Mustache.java 2가지가 있어 하나의 문법으로 클라이언트/서버 템플릿 모두 사용 가능
머스테치 플러그인은 인텔리제이 커뮤니티 버전에서도 사용할 수 있다.
4-2. 머스테치의 기본 사용 방법
build.gradle에 머스테치 의존성 추가
compile('org.springframework.boot:spring-boot-starter-mustache')머스테치 파일 위치는 기본적으로 src/main/resources/templates이다. 이곳에 머스테치 파일을 두면 스프링 부트에서 자동으로 로딩한다.
4-3. 스프링 부트에서의 화면 처리 방식
프론트엔드 라이브러리를 사용할 수 있는 방법
- 외부 CDN 사용
- 직접 라이브러리를 받아서 사용
책에서는 첫 번째 방법을 사용하고 있다. 2개의 라이브러리 부트스트랩과 제이쿼리를 index.mustache에 추가하는데, 이때 레이아웃 방식을 사용한다.
레이아웃 방식: 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식
추가할 라이브러리들인 부트스트랩과 제이쿼리가 머스테치 화면 어디서나 필요하기 때문에 레이아웃 파일을 만들어 추가해두면 효율적이다.
src/main/resources/templates에 layout 디렉토리를 생성하여 footer.mustache, header.mustache 파일을 생성한다.
4-4. js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법
footer.mustache, header.mustache 파일에서 css와 js 코드의 위치가 서로 다르다. css는 header, js는 footer에 위치한다. 이는 페이지의 로딩속도를 높이기 위함이다.
HTML는 위에서부터 코드가 실행되기 때문에 head가 다 실행되고서야 body가 실행된다. 즉 head가 다 불리지 않으면 사용자 쪽에서는 백지만 노출도기 때문에 js를 body 하단에 두어 화면이 다 그려진 후 호출하는 것이 좋다.
또 bootstrap.js는 제이쿼리가 꼭 있어야만 하기 때문에 부트스트랩보다 먼저 호출되도록 코드를 작성한다. -> bootstrap.js가 제이쿼리에 의존한다
4-5. js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법
문제: 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 init, save 등의 함수가 이전에 로딩된 js의 함수를 덮어쓰게 된다. -> 중복된 함수 이름이 있을 때 문제가 된다
해결: var index라는 객체를 생성하여 객체에서 필요한 모든 함수를 선언한다. index 객체 안에서만 함수가 유효하기 때문에 다른 js와 겹칠 위험이 사라진다.
