수월한 IT

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

안녕하세요 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 라이브러리를 사용한 데이터 시각화 과정은 아래의 몇 단계로 나누어 살펴보고자 합니..

안녕하세요 IT여행자입니다. 이번 내용은 입문 과정을 끝낸 개발 초보자분들이 배운 과정을 어떻게 응용하여 프로그램을 만들어 볼까 고민될 때 한번 만들어 볼 수 있는 프로그램을 준비해 봤습니다. 프로그램은 단순히 HTML, CSS, JAVASCRIPT만을 사용하였습니다. 개발을 잘하고 싶다면 직접 많이 만들어 봐야 한다는 것은 잘 알고 계실 거라 생각됩니다. 그리 복잡한 내용은 없으므로 차근차근 따라 만들어 보시길 바랍니다. 그럼 시작하겠습니다. 실행 결과 화면 입력 숫자의 범위는 제한이 없지만 표시되는 영역이 작으므로 -999~999까지 입력합니다. 처음 10개까지는 입력 순서대로 위쪽 영역에 표시되었다가 10개가 넘으면 입력 수들 중 상위 10개까지만 표시될 것입니다. 준비 파일 아래와 같이 3개의 파..

안녕하세요 IT여행자입니다. 입문자 딱지를 떼도 어떤 프로그램을 어떻게 만들지 잘 떠오르지 않는 때가 바로 초보 개발자 시절이라고 생각합니다. 뭔가를 배우기는 했는데 내가 배운 것으로 무엇을 할 수 있을지도 잘 모르는 때이기도 하고요. 이런 분들을 위해 HTML, CSS, Javascript만으로 스무고개란 간단한 게임을 만들어 보도록 하겠습니다. 동여상도 첨부 되어 있으니 참고해 주시길 바랍니다. 간단히 개발 환경을 말씀드리자면 앞서서 말씀드린것과 같이 html, css, javascript만을 사용하였습니다. 또한 개발 툴은 어떤 툴을 사용하든지 상관없습니다. 저는 이클립스를 사용하여 제작해 보도록 하겠습니다. 가장 먼저 프로젝트를 '스무고개게임' 이라고 만들도록 하겠습니다. 이클립스 환경에 따라 다..