만학도 프로젝트
-
[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. 12. 22:49
자바스크립트로 간단한 달력만들기를 영상으로 녹화해봤습니다. 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분은 댓글로 알려주시면 더 멋지게 성장하는 모습으로 보답해 보이겠습니다 :) github: https://github.com/kimbigtop/MHD-simple-calendar index.html index.js const now = new Date(); const today = { year: now.getFullYear(), date: now.getDate(), month: now.toLocaleString('en-US', {month: 'short'}), day: now.toLocaleString('en-US', {weekday: 'short'}) } for (let key in ..
-
[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] 간단한 달력 만들기 - 날짜 데이터 만들기만학도 프로젝트/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..
-
[JavaScript] 간단한 달력 만들기 - HTML 뼈대잡기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 6. 01:25
블로그에 스스로 공부한 내용들을 정리하기 시작한 지 꽤나 시간이 흘렀습니다. 그런데 공부한 개념만 정리하려다 보니 슬슬 지치기도 하고, 재미도 없어지는 바람에 새로운 시도를 해볼까 합니다. 지금까지 정리한 내용들을 바탕으로 프로젝트를 시도해서 하나씩 뿌셔보자(?)라는 마음으로 만들면서 학습하면 도가 트려나? 프로젝트를 시작하려 합니다. 물론 순전히 저의 재미를 위해서 시작하는 프로젝트이긴 하지만 약간의 욕심을 조금 더 보태서, 자바스크립트 프로그래밍을 시작한지 얼마 안 된 초급자분들이 이 프로젝트들을 보고서 '이 정도면 나도 하겠다!'라는 동기를 얻었으면 하는 마음도 조금 있습니다. 기존에 정리노트에 작성하던 말투와는 조금 다르게 쥐뿔도 없는 사람이지만, 나름 강의하는 것처럼 기록을 남겨볼까 합니다. 얼..