Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기에 이어지는 글입니다. ​ 이번글에서는 Vue.js 의 기본 Component 중 하나인 Modal 기능을 이용 해 보겠습니다. ​ 전 글에서 만든 게시판 입니다. 아무리 대충 만들었다고 하지만 글 작성이 같은 페이지에 있으니 보기가 참 불편합니다. 글 작성하는 부분을 Modal로 빼 보도록 하겠습니다. ​ Vue.js 공식 홈페이지의 Modal 관련한 부분은 https://vuejs.org/v2/examples/modal.html 에 있습니다. 해당 코드를 그대로 사용 해 보도록 하겠습니다. ​ style.css .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; wi..

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

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

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

안녕하세요. 이클립스 사용하면서 HTML이나 JSP 에서는 자동정렬이 안되는 문제를 확인했습니다. 그 문제에 대한 해결방법을 나누어보겠습니다. Intro 이클립스 사용하면서 다들 한번정도 써보셨을 텐데, Eclipse에는 코드 자동 정렬 기능이 있습니다. !! 코드를 작성 하면서 손쉽게 규격에 맞춰줄 수 있는데요. 사실 자동정렬 기능이 없는 코딩은 상상하기도 싫습니다. 사용 방법은 아래와 같은데요. Mac에서는 Shift + Command + F Windows 에서는 Ctrl + Shift + F 를 입력해서 자동 정렬합니다. 혹시 안써본분 없겠죠?? 그정도로 진짜 모두가 애용하고 사용하는 기능입니다. 특히 Java 코드의 여백, 띄어쓰기, 줄바꿈, 공백 등등 여러가지를 자동으로 맞춰줄때는 참 편리하고 ..