수월한 IT

안녕하세요 IT여행자입니다. 이번 수첩은 spring boot에서 websocket을 사용한 채팅을 구현해 보려고 합니다. spring boot에서 mvc를 구현하기 위한 초기 설정 단계가 좀 복잡해 보여 전체적으로 복잡하고 어려워 보이지만, 핵심적인 내용은 WebSocket을 사용하기 위한 @ServerEndpoint 어노테이션이 붙은 컨트롤 클래스와 WebSocket에 관한 환경 설정 파일이 주된 내용이라 볼 수 있습니다. spring boot의 mvc 패턴의 설정 과정이 그리 어렵지 않게 느껴지는 독자라면 너무도 쉽게 알 수 있는 내용이며, mvc를 구현해 보지 않은 독자라도 차근차근 따라가면서 작업하면 그리 어렵지 않게 완성할 수 있으며 이를 응용할 수 있을 것입니다. 개발 환경 본 문서를 작성할..

- mvc 패턴까지 내용은 https://jobtc.tistory.com/57(Spring Boot에서 MVC 초간단 설정) 참고하시고 그 이후의 작업부터 진행합니다. - mysql은 설치되어 있어거나 계정이 있어야 합니다. - jstl도 사용하도록 설정합니다. (샘플 코드내에서는 사용하지 않음) 1. dependency 추가 pom.xml에 아래의 dependency들을 추가합니다. 두 번째에 있는 mybatis-spring-boot-starter로 추가하지 않으면 mybatis가 정상적으로 인식되지 않을 수 있습니다. … javax.servlet jstl 1.2 org.mybatis.spring.boot mybatis-spring-boot-starter 2.1.4 mysql mysql-connecto..

안녕하세요 IT여행자입니다. 이번 수첩에서는 Spring Boot을 사용하는 환경에서 MVC 패턴의 개발환경을 아주 재빠르게 설정해 보는 과정을 적을까 합니다. 물론 기본적으로 웹 개발의 경험이 있어야 하겠지요~ 1. spring suite 4 플러그인 설치 이클립스 marketplace에 가서 spring suite 4 버전의 플러그인을 설치합니다. 설치가 종료되면 이클립스가 다시 시작됩니다. 2. Spring starter Project 생성 spring suite 4 플러그인이 설치되어 있으면 file>new>other>spring>spring starter project 메뉴가 추가되어 있습니다. 이를 사용하여 프로젝트를 생성합니다. 기본 패키지는 kr.jobtc로 하겠습니다. 프로젝트를 생성할 ..

다양한 Database 클라이언트 유무료 툴들이 존재하지만, 간단한 쿼리 작업등을 하기 위해 굳이 별도의 클라이언트 툴을 설치하기 싫다면 이클립스 기능 중 하나인 Data Management를 사용하여 데이터베이스 연결하고 쿼리를 실행할 수 있습니다. 현재 사용하고 있는 대부분의 DBMS를 연결할 수 있지만, 본 지면에서는 MySQL을 예로 들어 보겠습니다. 물론 사용하려는 MySQL은 로컬이든 원격지든 설치되어 있고, 사용권한이 있는 계정은 있어야 합니다. 또한 사용하려는 버전의 JDBC 드라이버도 이클립스를 사용하고 있는 로컬 컴퓨터에 다운로드되어 있어야 합니다. 따라서 본 지면에서는 JDBC 다운로드부터 진행하도록 하겠습니다. JDBC Driver 다운로드 mysql.com 사이트를 방문한 뒤, 메..

Database와 같은 서버용 프로그램들은 설치와 제거가 일반 애플리케이션과 비교하여 많은 제약들이 걸려있는 경우가 많습니다. 간혹 필요가 없어 제거하려 해도 단순히 프로그램 제거와 같은 하나의 메뉴를 사용하여 제거해도 완전히 제거되지 않는 경우도 발생합니다. 또한, Database는 위와 같은 경우를 비롯하여 저장된 데이터를 다른 저장 장치로 복사하는 것도 쉽지 않습니다. 이는 데이터의 보안과 관계가 매우 깊습니다. 일반 파일들과 같이 쉽게 복사하여 사용할 수 있게 된다면 아무리 보안에 신경 써서 데이터를 저장하다고 하더라도 그 의미가 쉽게 퇴색되기 때..

안녕하세요 IT여행자입니다. 이번 여행자 수첩은 Firefox 브라우저의 cache 기능을 활성화하거나 비활성화하는 방법에 대한 내용입니다. 일반적으로는 빠를 처리 속도와 중복되는 패킷 정보를 수신하지 않기 위해 cache 기능은 반드시 필요한 기능입니다. 그러나 개발자의 입장에서는 여간 불편한 내용이 아닐 수 없습니다. 특히나 css부분의 수정을 계속해나가야 하는 과정에 있다면 cache 때문에 탈모 증상을 겪을 수도 있을 것입니다. Firefox가 갖고 있는 cache 기능을 비활성화해 봅시다. 1. 먼저 브라우저를 열고, 주소 입력란에 'about:config'라고 입력합니다. 그러면 위험한 작업인데도 계속할 거냐 라는 경고 메시지와 함께 버튼이 나오게 되는데 버튼을 클릭합니다. 2. 검색창에 'b..

안녕하세요. IT 여행자입니다. 이번 여행자 수첩은 USB나 이동 디스크에 MySQL Server를 설치하는 방법입니다. 실제 프로젝트에 사용하기에는 적절하지 않으나 테스트용 프로젝트에서 사용하거나, 컴퓨터를 바꾸어 가면서 MySQL을 사용해야 하는 상황에서는 매우 적절한 방법이 아닐까 합니다. 물론 SQLite와 같이 임베디드용 데이터베이스를 사용할 수 도 있지만, 임베디드용 데이터베이스들은 대부분 멀티 스레드나 다중 접속 시 많은 제한들이 있는 게 사실일 것입니다. 또한 설치된 데이터베이스에 저장된 데이터들을 다른 기기에 복사해서 사용하기엔 복잡한 과정을 거쳐야 사용 가능합니다. 이런 측면에서 손쉽게 데이터와 서버 전체를 복사해 컴퓨터들을 바꾸어 가면서 사용할 수 있다는 것은 매우 매력적인 요소일 것..

안녕하세요 IT여행자입니다. 데이터를 구조화 시키기 위해 xml 형식을 사용했었지만, 이제는 JSON 형식으로 처리하는것이 일반화 된것 같습니다. 이번 포스팅은 JSON.simple 라이브러리를 사용하여 JSON형태의 자료를 Java Object로, Java Object를 JSON 형태로 변환하여 사용하는 방법입니다. 테스트 환경은 eclipse와 Java를 사용하여 테스트해 보겠습니다. [목차] 라이브러리 설치 및 JSON문자열을 JSONObject로 변환 JSON문자열을 Java Object로 변환 JSONObject를 JSON 문자열로 변환 라이브러리 설치 다양한 방법으로 라이브러리를 설치할 수 있지만 본 포스팅에서는 mvnrepository.com 사이트를 통해 라이브러리를 설치해 보도록 하겠습니..

안녕하세요. IT여행자입니다. 진행하던 프로젝트를 서로 다른 컴에서 사용하려고 가끔 war 파일로 배포 파일을 생성하여 다른 컴에서 import 작업할 때 Dynamic Web Module 때문에 오류가 발생하여 실행되지 않는 경우가 종종 발생합니다. 아래의 그림은 프로젝트의 Properties 화면입니다. 오른쪽의 빨간색 사각형을 보면 현재 프로젝트가 사용하고 있는 Dynamic Web Module번호가 표시되어 있는데 Version 이 3.1로 되어 있습니다. 이번호에 해당 하는 모듈이 프로젝트에 존재하지 않기 때문입니다. 기존에 사용하던 모듈 버전으로 바꾸려면 프로젝트 폴더 > .settings > org.eclipse.wst.common.project.facet.core.xml 파일을 열어 모듈 ..

안녕하세요~ IT여행자입니다. 이번 수첩은 오라클을 무료로 경험할 수 있는 버전 중 하나인 18 cXE버전의 설치와 샘플 데이터 테이블을 생성해 보는 여행자 수첩입니다. 먼저 오라클 사이트(http://www.oracle.com) 방문하여 로그인 한후, 18 cXE버전을 다운로드하여 설치해야 합니다. 파일은 압축파일 형태로 제공하고 있기 때문에 압축을 해제한 후, 해제된 폴더 안에 있는 setup.exe를 실행하면 됩니다. 오라클 사이트는 다른 사이트들에 비해 홈페이지가 굉장히 자주 리뉴얼되고 있기 때문에 다운로드 받을다운로드할 파일들이 어느 메뉴에 포함되어 있을지는 예측하기 매우 어렵습니다. 다운로드할 수 있는 메뉴를 캡처받아 포함시킬 수도 있지만 큰 의미가 없어 보입니다. 차라리 오라클 사이트를 방문..

안녕하세요. IT여행자입니다. 이번 여행지는 JavaScript를 사용하여 file 태그에 의해 선택된 이미지를 미리 보는 작업을 해볼까 합니다. HTML5가 이제 보편적으로 사용되면서 하나의 file 태그에 의해 하나 이상의 파일들을 한 번에 선택할 수 있게 되었습니다. 아직 몇몇 파일 다운로드 API 중에는 file 태그의 multiple 속성을 사용할 수 없는 것도 있지만 버전업이 되지 않는다면 시장에서 도태되겠지요~ 여담이지만, 우리나라도 이제 것 IE에 종속적이었기 때문에 web 개발 능력이 한없이 IT 선진국에 비해 뒤쳐져있는 건 사실일 것입니다. 아니, 정확히 이야기하면 신기술을 사용하지 못하고 그저 IE의 특성만을 답습하다 보니 우리도 모르게 세계 시장에서 도태된 것일 겁니다. 사설 끊고~..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 사용하여 서버에 있는 정보를 실시간으로 검색하여 전체 화면을 새로 고치지 않고 검색된 정보를 화면에 표시해 보도록 하겠습니다. 실제로는 데이터를 Database를 통해 받아야 하겠지만, 코드의 간결함과, 프로세스의 단순함을 위해 검색할 데이터를 서버 페이지의 Collection에 저장한 후 데이터를 가져와 클라이언트 화면에 표시하도록 하겠습니다. [시연 영상] 전체 화면 새로고침없이 응답정보 표시 1. 데이터 시트 아래와 같은 데이터를 자바의 Map 구조로 저장할 것입니다. 구분 요소 산이름 백수산, 금강산, 치악산, 설악산, 지리산, 내장산 강이름 한강, 낙동강, 금강, 한탄강, 두만강, 대동강, 섬진강 꽃이름 장미,..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 CSS와 JavaScript만을 사용하여 모달 박스를 만들어 암호를 입력하도록 해 보겠습니다. iframe이나 새창을 띄워서 모달 형태의 박스를 구현하는 방법도 있지만 쓰임새에 따라 각각의 장단점들이 있겠습니다. 여기서 모달 박스란 반드시 어떤 작업을 해야 하거나, 승인 또는 거부를 한 후 다음 작업이 진행되도록 하기 위해 사용될 것입니다. [시연 장면] 암호 입력을 위한 모달창 시연 1. HTML 작업 먼저 모달이 필요한 페이지와 모달을 구현할 페이지를 작성합니다. 암호를 입력하려면 버튼을 클릭해 주세요. 암호를 입력하세요 CSS를 구현하기 이전이기 때문에 아마도 아래와 같은 화면이 출력될 것입니다. 여기서 id='modal'로..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 작은 IT구슬은 이클립스의 코드 자동 완성 기능입니다. 이클립스가 언제부터인가 코드 자동 완성 기능에 대하여 그리 신경 쓰지 않고 있다는 생각이 드네요. 아마도 이런 요소들 때문에 급격히 VSC(Visual Studio Code)에게 밀리고 있지 않나 생각해 봅니다. VSC 에디터를 사용하다 보면 html5, css3, javascript에 대한 코드 자동 완성 기능이 정말 이클립스와 비교가 되지 않을 정도로 지원하고 있습니다. 이클립스의 정책 구조가 서드파트 개발자들과의 상생이 목표라면 크게 반길만한 정책이지만, 아무튼 불편한 건 사실입니다. 또한 서드 파트의 개발자들의 부지런함에 종속되어 버린 에디터라면 생명력이 그리 길어 보이지는 않..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 이해하기 위한 첫걸음으로 사용자의 요청 처리를 Ajax는 어떤 과정을 통해 처리되고 응답되는가에 대한 내용을 실어 보았습니다. 일반적인 웹은 사용자가 서버에게 어떤 작업을 요청하면 각 클라이언트는 그 결과를 받아와 화면에 표시하기 위해서 전체 화면을 갱신해야 하는 특징이 있습니다. 이것은 우리가 일반적으로 겪고 있는 현상중 하나가 전체 화면이 갱신되고 있다는 것입니다. 물론 브라우저의 캐시 기능이나 고속의 네트워크 환경 때문에 전체 화면 갱신에 따른 불편함이나 화면 딜레이 현상이 최소화가 되었다고는 하지만 프로그래머 입장에서는 어찌 되었던지간에 현재에 표시된 정보가 다음 화면에서도 필요하다면 수단과 방법을 가리지 않고 ..

안녕하세요. IT이곳 저곳을 여행하고 있는 IT여행자입니다. 이번엔 Ajax의 맛을 보기 위해 간단한 샘플 프로그램을 만들어 보겠습니다. 요구 사항 : 서버에 정수 하나를 전달하여 홀/짝수를 판별하여 그 결과를 "홀수입니다" 또는 "짝수입니다"로 전달받아 화면에 표시. 위와 같은 요구사항을 기존 웹 방식과 Ajax 방식을 비교해 보도록 하겠습니다. [기존 웹 방식] 파일명 : odd_even_check_form.jsp 홀짝수 체크 정수를 입력하세요 : 위의 코드를 실행하면 숫자를 입력했던 입력 상자의 값이 사라집니다. 이유는 '체크' 버튼을 클릭하면 서버에 자료를 요청하면서 현재 페이지가 자동으로 새로고침 되기 때문이다. 물론 jstl이나 el을 사용하여 파라미터로 전달된 값을 아래와 같이 다시 의 입력..

Ajax는 지금에 와서 전혀 새로운 기술은 아니지만, HTTP가 갖고 있는 단점을 보안할 수 있는 대표적인 기술중 하나 입니다. 왜 이런 기술이 보편화되서 사용되지 않는지 의문이 들정도로 간편하고 강력하죠. HTTP 가 갖고 있는 단점중 하나가 바로 저장성이 없다는 것입니다. 이런 특징 때문에 이전 페이지에서 현재 페이지로 전환되거나 새로고쳐지는 경우 여러 가지 방법으로 파라메터를 전달하여 현재 페이지에 정보를 표시하거나 처리합니다. 이런 Web 프로그램의 환경을 App 프로그램 환경처럼 만들기에 대단히 편리하고 간단한 기술이 바로 Ajax인 것입니다. 자바스크립트를 사용할 수 있는 개발자라면 더욱 쉽게 접근할 수 있으며, jQuery와 같은 라이브러리를 사용한다면 더욱 간단히 사용할 수 있습니다. 물론..

안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 다음 API를 사용한 우편번호 검색 프로그램으로 자바스크립트만을 사용한 우편번호 검색입니다. 다음 API를 사용한 우편번호 검색의 특징은 아래와 같습니다. 별도의 로그인이나 KEY 등록 과정이 필요 없다. 자바스크립트만을 사용하여 우편번호 검색을 할 수 있다. API 연결과 검색 버튼의 이벤트 처리만으로 모든 것을 해결할 수 있다. step 1. 웹페이지를 작성한 뒤 다음 API를 사용하기 위한 스크립트를 추가합니다. step 2. 우편번호 검색을 위한 을 작성합니다. 우편번호 주소 step 3. 우편번호 검색 버튼의 클릭이벤트에 다음 API의 우편번호 검색 로직을 호출합니다. 우편번호 검색 버튼(btnZipcode)이 클릭되면 다..

먼저, Servlet이 중요한 이유는, 자바 진영에서 사용되는 대부분의 Framework의 기본 원리는 Servlet 구조를 갖고 있기 때문입니다. 클라이언트의 요청 정보를 외부에 노출시키지 않고 전달받아 처리한 후 아무도 모르게(?) 다시 클라이언트에게 전달되는 구조를 갖고 있죠. 특히나 웹과 관련된 프로젝트에서 신경 쓰이고 고민스러운 것이 MVC(Model, View, Control)의 분리입니다. 이 중에서 Model 부분은 대부분 분리가 되어 있거나 분리하는데 큰 어려움이 없지만, View부분과 Control 부분의 분리는 쉽지 않습니다. 왜냐하면 이 두 부분은 직간접적인 연결 고리가 있어야 하기 때문입니다. 그건 그런데, 왜 굳이 MVC를 분리해야 하는가에 대한 원론적인 질문을 하게 됩니다. 이..

사용자가 파일을 다중 선택하거나 탐색기에서 파일을 드래그 앤 드롭을 사용하여 파일을 선택하도록 한 후 최종적으로 전송할 파일을 선택 또는 취소하여 파일을 전송하는 솔류션입니다. 그 흔한 jquery를 사용하지도 않았습니다. 자바스크립트의 기본 기능만을 사용했습니다. 물론 jquery를 사용한다면 소스가 조금 단순해지긴 할 것 같네요~ ^^ 먼저 움짤을 보고 가시죠~ 보다 다양한 기능은 처리하지 않았지만, file 태그를 사용하여 파일을 선택하거나, 탐색기에서 파일을 다중으로 선택할 수있고, 최종 선택된 이미지를 보면서 최종 선택 여부를 결정하여 파일을 전송할 수 있습니다. [체크사항] servlet.com에서 재공하고 있는 cos.jar API는 사용할 수 없습니다. 이 글이 포스팅되는 시점에서도 아직 ..