[240924 TIL] 사전캠프 2일차

오늘은 강의를 수강하는 대신 과제를 수행하면서 직접 코딩을 해보는 시간을 가지기로 했다.

 

---

Today 1. [숫자 기억 게임 만들기] 과제

시작 버튼 클릭 시 1000~9999 사이 숫자를 무작위로 보여주고 3초 뒤 지우기 숫자 입력 후 제출 버튼 클릭 시 정답 유무 보여주기 숫자가 지워지기까지 남은 시간 보여주기 숫자 이외의 문자 입력 시 경고 문구 보여주기 정답률 보여주기

 

let time = 3

let timer = setInterval(() => {
    timeArea.textContent = `${--time}초 뒤 숫자가 사라집니다.`
}, 1000)

setTimeout(() => {
	clearInterval(timer)
}, 3000)

 

숫자가 지워지기까지 남은 시간을 보여주는 기능을 구현하기 위해 setInterval 함수를 사용하였다. 문제없이 잘 동작하는 것처럼 보였지만 console 창에 출력을 해보니 3초가 지난 후에도 계속해서 setInterval 함수가 호출되고 있었고, 반복 작업이 더 이상 필요없어지는 시점에 clearInterval 함수를 호출해 줌으로써 문제를 해결할 수 있었다.

 

if (isNaN(input.value)) {
    alertArea.textContent = '숫자만 입력해 주세요.'
}

 

숫자 이외의 문자를 입력할 경우 경고 문구를 보여주는 기능을 구현하기 위해서는 입력한 값이 어떤 문자인지 확인하는 로직이 필요했다. 정규식이나 아스키코드를 활용하는 방법도 있겠지만 이번 과제에서는 단순히 숫자인지 아닌지만 구별하면 되기 때문에 isNaN 함수를 사용하게 되었다.

 

 

Today 2. [한식 메뉴 렌더링하기] 과제

배열 형태로 주어진 데이터를 화면에 보여주기 객체에 속성 추가하기 (가격, 카테고리 등) filter 함수를 사용하여 설명에 특정 키워드가 포함된 메뉴만 보여주기

 

function filterMenu() {
    const filterMenuItems = menuItems.filter((item) => item.description.includes('고기'))

    renderMenu(filterMenuItems)
}

function filterMenu(keyword) {
    const filterMenuItems = menuItems.filter((item) => item.description.includes(keyword))

    renderMenu(filterMenuItems)
}

 

처음에는 변수를 사용하지 않고 '고기'라는 단어를 포함한 데이터를 직접 추출해서 구현을 했는데 이렇게 로직을 구현할 경우 단어가 변경될 때마다 함수를 매번 선언해주어야 하기 때문에 단어를 keyword라는 매개변수를 통해 전달받아서 사용하는 로직으로 변경함으로써 문제를 해결할 수 있었다.

 

 

Today 3. [할 일 목록 (To Do List) 만들기] 과제

내용 입력 후 추가 버튼 클릭 시 할 일 추가하기 할 일 완료 처리하기 할 일 삭제하기

 

if (element.classList.value.includes('finish')) {
    element.classList.remove('finish')
}
else {
    element.classList.add('finish')
}

 

완료 처리를 어떻게 구현할지 고민이 되었는데, 아직 직접적으로 데이터를 다루는 것이 아니라 화면 상에서 완료 처리된 것처럼 구현하는 단계였기 때문에 class 속성을 통해 CSS를 조작하여 구현하기로 하였다.

 

element.parentElement.remove()

 

삭제의 경우, parentElement 속성을 사용하여 x 아이콘의 부모 요소를 제거하는 방법으로 구현하였다.

---

 

하루 마무리

나름의 경력이 쌓여가면서 성능이나 로직에 대한 고민없이 단지 기능 구현만 되면 넘어가는 식의 좋지 않은 코딩 습관이 생겨가고 있었는데, 오늘 과제를 하면서 오랜만에 끊임없이 고민을 하면서 코딩을 해보았던 것 같다. 또한 수없이 자주 사용해 온 함수나 문법인데도 정확한 사용법이 기억나지 않아서 습관적으로 구글링을 하는 경우가 많았어서, 이번 기회에 틈틈이 관련 내용들을 정리해 두는 것도 좋을 것 같다는 생각이 들었다.