눈으로 개발하는 블로그

Javascript에서는 NaN(Not a Number)은 숫자(Number)가 아닌 값입니다. 그럼 스크립트에서 확인해 보겠습니다. 숫자(Number)와 문자열(String) "a"를 곱하면 변수는 NaN가 됩니다. var result = 1 * "a"; console.log(result); --> NaN NaN(Not a Number)는 값이 아니기 때문에 비교 연산자로 비교할 수 없습니다. 그래서 isNaN() 함수로 처리하면 변수가 NaN 인지 확인할 수 있습니다. console.log(isNaN(result)); --> true 참고로 변수를 typeof로 유형(타입)을 확인하면 number으로 나오지만 값은 없습니다. console.log(typeof result); --> number

== vs === == 연산자는 두 변수의 값을 비교합니다. === 연산자는 두 변수의 값과 유형(타입)까지 비교한다. 그럼 스크립트에서 == 연산자와 === 연산자를 확인해 보겠습니다. 숫자(Number) 0과 불리언(Boolean) false을 == 연산자로 비교하면 두 변수의 값이 같다고 나옵니다. console.log(0 == false); --> true 그 이유는 Boolean false의 값이 0이기 때문입니다. Boolean true의 값은 1입니다. 숫자(Number) 0과 문자열(String) "0"을 == 연산자로 비교하면 두 변수의 값이 같다고 나옵니다. console.log(0 == "0"); --> true 그 이유는 == 연산자는 숫자나 문자를 값 자체로만 비교하기 때문에 숫자..

this vs self this는 현재 속한 함수의 객체를 참조합니다. self는 window 객체를 참조합니다. 그럼 스크립트에서 self와 this를 확인해 보겠습니다. Console를 확인해 보면 self와 this 모두 window 객체를 참조하고 있는 것을 알 수 있습니다. jQuery에서 self와 this를 확인해 보겠습니다. Console를 확인해 보면 self는 window 객체를 this는 document 객체를 참조하고 있는 것을 알 수 있습니다. Javscript Object에서 self와 this를 확인해 보겠습니다. value라는 정수 값이 있고 getValue() 메서드가 있는 객체를 생성합니다. getValue() 메서드는 this와 self를 사용하여 객체의 value을 가..

$()[0]은 jQuery에서 선택자($ - selector)로 선택된 객체에서 DOM Element를 가져올 때 사용됩니다. 즉, 배열은 선택된 객체의 DOM Element를 가지고 있습니다. 클릭1 Console를 확인해 보면 0번째 배열에 선택된 button 태그에 대한 DOM Element가 있는 것을 알 수 있습니다. 그래서 선택된 객체에 [0]이나 get(0) 메서드를 사용하면 DOM Element를 사용할 수 있습니다. console.log(objBtn[0]); console.log(objBtn.get(0)); --> button#btn1.btn --> button#btn1.btn $()[0]은 button 태그를 DOM 함수를 사용하여 가져온 것과 같습니다. var domBtn = docu..

이어서 연결 리스트에서 데이터로 노드를 찾고 찾은 노드에 데이터를 추가하는 함수를 추가하겠습니다. 연결 리스트에서 노드의 데이터를 찾기 위해서는 앞(front, HEAD와 연결된 노드(Node) 객체) 또는 뒤(rear, TAIL과 연결된 노드(Node) 객체)부터 노드의 데이터를 비교하여 노드(Node) 객체를 찾고 리턴합니다. // 연결 리스트에서 데이터를 찾는 함수 this.findNode = function(data, findDirection) { if (data == undefined || typeof data == "undefined " || data == null) { return null; } var node = null; // findDirection - front (default) if..

이중 연결(링크드) 리스트(Doubly Linked List) 이중 연결 리스트(Doubly Linked List)란, 데이터와 2개의 포인터로 구성된 노드(Node)들을 연결하는 구조입니다. 노드는 2개의 포인터(이전 포인터(prev), 다음 포인터(next))를 이용하여 이전 노드와 다음 노드와 연결됩니다. 첫 번째 노드(Node)에 이전 포인터(prev)는 HEAD가 아닌 NULL입니다. function()으로 Node 객체를 선언하겠습니다. Node 객체는 데이터와 이전 노드, 다음 노드로 구성합니다. 이전 노드와 다음 노드는 Node 객체를 참조하게 됩니다. // 노드 객체 var Node = function(data) { // 데이터 this.data = data; // 이전 노드 this.p..

이어서 연결 리스트의 맨 앞에 데이터를 추가하고 삭제하는 함수를 추가하겠습니다. 맨 앞에 노드를 추가하기 위해서는 HEAD와 연결된 노드(Node) 객체를 생성된 노드(Node) 객체의 다음 노드로 참조시킵니다. 그리고 HEAD에 생성된 노드(Node) 객체를 참조시킵니다. // 맨 앞에 데이터를 추가하는 함수 this.addFirstNode = function(data) { // 노드 객체 생성 var node = new Node(data); // HEAD가 NULL이면 연결된 노드(Node)가 없는 빈 상태(Empty)이므로 생성된 노드를 참조시킵니다. if (this.isEmpty()) { this.head = node; } else { // HEAD가 NULL이면 연결된 노드(Node)가 없는 빈..

연결(링크드) 리스트(Linked List) ​ 연결 리스트(Linked List)란, 데이터와 포인터로 구성된 노드(Node)들을 연결하는 구조입니다. 노드(Node)는 포인터를 이용하여 다음 노드(Node)와 연결됩니다. 스택(Stack), 큐(Queue), 덱/데크(Deque, Double-Ended Queue), 원형 큐/환상 큐(Circular Queue)는 버퍼(배열)를 사용하기 때문에 버퍼(배열)에서의 위치 값으로 데이터를 추가하고 가져갑니다. 버퍼(배열)가 아닌 포인터로 연결된 연결 리스트(Linked List)에서는 버퍼(배열)의 위치 값이 아닌 시작 포인터를 가지고 있습니다. 시작 포인터를 HEAD라고 합니다. 시작 포인트가 NULL이면 연결된 노드(Node)가 없는 빈 상태(Empty..

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 덱/데크(Deque - Double-Ended Queue)를 만들어 보겠습니다. ​ 덱/데크(Deque - Double-Ended Queue)는 양쪽 모두에서 데이터를 넣고 가져오는 구조입니다. ​ 프로그램에서는 버퍼를 사용하기 때문에 방향의 개념이 없습니다. 그래서 큐의 뒤에서 데이터를 넣거나 가져오기 위해서 rear의 위치를 계산하여 처리하고 큐의 앞에서 데이터를 넣거나 가져오기 위해서 front의 위치를 계산하여 처리해야 합니다. front와 rear의 위치를 사용하여 데이터를 넣거나 가져옵니다. [파란색 화살이 front, 주황색 화살이 rear] ​ 큐의 뒤에 데이터를 ..

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 스택(Stack)을 만들어 보겠습니다. ​ 스택(Stack)은 한쪽으로 데이터를 쌓아 올리는 구조입니다. 프로그램에서 데이터의 위치를 top이라고 합니다. ​[파란색 화살이 top] ​ 스택에 데이터를 추가하기 위해서 top의 위치에 1을 더한 후 데이터를 추가합니다. 그리고 스택에서 데이터를 가져오기 위해서는 top의 위치에 데이터를 가져오고 top에서 1을 뺍니다. top이 -1이면 스택에 데이터가 없는 상태이고 top의 위치가 스택의 마지막 위치와 같으면 더 이상 스택에 데이터를 넣을 수 없는 포화 상태입니다. ​ 스택(Stack) 객체 생성하기 ​ JavaScript에서 ..

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 큐(Queue)를 만들어 보겠습니다. ​ 큐(Queue)는 한쪽으로 데이터를 넣고 다른 쪽으로 데이터를 가져오는 구조입니다. 그래서 데이터를 넣는 쪽을 rear라고 하고 데이터를 가져오는 쪽을 front라고 합니다. ​ 프로그램에서는 버퍼를 사용하기 때문에 방향의 개념이 없습니다. 그래서 데이터를 넣는 위치를 rear로 데이터를 가져오는 위치를 front로 사용합니다. 그리고 데이터를 넣는 것을 인큐(Enqueue), 데이터를 가져오는 것을 디큐(Dequeue)라고 합니다. [파란색 화살이 front, 주황색 화살이 rear] ​ 큐(Queue)가 생성되면 front와 rear의..

지금까지 만든 스택(Stack), 큐(Queue), 덱/데크(Deque) 객체를 보면 아시겠지만 Array 객체로 모두 구현이 가능합니다. JavaScript의 Array 객체는 덱/데크(Deque)라고 생각하시면 됩니다. 그리고 크기 제한을 하지 않으면 사용할 수 있는 메모리만큼 사용할 수 있습니다. ​ 만약 JavaScript의 Array 객체의 메서드를 사용하지 않고 직접 큐(Queue)를 만들어서 사용하면 무슨 문제가 생길까요? ​ 바로 데이터 Push와 Pop에 따른 큐(Queue)의 비효율적인 메모리 사용 문제입니다. ​ 큐(Queue) 데이터를 넣는 위치(rear)와 데이터를 가져오는 위치(front)가 다릅니다. 그래서 데이터를 넣고 가져오기를 반복하다 보면 더 이상 데이터를 넣을 수는 상..

JavaScript에서 Array 객체의 push() 메서드, pop() 메서드, shift() 메서드, unshift() 메서드를 사용하여 덱/데크(Deque - Double-Ended Queue)처럼 사용할 수 있습니다. ​ ​ 덱/데크(Deque - Double-Ended Queue) ​ 덱/데크(Deque - Double-Ended Queue)이란, 양쪽 모두에서 데이터를 넣고 가져오는 구조입니다. 덱의 모양은 큐의 모양과 동일합니다. 빨대나 호스를 생각하시면 됩니다. Array 객체의 push() 메서드, pop() 메서드, shift() 메서드, unshift() 메서드를 사용하여 ​덱/데크(Deque)에 데이터 넣고 가져오기 var deque = []; console.log(deque); -..

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// 데이터 넣기sta..

스크립트에서 배열의 정렬은 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++;..

공휴일 표시 및 툴팁 표시 ​ 달력에 공휴일(국가에서 정한 휴일)을 표시하기 위해서 공휴일 정보가 있는 배열을 객체에 추가합니다. 공휴일 정보는 날짜(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..

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..