자바스크립트 달력만들기
-
[JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기!만학도 프로젝트/JavaScript Calendar 2021. 9. 11. 20:35
갑자기 너무 바빠졌다는 핑계로 블로그 관리를 소홀히 하던 중 오랜만에 들어왔더니 너무 감사하신 분이 버그를 제보해 주셨습니다. 잉? 31일엔 왜 2개월이 넘어가지..?!... 그러고 나서 왜 그런지 봤더니 지난달, 다음 달로 넘어가는 코드를 제가 너무 고민 없이 작성했더라고요! let date = new Date(); // ...( 생략 )... const prevMonth = () => { date.setMonth(date.getMonth() - 1); renderCalendar(); } const nextMonth = () => { date.setMonth(date.getMonth() + 1); renderCalendar(); } const goToday = () => { date = new Date..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 이동, 날짜 구분, 오늘 표시만학도 프로젝트/JavaScript Calendar 2020. 8. 7. 00:16
지난 포스트 마지막에 정리한 남은 일들을 다시 한번 훑어보면 1. 지난달 다음 달 오늘 날짜로 돌아가는 기능 만들기 2. 지난 달 부분과 다음 달 부분을 조금 투명하게 하기 3. 오늘 날짜 표기하기 총 3가지였습니다. 그럼 1번부터 하나씩 차근차근 해결해보죠. 생각해보면 일단 달력을 그리는 로직은 모두 잘 만들어 뒀으니깐, 지난달, 다음 달 오늘로 Date객체의 정보만 수정해주면 됩니다. 그래서 그동안 만든 코드에서 date부분만 남기고 나머지를 함수로 만들어 줍시다. // Date 객체 생성 const date = new Date(); const renderCalendar = () => { const viewYear = date.getFullYear(); const viewMonth = date.get..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 가져오기만학도 프로젝트/JavaScript Calendar 2020. 8. 5. 01:03
HTML 뼈대를 잘 잡았으니, 이제 우리가 필요한 날짜 데이터를 만들어 봅시다. 날짜 데이터니깐 Date객체를 활용해야 되겠죠? const date = new Date(); const viewYear = date.getFullYear(); const viewMonth = date.getMonth(); 그리고 년도와 월은 중간중간에 몇 번 더 사용해야 돼서 메서드를 자꾸 호출하는 것보다는 미리 값을 가지고 있는 게 더 좋을 것 같다는 생각에 변수 두 개를 따로 만들어 줬습니다. 성능에는 큰 영향은 없을 것 같긴 하지만, 필요한 부분에 메서드를 호출하는 것 보다는 이렇게 호출된 값을 미리 만들어 두고 사용하는 게 가독성 측면에서 좀 더 좋은 것 같아서 이렇게 작성해 봤습니다. 혹시나 이 부분에 데해서 좋은 ..
-
[JavaScript] 간단한 달력 만들기 - 날짜 데이터 만들기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 8. 00:08
이번에는 자바스크립트로 날짜 데이터를 만들고 지난번에 잡아둔 HTML 구조에 넣어봅시다. 날짜는 당연히 Date객체를 활용해야겠죠? Date객체를 하나 만들어 줍시다. // index.js const now = new Date(); 변수 이름은 이것저것 고민하다가.. 그냥 now로 했습니다. 역시 변수 이름 짓는 게 제일 어려운 것 같아요.. 그다음은 이제 데이터로 쓸만한 요소들을 하나씩 좀 뽑아와서 다시 객체로 정리할 건데요. 오늘 날짜에 필요한 정보들을 모아둔 객체니깐, 변수 이름은 today로 지어줬습니다. // index.js const now = new Date(); const today = { year: now.getFullYear(), date: now.getDate(), month: now..