22/06/06/월 인터렉티브 웹 개발 제대로 시작하기, 알고리즘 재활 훈련

220606 Today I learned!

• 인터랙티브 웹 개발 제대로 시작하기
• 알고리즘 재활 훈련

---

1. Fact

(1) 인터랙티브 웹 개발 제대로 시작하기

인터렉티브 웹사이트를 만들기 위한 기초 지식 학습

• 섹션 00 ~ 섹션 05

• CSS 속성 : transform, transition, animation, pespective 등
• JS: 이벤트 위임 등
• 정리본

(2) 알고리즘 재활 훈련

• Jungol LCoder_python 출력, 변수와 입력 문제 풀이
• 풀이

---

2. Feeling

프로젝트가 끝난 후 절거운 휴식 후, 찐 방학이 왔다! 06월 10일까지 수업이 없고, 다음주 월요일부터 다시 계절 학기가 시작된다.

지난주에, 06월에 어떤 공부를 할지 대략적으로 계획을 했다. 2학기가 시작되기 전 적당히 리프레시 하면서 공부를 할 예정이다.

1학기 마지막 프로젝트 때 라이브러리를 일체 사용 하지 않으려 했지만, 몇가지의 기능들은 라이브러리를 사용했기때문에 이에 대한 아쉬움이 있었다.

그 결과, 기초가 많이 부족하다는 생각이 들어서 프레임워크를 학습하기 보다는 CSS, Javascript 기초를 잡고 가려고 한다.

1. 일분코딩: 인터렉티브 웹 개발 제대로 시작하기 , 애플 웹사이트 인터렉션 클론
2. Javascript deep-dive 완독!

또한 CS지식이 1도 없기 때문에, 스터디가 필요하다는 생각이 들어서 스터디를 시작했다. 스터디원들이 돌아가면서 발표를 하는 방식으로 진행된다.

네트워크 관련해서 키워드를 잡고 발표를 하고싶은데.. 고민중이다.🙃

그리고 프로젝트 준비 하느라 오랫동안 놓았던 알고리즘PS 재활훈련도 시작했다. 이번 달은 재활하고 다음달부터 다시 백준문제를 풀 수 있지 않을까 싶다.

06월 계획

• 기초 탄탄
• CS 스터디
• 알고리즘 재활

---

3. Finding

Javascript 이벤트 위임

참고한 블로그

이벤트 위임이란 요소마다 이벤트를 바인딩 하지않고, 상위 요소에서 하위요소의 이벤트를 제어한다.

모든 하위 요소의 이벤트를 따로따로 바인딩하는 것은 번거롭기 때문에, 한 번에 효율적으로 이벤트를 제어하기 위해 상위 요소에서 제어를 한다.

이벤트 위임은 이벤트 버블링 (하위에서 발생한 이벤트를 상위요소가 알 수 있음) 을 활용한 기법이다.

단, 이벤트 위임을 할 때는 에러처리를 잘 해주어야 한다.

<div class="stage">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
</div>

하위 div요소에 클릭이 발생하면 해당 요소를 제거 하려한다. 이는 event.target을 활용하여 반복 없이 쉽게 코드를 만들 수 있다. (이벤트 위임)

const stage = document.querySelector(".stage");

function clickHandler(event) {
  if (event.target.classList.contains("item")) {
    stage.removeChild(event.target);
  }
}
 
stage.addEventListener("click", clickHandler);

stage(상위 요소)에서 하위 요소들의 click 이벤트를 듣고, 실제로 click이 발생한 요소가 조건에 부합하면 삭제한다.

---

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
JavsScript DeepDive	notStarted🌙