수월한 IT

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 프로그램을 자다 보면 팝업창을 만들어 사용자에게 메시지를 전달하거나 특정 작업을 선택하게 하는 일이 어쩔 수 없이 발생하기도 합니다. 이때 가장 손쉽게 사용할 수 있는 대화 상자는 alert, confirm, prompt 등과 같이 자바스크립트를 사용한 대화 상자들이 있습니다. 그러나 이 대화상자에 UI를 변경하거나 특정 요소를 추가하기란 쉽지 않습니다. 어쩌면 배보다 배꼽이 더 커지는 상황이 벌어지기도 합니다. 따라서 일반적으로 css를 사용하여 디자인된 html 태그들을 마치 대화상자처럼 작성하여 사용합니다.  따라서 이번 여행지는 HTML5에 추가되어 있던 태그를 사용하여 일반적으로 사용되고 있던 alert, confirm, prompt..

안녕하세요~ IT 이곳저곳을 여행하고 있는 IT여행자입니다.이번 여행지는 단순한 구구단 출력 프로그램을 사용하여 RESTful API를 사용하여 서버로부터 구구단 출력 정보를 전달받아 자바스크립트 내에서 출력하는 과정을 여행해 보려 합니다. 본 문서에서는 중간 과정은 생략되어 있고 최종 결과만을 기록하려 합니다. 만약 중간중간 과정이 궁금하시다면 아래의 동영상을 참고해 주시면 감사하겠습니다. 또한 전체 코드는 깃허브에 공유되어 있으니 참고 바랍니다. 관련 영상 : https://youtu.be/B_Xz2nGdecA전체 코드 : https://github.com/hiparkwg/restfulAPI_gugudan.git [준비물]JAVA JDKVisual Studio CodeExtension Pack for..

안녕하세요~ IT 이곳저곳을 여행하고 있는 IT여행자입니다.이번에 여행할 목적지는 스프링부트에서 RESTful API와 chart.js를 사용한 데이터 시각화 코스를 여행해 볼까 합니다. 기본적으로 스프링 부트에 대한 개념이 필요한 여행 코스이기는 하지만 관련 동영상과 본 문서를 참고하시면 그리 어렵지 않게 여행해 볼 수 있는 코스라 생각됩니다.관련 영상에서는 아래와 같은 코스별로 진행되고 있지만 본 문서에서는 최종 코스의 코드만을 사용하여 설명하면서 코스를 여행하도록 하겠습니다. 단계별 과정이 궁금하시면 영상을 참조해 주시기 바랍니다.관련 영상 : https://youtu.be/HE34s3ciz2s관련 코드 : https://github.com/hiparkwg/restfulandcharjs.git  [..

안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 여행지는 제목과 같이 NTSC(Nation Television System Committee)에서 만든 비디오 신호의 밝기를 계산하여 바탕색 대비 가독성 있는 문자색을 지정하는 여행을 해 보려 합니다. 물론 각 프로젝트별로 지정된 디자인 패턴이 있어 색상을 임의로 지정하지는 않겠지만, 본 예시는 바탕색이 랜덤 하게 바뀔 수 있다는 가정하에 출발합니다.구현된 실제 문자색을 보면 검은색 아니면 흰색의 문자색으로 표현되지만 이는 바탕색의 밝기를 계산하여 자동으로 설정되어 어떤 바탕색이 되든지 최상의 가독성 있는 문자색이 만들어집니다.가중치 계산식은 아래와 같습니다.NTSC 가중치 계산식  ( (red*299) + (green*587) + (blu..

안녕하세요 IT 여행자입니다. 이번 여행지는 html5의 태그를 사용하여 동적 페이지를 만들어 보는 여행을 해 볼까 합니다. 여행 코스는 4개의 코스로 이루어져 있습니다.   1코스 : 먼저 를 사용하기 전 공통 html, css를 만듭니다.2코스 : 동일한 Document에 있는 를 가져와 동적 페이지를 만들어 봅니다.3코스 : 외부 파일에 있는 를 가져와 현재 페이지에서 동적 페이지를 만듭니다.4코스 : 빈번하게 사용되는 를 localStorage에 저장하여 cache역할을 하도록 하고 이를 활용해 봅니다. 준비물개발툴 : Visual Studio Code 와 Live Server ExtensionLive Server Extension은 VSC의 확장 프로그램에서 검색하여 설치하시면 됩니다. 여행을..

안녕하세요 IT여행자입니다. 이번 여행지는 제목과 같이 localStorage 또는 indexedDB를 사용하여 현재 상태값을 실시간으로 저장하고 필요할 때 재 사용할 수 있는 방법을 비교하면서 각각의 사용법을 알아보도록 하겠습니다. localStorage와 indexedDB의 특징을 대강 정리하면 아래의 표와 같습니다.    [준비물]개발툴 : VSC(Visual Studio Code)와 VSC의 extension 중 하나인 Live Server Extension만 있으면 될 것  같습니다.적당한 폴더를 만들고 VSC를 구동시켜 놓습니다. 왼쪽 그림과 같이 폴더와 파일을 생성한 후 여행을 시작하겠습니다.main.css는 공통으로 사용되는 스타일시트이고, localStorage.html과 indexedD..

https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 안녕하세요 IT여행자입니다. chart.js 라이브러리를 사용한 데이터 시각화의 마지막 단계인 서버로부터 실시간으로 데이터를 수신받아 그래프를 그려보는 과정입니다. 본 지면에서는 서버를 spring boot의 Restful API를 사용하여 데이터를 수신받았지만 실제로는 어떤 서버를 사용하던 상관이 없습니다. 단 수신된 데이터가 JSON구조이어야 합니다.또한 본 지면에서는 서버와 관련된 설정 부분이나 서버 전체 코드 부분은 생략합니다. 이점 양해해 주시기 바랍니다. 서버와의 데이터 송수신은 서버..

https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 안녕하세요 IT여행자입니다. 두 번째 시간으로 이번에는 로컬에서 실시간으로 변경되는 데이터를 사용하여 그래프를 동적으로 그려서, 보다 생동감 있는 데이터 시각화를 해 보도록 하겠습니다. 주요 요점은 아래의 2가지입니다.line 그래프에서 꺾인 부분을 부드럽게 표현하기실시간으로 데이터를 발생시켜 그래프에 적용하기1. line 그래프에서 꺾인 부분을 부드럽게 표현하기line 그래프에서 꺾인 부분을 부드럽게 표현하려면 tension 속성값을 지정하면 됩니다. tension은 곡률을 의미하는데, ten..

https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 데이터 차트) 안녕하세요. IT여행자입니다.  데이터를 시각화하는 방법에는 여러 가지 방법들이 있습니다. 사용하는 컴퓨터 언어나 서비스 환경에 따라 서로 다른 방법으로 데이터를 시각화합니다. 본 지면에서는 chart.js 라이브러리를 사용하는 방법을 사용해 보도록 하겠습니다. chart.js 라이브러리는 자바스크립트와 태그를 사용하여 데이터를 시각화할 수 있는 도구 중 하나로 널리 알려져 있습니다.chart.js 라이브러리를 사용한 데이터 시각화 과정은 아래의 몇 단계로 나누어 살펴보고자 합니..

개요 추상의 사전적 의미는 사물이나 어떤 표상들의 성질, 본질, 공통성등을 추출하여 파악하는 것들을 의미한다. 자바 프로그램에서는 각 클래스들 간의 공통점을 추출하여 하나의 클래스를 만든 것이라 볼 수 있다. 또한 추상 클래스를 만드는 목적 중 하나는 중복되는 코드들을 최소화하기 위한 목적도 있다. 일반 클래스와 다른 점은 일반 메서드와 추상 메서드가 모두 존재할 수 있다는 것이다. 추상 클래스를 정리하면 아래와 같다. 추상 클래스는 단독으로 인스턴스를 만들 수 없다. 다른 클래스에 상속되어 사용된다. 추상 메서드는 자손 클래스에서 반드시 재정의하여야 한다. 추상 클래스 작성하기 abstract class AbsClass{ public void prn(){ ... } // 일반 메소드 public voi..

개요 자바 클래스들이 필수로 사용되어야 하는 기능들을 추상 메서드로 정의하는 것으로 일종의 클래스들의 가이드라인 역할을 하는 구조라 볼 수 있다. 인터페이스 안에는 추상 메서드와 상수만으로 이루어져 있다. 구현 코드가 없기 때문에 인스턴스를 만들 수 없고 자손 클래스가 상속받아 추상 메서드를 재정의하여 사용하게 된다. 인터페이스의 특징을 정리하면 아래와 같다. 다중 상속 가능 : class 형식으로 만드러 진 클래스들은 단일 상속만을 지원하는데 반해 인터페이스로 만들어진 구조는 다중 상속을 지원한다. 생성자 불가 : 단독으로 인스턴스를 생성할 수 없기 때문에 생성자 사용은 불가하다. 메서드 오버라이딩 : 인터페이시를 상속받은 클래스에서는 반드시 추상 메서드들을 재정의(Overriding) 해야 한다. 인..

안녕하세요. IT여행자입니다. vscode 에디터에서 전체 인터페이스 구성을 영문 또는 한글로 변경하는 방법을 간단히 기술하겠습니다. 먼저 View>Command Palette...메뉴를 선택합니다. 단축키로는 Ctrl+Shift+p입니다. 열린 Command Palette 창에서 "Configure Display Lanugage"를 찾아 선택합니다. 아래와 같은 항목들이 나오면 필요한 언어를 선택하고 vscode를 다시 시작하면 됩니다. 물론 해당 언어팩이 설치되어 있지 않다면 자동으로 언어팩을 설치해 줍니다.

안녕하세요 IT여행자입니다. 웹 특성 중 하나가 브라우저를 새로 고침 하면  현재 값이 유지되지 않는다는 것입니다. 따라서 현재 값을 유지하거나 새로고침 현상 없이 현재 값을 다른 값으로 변경하기 위한 다양한 방법들이 존재합니다. 현재 값을 유지한다는 것이 웹 프로그램이 아닌 일반 컴퓨터 프로그램들에게서는 별거 아닌 문제이기는 합니다. 그냥 변수에 담아 필요한 시점이나 장소에 그냥 대입해 주면 당연히 화면에 출력되기 때문입니다. 그러나 서두에 말한 것처럼 웹은 정확히는 http 프로토콜 특성상 기본적으로 상태값 또는 현재값을 유지해 주는 기능이 없습니다. 대부분의 FRONT-END 프레임워크에서는 이런 상태값을 유지해 주는 기능을 지원하여 약간의 노력만 하면 대부분 해결할 수 있을 것입니다. 본 지면에서..

thymeleaf는 view template 엔진으로 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어 주는 역할을 한다.  thymeleaf는 Natural Template을 기반으로 기존 html 코드와 그 구조를 변경하지 않고 덧붙여 사용하는 방식이라 볼 수 있다. 특징html 문서 내부에서 사용할 수 있으며 spring boot와 통합하는 작업이 매우 간단함. 관련 사이트 : https://www.thymeleaf.org/index.html ThymeleafIntegrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymel..

안녕하세요. IT여행자입니다. 저는 개인적으로 eclipse를 메인 개발툴로 사용하는 개발자 중 한 사람입니다. 그런데 eclipse 툴을 사용하여 FRONT-END 부분인 HTML, CSS, JS를 개발할 때는 불편한 점이 한두 가지가 아닙니다. 그중 가장 불편한 점은 코드 자동 완성 기능이 eclipse가 매우 불편하다는 점에 있습니단. 플러그인들을 설치하면 그나마 참을 수 있는 수준이 되지만 적당한 플러그인들을 찾는 것도 귀찮은 일이 됩니다. 그런데 vscode 편집기를 사용하여 BACK-END 부분중 jsp 부분을 개발하려다 보면 생각보다 설정 작업이나 귀찮은 점이 한두 가지가 아니게 되더군요. 물론 최근엔 jsp를 사용하여 개발하는 요소들이 많이 줄었다고는 하지만 이미 개발되어 운영되고 있는 프..

VSC에서 Spring 개발을 하기 위한 환경 구축은 아래와 같은 절차와 방법으로 진행할 수 있습니다. 물론 JDK는 이미 설치되어 있고 JAVA_HOME이나 PATH와 같은 내용은 이미 윈도 환경 변수에 등록되어 있어야 설치 작업이 더 원활할 수 있습니다. 개발 환경 구축 절차는 아래와 같습니다. Spring Boot Extension Pack 프로젝트 생성 및 테스트 1. Spring Boot Extension Pack 설치 VSC에서 Extension 아이콘을 선택하여 Spring Boot extension Pack 을 검색하여 설치합니다. 나머지 필요한 라이브러리들은 프로젝트를 생성한 뒤 설치해도 상관없습니다. 2. 프로젝트 생성 프로젝트 생성 과정은 절차는 아래와 같은 단계로 진행됩니다. 본 지..

안녕하세요 IT여행자입니다. 이번 수첩은 visual studio code(VSC)에서 웹 페이지를 실시간으로 볼 수 있는 live server extention을 설치하고 약간의 설정을 할 수 있는 내용입니다. live server를 시작하면 기본적으로 ip 주소는 127.0.0.1로 표시되고, 포트번호는 live server를 구동할 때마다 번호가 달라집니다. 이러한 상태에서 ip주소를 현재 컴퓨터의 ip 로 사용한다던가, 포트번호를 고정시키는 설정 방법을 담았습니다. 간략히 그림으로 보여드리면 아래와 같습니다. 1. IP 주소를 127.0.0.1에서 localhost로 변경하기 2. 포트 번호 고정하기 Edit in settings.json 링크를 클릭하여 포트번호를 임의의 값으로 고정시킬 수 있습..

안녕하세요 IT여행자입니다. 이번 수첩은 개발 입문자들을 위한 내용입니다. 프로그램을 개발할 때 사용되는 각종 개발 툴이 있습니다. 저마다 장단점들을 갖고 있죠. 그중에 가장 인기 있는 개발 툴 중 vsc를 설치하고 작성된 html 문서를 바로 브라우저에서 확인할 수 있는 open in browser extention을 설치해 보도록 하겠습니다. 이런 부분은 글로 표현하기 쉽지도 않고 장황한 설명들을 나열해야 하기로 영상을 찍어 공유합니다. 이점 양지해 주시기 바라며, 아래 영상을 확인해 주시기 바랍니다. https://youtu.be/O-sRGmRsA3Y

안녕하세요 IT여행자입니다. 이번 여행지는 swing으로 만들어본 멀티 메모장 두 번째 부분입니다. 첫 번째 영상에서도 언급한 것처럼 자바 GUI를 사용한 프로그램이라는 인터페이스가 많이 사용되는 인터페이스가 아니지만, 진입 장벽이 높지 않으며, 웹 인터페이스처럼 다양한 언어를 사용하지 않아도 만들어 볼 수 있는 프로그램이기에 두 편에 걸쳐 만들어 봤습니다. 개발에 필요한 보다 자세한 내용들은 영상을 참조하시면서 하나씩 개발해 보시는 걸 추천드립니다. 1편에서는 레이아웃에 관한 내용을 다루었고, 2편에서는 BACK-END 부분을 다루었습니다. 주요 내용은 아래와 같습니다. MemoVo.java : 하나의 메모 내용을 저장하는 Value Object config.xml : mybatis를 사용하기 위한 환..

안녕하세요 IT여행자입니다. 이번 수첩은 자바 GUI API 중 하나인 swing을 사용하여 멀티 메모장을 만들어 볼까 합니다. 우리나라의 개발 환경은 대부분이 웹에 치중되어 있어 그리 흥미로운 인터페이스는 아니지만 자바언어만 알고 있어도 만들어 볼 수 있는 주제이기에 선정하였습니다. 개발 난이도는 아마추어 중급 수준입니다. 개발 난이도에 대한 설명이나 개발 환경은 영상을 참고해 주시기 바랍니다. 또한 영상은 두 개의 파트로 나뉘어 있습니다. 개발 환경 https://youtu.be/jJK67Ex2W58 아래의 코드들은 직접 작성된 코드가 아니라 이클립스의 윈도빌더에 의해 기본적으로 작성된 코드들입니다. 따라서 이 부분까지는 직접 작성하지 마시고 영상을 보면서 과정대로 따라가시면 만들어 보시기 바랍니다...