눈으로 개발하는 블로그

JavaScript에서 Array 객체의 push() 메서드와 shift() 메서드를 사용하여 큐(Queue)처럼 사용할 수 있습니다. ​ ​ 큐(Queue) ​ 큐(Queue)란, 한쪽으로 데이터를 넣고 다른 쪽으로 데이터를 가져오는 구조입니다. 큐의 모양을 빨대나 호스를 생각하시면 됩니다. ​ 데이터를 추가한 순서대로 데이터가 저장되고 추가한 순서대로 데이터를 가져오게 됩니다. 즉, 가장 먼저 추가한 데이터가 가장 먼저 나오는 것을 FIFO(First In First Out)라고 합니다. ​ 그리고 데이터를 넣는 쪽을 rear라고 하고 데이터를 가져오는 쪽을 front라고 하고 데이터를 넣는 것을 인큐(Enqueue), 데이터를 가져오는 것을 디큐(Dequeue)라고 합니다. Array 객체의 pus..

JavaScript에서 Array 객체의 push() 메서드와 pop() 메서드를 사용하여 스택(Stack)처럼 사용할 수 있습니다. 스택(Stack) ​ 스택(Stack)이란, 데이터를 쌓아 올리는 구조입니다. 스택의 모양을 컵이나 바닥이 막혀있는 기둥을 생각하시면 됩니다. 그래서 데이터를 추가하면 맨 위에 쌓이고 데이터를 가져가면 맨 위에 쌓인 데이터를 가져가게 됩니다. 즉, 가장 마지막에 추가한 데이터가 가장 먼저 나오는 것을 LIFO(last in first out)라고 합니다. Array 객체의 push() 메서드를 사용하여 스택(Stack)에 데이터 넣기 var stack = []; console.log(stack); --> [] console.log(stack.length); --> 0 //..

Sorting(정렬) ​ Database(데이터베이스)에서 지정된 칼럼을 기준으로 오름차순이나 내림차순으로 정렬(쿼리 구문에서 Order By 절) 하여 데이터를 반환합니다. ​ 레스트 API에서 정렬(Sorting)을 처리하기 위해서 Query String(쿼리 스트링)으로 URL 주소 뒤에 붙여서 사용합니다. ​ ​ REST API Column Sort(레스트 API 칼럼 정렬) ​ 기준 칼럼(sortby) 기준 칼럼(sortby)은 정렬할 칼럼을 지정합니다. ​ 정렬 방법(orderby) 정렬 방법(orderby)은 기준 칼럼(sortby)을 오름차순이나 내림차순으로 정렬 방법을 설정합니다. http://localhost:9000/boards?sortby=writer&orderby=desc -> 작..

스크립트에서 배열의 정렬은 Array 객체의 sort() 메서드를 사용합니다. ​ ​ Array Sort(배열 정렬) ​ Array 객체의 sort() 메서드 구문입니다. compareFunction은 옵션입니다. array.sort([compareFunction]); Array 객체의 sort() 메서드는 기본적으로 배열 안의 요소들을 오름차순(Ascending Order, ASC)으로 정렬합니다. const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; months.sort(); console.log(months..

JavaScript에서 배열은 Array 객체를 사용합니다. ​ ​ Array 객체 ​ Array 객체로 생성(new) 하면 빈 배열(Array) 객체(Object)가 생성됩니다. var ar = new Array(); console.log(ar); --> [] --> 빈 배열 객체 console.log(ar.length); --> 0 console.log(typeof ar); --> object console.log(ar instanceof Array); --> true console.log(ar instanceof Object); --> true 생성된 배열 객체의 프로토타입 체인(Prototype Chain)은 다음과 같습니다. ar > Array > Object Array 구문 ​ 스크립트에서는 ..

JavaScript에서 객체는 Object 객체, function()를 사용하여 생성할 수 있습니다. ​ ​ Object 객체 ​ Object 객체로 생성(new) 하면 객체(object)가 생성됩니다. var obj = new Object(); console.log(obj); --> {} --> 객체 console.log(typeof obj); --> object ​ typeof typeof 연산자는 객체의 타입(자료형)을 문자열로 반환합니다. ​ typeof 구문 typeof operand // or typeof(operand) 리턴되는 객체의 타입은 다음과 같습니다. Boolean은 "boolean", Number는 "number", BigInt는 "bigint", String은 "string", ..

캘린더 UI에 주간 달력 기능을 추가하겠습니다. 기존 캘린더 파일을 오픈하여 수정합니다. ​ 달력 뷰 버튼 그룹에 주간 달력으로 변경할 수 있게 버튼을 추가합니다. 연간 월간 주간 calendar.css 파일에 주간의 style을 추가합니다. /* calendar week */ .calendar.week table > tbody > tr > td { padding: 10px 10px; } .calendar.week table > tbody > tr > td > span { padding: 10px 10px; } .calendar.week table > tbody > tr > td > span.today { padding: 9px 9px; } 주간 달력 함수 추가합니다. function calendarWe..

주간 배열을 생성할 때 이전 달과 이전 연도, 다음 달과 다음 연도를 고려해서 계산하다 보니 복잡해 보일 수 있습니다. 그래서 쉽게 주간 배열을 생성하는 다른 방법을 알려드리겠습니다. 이 방법은 월간 달력에도 적용할 수 있습니다. ​ 주간 배열에 날짜(숫자)나 연월일(문자열) 대신에 날짜 객체를 생성해서 추가하면 됩니다. 날짜 객체를 사용하면 이전 달과 이전 연도, 다음 달과 다음 연도를 계산 없이 쉽게 처리할 수 있습니다. ​ calendar.js 파일을 오픈하여 주간 달력 함수를 수정합니다. ​ ​ 날짜 객체로 주간 배열 생성 ​ 날짜 객체로 배열을 만들기 위해서 배열을 초기화합니다. // 주간 날짜 배열 var arWeek = [null, null, null, null, null, null, nul..

주간 달력은 월간 달력과 달리 일주일(Week) 단위로 처리됩니다. 그리고 월 초에는 이전 달 마지막 주와 합쳐져서 처리되어야 합니다. 그래서 이전 달의 마지막 일을 구해야 합니다. 월 말에는 다음 달 첫 주와 합쳐져 처리되어야 합니다. // 달력 연도 var calendarYear = date.getFullYear(); // 달력 월 var calendarMonth = date.getMonth() + 1; // 달력 일 var calendarToday = date.getDate(); var monthLastDate = new Date(calendarYear, calendarMonth, 0); // 달력 월의 마지막 일 var calendarMonthLastDate = monthLastDate.getDa..

달력 생성 함수(calendar.js)를 사용하여 캘린더(Calendar)를 만들겠습니다. ​ ​ 캘린더 UI 구성 ​ 기존 달력 UI에 연간과 월간 달력으로 변경할 수 있게 달력 뷰 버튼 그룹을 추가합니다. 오늘 년간 월간 기존 style에 달력 컨트롤 버튼 그룹(.calendar-controls)을 수정하고 달력 뷰 버튼 그룹(.calendar-views)를 추가합니다. ​ 년과 월을 표시하는 태그와 달력 컨트롤 버튼 그룹(.calendar-controls)인 태그가 연속으로 나열되기 위해서 display를 inline-block으로 변경하고 달력 컨트롤 버튼 그룹(.calendar-controls)인 태그의 위치를 vertical-align과 margin으로 조정합니다. 달력 뷰 버튼 그룹(..

달력 생성 함수를 공용으로 사용하기 위해 웹 페이지에서 정보를 가져와 사용하는 문제점을 해결하고 확장해서 사용하기 위해서입니다. ​ ​ data-date 속성 추가 ​ 달력에서 날짜인 태그의 data-date 속성으로 연월일(yyyy-MM-dd)을 추가합니다. // 날짜 var calendarDay = 0; for (var index1 = 0; index1 추가 html += "" + calendarDay + ""; } else { html += ">"; --> 추가 } html += ""; calendarPos++;..

레스트 API 페이징(Paging) 처리 후 Vue나 JSP, ASP, PHP, Javascript에서 게시판의 페이지네이션(Pagination)을 구현하기 위해서는 전체 크기, 전체 페이지 크기, 페이지 사이즈 등 추가 정보들이 필요합니다. 그럼 페이지네이션(Pagination) 구현에 필요한 정보들을 계산하여 라우터(router)에서 데이터와 함께 리턴하도록 처리하겠습니다. ​ ​ 페이지네이션(Pagination) 정보 객체 추가 ​ 1. C:\workspaces\nodeserver\testrestapi\boardapi.js 파일을 오픈하여 게시판 배열 전체를 리턴하는 라우터(router)에 추가합니다. ​ 전체 페이지 크기(마지막 페이지 번호) 전체 페이지 크기는 전체 크기를 페이지 크기로 나누고 ..

Pagination(페이지네이션), Paging(페이징), Page(페이지) ​ Database(데이터베이스)에서 페이징(Paging) 없이 데이터를 가져오면 수십 건부터 수백만 건까지 데이터를 반환하여 문제(DB 부하, 서버 부하, 네트워크 트래픽 부하 등)가 발생합니다. 그래서 데이터를 가져오기 전에 한 번에 가져올 데이터의 크기를 정해서 나누어서 가져오게 해야 합니다. ​ 이렇게 일정한 크기로 데이터를 나누는 것을 페이징(Paging)이라고 하고 일정한 크기를 가진 데이터를 페이지(Page)라고 합니다. 그리고 나누어진 페이지를 이전 페이지나 다음 페이지 또는 특정 페이지로 이동할 수 있게 처리하는 것을 페이지네이션(Pagination)이라고 합니다. ​ 일반적인 게시판에서 페이지네이션(Pagina..

메인 페이지의 본문 영역을 Bootstrap의 Card(카드)를 사용하여 콘텐츠(게시물)가 나타나게 구성하겠습니다. ​ 먼저 Bootstrap의 Grid System(그리드 시스템)을 사용하여 Row columns(행(row)에 대한 열(col))을 설정합니다. ​ 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 태그에서 메인 페이지 상단 영역 다음에 콘텐츠를 표시하기 위한 영역으로 태그를 추가합니다. Bootstrap의 Grid System(그리드 시스템)을 사용하여 반응형으로 웹 브라우저의 가로 화면의 크기에 따라 행(row)에 몇 개의 콘텐츠가 나타나게 할지 설정합니다. col1 col2 col3 화면에 영역을 보이기 위해서는 에..

공휴일 표시 및 툴팁 표시 ​ 달력에 공휴일(국가에서 정한 휴일)을 표시하기 위해서 공휴일 정보가 있는 배열을 객체에 추가합니다. 공휴일 정보는 날짜(date)와 공휴일 명(title)으로 구성합니다. var options = { showToday : true, arHoliday : [{"date" : "3-1", "title" : "삼일절"}] }; 3월의 공휴일은 삼일절(3월 1일)입니다. ​ 에 공휴일(holiday)의 폰트 컬러를 추가합니다. .calendar table > tbody > tr > td > span.holiday { color: red; } 스크립트의 배열(Array) 객체는 typeof로는 object로 나옵니다. 그래서 instanceof를 사용하여 생성 타입을 확인하거나 Ar..

파라미터를 객체로 전달 ​ 함수에 전달되는 파라미터가 많아지면서 여러 설정 중 하나를 처리하기 위해 다른 설정도 처리되어야 하는 문제가 발생합니다. calendar(date); --> 요일(숏 네임) 표시, 오늘 표시 calendar(date, false); --> 요일 표시 제거, 오늘 표시 calendar(date, true, true); --> 요일(풀 네임) 표시, 오늘 표시 calendar(date, true, false, false); --> 요일(숏 네임) 표시, 오늘 표시 제거 위의 예제처럼 오늘 표시를 제거하기 위해서 앞의 파라미터들을 설정해야 합니다. 이렇게 해도 문제는 없는지 함수의 파라미터가 길어집니다. ​ 그래서 여러 파라미터들을 객체로 만들어 전달하면 설정 별로 처리할 수 있습니..

달력 생성 함수를 모듈화 하기 전에 달력의 토요일과 일요일에 폰트 컬러를 추가하겠습니다. ​ 에 토요일(saturday)과 일요일(sunday)의 폰트 컬러를 추가합니다. .calendar table > thead > tr > th.saturday { color: gray; } .calendar table > thead > tr > th.sunday { color: red; } .calendar table > tbody > tr > td > span.saturday { color: gray; } .calendar table > tbody > tr > td > span.sunday { color: red; } 기존 함수에서 년과 월을 출력하는 부분은 삭제하고 토요일과 일요일에 class를 추가하고 생성된 ..

이어서 달력의 월 변경 기능과 날짜 클릭 이벤트를 처리하겠습니다. ​ 먼저 태그에 있는 style 속성으로 인해 스크립트가 복잡해 보입니다. 그래서 태그의 style 속성을 class로 변경 처리하겠습니다. 그리고 달력의 크기와 월 변경 기능을 추가할 영역을 위해 태그로 감쌉니다. 월(이전 달, 다음 달) 변경 기능 추가 ​ 년과 월을 표시할 태그를 추가하고 이전 달과 다음 달로 이동할 수 있는 버튼과 오늘 날짜로 이동하는 버튼을 추가합니다. 오늘 에도 class를 추가합니다. .calendar > .calendar-header { position: relative; height: 50px; margin: 0px 20px; } .calendar > .calendar-header > .calenda..

이어서 bit를 이용하여 온도 습도 데이터로 읽어 보도록 하겠습니다. ​ ​ 데이터에서 40bit만 추출 ​ 1. 40개의 데이터를 배열에 저장하기 위해 기존 배열을 82개에서 40개로 수정합니다. // 배열 선언 int readSize = 40; byte readBit[readSize]; // 배열 초기화 for (byte index = 0; index < readSize; index++) { readBit[index] = 0; } 2. 응답 신호는 데이터가 아니기 때문에 읽지만 배열에는 저장하지 않기 위해 for() 문의 index의 시작을 -2로 수정하고 종료 값을 82에서 80으로 수정합니다. ​ 아두이노에서 byte는 unsigned으로 되어 있어 음수를 표현할 수 없습니다. (A byte st..

지금부터 온도/습도 센서와 직접 디지털 신호를 주고받아 처리해 보도록 하겠습니다. ​ ​ 시작 신호 전송과 응답 신호 받기 1. setup() 함수에서 시리얼 통신으로 출력하기 위해서 Serial.begin() 함수를 사용하여 설정합니다. Serial.begin(9600); delay(1000); 2번부터 5번까지 모두 setup() 함수에 추가합니다. ​ 2. 시작 신호를 보내기 전에 응답 신호를 저장하기 위한 버퍼로 2개의 배열을 선언합니다. 첫 번째 배열은 digitalRead() 함수로 받은 디지털 신호(0:LOW, 1:HIGH)를 저장합니다. 두 번째 배열은 경과 시간을 저장합니다. // 배열 선언 int readSize = 100; byte readBit[readSize]; unsigned l..

이전 온도/습도 센서인 DHT11에 대해 라이브러리를 이용하여 온도와 습도, 체감 온도를 확인해 보았습니다. ​ 이처럼 대부분의 디지털 센서들은 아날로그 센서로부터 들어온 정보를 디지털 정보로 변환하여 전달합니다. 그럼 센서에서 아두이노 우노 보드로 디지털 정보를 어떻게 전달할까요? ​ 디지털 신호인 LOW와 HIGH를 사용하여 전달하고자 하는 정보를 디지털 정보 단위인 bit(비트)로 만들어야 합니다. 단순하게 디지털 신호만으로도 bit(비트)의 0(LOW)과 1(HIGH)을 만들 수 있습니다. 그렇지만, 어떤 디지털 신호부터 읽을 것인지, 어떤 디지털 신호까지 읽을 것인지, 얼마나 읽을 것인지 등 단순하게 디지털 신호만으로는 처리할 수 없습니다. ​ 그래서 정보를 주고받기 위해서는 디지털 신호에 규칙..

온도/습도 센서는 서미스터(thermistor)를 이용해 온도를 측정하는 센서와 공기 중에 있는 수분을 정전식으로 감지하여 습도를 측정하는 센서가 내장되어 있습니다. 내장된 서미스터와 습도 센서에서 아날로그 신호를 감지하여 아날로그 전압을 디지털 값으로 변환하여 디지털 신호를 출력합니다. - 서미스터(thermistor)는 열 저항의 일종으로 온도에 따라 물질의 저항이 변화하는 성질을 이용한 장치입니다. 온도가 증가하면 저항이 감소하고 온도가 내려가면 저항이 증가합니다. ​ - 정전식 습도 센서는 양극(+)과 음극(-) 사이에 습기를 흡수하는 얇은 기판(또는 금속 산화물)을 배치하여 기판(또는 금속 산화물)이 수증기를 흡수하면 양극(+)과 음극(-) 사이에 전도성을 증가시키는 이온을 방출하게 되어 전류가..

푸시 버튼은 버튼을 누르면 전류가 흐르고 버튼을 누르지 않으면 전류가 흐르지 않습니다. 푸시 버튼은 4개의 핀으로 구성되어 있고 그중에서 거리가 먼 핀과 핀은 내부적으로 서로 연결되어 있습니다. 알기 쉽게 핀에 번호를 부여했습니다. 1번과 3번, 2번과 4번이 내부적으로 연결되어 있습니다. 그래서 버튼이 눌러지면 연결된 2개의 라인이 연결되어 전류가 흐릅니다. 전류가 흐르기 때문에 디지털 신호로 1(HIGH)이 됩니다. ​ 그러면 디지털 핀에 어떻게 입력으로 처리되게 할 수 있을까요? 당연히 전류를 흐르게 하면 됩니다. ​ ​ 디지털 핀에 입력 신호 주기 - 전류 흐르게 하기 ​ 1. 우선 디지털 핀에 입력 신호가 들어오는지 확인하기 위해서 디지털 핀을 입력 모드로 설정해야 합니다. 2번 디지털 핀을 입..

JavaScript의 Date 객체를 사용하여 달력(Calendar)을 만들어 보겠습니다. ​ 날짜를 기준으로 달력에 필요한 정보들을 계산하여 가져옵니다. ​ Date 객체의 getFullYear() 메서드, getMonth() 메서드, getDate() 메서드로 연도, 월, 일을 구합니다. var date = new Date(); // 달력 연도 var calendarYear = date.getFullYear(); // 달력 월 var calendarMonth = date.getMonth() + 1; // 달력 일 var calendarToday = date.getDate(); console.log(calendarYear); --> 2022 console.log(calendarMonth); --> 3 ..

SNS에서 작성된 게시글을 보면 작성된 날짜가 "방금 전", "10초 전", "1분 전", "1시간 전", "1일 전", "10일 전"처럼 작성 날짜를 기준으로 지난 시간을 계산하여 표시되는 것을 볼 수 있습니다. ​ SNS처럼 작성 날짜를 기준으로 지난 시간을 계산하는 함수를 생성하겠습니다. ​ ​ getTime() 메서드 ​ Date 객체의 getTime() 메서드는 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다. var today = new Date(); var writeDate = new Date("2022-03-13 15:23:37"); console.log(today.getTime()); --> 1647233149748 console.log(write..

이어서 경과된 시간(밀리초)으로부터 월, 일, 시, 분, 초를 계산해 보도록 하겠습니다. ​ 경과 시간에서 경과된 연도를 빼서 일을 계산합니다. var elapsedDay = Math.trunc((elapsedTime - elapsedTimeOfYear) / day); console.log(elapsedDay); --> 71 Math.trunc() 메서드를 소주점 이하는 제거하고 정수만 반환합니다. ​ 월을 계산하기 위해서 계산된 연도 기준으로 2월이 윤달인지 확인하고 윤달을 계산합니다. 그리고 계산된 월을 빼서 월의 일로 계산합니다. const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 윤년 계산 if (dateYear % 400..

JavaScript의 Date 객체에 있는 parse() 메서드를 시용하여 날짜와 시간 문자열을 구문 분석하여 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 구하고 경과된 년, 일, 시, 분, 초를 계산해 보겠습니다. ​ ​ parse() 메서드 ​ parse() 메서드는 날짜와 시간 문자열을 구문 분석하여 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다. Date.parse(dateString); dateString(날짜와 시간)은 ISO 8601과 RFC 2822로 표기된 문자열입니다. console.log(Date.parse("2022-03-13 15:23:37")); console.log(Date.parse("2022-3-1..

JavaScript의 replace() 메서드를 시용하여 Date 객체에서 날짜와 시간을 문자열로 변환하여 가져오는 함수를 생성하도록 하겠습니다. ​ 먼저 replace() 메서드부터 알아보겠습니다. ​ replace() 메서드 ​ replace() 메서드는 문자열을 기준으로 pattern(교체할 문자열이나 정규식)과 일치하는 일부 또는 전체 부분을 replacement(교체할 문자열이나 교체 함수를 통한 교체 처리)로 교체하여 새로운 문자열을 반환합니다. str.replace(pattern, replacement); // 대상 문자열과 교체할 문자열을 이용한 처리 var newStr = str.replace(substr, newSubstr); // 정규식과 교체할 문자열을 이용한 처리 var newSt..

JavaScript에서는 Date 객체를 사용하여 날짜와 시간을 문자열로 변환하여 가져오는 다양한 메서드를 제공하고 있습니다. ​ ​ Date 객체 생성 ​​ 날짜와 시간을 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); 또는 생성자에 날짜와 시간 문자열을 전달하면 내부적으로 날짜와 시간을 구문 분석하여 새로운 Date 객체가 반환됩니다. var today = new Date(dateString); dateString(날짜와 시간)은 ISO 8601과 RFC 2822로 표기된 문자열입니다. var today = new Date("2022-03-13 15:23:37"); var today = new Date("2022..

JavaScript에서 날짜와 시간을 얻거나 생성할 때 Date 객체를 사용합니다. ​ ​ Date 객체 생성 ​ 오늘 시간을 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); Date 시간 얻기 ​ 생성된 Date 객체의 메서드를 사용하여 시, 분, 초, 밀리초를 가져옵니다. ​ getHours() 메서드는 생성된 Date 객체에서 시간(0 ~ 23)을 가져옵니다. ​ getMinutes() 메서드는 생성된 Date 객체에서 분(0 ~ 59)을 가져옵니다. ​ getSeconds() 메서드는 생성된 Date 객체에서 초(0 ~ 59)를 가져옵니다. ​ getMilliseconds() 메서드는 생성된 Date 객체에서..