Software Engineer, Java, Spring Boot, JAX-RS REST API, OAuth 2.0, Microservice, DevOps

1% 부족한 select 엘러먼트 HTML5에서는 select 엘러먼트를 이용하여 ComboBox 컨트롤을 구현할 수 있다. 하지만 기본 엘러먼트만으로는 기대치가 높은 사용자의 까다로운 요구를 수용하기에 기능이 너무 부족하다.(사실 이 글을 작성하게 된 계기도 사용자의 자동완성 기능 구현 요구 때문이었다.^^) 이런 select 엘러먼트의 부족한 기능을 강화시켜주는 애드온 성격의 라이브러리가 많은데 이번 글에서는 많이 사용되는 Select2 라이브러리의 기본적인 사용법을 설명하고자 한다. Select2 특징 본격적으로 사용법을 정리하기에 앞서 Select2 라이브러리의 기본적인 특징은 아래와 같다. 자동완성(AutoComplete)과 AJAX를 이용한 원격 데이터 불러오기가 가능하다. 자동완성의 경우 한..

IDE에서 제공하는 구문 강조 기능을 블로그에도 적용해보자 우리는 대부분 소스 코드를 작성할 때 IDE에서 제공하는 미려한 화면에서 코드를 작성한다. 하지만 블로깅 또는 위키 문서 작성시 구문 강조(Syntax Highlighting) 기능이 적용되지 않아 가독성이 심각하게 떨어진다. 이번 글에서는 Prism이라는 초경량의 강력한 기능을 가진 구문 강조(Syntax Highlighter) 라이브러리를 이용하여 티스토리 블로깅시 소스 코드에 문법 강조 기능을 적용하는 방법을 설명하고자 한다. 라이브러리 다운로드 여기를 클릭하여 Prism 홈페이지에 접속한 후 DOWNLOAD 버튼을 클릭한다. 테마 및 지원 언어를 커스터마이징하는 화면이 나온다. 테마는 본인의 취향에 따라 고르고 (나는 어두운 계열의 Oka..

JavaScript 공부, Bootstrap과 함께 시작해보자 JavaScript를 공부하는데 있어 가장 중요한 것은 자주 많이 코드를 작성해봐야 한다는 것이다. 하지만 Hello, World! 문구 하나를 찍더라도 화면에 출력하는 방법은 천차만별인 법이다. 나는 JavaScript를 처음 공부하는 사람에게 Bootstrap을 기반으로 코드를 작성할 것을 추천한다. 마치 Java 입문시 콘솔보다는 Swing을 이용하여 Hello, World!를 화면에 출력하는 것과 같은 이치이다. 기본 뼈대 페이지 작성하기 Bootstrap 3 기반의 기본 뼈대 페이지는 아래와 같다. 문서의 구조는 전형적인 HTML5 구조이다. 문자셋은 UTF-8이기 때문에 파일 저장시 UTF-8로 저장해야 한글이 깨지지 않는다. jQ..

반응형이냐 고정형이냐의 고민 Bootstrap 3 환경에서 Table 엘러먼트를 구현시 반응형(responsive)으로 할 것이냐 고정형(fixed)으로 할 것이냐를 고민할 때가 많다. 대세는 반응형이라고 하지만 기업에서 구현하는 시스템의 대부분은 상당히 많은 수의 컬럼을 가진 데이터를 화면 상의 테이블에 출력해야 하는 경우가 많기 때문에 반응형으로 구현하는데 한계가 있다. 이 글에서는 Bootstrap 플랫폼에서 Table 을 반응형 또는 고정형으로 구현하는 방법을 설명하겠다. 첫째, 반응형으로 구현하기 테이블을 반응형으로 구현하는 것은 어렵지 않다. Bootstrap 공식 레퍼런스에서 제시하는 방법은 아래와 같다. 가장 많이 사용하는 방법이다. ... 첫째, 테이블을 구현할 table 엘러먼트에 ta..