날짜 비교하기
Date 함수 자세히 알아보기
문자열을 Date로 변환하는 방법
날짜, 시간 비교
Date()
new 키워드가 없는 Date() 함수는 인수를 무시하며, 현재 날짜 및 시간을 나타내는 문자열을 반환한다.
✅ Date('자바...칩프라푸치노')
✅ // 'Tue Jan 12 2023 19:58:27 GMT+0900 (한국 표준시)'
// 메소드에 인수를 넣어도 현재 시간을 반환한다.
Date()
// 'Tue Jan 12 2023 19:58:27 GMT+0900 (한국 표준시)'new Date()
new 키워드를 사용한 new Date()는 Date 타입인 새로운 객체를 생성한다.
-
인수를 생략하면, 현재 날짜 및 시간을 나타내는 Date 객체가 생성된다. Date 생성자의 인자 형태는 다음 네 가지다. ✅ Date()은 일반 문자열을 반환한다. new Date()과 차이점임.
-
인자 형태 4가지
- 값을 생략한다.
- UNIX 타임 스태프 값
- 타임 스태프 문자열
- 개별 날짜 및 시간
- 예제코드
const date = new Date();
console.log(" date : ", date);
console.log(" date : ", typeof date);
const date2 = new Date("2023-01-12");
console.log(" date2 : ", date2);
console.log(" date2 : ", typeof date2);
const date3 = new Date(2023, 01, 12);
console.log(" date3 : ", date3);
console.log(" date3 : ", typeof date3);
const date4 = new Date(2023, 01, 12, 15, 21, 00);
console.log(" date4 : ", date4);
console.log(" date4 : ", typeof date4);
-------------Return
date : 2023-01-12T06:23:02.228Z
date : object
date2 : 2023-01-12T00:00:00.000Z
date2 : object
date3 : 2023-02-11T15:00:00.000Z
date3 : object
date4 : 2023-02-12T06:21:00.000Z
date4 : objectSwitch
- 언제 써야하는가?
정해진 범위안의 값에 대해 특정한 일을 해야하는 경우.
if else if esse if else if ... else 이렇게 지저분하게 적지말고, case문으로 간결하게!
let day = 6;
let dayName;
switch(day) {
case 0 :
dayName = '월요일';
✅ break;
// 조건에 만족하면 코드가 끝나도록 하기 위하여 꼭 break를 작성해주어야 한다.
case 1 :
dayName = '화요일';
✅ break; // break 까먹지 않고 꼭! 의도치 않은 error의 원인이 될 수 있다.
case 2 :
dayName = '수요일';
break;
case 3 :
dayName = '목요일';
break;
case 4 :
dayName = '금요일';
break;
case 5 :
dayName = '토요일';
break;
case 6 :
dayName = '일요일';
break;
default :
console.log('해당 요일 없음.')
}
// 조건 2개를 만족하는 case인 경우,
let condition = 'okay'; // okay, good => 좋음, bad => 나쁨
let text;
switch(condition) {
✅ case 'okay':
✅ case 'good':
text = "좋음!";
break;
case 'bad';
text = "나쁨.."
break;
default :
console.log('기뷰니가 중간입니다.')
}
- ✅ case가 끝나면 항상 break 까먹지 않고 꼭! 의도치 않은 error의 원인이 될 수 있다.
JSON
JSON이란?
JavaScript Object Notation의 약자.
데이터를 문자열의 형태로 나타내기 위해서 사용된다.
✅ JSON 파일은 문자열이다.
JSON은 가독성이 좋다. 기계와 사람이 읽기편하다.
JSON.parse()
- JSON 문자열을 인자로 받고, 결과값을 Javascript Object로 반환한다.
const str = `
{
"name" : "송강",
"age" : "27",
"mariried" : false,
"family" : {"father" : "송강호", "mother" : "김혜자"},
"hobbies" : ["운동", "등산"],
"jobs" : "actor"
}
`;
const obj = JSON.parse(str);
console.log(obj.family?.father);
// str이 자바스크립트 객체 형태로 출력된다.JSON.stringify()
Javascript Object를 JSON 문자열로 반환한다.
자바스크립트 객체를 인자로 받고, JSON String을 반환한다.
const obj = JSON.parse(str);
console.log(obj.family?.father);
console.log(typeof obj);
// console.log(obj.hobbies[0]);
const jsonify = JSON.stringify(obj);
console.log(" jsonify : ", jsonify);
console.log(" jsonify : ", typeof jsonify);- JSON String으로 변환되었을 때, 자바스크립트 객체 형태 데이터 접근하는 방법은 사용 불가하다.
(obj.name) << 이렇게 접근이 안된다.
Why ??
- JSON String은 객체가 아닌 문자열이기 때문이다,
REST
useState Tip
const heavyWork = () => {
console.log('어떤 무거운 작업 로직');
return ['Kim','Park']
}
function App() {
// const [names, setNames] = useState( heavyWork() ) << 뭔가 업데이트 할 때마다 계속 실행된다.
const [names, setNames] = useState( () => {
return heavyWork();
} )
}컴포넌트는 함수가 실행될 때 마다 렌더링이 된다. 만약, input에 무엇인가 입력하고 게시글을 붙혀주는 로직일 때, 해당 페이지에 어떤 무거운 작업을 하는 함수가 있다고 해보자.
그러면 무거운 함수는 게시글을 붙혀줄 때 마다 렌더링이 다시 되어 효율적이지 못 할 것이다.
하지만 위에 적힌 코드처럼, 무거운 작업을 변수에 넣어주고 그 변수를 useState에 콜백함수로 보낸다면?
초기값을 가져올 때, 페이지 첫 렌더링때만 작업을 실행하고 말 것이라면 내가 원하는 값을 출력하는 콜백함수를 넣어주면 해결된다!! (아래처럼)
const [names, setNames] = useState( () => {
return heavyWork();
} )