스파르타 해적단 웹트랙Lv.2 3주차

스파르타 해적단 웹트랙 Lv.2 3주차 개발일지이다.

 

이번주에는 내일배움캠프 신청도하고 약속도 있고 할일이 많았다.

그래서 3주차 강의를 조금 늦장부리다가 공부한 감이 있었는데, 이번주차 강의에서는 매우 흥미로운 내용을 다뤘다.

 

서버 API는 아예 건드리지 않고 프론트엔드 html파일만 건드렸는데, 그리드 시스템을 이용해 캘린더를 제작했다.

다른 언어로 코딩공부를 할때 달력을 만들어봤었는데, 윤월이나 여러 날짜공식 같은걸 내손으로 짜야해서 복잡하고 어려운게 많았다.

그런데 javascript로는 라이브러리 new Date()를 이용해 쉽게 필요한 값을 구할 수 있는게 매우 신선하고 편리했다.

 

이번주차에 완성한 캘린더!!

 

오늘의 할일 캘린더

Grid

원래 방식으로 flex-wrap을 이용하면 한줄한줄 몇개의 요소를 배치할지 정하는 것은 매우 까다롭다.

그래서 grid를 이용했다. css에는 편리하게도 grid라는 속성이 있는데, 한줄에 들어갈 요소는 몇개인지, 간격은 어느정도로 할지 같은걸 편하게 지정해줄수 있다.

 

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 18px;
}

위와같이 div자체를 css로 꾸며서 display를 grid로 설정해주면 편리하게 설정할 수 있다.

• grid-template-columns는 한줄에 몇개의 요소를 넣을지를 결정한다. 위 사진에서는 7개가 들어간다.
• grid-gap은 요소들끼리의 간격을 설정한다.

 

이렇게 grid를 이용해서 한 div내에 여러 div들을 규칙적으로 배치할 수 있다.

Date

그 뒤에 이제 날짜 순서대로 그리드에 숫자를 넣어줘야하는데 문제가 발생한다.

월마다 1일이 시작하는 요일도 몇일까지 존재하는지도 다르다.

이 때 Date라이브러리를 이용했다.

 

let today = new Date()
let year = today.getFullYear(); //연도 가져오기
let month = today.getMonth()+1; //월 가져오기 0부터시작 +1해주기
$('#thisMonth').text(`${year}. ${month}월`)// 연월표기 h2에 연월 넣어주기

let first_day = (new Date(year,month-1,1)).getDay()//이번달의 첫날의 요일이 몇번째 요일인가
let last_day = (new Date(year,month,0)).getDate()//이번달의 마지막날(다음달의 하루전날)은 몇일까지 있나

위는 시작할 때 로드하는 캘린더함수의 일부분이다.

위와같이 Date를 이용하여 필요한 값들을 가져온다.

이런 방법이면 몇번째에 1일인지 알 수 있어 반복문으로먼저 텅빈 div를 그리드 요소로 추가해 달력 1일 위치에 맞게 1일을 배치할 수도 있고, 반복문으로 마지막날은 몇일인지 알고 그 수만큼 반복문을 돌려 원하는 일수만큼을 찍어낼 수도 있다.

 

아래와 같은 방법으로 말이다.

for (let i = 0; i < last_day; i++) {	//마지막 날만큼 반복함
		let temp_html = `<div>${i+1}</div>`;	//i는 0부터 시작하기에 +1(날수) 를 계속 추가
    $('#dates').append(temp_html);				//추가한 날 수를 지정된 div내에 추가
}

 

javascript Date라이브러리 공식문서↓↓↓↓↓

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

캘린더 추가기능 만들기

추가적으로 캘린더 날짜를 누르면 컴은 색으로 강조가 되고, 아래 부제목에 날짜가 같이 찍히도록 연결해보는 기능과 처음 접속했을 때 자동으로 오늘 날짜를 클릭해주는 기능을 만들어보자

 

처음은 CSS를 지정해준다.

.dates > div.clicked {
    background-color: black;	//배경을 검은색으로
    border-radius: 50%;			//테두리 50%깍아서 원으로 만들기
    color: white;				//글자색은 배경이 검은색이되면 안보이니 흰색으로
}

이 clicked가 붙은 dates내의 div에는 이 css가 적용이 된다 라고 미리 선언해둔다.

 

이제 위에서 반복문으로 추가해줬던 일자들에 날짜별로 id를 만들어서 추가해주고 눌렀을 때 함수를 추가해준다. 그 함수는 id값을 매개변수로 받는다.

그렇게 되면 아래와 같은 코드가 완성된다.

for(let i = 0; i < last_day; i++) {	//날짜만큼 반복
    let id = `${year}-${month}-${i+1}`	//오늘 날짜로 id를 지정해준다.ex)2023-04-05
    let temp_html = `<div onclick="addClicked('${id}')" id="${id}">${i+1}</div>`
    //id를 추가해주고 onclick으로 함수도 추가해준다. 함수의 매개변수는 id값
    $('#dates').append(temp_html)	// 그상태로 붙인다.
}

그 뒤 함수에서는 다음과 같이 선언한다.

function addClicked(id) {	//위에서 id값을 받아온 함수 날짜를 누르면 실행
    $('#dates > div').removeClass('clicked')	//날짜들의 class에 클릭시 클래스를 모두 지워준다. 중복강조 방지
    $(`#${id}`).addClass('clicked')		//클릭한 id의 날짜만 clicked클래스를 추가해서 click효과로 강조
}

이 뒤는 눌렀을 때 함수에서 id자체를 아래 부제에 id를 선언해 그 id에 text()를 이용해 변경해준다.

이제 새로고침시 오늘 날짜 자동클릭은 위 함수와 방법을 이용해 함수를 하나 제작해서 그 날짜의 id를 addClick해주면 끝!!!!

 

반복을 돌며 Day를 찍을 때 위에서 배운 Date라이브러리로 0~6중에 몇번째칸에 있는 날짜인지를 알아내서 0과 6번째 날짜 색만 빨강 파랑으로 바꿔주면 토요일 일요일도 표시를 할 수 있다.

 

숙제는 맨위의 제목이 (년도. 달) 으로 표기 되는데, 그걸 누를 시 클릭한 유닛이 오늘로 다시 돌아오도록 만드는 것이었는데, 나는 아래 제목이 들어간 h1에 onclick으로 오늘로 돌아가는 함수를 추가해서 해결했다. 쉬운 숙제였던것 같지만 아마 방법은 여러가지 일것이다.

 

이상 3주차에 배운 grid를 이용하고 Date라이브러리를 이용해 캘린더를 디자인하는 것을 배운 개발일지 였다.