권돌선생님의 블로그

자바스크립트 날짜 기반은 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간차이를

밀리초 단위로 나타낸 것이며,

대부분의 컴퓨터 구성시간인 UNIX 시간(1970년 1월 1일 자정과의 시간차이를 초 단위로 나타낸 것) 과는

다른 개념이다.

한국의 경우 UTC+9 시간대에 속하므로 기본 UTC 시간에 +9를 해주면, 한국 환산 시간이 나온다.

UTC 03:00시의 경우 한국시간으로 오후12:00 이다. 즉, 한국 시간은 세계 협정시보다 9시간 빠르다는

계산이 나온다.

* Date 함수의 특징​

1) Date 객체의 중심을 구성하는 시간은 UTC 로 표기하지만, 실제 날짜와 시간 등을

변환하여 표기할 때, 별도의 옵션을 주지 않을 경우 모두 현지 시간대로 표기한다.

2) Date() .. 이런식으로 호출할 경우 new Date().toString() 과 같은 현재 날짜와 시간을 나타내는 문자열을 반환한다.

3) new Date() 와 같은 생성자로 호출할 경우 새로운 Date()를 창조하며, 보통의 경우 기존의 Date()를

건드리지 않고 생성자를 생성하는 방식을 많이 사용한다.

* 주로 쓰는 메서드​

1) 날짜의 연/월/일 시/분/초

- 평상시에는 거의 사용할 일이 없지만 사용하는 경우가 몇 가지 있는데,

1-1) 해당 날짜 중간 중간 한글이나 영어를 삽입하여야 한다거나

1-2) 특정 달력에 해당하는 날이 있는 지 체크하는 등 확인할 때 사용한다.

물론, 1-1의 경우 정규 표현식으로 표현 가능한 방법이지만 모를 경우 이 메서드를 사용한다.

const getYear = new Date('2022-06-10').getFullYear(); Date에서 현지시간 기준 연도를 반환합니다.

console.log('결과 : ',getYear); // 결과 : 2022

const getMonth = new Date('2022-06-10').getMonth(); Date에서 현지시간 기준 월을 반환합니다.
// 0부터 1월이라고 계산된다.  5 = 6월 
console.log('결과 : ',getMonth); // 결과 : 5 

const getDate = new Date('2022-06-10').getDate(); Date에서 현지시간 기준 일을 반환합니다.
console.log('결과 : ' getDate); // 결과 : 10

const getHours = new Date('2022-06-10 13:00:00').getHours(); Date에서 현지시간 기준 시간을 반환합니다.
// 자세한 시간 옵션을 주지 않을 경우 지역이 한국일 경우 UTC+9시간으로 환산되어 9로만 표기된다.
console.log('결과 : ' getHours); // 결과 : 13

const getMinutes = new Date('2022-06-10 13:15:00').getMinutes(); Date에서 현지시간 기준 분을 반환합니다.
// 자세한 시간 옵션을 주지 않을 경우 0으로만 표기된다.
console.log('결과 : ' getMinutes); // 결과 : 15

const getSeconds = new Date('2022-06-10 13:15:53').getSeconds(); Date에서 현지시간 기준 초를 반환합니다.
// 자세한 시간 옵션을 주지 않을 경우 0으로만 표기된다.
console.log('결과 : ' getSeconds); // 결과 : 53

그 외에도 많은 옵션이 있지만 날짜에서 자주 추출하여 사용하는 것만 나열했다.

2) 날짜의 요일 추출

- 평상시에는 거의 사용할 일이 없지만 캘린더에 일정을 작성한다든지, 특정 요일의 데이터만 가져온다든지 할 때

유용한 메서드이다.

const getDay = new Date('2022-06-10').getDay(); Date에서 현지시간 기준 요일을 반환합니다.
// 0 ~ 6으로 표기되며,  0 : 일, 1: 월, 2: 화, 3: 수, 4: 목, 5: 금, 6: 토 로 구성된다.
console.log('결과 : ' getDay); // 결과 : 5    -> 금요일이다.

3) 날짜의 현재 지역의 형식으로 변환한다.

const getDate = new Date('2022-06-10 13:15:53'); // 가공 전
console.log('결과 : ',getDate); // 결과 : 2022-06-10T04:15:53.000Z

const getDate = new Date('2022-06-10 13:15:53').toLocaleDateString(); // 가공 후
console.log('결과 : ',getDate); // 결과 : 2022. 6. 10.

​

추가적으로 Date() 함수보다 더 쓰기 편한 Moment.js 도

다뤄봤다. 아래 링크를 클릭하면 이동한다.

​

​

자바스크립트에 대해 아마 가장 자주 쓰는 코드를 물어본다면,

단언코 var , let, const 일것이다.

컴퓨터를 예로 들면, 컴퓨터를 부팅하고 실행하기 위해 각종 메인부품 외 부속 부품들을 조합하고 연결하여

실행하여야 한다.

​

그런데 이와 같은 과정을 하기 위해선 쉽지 않다. 각 부품별 최적의 회로와 사이즈, 전력량 등을 효율적으로 짜임새

있게 구성하여야 컴퓨터를 효과적으로 사용하고 오래 사용할 수 있는 컴퓨터를 구성할 수 있기 때문이다.

​

프로그래밍도 이와 마찬가지로 여러 변수 및 상수들을 효율적으로 구성하여야 프로그램을 실행하는 데 있어

방해가 되는 버그 사항을 사전에 식별할 수 있어야 하고, 가급적 자주 사용하는 부품들을

공유하여 같이 사용할 수 있게끔 효율적으로 짜는 행위가 필요하다.

서론이 길었으나, 반드시 기억하고 있어야 하는 내용이라고 생각하고 비단 자바스크립트 뿐만 아니라

다른 모든 프로그래밍 언어에도 공통적으로 적용되는 사항이라고 생각한다.

1. 호이스팅의 개념

호이스팅이란, 변수와 함수의 메모리 공간을 선언 하기 전에 미리 할당하는 것을 의미한다.

​

이게 무슨 말이냐 ? 필자도 무슨 말인지 이해하기 힘들었지만, 다시 풀어서 설명해보면

#선언

var name;
console.log('결과 : ',name); // 결과 : undefined

위와 같은 코드는 선언을 하는 코드이며, 프로그램 작성자가 초기화를 하지 않았기에

name이라는 용어가 어떤 행위를 하거나 어떤 역할을 하는지

컴퓨터에서는 알 수가 없으므로 프로그램에서 에러로 식별될 수있다.

그러나 그것을 자바스크립트에서 사전에 잡아주는 행위를 하는데,

var 의 경우에는 초기화를 하지 않았을 경우 undefined로 할당된다.

​

자 그럼, 호이스팅을 왜 하는지 궁금할 것이다. 그냥 실행해도 되지 않나? 라고 생각할 수 있지만

자바스크립트는 컴파일러가 아닌 인터프리터로 실행한다.

# 컴파일러의 역할

원시코드를 기계어로 번역하여 실행 프로그램으로 만든다.

# 인터프리터의 역할

프로그램의 소스코드를 직접 실행하는 프로그램 및 환경이다.

​

쉽게 설명하자면, 컴파일러의 경우 소스코드를 전부 다 읽은 다음에 번역하여 실행 프로그램으로 만든다.

즉, 한국말처럼 모든 내용을 끝까지 다 듣고 판단한다는 것이다.

​

그러나 인터프리터의 경우 소스코드를 한 줄 단위로 읽고 실행한다.

한 줄 단위로 실행하는 기준에 있어 첫 줄부터 순차적으로 읽고 실행하는데,

사전에 선언하지 않았을 경우 그 다음 실행코드에서 인지하지 못하고 에러를 발생할 수도

있는 것이다. 결국 그것을 방지하기 위해서 호이스팅 처리를 하는 것이다.

​따라서 아래와 같은 코드도 에러가 발생하지 않는 것이다.

# 변수 예제

console.log(dog); // 호이스팅한 var 선언으로 인해 undefined 출력
var dog; // 선언
dog = '똘똘이'; // 초기화

# 함수 예제

dogName("똘똘이");
function dogName(name) {
	console.log("제 강아지 이름은 " + name + "입니다"); // 제 강아지 이름은 똘똘이입니다
}

const 와 let 의 경우, 호이스팅 대상이지만 var와는 다르게

undefined로 초기화하지는 않아서, 코드 실행 시 에러가 발생한다.

정리하자면, 호이스팅은

인터프리터에 의해 자바스크립트 코드가 실행할 때 나중에 선언된 변수나 함수에 대해

호이스팅 처리를 하여 에러를 방지하기 위해 하는 행위라고 볼 수 있겠다.

​

# 참고 문헌

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0

​

흔히 자바스크립트에서 사용하는 자료구조에서 선언하는 변수 및 상수의 경우,

제목과 같이 var, const , let 으로 사용할 것이다.

필자의 경우 이것들에 대해 잘 모르는 경우가 많았어서, var 만 사용한 경우가 훨씬 많았다.

아니, 사실 var 이외의 것들이 존재하는 지도 잘 몰랐다.

시간이 흐르고 이것에 대해서 헷갈려 하는 분들이 있을 수 있어 자료를 남긴다.

1. var

사실 자바스크립트 프로그래밍을 하다보면 아마 제일 많이 쓸 것이다.

왜냐하면 var로 선언할 경우 전역 변수이기 때문에 어디에서 사용하던 간에

어지간하면 타입 에러나 쓰는 순서를 잘못 써서 생기는 에러가 거의 없기 때문이다.

* 사용법

1) 2개 이상 변수 한번에 선언 및 초기화

2) 다수 변수 초기화

var x = 0;
function f(){
  var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다!
}
f();
console.log(x, y); // 0, 1 // x는 예상대로 전역이다

2. let

let은 해당하는 블록 내에서 사용하는 지역 변수이다.

let은 var와 같은 전역 변수가 아니기 때문에 특정 구간에서만 사용되므로,

특정 함수내에서 주로 실행한다.

let x = 1;
if (x === 1) {
x = 2;
console.log(x); // expected output: 2
}
console.log(x); // expected output: 2

다음 코드를 보면, x = 1이므로 x에 2의 값을 할당하여

console.log()를 실행하여 2의 값이 나오는 것을 확인할 수 있다.

즉 x의 값이 2로 할당된 것이다.​

이와 다르게 다른 방식도 보겠다.

이 코드는 위에 선언된 x의 값을 바꾸는 것이 아니라 if 함수 내

let x 라는 지역변수를 새로 할당하여 값을 표기하는 것이다. 그러므로

제일 위쪽의 let x = 1 이라는 코드에 관여하는 것이 아니므로

블록을 벗어난 코드를 작성했을 경우 출력결과가 1인 것이다.

이러한 점을 들어, var 와 비교해보겠다.

function varTest() {
    var x = 1;
  if (true) {
       var x = 2; // 같은 변수!
       console.log(x); // 2
  }
console.log(x); // 2 }
function letTest() {
    let x = 1;
 if (true) {
    let x = 2; // 다른 변수
   console.log(x); // 2
 }
console.log(x); // 1
}

이제 차이가 보일 것이다.

var 의 경우 전역변수이기에 값이 변경될 때 위의 코드에서 참조하여 값을 재할당하지만,

let 의 경우 지역변수이기에 위의 코드에서 참조할 수 없어 새로운 변수를 만들어야 한다.

​

3. const

const는 상수로서 한번 선언하면 변경되지 않는 수이다. 게다가 const 의 경우 호이스팅의 대상이지만

undefined 로 정의되지 않고 초기화 에러가 발생한다. 다른 변수와 달리

'상수'는 변하지 않기에 차후 할당되지 않으므로 에러를 발생시키는 것이다.

const 의 경우 일반적인 표기방식은 대문자로만 표기하는 것을 관습으로 한다.

const MY_NAME = '겨울';
// 재할당
MY_NAME = '가을';
// 출력
console.log("my Name is: " + MY_NAME); // 에러발생

위와 같은 코드는 const 는 상수이기에 가을이란 이름을 넣었을 경우 할당이 되지 않는 것이다.

const MY_NAME = '겨울';
if (MY_NAME === '겨울') { // 블록 범위로 지정된 MY_NAME 이라는 변수를 만드므로 괜찮습니다
   let MY_NAME = '가을'; // MY_NAME은 이제 가을입니다
   console.log('my name is ' + MY_NAME);
}

이 방식은 기존의 상수인 const MY_NAME에 대해 간섭하는 것이 아닌,

새로운 지역변수 let MY_NAME 을 만드는 것이므로, 가능한 방식이다.

​자 그럼, 어떤 경우에 var 와 let , const 를 사용하여야 할까?

사실 var를 제외한 let,const는 ES6 에서 새롭게 추가된 것들 이므로,

기존 var의 역할을 대체하기 위해 만들어진 것들이다.​

기존 var 의 단점은 전역변수이면서 어디서나 많이 쓰이는 변수지만, 반대로 어디서나 쓰이기 때문에

디버깅할 때 어떤 변수에서 문제가 발생하는지 찾기 힘들다.

왜냐하면, var 의 경우 중복으로 변수 설정이 가능하여 프로그램 규모가 커질 경우 중복된 변수의 값을

찾기가 쉽지 않기 때문이다.​

또한, 중복으로 설정할 경우 해당 변수에 메모리를 할당하는 과정에 있어서 불 필요한 용량을

차지할 수 있기 때문이다.

그러나 let의 경우 지역변수이지만 중복으로 변수 선언이 불가능하고,

필요시 값의 변경이 가능하기 때문에 코드 가독성 측면과 메모리 관리 관점에서 유용하고,

​const 의 경우 상수지만 전역으로 사용할 수 있기 때문에 자주 사용하는 값을 const로 선언하여

사용하고, 필요시 let 으로 새로운 지역변수를 만들어 사용하는 것이 올바른 메모리 관리에 있어

더 좋은 방법인 것 같다.​

결론 !

그러므로 꼭 필요한 경우가 아니면 var 의 사용은 왠만하면 피합시다!

참고자료

​

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

​

​

​

​

​

​

자바스크립트에서 흔히 쓰는 String 형태에 대한

문자열에 대해 알아보는 데 있어, 생각보다 기초적인 정보를 많이

놓치고 있는 부분이 있어 정리하게 되었다.

​

문자열의 정의는 문자의 나열로 , 여러개의 문자를 표현하는 데이터 타입이라고 보면 된다.

다음은 문자열 예제다.

다음과 같이 문자열은 '' 혹은 "" 로 감싸주어 표현한다.

* 예제

1) 문자열중 특정 문자 1글자를 추출할 때

let text = 'String'
console.log(text.charAt(1)); // t

* 문자열의 특징

문자열의 경우 일반 문자열과 String Object 로 나뉘는데,

일반적인 문자열의 경우 원형 문자열이라고 정의한다.

​

생성자 (new String())를 사용하지 않고 위의 예제와 같은 방법으로 표기를 하면,

원형 문자열로 정의되는데, String Object와의 차이를 아래와 같이 표기하겠다.

let string_primary = "apple";
let string_object = new String(string_primary);
console.log(typeof string_primary); // 로그 : "string"
console.log(typeof string_object); // 로그 : "object"

통상적인 경우 개발자가 String을 사용할 시 생성자를 따로 사용하여 개발하는 일은

드물기 때문에 크게 관심을 쏟을 만한 요소는 아니라고 생각한다.​

다음 포스팅에서는 이와 관련하여 자료형을 입맛대로 변경할 수 있는

정규표현식에 대해 알아보도록 하겠다.

정규식에 대한 설명은 나중에 부연 설명을 하고 급하신 분들을 위해

코드를 먼저 작성하겠다.

const numberFormat = (number) => {
       if (number)
          return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       else if (number === 0)
          return 0;
       else return ''
 };
console.log(numberFormat(1500));

결과 : 1,500

자바스크립트는 문자열을 넣든, 숫자형을 넣든

정상적으로 반환하지만

타입스크립트의 경우 숫자가 아닐 경우 undefined 에러가 발생하기 때문에

숫자가 아닐 경우에 대한 것도 예외처리를 해주어야 한다.

프로그램에서 사업자등록번호를 입력하게끔 하려면,

사용자가 사업자등록번호를 잘못 입력해도 올바르게 등록될 수 있게 처리를 해주어야 한다.

코드로 살펴보자

const companyNumber = (str) => {
           return str.replace(/(\d{3})(\d{2})(\d{5})/, '$1-$2-$3');
}
console.log(companyNumber('1234567890'));

결과 : 123-45-67890​

우리나라 사업자등록번호의 경우 10자리로 구성되어 있으며,

3자리-2자리-5자리로 구성된다.​

앞의 3자리는 관할세무서 지역코드이고

중간 2자리는 개인인지 법인인지의 성격 코드이며

뒤의 5자리중 4자리는 등록일자/지정일순으로 번호를 부여하며,

가장 뒷자리는 시스템 오류검사 번호이다.

​

* 코드 상세 설명은 향후 정규표현식에 대한 개념 정리시 작성하겠다.

한국 화폐

공공기관이나 기업의 견적서,주문서 등을 프로그램에 구현하여

보여줄 일이 가끔씩 있는데 문제는 금액을 표기할 시 한국어로 표기해야 하는 경우가 있다.

ex) - 금액 일십칠만삼천원정

​

따로 자바스크립트에서 지원하는 함수는 없고, 직접 만들어야 하는데

아래코드를 실행해보자.

const KorMoneyParse = (num) => {
var x = new Array("", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구", "십"); 
var y = new Array("", "십", "백", "천", "", "십", "백", "천", "", "십", "백", "천", "", "십", "백", "천"); 
var kor = ""; 
var str = ""; 
var result = ""; 
	for (let i = 0; i < num.length; i++) { 
		str = ""; 
		kor = x[num.charAt(num.length - (i + 1))]; 
		if (kor != "") 
			str += kor + y[i]; 
		if (i == 4) 
			str += "만"; 
		if (i == 8) 
			str += "억"; 
		if (i == 12) 
			str += "조"; 
		if (i == 16) 
			str += "경"; 
			result = str + result; 
	} 	if (num != 0) 
			result = result + "원"; 
			return result; 
	} 
	console.log(KorMoneyParse('1503000'));

결과 : 일백오십만삼천원

각종 변경할 점 있으면 더 커스텀하면 되겠다.

날짜를 이용해 다양한 프로그램을 만들 일이 많은 데,

순수 Date() 함수로는 귀찮으므로 Moment 의 각 메서드를 알아보자..

​

1.패키지설치

npm i --save moment

2. 유형별 메서드

​1) 특정 날짜 기준 이전 날짜구하기

2) 현재 날짜가 어느 주에 속해 있는 지 확인하기

import moment from "moment"; let nowDate = moment(); // 현시점, 2022-07-06, Date 형식
let nowDateWeek = nowDate.week(); // 해당 날짜 기준 주차, 2022년 7월 6일은 28주차이다.

3) 특정 날짜가 기준날짜 이후인지 체크하기

import moment from "moment";
let nowDate = moment(); // 현시점, 2022-07-06, Date 형식
let standard_date = moment('2022-07-22');
console.log('log : ',nowDate.isAfter(standard_date)); // log : false

4) 특정 날짜가 기준날짜 이전인지 체크하기

import moment from "moment";
let nowDate = moment(); // 현시점, 2022-07-06, Date 형식
let standard_date = moment('2022-07-22');
console.log('log : ',nowDate.isBefore(standard_date)); // log : false

5) 특정 날짜가 무슨 요일인지 체크하기

import moment from "moment";
let nowDate = moment(); // 현시점, 2022-07-06, Date 형식
console.log('log : ',nowDate.day()); // log : 3(수요일) ** 0 -> 일 ..., 6 -> 토

6) 특정 날짜를 String 형식으로 출력하기

import moment from "moment";
let nowDate = moment(); // 현시점, 2022-07-06, Date 형식
console.log('log : ',nowDate.format('YYYY-MM-DD')); // log : 2022-07-06, String 형식