수학과의 개발자 도전기

http 공부하던 중 캐시와 쿠키를 배웠는데, 둘다 작동하는 로직이 똑같다고 여겨져서 구체적으로 어떤 차이가 있는지 구글링했다 

참고한 블로그는 여기

템플릿 엔진

지정된 템플릿 양식과 데이터가 합쳐져 html 문서를 출력하는 소프트웨어. 웹 사이트의 화면을 어떤 형태로 만들지 도와주는 양식 

자바스크립트 작동 영역 != JSP 작동 영역 

서버 템플릿 엔진

서버 템플릿 엔진은 서버에서 구동됨 

서버 템플릿 엔진을 이용한 화면 생성 : 서버에서 Java코드로 문자열 생성 -> 문자열 html로 변환 -> 브라우저에 전달 

자바스크립트는 브라우저 위에서 작동. 자바스크립트가 실행되는 장소는 브라우저. 제어할 수 없음 

vue.js, react.js도 자바스크립트와 마찬가지 

자바 진영에서의 서버 템플릿 엔진들

-jsp,velocity: 스프링 부트에서는 지원하지 않음 

-freemarker : 과하게 많은 기능 제공. 

-thymeleaf: 문법이 어렵다. vue.js 경험(태그 속성 방식)이 있다면 사용해도 됨 

머스테치

html을 만들어주는 템플릿 엔진 다양한 언어를 지원하기 때문에 자바에서는 서버 템플릿 엔진 역할을, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진 역할을 한다 

머스테치의 장점

• 문법이 비교적 심플하다
• 로직 코드를 사용할 수 없어 view역할과 서버의 역할 명확하게 분리 가능
• Mustache.js, Mustache.java 두가지 버전이 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능 
• intellij community 버전에서도  플러그인 사용 가능 

머스테치 스타터로 인해 index controller에서 문자열을 반환할 때 다음이 자동으로 생성된다

• 파일 경로
• 파일 확장자 

프론트엔드 라이브러리를 사용할 수 있는 방법 두가지 

1. 외부 CDN 사용
2. 직접 라이브러리를 받아서 사용 

레이아웃 방식

공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식 

페이지 로딩 속도를 올리기 위해 header에는 css, footer에는 js를 넣음

css는 화면을 그리는 역할이므로 header에, js는 용량이 커질수록 Body 실행이 늦어지므로 body에 넣음 

jquery 다음으로 bootstrap.js이 실행되어야하므로 순서는 jquery -> bootstrap.js(bootstrap이 jquery에 의존한다)

빌드 전에 그레이들 통합 테스트를 하기위해 test를 클릭해 실행했다  

그랬더니 발생한 오류 

구글링해서 찾은 방법으로 했으나 문제는 해결되지 않았다

그러다가 github 찾아보는 도중 찾은 문제

build.gradle밑에 있는 이 문구 때문에 문제가 발생했다. 이거를 없애니 테스트가 정상으로 돌아갔다 

테스트 성공! 

-에러 내용:

review를 불러오는 메소드가 없어서 발생하는 오류라고 생각해 관련 메소드들을 만들었다

• PostsRepository.java

• PostsService.java

• IndexController.java

• bookshelf-bookTitle.mustache

-결과: