22/06/07/화 인터렉티브 웹 개발 제대로 시작하기

220607 Today I learned!

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

---

1. Fact

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

• 섹션 06 ~ 섹션 10
• JS 기초
  • 객체, 스크롤 이벤트, transition이벤트, animation이벤트
  • setTimeout, setInterval, requestAnimationFrame
• 정리본

---

2. Feeling

JS는 그래도 어느정도 활용하는 방법을 알고 있다고 생각했는데, 아니였구나 싶다. 🤔

실제로 바닐라 JS로 웹개발하는 방식에 대해 고민을 해봐야겠다. 바닐라JS로 간단한 크롬앱을 만들어 보기는 했지만, 이로는 많이 부족한 것 같다.

지난번에 리액트로 간단하게 만들었던 와자뵤를 develope하고 싶은 마음이 있었는데 이를 바닐라JS로 실행해보고 싶은 욕구가 생겼다. (그런데 SPA로 어떻게 만들지..)

---

3. Finding

Javscript 객체의 생성자 함수를 활용하여 html 태그로 생성하기

자바스크립트 생성한 객체를 생성자 함수를 활용하여 바로, html 태그로 추가할 수 있다.

여기서 prototype은 객체에 공통으로 적용되는 메서드를 메모리 낭비없이 저장하기 위해 해당 생성자 함수로 생성된 객체가 공통으로 가지는 속성, 메서드를 정의하는 공간이다. (prototype도 객체다!)

아래처럼 객체가 생성 될 때, 이를 태그로 생성하여 DOM트리에 추가하는 함수를 실행시켜 바로 브라우저에 보일 수 있다. 😮

function Card(num, color) {
    this.num = num;
    this.color = color;
    this.init();
}

// 아예 prototype 객체를 다시 만들 때는 constructor 속성을 넣어주어야 한다.
Card.prototype = {
    constructor: Card,
    init: function () {
        const mainElem = document.createElement("div");
        mainElem.style.color = this.color;
        mainElem.innerText = this.num;
        mainElem.classList.add("card");
        document.body.appendChild(mainElem);
    },
};

const card1 = new Card(1, "green");
const card2 = new Card(7, "blue");

---

4. Future Action & Feedback

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