date
-
[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. 6. 00:42
지난 포스트까지 해서 필요한 날짜 데이터는 다 불러왔으니깐, 일단 가볍게 스타일을 좀 주도록 하겠습니다. 왜냐하면 지금 너무 못생겼거든요..ㅎㅎ(?) 자, 그러면 일단은 index.html에서 css파일 링크를 걸어줍시다. ... MHDP Full Calendar ... 그러고 나서 간단하게 전체적인 태그들의 margin, padding을 없애주고, 지난번과 마찬가지로 calendar를 가운데 정렬하기 위해서 body부분에 display: flex를 주고 min-height 값을 100vh 만큼 주도록 하겠습니다. * { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body { display: flex; justify..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 가져오기만학도 프로젝트/JavaScript Calendar 2020. 8. 5. 01:03
HTML 뼈대를 잘 잡았으니, 이제 우리가 필요한 날짜 데이터를 만들어 봅시다. 날짜 데이터니깐 Date객체를 활용해야 되겠죠? const date = new Date(); const viewYear = date.getFullYear(); const viewMonth = date.getMonth(); 그리고 년도와 월은 중간중간에 몇 번 더 사용해야 돼서 메서드를 자꾸 호출하는 것보다는 미리 값을 가지고 있는 게 더 좋을 것 같다는 생각에 변수 두 개를 따로 만들어 줬습니다. 성능에는 큰 영향은 없을 것 같긴 하지만, 필요한 부분에 메서드를 호출하는 것 보다는 이렇게 호출된 값을 미리 만들어 두고 사용하는 게 가독성 측면에서 좀 더 좋은 것 같아서 이렇게 작성해 봤습니다. 혹시나 이 부분에 데해서 좋은 ..
-
[JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript Calendar 2020. 8. 3. 03:30
만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다. 이번에도 지금까지 정리했던 slice, concat, forEach, for.. of, Object.keys(), 전개 구문들을 활용해서 작업을 해볼 예정이고, 역시 가장 먼저 해야 될 일은 기획이겠죠? 어떤 달력을 만들어볼까 고민하던 중에 처음에는 예쁘게 디자인된 달력을 만들어볼까 하다가, 저의 디자인 감각이 따라주지도 않을뿐더러 프로젝트 내에서 css 영역에 내용도 많아 질 것 같아 조금 가벼운 마음으로 이번에도 역시 그냥 맥북의 기본 캘린더의 모양을 좀 가져와서 그려봤습니다. 1. 왼쪽 위에는 년도와 월, 2. 그리고 오른쪽 ..
-
[JavaScript] 간단한 달력 만들기 - 스타일링 하기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 9. 00:10
이제 마지막 스타일링만 남았습니다. 사실 js코드는 별로 없는데 오히려 css코드가 훨씬 많은 것 같습니다. 일단은 폰트와 스타일 시트 링크태그를 index.html 파일에서 head에 붙여주겠습니다. 구글 폰트에서 montserrat라는 폰트를 가져왔고, 이제 style.css 파일을 만들어 작성해보도록 합시다. * { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: url('https://img1.daumcd..
-
[JavaScript] 자바스크립트 Date 객체 이해하기 - 2프로그래밍 이야기/JavaScript 공부 2020. 6. 21. 22:36
[JavaScript] 자바스크립트 Date 객체 이해하기 - 1에서 살펴본 Date객체는 여러 가지 메서드를 통해서 다양하게 활용될 수 있다. Date객체 메서드 1. get메서드 Date 객체에는 get으로 시작하는 메서드가 몇 가지 있는데, 말 그대로 Date객체에서 필요한 정보를 가져오는 기능을 한다. Date 객체에서 가장 자주 사용되는 메서드들이다. const myDate = new Date(2020, 6, 22); myDate.getFullYear(); myDate.getMonth(); myDate.getDate(); myDate.getHours(); myDate.getMinutes(); myDate.getSeconds(); myDate.getMilliseconds; myDate.getDay..
-
[JavaScript] 자바스크립트 Date 객체 이해하기 - 1프로그래밍 이야기/JavaScript 공부 2020. 6. 17. 00:05
자바스크립트에서 날짜와 시간과 관련된 부분을 다룰 때는 Date 객체를 유용하게 활용할 수 있다. Date 객체 만드는 법 객체를 만드는 방법은 총 4가지가 있는데 하나씩 살펴보자. 1. 파라미터로 아무 값도 전달하지 않는 경우 // new Date() const date = new Date(); Date 객체는 new 연산자를 통해서 새로운 객체를 만들어 주어야 한다. 이렇게 Date 객체를 생성할 때, 소괄호 안에 아무런 값도 전달해주지 않으면, 현재시간으로 객체가 생성된다. 2. 파라미터로 숫자 값을 전달하는 경우 // new Date(milliseconds) const date = new Date(1000); console.log(date); // Thu Jan 01 1970 09:00:01 GM..