[WIL] 부트캠프 4주차 회고 (5/16 - 5/20)

4주차 회고 시작 !!

 

벌써 4주차라니...

믿기지 않을 정도로 한 달이 순식간에 지나갔다.

 

이번주에는

DOM, 유효성 검사, 이벤트 객체,

로컬 Git 리포지토리와 원격 저장소 GitHub 활용법을 배우고

Section 1을 마무리하며 그 동안 배운 내용을

총집합시켜 응용해보는 솔로 프로젝트를 진행했다.

---

먼저 DOM이란, Document Object Model의 약자로

HTML 요소를 Object처럼 조작할 수 있는 Model이다.

 

DOM을 사용하면 HTML로 구성된 웹페이지를

보다 동적으로 움직이게 할 수 있다.

 

이는 자바스크립트에서

document라는 객체에 구현되어 있으며,

어떤 사이트에서나 개발자 도구를 켜서

console.log(document.body) 명령어를 통해

어디에서나 조회가 가능하다.

 

아래 사진에서 예를 들어 HTML 구조가 왼쪽과 같다면,

DOM의 구조는 오른쪽과 같다.

---

다음으로 유효성 검사란,

요청한 데이터가 어떤 조건에 충족하는지

확인하는 작업이다.

 

회원가입 시 사이트에서 원하는 조건에 따라

형식을 맞춰 입력해야 하는 경우를

많이들 보셨을 것이다.

 

그러한 기능들이 바로 유효성 검사가

적용된 기능 중 하나이다.

 

그래서 실제 JavaScript를 활용하여

유효성 검사를 적용한 회원가입 창을

아래와 같이 실제 만들어보았다.

---

이벤트 객체란,

사용자 입력(onclick, onkeyup, onscroll 등)을

트리거로 발생한 이벤트 정보를 담은 객체이다.

 

이벤트 객체는 이벤트에 대한 상세 정보를 저장하고 있다.

모든 이벤트 객체는

이벤트의 타입을 나타내는 type 프로퍼티와

이벤트의 대상을 나타내는 target 프로퍼티를 가진다.

 

let btn = document.getElementById("btn"); // id가 "btn"인 요소를 선택
btn.addEventListener("click", clickBtn);  // 선택한 요소에 click 이벤트 리스너를 등록

function clickBtn(event) {
    document.getElementById("text").innerHTML = "이 이벤트의 타입은 " + event.type + "이며, 이벤트의 대상은 " + event.target + "입니다.";
}

// 결과: 이 이벤트의 타입은 click이며, 이벤트의 대상은 [object HTMLButtonElement]입니다.

---

이곳에선 Section 하나가 끝날 때마다

한 Section에서 배운 모든 내용을 토대로

Mini Hackathone이라는 솔로 프로젝트를 진행한다.

 

코드스테이츠만의 질의응답 플랫폼이 있는데,

그 질의응답 플랫폼의 축소판을 혼자

처음부터 끝까지 구현해보는 것이다.

 

총 이틀이 주어졌는데

정말 바쁘게 지나간 이틀이었다.

 

항상 페어 프로그래밍을 하며

페어와 함께 도우며 과제를 하다가

이번 솔로 프로젝트는

혼자 하려니 너무너무 막막했다.

 

결국 완성까진 했지만,

아직 코드 이해가 더 필요하다는 생각이 들었다.

디자인을 직접 구상하고

CSS에 힘을 주어 그 걸 구현하려니

시간이 많이 빠듯했다.

 

물론 디자인도 중요하지만,

다음에 또 이런 프로젝트가 있을 때는

일단 구현을 먼저 해두고

남은 시간을 활용해 디자인에

신경을 써야겠다는 생각이 들었다.

길고 험난했던 4주차의

Weekly I Learned

회고 작성 끄읕 -!! ⭐