카페코더

var index = { init : function () { var _this = this; $('#btn-save').on('click', function { _this.save; }); }, save : function () { var data = { title: $('#title').val(), author: $('#author').val(), content: $('#content').val() }; $.ajax({ type: 'POST', url: '/api/v1/posts', dataType: 'json', contentType: 'application/json; charset=utf-8', data: JSON.stringify(data) }).done(function() { alert("글이..

개인 공부/Frontend 2020. 6. 24. 18:57

{{>layout/header}} 스프링 부트로 시작하는 웹 서비스 {{>layout/footer}} 코드를 보면, css와 js의 위치가 서로 다르다. 페이지 로딩속도를 높이기 위해 css는 header에, js는 footer에 둔다. HTML은 위에서부터 코드가 실행되기 떄문에, head가 다 실행되고서야 body가 실행된다. 즉, head가 다 불러지지 않으면 사용자 쪽에선 백지 화면만 노출된다. 특히 js의 용량이 크면 클수록 body부분의 실행이 늦어지기 때문에 js는 body하단에 두어 화면이 다 그려진 뒤에 호출하는 것이 좋다. 반면, css는 화면을 그리는 역할이므로, head에서 불러오는 것이 좋다. css가 늦게 호출된다면, 사용자는 css가 적용되지 않은 깨진 화면을 볼 수 있기 때문..

개인 공부/Frontend 2020. 6. 24. 18:25

부트스트랩, 제이쿼리 등 프론트엔드 라이브러리를 사용하는 방법은 크게 2가지다. 그 2가지에 대해 포스팅한다. 1. 외부 CDN을 사용 실제 서비스에서는 이 방법을 잘 사용하지 않는다. 이유는 장, 단점으로 서술하겠다. 장점 프로젝트에 직접 내려받아 사용할 필요가 없다. 사용 방법도 HTML/JSP/Mustache에 코드만 한 줄 추가하면 될 정도로 간단하다. 단점 실제 서비스에서 이 방법을 잘 사용하지 않는 이유다. 외부 서비스에 우리 서비스가 의존하게 되어버린다. CDN을 서비스하는 곳에 문제가 생기면, 덩달아 같이 문제가 생긴다. 2. 직접 라이브러리를 받아 사용한다. 장점 높은 재사용성 CDN의 단점 방지 단점 라이브러리를 사용하는데 지식이 필요하다.

개인 공부/Frontend 2020. 6. 24. 18:13

@Controller public class IndexController { @GetMapping("/") public String index() { return "index"; } } 머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는 자동으로 지정된다. 앞의 경로는 src/main/resources/templates로, 뒤의 파일 확장자는 .mustache가 붙는다는것이다. "index"를 반환하므로, src/main/resources/templates/index.mustache로 전환되어 View Resolver가 처리하게 된다. ViewResolver는 URL요청의 결과를 전달할 타입과 값을 지정하는 관리자 격으로 볼 수 있다.

개인 공부/Frontend 2020. 6. 24. 17:44

HTML + Mustache Template 템플릿 엔진 일반적으로 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 말한다. JSP, Freemarker, React, Vue 등을 떠올릴 수 있다. 모두 결과적으로 지정된 템플릿과 데이터를 이용하여 HTML을 생성하는 템플릿 엔진이다. 참고로, JSP, Freemarker는 서버 템플릿 엔진, React, Vue는 클라이언트 템플릿 엔진이다. Mustache 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다. 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어를 지원한다. 이런 이유로 필자는 SpringBoot 개발 시 머스태치 템플릿 엔진을 사용한다. ..

개인 공부/Frontend 2020. 6. 24. 17:20