[230417] Date | 정규표현식 | Canvas | D3 | chartJS | localStorage

윤지수·2023년 4월 17일

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기

32/51

🪄 Date

let d = new Date();

d.getDate();	// 1부터 시작. 날짜 출력
d.getMonth();	// 0부터 시작. +1을 해야함
d.getDay();		// 0부터 시작. 0은 일요일

d.getHours();
d.getMinutes();
d.getSeconds();

d.getFullYear();
// d.getYear();	// 1900년도부터 연도 계산, 사용X

// 6월 표시하기 위해서는 -1. 달은 0부터 시작하기 때문
new Date(2023, 5, 30);
new Date(2023, 5, 30, 18);	// Fri Jun 30 2023 18:00:00 GMT+0900 (한국 표준시)
// 다음처럼 표현하면 가독성이 훨씬 좋다.
new Date("2023/1/20/10:00:00");	// Fri Jan 20 2023 10:00:00 GMT+0900 (한국 표준시)

let today = new Date(); // today의 지정 로캘(locale)은 KST

// UTC((Universal Time Coordinated))와 today의 지정 로캘 KST와의 차이는 -9시간
// locale을 활용하면 언어권에 맞게 입력과 출력을 수정하지 않고도 사용하는 언어권에 맞는 날짜를 처리할 수 있다
today.getTimezoneOffset() / 60;	// -9

today = new Date("2023/1/20/10:00:00");
today.toString();	// 'Fri Jan 20 2023 10:00:00 GMT+0900 (한국 표준시)'
today.toTimeString();	// '10:00:00 GMT+0900 (한국 표준시)'

// 국제표준시 기준 형식으로 표현
today.toISOString();	// '2023-01-20T01:00:00.000Z'

today.toLocaleString("ko-KR"); // '2023. 1. 20. 오전 10:00:00'
today.toLocaleString("en-US"); // '1/20/2023, 10:00:00 AM'
today.toLocaleString("ja-JP"); // '2023/1/20 10:00:00'

// 날짜의 차를 구하는 코드
// getTime은 1970년 1월 1일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간(밀리 초)을 나타내는 숫자
function getDateDiff(d1, d2) {
  const date1 = new Date(d1);
  const date2 = new Date(d2);
  const diffDate = date1.getTime() - date2.getTime();
  // 일 == 밀리초 * 초 * 분 * 시
  return Math.abs(diffDate / (1000 * 60 * 60 * 24));
}

// 6월 30일까지 얼마나 남았을까?
getDateDiff("2023-04-17", "2023-06-30");	// 74

🪄 정규표현식

https://regexr.com/5nvc2

일반 문자열
/hello/gm
문자열의 처음과 끝
/^hello/gm : 처음에 hello
/hello$/gm : 끝에 hello
모든 문자열
/./gm : 모든 문자열(*과 같은 역할)
/....../gm : 모든 6개의 문자열
/h.llo/g

💡 만약 . 자체의 문자를 사용하고 싶다면 이스케이프 문자 사용: \.
택 1
대괄호 안에 있는 텍스트 중 택 1
/h[eay]llo/gm : 대괄호 안의 문자 중 1개
/h[ea]l../gm : 총 5개의 문자
범위
범위를 지정하여 매칭하고 싶을 때에는 - 사용
/h[a-f]llo/gm
/[a-zA-Z0-9]/gm : 모든 알파벳과 숫자를 찾음
/[^a-zA-Z0-9]/gm : 나머지 문자열을 찾음
부정
해당 문자열을 제외하고 찾고 싶을 때에는 ^ 사용
대괄호 안에 있다면 not을 의미
/h[^ae]llo/gm
그룹
/(on|ues|rida)/gm : 그룹 1로 3개 중 매칭되는 패턴을 찾음
/(on|ues)|(rida)/gm : 그룹1과 그룹2로 각각 매칭되는 패턴을 찾음
수량자
해당 문자가 몇 개 있는지를 명시하여 패턴을 찾음
_* : 앞에 있는 문자가 0개 ~ N개
_+ : 앞에 있는 문자가 1개 ~ N개
_? : 앞에 있는 문자가 0개 ~ 1개(: 나올 수도 있고 안나올 수도 있다)

{3} : 3개
{3,} : 3개 이상
{1,3} : 1개 ~ 3개
{0,} == *
{1,} == +
{0,1} == ?
캐릭터 클래스
/\w/gm : 문자
/\w{5} /gm : 5개의 글자와 스페이스 하나
/\W/gm : not 문자
/\d/gm : 숫자
/\D/gm : not 숫자
/\s/gm : 스페이스
/\S/gm : not 스페이스
한글 정규표현식
[ㄱ-ㅎ|ㅏ-ㅣ|가-힣] : 모든 한글
[^[가-힣]+$] : 한글만 허용
[^[가-힣\\s]+$] : 공백 허용