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..

최종프로젝트를 진행하며, 막바지에 추가했던 '단축키' 기능입니다. 생각보다 어렵지는 않은데 발표할때 반응은 꽤나 좋았던 걸로 기억합니다. 실제로 싱글페이지로 웹 어플리케이션을 설계 하면서, 그 난이도 상승에 비해 얻은 설계상 이점이 크지 않다고 느꼈지만 반대로 싱글페이지가 아니었으면 추가하지 못했을 기능 중 하나 입니다. ( 뭐 억지로 할라면 했겠지만 싱글페이지가 아니라면 그 의미가 떨어지는 기능입니다) 아이디어와 디자인 단축키 아이디어는 Google Docs와 Figma 에서 얻었습니다. 요즘 왠만한 어플리케이션들은 정말 전부 웹에서 자유자재로 실행할 수 있게끔 세상이 흘러가고 있다고 생각되는데요, 우연히 단축키 기능을 찾게 되었는데 이게 정말 웹 어플리케이션을 사용하고 있다는 사실을 잊..

저는 한국어가 참 어려운 언어라고 생각합니다. 특히나 우리는 자연스럽게 을/를 , 로/으로 등을 붙여서 사용하지만, 컴퓨터는 그렇지 못합니다. 외국인들도 참 어렵게 느끼는 부분입니다. 위에서 보이는 것 처럼 을/를 로/으로 를 구분하지 못해서 참 어색하게 출력되는 부분이 있습니다. 이 부분을 해결 해 보려고 합니다. 일단 받침이 있는 단어인지 아닌지를 먼저 체크해주는 함수를 만듭니다. // 받침이 있는 문자인지 테스트 해주는 함수 입니다. const isSingleCharacter = function(text) { var strGa = 44032; // 가 var strHih = 55203; // 힣 var lastStrCode = text.charCodeAt(text.length-1); if(lastS..