danpacho/vanilla-vercel-clone

📦 vanilla js로 vercel 페이지 일부를 클놈코딩 해봅니다!

Vercel Clone / 7일

중점적인 고민 사항 🧐

vanilla js & CSS만을 사용하면서 느껴지는 불편함 개선해보기

1. 중복되는 html 마크업의 문제점
2. 절차적 프로그래밍의 문제점
3. 전역적 스타일링과 중복 class naming의 문제점
4. 모든것을 허용해주는 지나치게 친절한 js

해결 방법 🎁

중복과 절차형 프로그래밍 ➡️ 선언형 컴포넌트

1. Component class

선언형 컴포넌트

const Container = (children) =>
    new Component({
        template: `
            <div class="${style.box}">
                ${children}
            </div>`,
    }).html()

컴포넌트 활용 및 재사용

import { Container } from "어디선가"

const Section = () =>
    new Component({
        template: `
            <div>
                ${Container(`
                    <button>안녕?</button>
                `)}
            </div>
            `,
    }).html()

2. EventListener class

컴포넌트에 명시적으로 이벤트 부착 및 제거

const Container = (children) => {
    const clickHandler = (e) => {
        console.log(e.clientX)
    }

    return new Component({
        template: `
            <div class="${style.box}">
                ${children}
            </div>`,
    })
        .addEvent((target) => ({
            type: "click",
            handler: clickHandler,
        }))
        .removeEvent((target) => ({
            type: "click",
            handler: clickHandler,
        }))
}

3. atom state management

명시적인 변수관리의 장점

const Counter = () => {
    const [count, setCount] = atom(0)
    const increase = () => {
        setCount(count() + 1)
    }

    return new Component({
        template: `
            <button>
                Counter is ${count()}
            </button>`,
    })
        .addEvent(() => ({
            type: "click",
            handler: increase,
        }))
        .render()
}

스타일링 ➡️ CSS module을 활용한 scoped CSS

컴포넌트 파일을 컴포넌트 및 스타일로 구분하기

📦my-component
 ┣ 📜index.js
 ┗ 💄index.module.css

지나친 자유 ➡️ jsdoc과 jsconfig.json으로 탄압

든든한 무기 준비 jsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "allowJs": true,
        "checkJs": true,
        "noEmit": true,
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "typeRoots": ["./node_modules/@types"],
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist"]
}

기맥힌 jsdoc과 잠잠해진 js

/**@type string */
let 반드시_스트링 = "이거 반드시 글자에용"

// ❌ 가능은 하지만, 오류 매세지가 뜨는 매직
반드시_스트링 = 1

구현사항 ✅

1. 마우스 hover시 좌표에따라 동적으로 반응하는 카드
2. radial gradient와 blur api를 사용한 효과
3. 버튼 ring 회전
4. gradient 텍스트 변형 및 전환

구현결과 🎉

좋았던 점 ✅

1. 선언적이며 재사용성이 높은 함수컴포넌트 기반으로 제작해 많은 중복을 줄일 수 있었음
2. 바닐라 js의 DOM api와 활용법에 대해 깊게 학습할 수 있었음
3. reactivness를 구현하기 위해 사용하는 웹프레임워크들의 전략(compile / reactiveness / v-dom & diff)의 필요성을 느낌

개선할 점 🔸

1. reactiveness가 없음. state변경을 감지하고 재렌더링하는 로직이 없기에 직접 DOM api를 호출하거나 CSS variable를 사용해야한다는 단점이 있음

   Proxy를 이용한 변수 구독과 렌더링 등의 방법

2. string을 HTML로 사용하므로 jsx와 같은 직관성과 개발 편의성이 없음.

3. render()호출시 parent가 존재하며, event등이 부착된 반응성이 있는 컴포넌트는 원하는 위치에 렌더링하기가 까다로움

렌더링 위치 지정하기 ✅

const StaticParent = () => new Component({
    template: "<div id="여기에-렌더링">{...}</div>"
})

const ReactiveComponent = () => {...}

// ❌ DOM-tree에서 id요소를 탐색 불가능
ReactiveComponent.render("여기에-렌더링")

StaticParent.render()

// ✅ DOM-tree에서 id요소를 탐색 가능
ReactiveComponent.render("여기에-렌더링")

렌더링 직접 하기 ❌

const ReactiveComponent = () => {...}

const StaticParent = () => new Component({
    // ❌ html 렌더링 불가
    template: `${ReactiveComponent.render()}`
    template: `${ReactiveComponent.html()}`
})