오늘 배운 것 - Javascript
1. 함수
2. 실습) D-day 카운터 만들기
- input의 값 가져오기
- new Date() : 현재시간을 알려주는 함수
- (D-day - 현재시간) / 1000 = D-day까지의 시간
- Math.floor()로 D-day까지의 남은 일, 시간, 분, 초 구하기
3. localhost
4. 원시 타입 (Primitive type) / 참조 타입 (Reference type)
- 원시 타입과 참조 타입의 종류
- 각 타입의 특징 (불변성/가변성)
- 값의 복사
5. 조건문
- 비교 연산자
- 논리 연산자
- isNaN()
- falsy 값
new Date()
자바스크립트에 내장되어 있는 날짜 객체이며, 연산이 가능하다.
new Date() // 현재 날짜와 시간 데이터를 알려준다.
new Date("2022-10-20") // 특정 날짜의 데이터도 받아올 수 있다.setHours()
setHours()는 시간대를 설정해 준다.
new Date(new Date().setHours(0, 0, 0, 0)); //이전 자정(즉, 당일)실습) D-day 카운터 만들기
<head>
<title>D-Day</title>
<script>
const dateFormMaker = function () {
const inputYear = document.querySelector('#target-year-input').value;
const inputMonth = document.querySelector('#target-month-input').value;
const inputDate = document.querySelector('#target-date-input').value;
// const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate; // 지역변수(함수 안에서 선언됨)
const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
return dateFormat;
};
const counterMaker = function () {
const targetDateInput = dateFormMaker(); // dateFormMaker함수의 return 데이터
const nowDate = new Date(); // 현재 시간
const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); // 구하려는 D-day 날짜. setHours는 시간대 변경
const remaining = (targetDate - nowDate) / 1000; // D-day 까지남은 시간(초)
const remainingDate = Math.floor(remaining / 3600 / 24); // 3600(시간) 으로 나눈 후, 24로 나누면 며칠이 남았는지 알려준다.
const remainingHours = Math.floor(remaining / 3600) % 24; // 남은 시간을 알려준다.
const remainingMin = Math.floor(remaining / 60) % 60; // 남은 분을 알려준다.
const remainingSec = Math.floor(remaining) % 60; // 남은 초를 알려준다.
console.log(remainingDate, remainingHours, remainingMin, remainingSec);
};
</script>
</head>
<body>
<input id="target-year-input" class="target-input">
<input id="target-month-input" class="target-input">
<input id="target-date-input" class="target-input">
<button onclick="counterMaker()">버튼</button>
</body>localhost 란?
작업하고 있는 개인의 컴퓨터 자체를 가르키는 주소이다.
127.0.0.1 이라는 ip 주소로도 표현된다.
📌 DNS (Domain Name System)
복잡한 ip주소를 대신해서 이해하기 쉬운 도메인 이라는 주소로 변환해 준다.
예시) 127.0.0.1 => localhost (localhost도 도메인에 속한다.)
localhost:5500
뒤의 숫자는 포트 번호를 의미한다.
포트 번호는 도메인으로 통하는 여러개의 문 중 하나이다.
5500은 라이브서버가 사용하기 위해 설정해둔 번호이다.
예시) www.google.com에는 443 이라는 포트 번호가 숨겨져있다.
443 : 자물쇠가 있는 보안이 철저한 페이지. https 프로토콜을 사용한다.
80 : 자물쇠가 없는 보안이 철저하지 않은 페이지. http 프로토콜을 사용한다.
포트 번호는 사전에 약속되어 있다.
포트 번호 참고
https://ko.wikipedia.org/wiki/TCP/UDP%EC%9D%98_%ED%8F%AC%ED%8A%B8_%EB%AA%A9%EB%A1%9D
원시 타입과 참조 타입
1) 원시 타입 (Primitive type)
원시 타입의 종류
String, Number, Boolean, Bigint, undefined, Symbol, Null
원시 타입의 특징
원시 타입 데이터는 불변성이 있다. (데이터가 변화하지 않는다.)
변수는 문자열 자체를 저장하는 것이 아니라, 문자열이 저장된 주소값을 가져와서 저장한다.
원시 타입은 하나의 데이터가 하나의 주소값을 가진다.
예를 들어, box라는 변수에 ‘abc’라는 문자열을 할당하면 이 문자열은 101이라는 주소를 가진 메모리에 저장이 된다.
이후 아래와 같이 box에 ‘def’를 재할당 한 경우, ‘def’ 는 아까 101주소의 메모리에 저장되어 있는 ‘abc’를 바꾸는 것이 아니다.
102주소를 가진 메모리에 ‘def’를 저장 한 후 box에 102번 주소를 가진 메모리를 다시 할당하게 된다.
데이터 자체가 변하는 것이 아니라, 데이터가 다른 주소값에 저장된 것이다.
원시 타입 값의 복사
원시 타입은 복사 시 데이터가 담긴 메모리 주소값을 복사해준다.
따라서 origin 값을 변경하면 새로운 주소값에 저장되므로, copy한 값에 영향을 주지 않는다.
let origin = "hi";
let copy = origin;
origin = "bye";
console.log(copy); // hi2) 참조 타입 (Reference type)
참조 타입의 종류
원시 타입 외의 모든 데이터 타입은 참조 타입이다.
참조 타입의 특징
원시 타입과 반대로 가변성을 지니고 있다.
예를 들어, 객체는 변수에 객체 자체가 저장되는 것이 아니라 다른 메모리에 저장된 객체의 주소값을 가져온다.
즉, 두번 저장 된다.
아래와 같이 414 주소를 가진 메모리에 객체의 정보가 저장되어있다. 이 메모리의 값은 참조타입의 특징 가변성 을 가지고 있다.
즉, 이 메모리의 주소는 참조만 해올 뿐 주소가 할당 되는 것이 아니기 때문에 변화가 가능하다.
그러나, 414번 주소를 할당한 201번 주소를 가진 메모리는 불변성을 지니고 있다. 201번 주소를 가진 메모리는 원시타입의 메모리 주소와 같은 원리를 가지기 때문이다.
그래서 arr = [1, 2, 3]인 배열이 있을 경우, 엄격한 동치 연산자를 사용하여 [1, 2, 3]과 비교하게 되면 주소값까지 비교하게 되기 때문에 if (arr === [1, 2, 3]) 의 결과는 false이다.
참조 타입 값의 복사
참조 타입에서 origin과 copy는 같은 주소값을 공유하기 때문에, origin 값을 변경할 경우 copy 한 값이 같이 영향을 받는다.
복사 시 배열 데이터가 담긴 메모리의 주소가 아닌, 주소값을 담고 있는 참조 메모리의 주소를 전달하기 때문이다.
let origin = [1, 2, 3];
let copy = origin;
origin.pop();
console.log(origin); // [1, 2]
console.log(copy); // [1, 2]isNaN()
NaN인지 아닌지 값을 체크해주는 함수이다. 결과는 true | false이다.
falsy값
거짓과 같은것으로 여겨지는 데이터 값이다.
undefined, null, 0, ””, NaN 이 있다.
오늘의 회고
어제 수업보다 급격하게 어려워진 느낌이다. localhost, 호이스팅, 원시 타입, 참조 타입 등 익숙하지 않은 개념들이 등장하니 기초 지식이 많이 부족한 느낌이 들었다. 복습을 잘 해야겠다.
자바스크립트 문제를 풀때 배열이 복사가 안되길래 검색했더니, 깊은 복사를 사용해야 한다고 해서 그게 뭔데..? 이랬는데 오늘 참조 타입에 대해 배우고 나니 이해가 되었다. 깊은 복사에 대해서는 아직 배우지 않았지만 그래도 어떤 개념인지 대충 예상할 수 있을것 같다.
호이스팅에 대해서는 아직도 잘 모르겠지만.. 대충 var과 함수 선언식은 호이스팅의 영향을 받기 때문에 맨 위로 끌어올려져서 작동하고, var과 함수 선언식 때문에 코드가 차례대로 실행되지 않아 오류가 발생할 수 있다는것 같다.
