전체 글 249

Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기

Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기 ​ Vue.js, SpringBoot, PostgreSQL, Hibernate 중 익숙하지 않은 기술이 있는 분은 아래의 두 포스팅을 먼저 참고하시면 코드를 좀 더 쉽게 읽으실 수 있습니다. Vue.js 사용 하기 1 ) 기본 문법 윗 글에 이어지는 글입니다. SpringBoot + PostgreSQL + Hibernate ) 간단한 게시판 만들기 해당 글에서 SpringBoot + PostgreSQL + Hibernate 로 만들어둔 간단 게시판 api를 활용해서 Vue.js 로 화면을 만들어 보겠습니다. ​ 이번에는 Vue.js 를 이용해 아주 간단한 게시판 페이지를 렌더링 해 보도록 하겠습니다. ​ 전체적인 패키지 구조는 ..

Vue.js 사용 하기 1 ) 기본 문법

Vue.js 사용 하기 1 ) 기본 문법 ​ ​ Vue.js란? 공식 홈페이지에서 Vue.js는 유저인터페이스를 만들기 위한 진보된 프레임워크라고 소개하고 있습니다. 핵심 라이브러리는 오직 view layer 에 포커스가 맞춰져 있습니다. 사용하기 쉽고 다른 라이브러리들이나 이미 생성된 프로젝트들과도 쉽게 통합 할 수 있습니다. 또한 최신 기술들과 지원하는 라이브러리들과 함께 사용한다면 정교한 단일 페이지 어플리케이션을 만들 수도 있다고 합니다. 개발자들에게 익숙한 프로그래머스 또한 Vue.js로 개발되었습니다. 스프링 부트 프로젝트를 하나 생성해보도록 하겠습니다. 사실 Vue.js는 자바스크립트 프레임워크기 때문에 Node.js 를 쓰건 SpringBoot를 사용하건, 아니면 아에 그냥 .html 파일..

티스토리 다크모드 적용하기

블로그에 들어올 때 마다 새하얀 화면에 너무 눈이 부셔서 다크모드를 적용하기로 했습니다. 쉽지 않은 작업이 될 거라고 생각은 했지만 세부적으로 워낙에 신경쓸 부분이 많기 때문에 생각보다 시간이 제법 소요되었습니다. 간단하게 설정을 변경한다고 끝나는 문제가 아니고 일반모드/ 다크모드 각각의 개별 css를 따로 부여해야 합니다. 단순하게 색반전을 할 수도 있지만 완성도를 위해서는 한땀 한땀 정성이 많이 들어갑니다. ​ 다크모드 적용에 앞서 CSS 에 대한 기본 지식이 있어야합니다. 사실 color만 변경하기 때문에 그렇게 어려운 내용은 아니지만 최소 html 이나 css를 접해 본 적은 있어야 합니다. 글 작성/ 수정 블로그 관리 화면은 변경이 되지 않습니다. 해당 부분들의 css는 티스토리가 관리하기 때문..

Eclipse, STS ) HTML, JSP 에서도 코드 자동정렬 예쁘게 하기

Eclipse, STS ) HTML, JSP 에서도 코드 자동정렬 예쁘게 하기 이클립스 사용하면서 다들 한번정도 써보셨을 텐데, Eclipse에는 코드 자동 정렬 기능이 있습니다. Mac에서는 Shift + Command + F Windows 에서는 Ctrl + Shift + F 를 입력해서 자동 정렬합니다. 특히 Java 코드의 여백, 띄어쓰기, 줄바꿈, 공백 등등 여러가지를 자동으로 맞춰줄때는 참 편리하고 좋습니다. 만약 이런식으로 작성된 코드가 있다면, 해당 단축키를 입력 했을때, 이렇게 코드를 깔끔하게 변경 해 줍니다. 특히 여러사람이 함께 코드를 작성할 때 특별히 코드 컨벤션이 정해 져 있지 않으면 서로의 코드를 볼때 굉장히 눈에 안들어오고 피로감을 호소 할 수 있는데, 그럴 때 다함께 comm..

Spring 에서 페블 템플릿 Pebble template 사용하기 2 ) Spring boot 프로젝트에서 사용하기

Spring 에서 페블 템플릿 Pebble template 사용하기 2 ) Spring boot 프로젝트에서 사용하기 https://shanepark.tistory.com/197 글에 이어지는 내용입니다. 본 포스팅은 https://pebbletemplates.io/wiki/guide/spring-boot-integration/ 를 토대로 작성되었습니다. ​ 일단 스프링 부트 프로젝트를 생성 합니다. Spring Starter를 이용하면 쉽게 생성 할 수 있습니다 ​ Maven 프로젝트로 생성 했지만 Gradle로 해도 무관합니다. 적당한 Location에 적당한 이름으로 프로젝트를 생성합니다. ​ 간단하게 Sprinig Web만 추가해서 생성하겠습니다. ​ Finish 를 눌러 프로젝트를 생성 합니다...

반응형