https://github.com/danpacho/vanilla-vercel-clone

📦 vanilla js로 vercel 페이지 일부를 클놈코딩 해봅니다!
https://github.com/danpacho/vanilla-vercel-clone

component-based vanilla-javascript vercel-clone

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/danpacho/vanilla-vercel-clone
• Owner: danpacho
• Created: 2022-10-28T07:57:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-02T09:27:59.000Z (about 2 years ago)
• Last Synced: 2024-11-13T01:38:01.872Z (2 days ago)
• Topics: component-based, vanilla-javascript, vercel-clone
• Language: JavaScript
• Homepage:
• Size: 1.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vercel Clone / 7일

## 중점적인 고민 사항 🧐

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

1. 중복되는 `html` 마크업의 문제점

2. 절차적 프로그래밍의 문제점

3. 전역적 스타일링과 중복 `class` naming의 문제점

4. 모든것을 허용해주는 지나치게 친절한 `js`

## 해결 방법 🎁

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

1. `Component` class

**선언형** 컴포넌트

```js

const Container = (children) =>

    new Component({

        template: `

            


                ${children}

            
`,

    }).html()

```


컴포넌트 **활용** 및 **재사용**

```js

import { Container } from "어디선가"

const Section = () =>

    new Component({

        template: `

            


                ${Container(`

                    안녕?

                `)}

            

            `,

    }).html()

```


2. `EventListener` class

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

```js

const Container = (children) => {

    const clickHandler = (e) => {

        console.log(e.clientX)

    }

    return new Component({

        template: `

            


                ${children}

            
`,

    })

        .addEvent((target) => ({

            type: "click",

            handler: clickHandler,

        }))

        .removeEvent((target) => ({

            type: "click",

            handler: clickHandler,

        }))

}

```


3. `atom` state management

명시적인 변수관리의 장점

```js

const Counter = () => {

    const [count, setCount] = atom(0)

    const increase = () => {

        setCount(count() + 1)

    }

    return new Component({

        template: `

            

                Counter is ${count()}

            `,

    })

        .addEvent(() => ({

            type: "click",

            handler: increase,

        }))

        .render()

}

```

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

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

```

📦my-component

 ┣ 📜index.js

 ┗ 💄index.module.css

```

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

든든한 무기 준비 `jsconfig.json`

```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`

```js

/**@type string */

let 반드시_스트링 = "이거 반드시 글자에용"

// ❌ 가능은 하지만, 오류 매세지가 뜨는 매직

반드시_스트링 = 1

```

## 구현사항 ✅

1. 마우스 `hover`시 좌표에따라 동적으로 반응하는 카드

2. `radial gradient`와 `blur` api를 사용한 효과

3. 버튼 ring 회전

4. gradient 텍스트 변형 및 전환

## 구현결과 🎉

![최초 로딩 페이지!](./assets/preview.png)

## 좋았던 점 ✅

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`등이 부착된 반응성이 있는 컴포넌트는 원하는 위치에 렌더링하기가 까다로움

렌더링 위치 지정하기 ✅

```js

const StaticParent = () => new Component({

    template: "
{...}
"

})


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

// ❌ DOM-tree에서 id요소를 탐색 불가능

ReactiveComponent.render("여기에-렌더링")

StaticParent.render()

// ✅ DOM-tree에서 id요소를 탐색 가능

ReactiveComponent.render("여기에-렌더링")

```

렌더링 직접 하기 ❌

```js

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

const StaticParent = () => new Component({

    // ❌ html 렌더링 불가

    template: `${ReactiveComponent.render()}`

    template: `${ReactiveComponent.html()}`

})

```