[Section 02] JavaScript 심화

< 배운 내용 요약 정리 >

< 막힌 혈을 뚫어주신 갓용재님의 가르침..ㅠㅠ >
  
  ex ) a 값이 0이거나 6인 경우 "주말"을 출력, 그 외 "평일"을 출력하고 싶을 때
    깔끔한 풀이를 만들어보고 싶어서
    return a === 0 || 6 ? "주말" : "평일";로 작성하고 1시간을 굳어있었다...
    이 경우 a는 (0 또는 6)이 아니고 (a===0)이거나 6이 된다는 사실을 알기 전까지..
    
    if문에 사용할 때도 동일하다. 
    굳이 사용하고자 한다면 a === 0 || a === 6 ?로 각각 적용을 해줘야 한다.
    
    배열에 원하는 값이 있는지 확인하는 includes 매서드를 활용하는 방법도 좋다.
    [0, 6].includes(date.getDay())로 사용할 수 있다. ( 잊지 말자.. ㅠㅠ )

Math		Date
01. abs(number)	음수를 양수로 변경	01. getFullYear()	연도 반환
02. ceil(number)	올림	02. getMonth()	월 반환, +1 해줘야 원하는 달 출력
03. floor(number)	내림	03. getDate()	일 반환
04. round(number)	반올림	04. getHours()	시간 반환
05. random( )	난수 생성	05. getMinutes()	분 반환
06. pow(number, n)	거듭제곱	06. getSeconds()	초 반환
07. min(...numbers)	최소값	07. getDay()	요일 반환, 1~7(월~일)
08. max(...numbers)	최대값	08. setFullYear()	연도 설정, 시분초 초기화 안 됨
09. sqrt(number)	제곱근	09. setMonth()	월 설정, 시분초 초기화 안 됨
10. sin(), cos(), tan()	삼각함수	10. setDate()	일 설정, 시분초 초기화 안 됨

---

< 17. Math 객체 >

• 인스턴스 속성, 인스턴스 매서드가 없다
• new 키워드를 사용할 필요가 없다
• 주요 속성 Math.PI 정도만 기억하면 된다. 나머지는 사용할 일 거의 없다

---

1. abs() : 음수 → 양수

• 음수를 양수로 바꿀 때 사용
• 주어진 매개변수의 절대 값을 반환하는 매서드
• 알고리즘 문제에 많이 나옴

console.log(Math.abs(-5)); // 5

---

2. ceil() : 올림

• 주어진 수보다 크거나 같은 정수 중에서 가장 작은 값을 반환
• 굉장히 자주 사용 (실무)

console.log(Math.ceil(4.2)); // 5

---

3. floor() : 내림

• 주어진 수보다 작거나 같은 정수 중에서 가장 큰 값을 반환
• 굉장히 자주 사용 (실무)

console.log(Math.floor(4.2)); // 4

---

4. round() : 반올림

• 주어진 수를 반올림
• 굉장히 자주 사용 (실무)

console.log(Math.round(4.2)); // 4
console.log(Math.round(4.5)); // 5

---

5. random() : 난수 생성

• 0 이상 1 미만의 난수 생성
• 굉장히 자주 사용 (실무)

console.log(Math.random());
// 0부터 45까지의 랜덤한 숫자가 필요할 때
console.log(Math.random() * 45); // 0 ~ 45미만의 소수점 숫자가 나옴
console.log(Math.floor(Math.random() * 45));
// 0 ~ 45미만의 정수 숫자가 나옴

---

6. pow(num, n) : 거듭제곱

• num의 n승, 즉 거듭제곱을 반환
• 알고리즘 문제 많이 나옴

console.log(Math.pow(2, 3)); // 8

• 피타고라스의 정의 수식

a2 + b2 = c2
function calculate(a, b) {
  return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
console.log(calculate(3, 4)); // 5

---

7. min()

• 주어진 숫자 중에 가장 작은 값을 반환
• 알고리즘 문제 많이 나옴

console.log(Math.min(1, 2, 3)); // 1

---

8. max()

• 주어진 숫자 중에 가장 큰 값을 반환
• 알고리즘 문제 많이 나옴

console.log(Math.max(1, 2, 3)); // 3

---

9. sqrt() : 제곱근

• 주어진 숫자의 제곱근 반환
• 알고리즘 문제 많이 나옴

console.log(Math.sqrt(4)); // 2
console.log(Math.sqrt(5)); // 2.23606797749979

---

10. 삼각함수 sin() cos() tan()

Math.sin(), Math.cos(), Math.tan()

---

< 18. Date 객체 >

• new 키워드로 인스턴스를 만드는 것부터 시작

const date = new Date();
console.log(date); // Mon Nov 04 2024 12:15:41 GMT+0900 (한국 표준시)

• 우리가 원하는 포맷팅으로 바꾸기 위해 매서드 사용 필수
• Date() 안에 2025, 11, 25 를 넣을 수도 있고 "2025-12-25" 를 넣을 수도 있다
• 이렇게 날짜를 지정하면 시분초는 다 0으로 출력
• 실무에선 moment.js(과거에 많이 사용), date-fns 시간 관련 라이브러리 많이 사용할 것

---

1. getFullYear()

• 연도 반환

console.log(date.getFullYear()); // 2024

---

2. getMonth()

• 월 반환
• 1월 = 0, 12월 = 11
• 따라서, 항상 +1을 해줘야 우리가 원하는 달의 값을 반환

console.log(date.getMonth()); // 10 (11월)
console.log(date.getMonth() + 1); // 11 (11월)

---

3. getDate()

• 일 반환

console.log(date.getDate()); // 4

ex ) 연도-월-일을 YY-MM-DD로 하고 싶다면?

• 문자열로 바꿔야 가능, 숫자는 앞에 0을 붙일 수 없으므로

const year = date.getFullYear();
const month = date.getMonth() + 1;
const dates = date.getDate();
const dates2 = String(date.getDate()).padStart(2, "0");
// 문자열로 변환 후 앞에 0 붙이기
console.log(`${year}-${month}-${dates}`); // 2024-11-4
console.log(`${year}-${month}-${dates2}`); // 2024-11-04

---

4. getHours()

• 시간 반환

console.log(date.getHours());

---

5. getMinutes()

• 분 반환

console.log(date.getMinutes());

---

6. getSeconds()

• 초 반환

console.log(date.getSeconds());
// 시간, 분, 초도 문자열로 형변환 후 padStart로 0을 붙여주면 두 자리로 가능

---

7. getDay()

• 요일 반환
• 1: 월요일, 7: 일요일

console.log(date.getDay()); // 1 (월요일)
const daysString = ["일", "월", "화", "수", "목", "금", "토"];
// 0 ~ 6 ( 일요일 ~ 토요일 ), 제일 처음이 0이므로 일요일을 넣어야 함
console.log(daysString[date.getDay()]); // 월

---

8. setFullYear()

• 년도를 설정할 수 있음
• 시분초는 초기화 안 됨

---

9. setMonth()

• 월을 설정할 수 있음
• 시분초는 초기화 안 됨
• 0: 1월, 11: 12월
• 12(1월) : 11을 넘어가면 0부터 시작해서 카운트 됨

---

10. setDate()

• 일을 설정할 수 있음
• 시분초 초기화 안 됨

ex ) 6일 후 날짜를 구하고 싶다면?

const date = new Date(2025, 11, 31);
console.log(
  `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate() + 6}`
);
// 2025-11-37, 이렇게 하면 안 됨

const date = new Date(2025, 11, 31);
date.setDate(date.getDate() + 6);
// date.setDate 안에 date.getDate() + 6 넣어야 됨
console.log(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`);

ex ) 날짜의 차이를 구하고 싶다면?

const date1 = new Date();
const date2 = new Date("2024-12-04");
console.log(date1);
console.log(date2);
console.log(date2 - date1);
// 밀리세컨드 단위로 두 날짜 사이의 시간 차이를 보여줌

const dateDiff = Math.abs(date2 - date1);
console.log(dateDiff);
// console.log(date2 - date1);과 같다
const diffDay = dateDiff / (60 * 60 * 24 * 1000);
console.log(diffDay); // 29.786726909722223일
console.log(Math.ceil(diffDay)); // 30일, 보통은 올림 많이 사용

※ 프론트와 서버의 날짜 시간대가 달라서 생기는 문제가 있다!!

• 프론트는 한국 표준시, 서버는 UTC
• 서버측에서 Timezone을 Asia/Seoul로 해줘야 프론트와 달라지지 않음

ex )
const date = new Date("2024-1-1");
console.log(date);
// 코드러너 2023-12-31T15:00:00.000Z
// 웹브라우저 Mon Jan 01 2024 00:00:00 GMT+0900 (한국 표준시)
// 웹브라우저에는 정상적으로 나오므로 걱정 안 해도 됨

---

< 하루 정리 >

함수, 반복문, 객체, 클로저, 매서드, class 등 머릿 속에 정리가 되지 않았는데
새로운 내용이 계속 해서 들어오니까 잘 기억나고 잘 해결했던 것들조차도 하나도 모르겠다...
어디서 뭘 써야할 지 뭘 그 동안 써왔는지도 모르겠고 걱정이 자꾸 커진다.

열심히 한다고 했는데 진짜 그냥 나름대로의 열심히인건지 마음도 머리도 복잡하다.
오늘은 RBF시간에 다 같이 코딩 테스트 문제 풀이를 공유했는데,
그 간단한 문제들조차도 다른 팀원들이 푼 것과 내가 푼 풀이가 확연히 차이가 난다.

부족함이 하루 하루 더 크게 느껴지는 것 같아서 자신감도 자존감도 많이 낮아지는 것 같다..

그래도 팀원들이랑 같이 공부하고 공유하면서 부족함을 느끼는게 다행일지도 모른다.
잘 하는 분들이 계시니까 새로운 것들도 알려주시고 모르는 부분도 많이 채워주셔서 항상 감사한 마음이다.
우리 감자팀은 참 다들 밝고 좋은 사람들인 것 같다 진짜 최고..ㅠㅠ