22/06/08/수 인터렉티브 웹 개발 제대로 시작하기 완강

220608 Today I learned!

• 인터랙티브 웹 개발 제대로 시작하기

---

1. Fact

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

• 섹션 11 : 완강!!
• 마지막으로 하나의 예제를 같이 만들며, 그동안 학습한 내용을 복습
• 정리본

---

2. Feeling

22/06/06 ~ 22/06/08일 동안 인터렉티브 웹 개발 제대로 시작하기라는 강의를 들었다.

3일에 거쳐 빠르게 강의를 들었고, 생각 보다 많은 지식을 배울 수 있었다.

특히, 바닐라 자스로 실제 웹사이트를 구성하는 방법에 대해 많이 배울 수 있었던 것 같다.

이전에 배웠던 것들은 JS 기초적인 문법에 가까웠다면 실제 웹사이트를 구현할 때 어떻게 코딩해야 하는 가를 알 수 있었다.

대표적으로

• 이벤트 위임을 통해 이벤트를 좀 더 손 쉽게 다룬다.
• JS 객체의 생성자 함수를 통해 컴포넌트를 생성한다. (특히 prototype에 init함수를 실제로 만든 것이 신기했다.)
• 인터렉티브 웹사이트를 만들기 위한 다양한 이벤트와 default 속성들..

물론, transform, transition, animation과 같은 새로운 CSS 속성을 배울 수 있었지만 위에서 언급한 내용들이 나에게 더 많은 배움을 준 것같다.

하지만, 현재 내가 배운 지식들이 진짜 나의 지식이 되었는 지는 모르겠다. 이번에 배운 내용들만으로 새로운 프로젝트를 하는 것도 의미가 있겠지만, 해야 할 것이 많기 때문에 마지막으로 했던 예제를 혼자서 해보는 것으로 복습을 끝낼 것 같다.

어차피 다른 프로젝트에서 활용할 수 있는 기능들이기때문에 다른 프로젝트를 하면서 다시 복기하면 될 것 같다. 😏

---

3. Finding

data 속성 활용하기

공식문서

HTML요소의 data-로 시작하는 속성으로 자바스크립트의 SetAttribute, GetAttribute와 CSS 선택자를 통해 다양한 기능을 구현할 수 있다.

구현 예시

왼쪽 방향키를 누르면 element가 왼쪽으로 회전하고 오른쪽 방향키를 누르면 element가 오른쪽으로 회전하는 기능을 구현한다면,

• CSS
  • data-direction 속성이 left면 왼쪽으로 회전시킨다.
  • data-direction 속성이 right면 오른쪽으로 회전시킨다.
• JS
  • 왼쪽 방향키를 클릭하면 data-direction 속성에 left 값을 준다.
  • 오른쪽 방향키를 클릭하면 data-direction 속성에 right 값을 준다.

.character[data-direction="left"] {
  transform: rotateY(-90deg);
}

.character[data-direction="right"] {
  transform: rotateY(90deg);
}

window.addEventListener("keydown", function(event){
    if (event.keyCode == 37) {
      //왼쪽
      this.element.setAttribute("data-direction", "left");
    } else if (event.keyCode == 39) {
      // 오른쪽
      this.element.setAttribute("data-direction", "right");
    }
});

---

4. Future Action & Feedback

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