application.properties 가 상황에 따라 개발환경/ 배포환경 등으로 나눠서 설정이 필요한 경우가 있습니다. 필요 할 떄마다 파일을 수정해가며 하면 번거롭기 때문에 보통 여러개의 프로필을 만들어 두고 필요에 따라 사용하는게 편리합니다. application.yml (혹은 application.properties) 파일은 기본 설정 파일입니다. 후에 application-dev.yml 혹은 application-dep.yml 파일을 생성한다면 dev 혹은 dep가 profile이 됩니다. 그리고 또한 프로필에 들어간 설정들은 기존의 설정을 overwriting합니다. 같은 속성명으로 다른 변수 값을 주면 됩니다. 그럼 이제 새로 만든 프로필로 어플리케이션을 실행하도록 설정하는 방법을 알아보겠..

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는 티스토리가 관리하기 때문..