수월한 IT

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

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

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

안녕하세요 IT여행자입니다. 이번 여행지는 Chart.js 라이브러리를 사용하여 차트 만들기 입니다. 차트를 만드는 라이브러리나 API는 그 종류가 굉장히 많이 있지만 Chart.js는 자바 스크립트를 사용하여 간단히 차트를 만들수 있는 라이브러리 입니다. 여행 방법은 아래와 같습니다. 1. CDN 형태로 라이브러리 가져오기 라이브러리를 다운로드 받아 프로젝트내에 포함시킬 수 도 있습니다. " target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/chart.js"> 2. 기본 골격 데이터를 생성하는 언어는 JSP를 사용하였지만 어떤 언어이든 상관없습니다. 데이터를 자바스크립트로 전달 할 수만 있으면 상관 없습니다. line type 1 특별한 이유는 ..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 IT 작은 구슬에서는 자바스크립트에서 사용되는 함수를 정의하는 다양한 방법들에 대해서 설펴 보고자 합니다. 선언적 함수함수 표현식익명함수(즉시실행함수)화살표 함수생성자를 통한 함수리터널 유형 함수 1. function 함수명( [매개변수] ) {... } 선언적 함수가장 보편적으로 많이 사용하고 있던 함수 선언 형식입니다. 함수가 hoisting 된다는 특징이 있습니다. 함수가 hoisting 된다는 의미는 선언되는 순서와 상관없이 스크립트 엔진은 가장 먼저 메모리 스택에 함수를 로딩하여 사용할 준비를 해 준다는 의미입니다. 즉, 코드의 순서가 "사용->선언"순으로 작성하든, "선언->사용" 순으로 작성하든 상관이 없다는 말입니다. 이러한..