이번에 첫직장을 갖게 되면서 입사 하기전 회사에서 사용할 기술스택을 미리 공부하려고 합니다. 그중에서도 핫한 프론트엔드 프레임워크인 Vue.js로 첫 토이 프로젝트를 만들어 보았습니다. 아직 리팩토링도 하지않고 기능도 없지만 Vue.js에서 데이터를 어떻게 관리하고 렌더링하는지를 알아보았습니다. 구현 결과물은 아래와 같습니다.
1. 우선 별도의 css 코드를 작성하지않고 bootstrap을 사용하기 위해 index.html 파일의 <head>와 </head>사이에 부트스트랩 CDN을 import 합니다.
2. Calendar.vue 파일을 생성하여 아래와 같이 코딩합니다.
*HTML 코드
*Script 코드
export default {
name: 'Calendar',
data () {
return {
weekNames: ["월요일", "화요일", "수요일","목요일", "금요일", "토요일", "일요일"],
rootYear: 1904,
rootDayOfWeekIndex: 4,
currentYear: new Date().getFullYear(),
currentMonth: new Date().getMonth()+1,
currentDay: new Date().getDate(),
currentMonthStartWeekIndex: null,
currentCalendarMatrix: [],
endOfDay: null,
memoDatas: [],
}
},
mounted(){
this.init();
},
methods: {
init:function(){
this.currentMonthStartWeekIndex = this.getStartWeek(this.currentYear, this.currentMonth);
this.endOfDay = this.getEndOfDay(this.currentYear, this.currentMonth);
this.initCalendar();
},
initCalendar:function(){
this.currentCalendarMatrix = [];
let day=1;
for(let i=0; i<6; i++){
let calendarRow = [];
for(let j=0; j<7; j++){
if(i==0 && j year){
for(let i=0; i<12; i++){
sumOfDay += this.getEndOfDay(year, month+i);
}
year++;
}
else if(targetYear == year){
if(targetMonth > month){
sumOfDay += this.getEndOfDay(year, month);
month++;
}
else if(targetMonth == month){
return (sumOfDay)%7;
}
}
}
},
onClickPrev: function(month){
month--;
if(month<=0){
this.currentMonth = 12;
this.currentYear -= 1;
}
else{
this.currentMonth -= 1;
}
this.init();
},
onClickNext: function(month){
month++;
if(month>12){
this.currentMonth = 1;
this.currentYear += 1;
}
else{
this.currentMonth += 1;
}
this.init();
}
}
}
컴포넌트가 마운트 되면 윤년과 평년, 현재 보여지고 있는 달력의 1일은 무슨요일인지 등을 계산 한 후 달력의 데이터를 2차원 배열에 저장하여 화면에 보여주게 됩니다. 이번에 달력을 처음 만들어봤는데 이 간단한 달력을 구글 캘린더처럼 메모를 작성하거나 하는 등의 업그레이드를 차차 해보겠습니다.
전체 소스코드 제 깃허브에서 참고해주세요.
'개발' 카테고리의 다른 글
| 웹서버를 운영하기 위한 기초 네트워크 용어 정리 (0) | 2018.12.14 |
|---|---|
| Docker 기본 명령어 (0) | 2018.12.10 |
| Chapter4 Trees and Graph (0) | 2018.10.29 |
| Chapter3 Stacks and Queues (0) | 2018.10.26 |
| Chapter2 Linked Lists (0) | 2018.10.24 |
