프론트엔드/방법론

데이터 기반 접근 방식

lika-7 2023. 10. 6. 22:24

안녕하세요 lika-7입니다

이번시간에는 데이터 기반 접근 방식에 대해 이야기 하도록 하겠습니다.

데이터 기반 접근 방식이란

프론트앤드 개발자는 정적인 HTML 파일을 작성하는 대신 코드를 이용해 데이터와 템플릿을 결합하여 웹 페이지의 구조를 동적으로 생성하는 방법을 말합니다.

데이터 기반 접근 방식의 주요 아이디어

✅
데이터 기반 사고: 1. 프론트엔드 개발자는 웹 애플리케이션을 만들 때 데이터를 중심에 두어야 합니다. 2. 데이터는 웹 페이지의 핵심입니다. 예를 들어, 사용자 정보, 제품 정보, 게시물 목록 등은 모두 데이터입니다. 3. 프론트엔드 개발자는 이러한 데이터를 어떻게 가져오고 표시할지를 고려해야 합니다.

✅
템플릿: 1. 데이터를 기반으로 HTML을 생성하기 위해 템플릿을 사용합니다. 2. 템플릿은 HTML의 일부를 동적으로 생성하기 위한 구조입니다. 3. 예를 들어, 데이터를 삽입할 자리를 비워두고 데이터가 채워질 때 해당 자리를 채우는 것이 가능합니다.
✅
프론트엔드 프레임워크: 1. 대부분의 프론트엔드 프레임워크와 라이브러리(예: React, Angular, Vue.js)는 데이터와 템플릿을 결합하여 동적인 웹 페이지를 생성하는 데 사용됩니다. 2. 이러한 프레임워크를 사용하면 데이터와 뷰(템플릿)를 동기화시키고 데이터가 변경될 때 자동으로 HTML을 업데이트할 수 있습니다.
✅
컴포넌트 기반 아키텍처: 1. 많은 프론트엔드 프레임워크는 컴포넌트 기반 아키텍처를 채택하고 있습니다. 2. 이는 UI를 작은 독립적인 구성 요소로 분리하고 각 컴포넌트에 데이터를 주입하여 웹 페이지를 생성하는 방식입니다.
✅
상태 관리: 1. 데이터는 애플리케이션의 상태를 나타냅니다. 2. 상태 관리 라이브러리(예: Redux, Mobx)를 사용하면 애플리케이션 상태를 중앙에서 관리하고 상태 변경에 따라 뷰를 자동으로 업데이트할 수 있습니다.

예시

예시1

배열로 데이터 처리

const menuContainer = document.querySelector('#menu-container');
const menus = [
    {
        name: 'Search',
        href: '#/'
    },
    {
        name: 'Movie',
        href: '#/movie?id=tt4520988'
    },
    {
        name: 'About',
        href: '#/about'
    }
];

menus.forEach(menuItem => {
    const menuLink = document.createElement('a');
    menuLink.textContent = menuItem.name;
    menuLink.href = menuItem.href;
    menuContainer.appendChild(menuLink);
});

위 코드는 menus 배열을 반복하고 각 메뉴 항목을 <a> 링크 요소로 생성하여 menuContainer 요소에 추가합니다.

이렇게 하면 데이터를 기반으로 메뉴를 동적으로 생성할 수 있으며, 메뉴 항목이 변경되면 코드 수정 없이 쉽게 업데이트할 수 있습니다.

예시2

클래스로 데이터 처리

<!DOCTYPE html>
<html>
<head>
    <title>메뉴 생성 예제</title>
</head>
<body>
    <div id="menu-container"></div>
    <script src="script.js"></script>
</body>
</html>
class MenuItem {
    constructor(name, href) {
        this.name = name;
        this.href = href;
    }

    render() {
        const menuLink = document.createElement('a');
        menuLink.textContent = this.name;
        menuLink.href = this.href;
        return menuLink;
    }
}

const menus = [
    new MenuItem('Search', '#/'),
    new MenuItem('Movie', '#/movie?id=tt4520988'),
    new MenuItem('About', '#/about')
];

const menuContainer = document.querySelector('#menu-container');

menus.forEach(menuItem => {
    const menuLink = menuItem.render();
    menuContainer.appendChild(menuLink);
});

위의 코드에서 MenuItem 클래스는 메뉴 항목을 표현합니다.

각 메뉴 항목은 name과 href 속성을 가지며, render 메소드를 사용하여 메뉴 항목을 HTML 요소로 렌더링합니다.

이후에는 menus 배열을 반복하면서 각 메뉴 항목을 렌더링하고 menuContainer에 추가합니다.

예시3

배열로 데이터 처리

import { Component } from '../core/heropy'

export default class TheHeader extends Component{
    constructor(){
        super({
            tagName: 'header',
            state:{
                menus: [//프론트엔드는 데이터를 기반으로 사고 해야 함. HTML을 가지고 구조를 일일이 짜는게 아니고
                    {   //아래의 예시와 같이 데이터를 가지고 html을 출력한다고 생각해야 함
                        name: 'Search',
                        href: '#/'
                    },
                    {
                        name: 'Movie',
                        href: '#/movie?id=tt4520988'
                    },
                    {
                        name: 'About',
                        href: '#/about'
                    }
                ]
            }
        })
    }
    render(){
        this.el.innerHTML = /*html*/`
            <a href="#/"class="logo">
                <span>OMDbAPI</span>.COM
            </a>
            <nav>
                <ul>
                    ${this.state.menus.map(menu=>{
                        return /*html*/`
                            <li>
                                <a href="${menu.href}">
                                    ${menu.name}
                                </a>
                            </li>
                        `
                    }).join('')}
                </ul>
            </nav>
        `
    }
}

이러한 방식으로 배열이나, 클래스를 사용하면 코드의 가독성과 유지 관리성을 향상시키고, 메뉴 항목을 손쉽게 확장하거나 수정할 수 있습니다.