Week02/seunghyun

[hyun907]

✨어떤 과제를 수행했나요?✨

2주차 과제인 당근마켓 랜딩 페이지 클론(HTML, CSS 구현), javascript로 달력 만들기 과제를 수행했습니다.

✨어려웠던점, 트러블슈팅✨

🥕 당근마켓 페이지 클론 과제
퍼블리싱 작업을 진행하면서 저에게 익숙하지 않았던 CSS 속성들을 다시금 공부할 수 있어서 좋았습니다.

• white-space: nowrap
  텍스트가 길어서 부모 요소 안의 가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나게 하고 싶지 않은 부분이 있었는데, 이럴 때는 white-space 속성을 nowrap으로 설정해주면 된다는 것을 찾아 변경했습니다.

• justify-content: space-between

처음 헤더를 구현할 때, justify-content 속성을 사용하지 않아 padding 오른쪽이 안 맞는 현상이 일어났습니다. 그래서 space-between으로 각각 양 끝 사이드 정렬로 정렬하여 맞춰주었습니다.

• ::selection

::selection {
color: #212529;
background: #ffb98b;
}

당근마켓 랜딩페이지에서는 드래그를 할 시, 홈페이지 성격에 맞춰 background 색상이 변경된다는 것을 알았습니다. 그래서 ::selection을 사용했습니다.

🗓️ 달력 만들기 과제
우선, 날짜를 구하려면 Date 객체를 사용해야 합니다. 과제를 하기 위해 어떻게 하면 오늘 날짜 출력이 가능할까? 부터 접근해보았습니다.

function setDate(){
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
const day = today.getDate();
console.log(year + "." + month + "." + day);
}
setDate();

이렇게 코드를 작성하면 해당 달 - 1의 달이 출력되는 것을 확인했습니다. getMonth()메서드는 Zero-base 로 설정되어있기 때문에 +1을 해줘야 정상적인 해당 달이 출력된다는 사실을 알았습니다. 따라서, 해당 달을 구할 때에는

const month = today.getMonth() + 1;

로 작성해주어야 합니다.

🤔 PR Point

🗓️ 달력 만들기 과제

const prevMonth = () => {
date.setMonth(date.getMonth() - 1);
renderCalender();
};

const nextMonth = () => {
date.setMonth(date.getMonth() + 1);
renderCalender();
};

const goToday = () => {
date = new Date();
renderCalender();
};

달력 만들기 과제에서 이전, 다음, 현재 달로 이동하는 함수를 이렇게 구현했습니다. 코드를 다시 살펴보니 만약 오늘 날짜가 31일일 경우, nextMonth 함수가 제대로 작동하지 않는 버그가 있습니다. 31일이 없는 달이 있기 때문입니다. 이 부분에 대해서 어떻게 하면 해결할 수 있을지 같이 공부해보고 싶습니다.