[멋사12기] 심화JS | 3주차 세션 및 과제 제출

 

 

3주차 세션

 

 

3주차도 역시 레이아웃 테스트와 자바스크립트 테스트로 세션이 시작됐다.

 

 

먼저 레이아웃 테스트는 크게 어려운 내용은 아니었으나, 10분이라는 시간 내에 반응형 레이아웃까지 모두 완성하기란 쉬운 일이 아니었다....

 

기본 레이아웃과 첫번째 미디어 쿼리까지는 완성했으나, 시간 안에 두번째 미디어 쿼리를 완성시키지 못해서 테스트가 끝난 후 완성시켜 깃허브에 올려두었다.

 

레이아웃의 결과물은 다음과 같다.

 

 

max-width가 680px와 450px를 기준으로 레이아웃이 변경되도록 미디어 쿼리를 구현했다.

 

반응형 레이아웃 테스트

 

 

 

다음으로 자바스크립트 테스트는 손코딩으로 진행됐다.

빈칸을 채우는 간단한 손코딩이었지만, 헷갈리는 부분이 꽤 있었고... 더 열심히 해야겠다는 생각이 들었다.

 

 

const, let, var, 매개변수 함수, 구조 분해 할당 등 기초 자바스크립트 구조에 대해 연습해볼 수 있었다.

 

 

---

 

 

본격적인 세션에서는 자바스크립트를 이용해 TO-DO LIST를 만드는 실습을 진행했다.

 

 

addEventListener, createElement, setAttribute, textContent, innerHTML, appendChild 등의 속성을 이용해 투두리스트 목록을 추가하고 삭제가 가능하도록 코드를 구현했다.

 

 

한가지 문제가 발생했던 부분은 이미 정의되어 있는 리스트 목록에는 addEventListener로 정의한 속성들이 적용되지 않는다는 것이었다.

 

완료 체크 표시를 하면 스타일이 바뀌는 것도 리스트를 삭제하는 것도 안되었다.

 

 

따라서 원인을 생각하다가 현재 이벤트 리스너는 추가로 생성되고 있는 요소에만 적용이 되고 있다는 생각이 들었다.

처음 렌더링된 페이지의 리스트에도 이벤트 리스너가 적용될 수 있도록 따로 querySelector와 addEventListener를 이용해 정의해주었다.

 

 

따로 정의해준 이후에는 이미 화면에 보여지는 리스트에도 정상적으로 스타일이 적용되고, 삭제도 되는 것을 확인할 수 있었다.

 

document.querySelectorAll('.list').forEach((list) => {

                const deletebtn = list.querySelector('button');

                deletebtn.addEventListener('click', () => {

                    list.remove(); // 클릭된 할 일 리스트 삭제

                });

            });

            document.querySelectorAll('.list').forEach((list) => {

                const checkbox = list.querySelector('input[type="checkbox"]');

                const text = list.querySelector('p');

                checkbox.addEventListener('change', () => {

                    if (checkbox.checked) {

                        text.style.textDecoration = 'line-through';

                    } else {

                        text.style.textDecoration = 'none';

                    }

                });

            });

 

 

 

결과물은 다음과 같다.

 

TO-DO LIST 구현

 

 

---

 

3주차에는 자바스크립트를 이용한 동적 기능들을 넣는 과제가 주로 주어졌다.

 

첫째로,

계산기를 만드는 과제에서는 table을 이용해 계산기 틀을 잡아주었으며,

querySeletor 를 이용한 간단한 계산과정을 정의한 자바스크립트로 계산기의 기능을 구현했다.

 

 

둘째,

타이머를 셋팅하는 기능을 구현했다.

addEventListener 를 이용해 클릭을 할 수 있는 버튼을 입력하도록 만들었으며,

createElement로 새로운 div를 생성한 후 appendChild로 입력한 시간을 타이머에 삽입할 수 있도록 했다.

 

 

셋째,

간단한 타이핑 게임을 만들어보았다.

시간, 점수 계산, 타이핑과 같은 기능들을 구현했으며, random함수를 이용해 타이핑 글자가 랜덤하게 사용자에게 보여질 수 있도록 했으며,

innerText와 toLowerCase 등을 이용해 소문자, 대문자 구분 없이 타이핑이 정확하다면 다음으로 넘어갈 수 있도록 했다.

setInterval을 이용해 카운트 함수를 설정함으로써 타이핑 게임이 가능하게 만들었다.

 

 

넷째,

간단한 사이트를 만드는 과제였다.

메인 배너는 animation, transform, translate를 사용해 자동으로 상하 방향으로 움직이도록 설정했으며,

클릭 이벤트를 통해 공지사항, 갤러리 토글, 상단 메뉴바 토글을 구현했다.

또한, background를 어둡게 만들어 팝업창도 띄웠다.

 

 

완성된 결과물은 다음과 같다.

 

계산기, 타이머

타이핑 게임, 사이트

 

 

전체 코드는 깃허브에서 확인할 수 있다.

 

 

https://github.com/BB545/likelion/tree/main/03_session