티스토리 뷰

웹기술

[JAM 스택] JAM Stack 특징과 간단한 예제

제로빈 2024. 11. 14. 11:01

JAM 스택(JAM Stack)은 JavaScript, API, 그리고 Markup의 조합을 통해 빠르고, 안전하며, 확장 가능한 웹 애플리케이션을 만드는 현대적인 아키텍처입니다. 기존 서버 중심의 웹사이트와 달리, JAM 스택은 정적 파일을 기반으로 하여 클라이언트와 서버 간의 분리를 통해 성능과 보안을 강화합니다. JAM 스택의 주요 특징과 간단한 예제를 소개하겠습니다.

 

1. JAM 스택의 특징

  • JavaScript
    JAM 스택 애플리케이션의 동작을 담당하는 클라이언트 측 로직을 JavaScript로 처리합니다. React, Vue, Svelte와 같은 프레임워크를 통해 사용자와의 상호작용을 구현할 수 있습니다.
  • API
    서버에서 필요한 데이터를 가져올 때 API를 통해 서버에 의존하지 않고 데이터를 처리합니다. REST API나 GraphQL과 같은 API를 사용하여 데이터를 동적으로 호출합니다.
  • Markup
    정적 HTML 파일로 애플리케이션을 사전 빌드하여 빠르게 로드됩니다. 정적 사이트 생성기(Static Site Generator, SSG)인 Gatsby, Next.js, Nuxt.js와 같은 도구를 사용해 정적 파일을 생성할 수 있습니다.

 

2. JAM 스택의 장점

  • 성능: 모든 페이지를 정적으로 미리 생성해 배포하므로 빠른 로딩 속도를 제공합니다.
  • 보안: 서버가 없는 구조이기 때문에 공격에 대한 표면적이 줄어들어 보안이 강화됩니다.
  • 확장성: 정적 파일을 기반으로 배포되므로 트래픽 증가에도 안정적으로 대응할 수 있습니다.
  • 개발 효율성: 백엔드 API와 프론트엔드를 분리하여 독립적으로 개발하고 관리할 수 있습니다.

 

3. 블로그 만들기

  • 순수 JavaScript로 JAM 스택 블로그를 만드는 방법을 소개하겠습니다. 이 방법에서는 HTML, CSS, JavaScript를 사용해 정적 사이트를 구축하고 Markdown 파일을 사용해 게시글을 추가합니다.

3.1. 프로젝트 폴더 구조

JamstackEx/
├── index.html          # 블로그 메인 페이지
├── posts/              # Markdown 게시글 파일 폴더
│   ├── first-post.md	# 첫 번째 게시글
│   └── second-post.md	# 두 번째 게시글
├── scripts/            # JavaScript 파일 폴더
│   ├── main.js
│   └── markdownConverter.js
├── styles/             # CSS 파일 폴더
│   └── style.css
└── README.md

 

3.2. index.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <title>JAM 스택 블로그</title>
    <link rel="stylesheet" href="styles/style.css">
</head>

<body>
    <h1>블로그</h1>
    <ul id="posts-list">
        <!-- 블로그 내용 추가 -->
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
    <script src="scripts/markdownConverter.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>

 

3.3. Markdown 파일 작성

first-post.md

# 첫 번째 게시글
**작 성 일**: 2024-11-13

이것은 첫 번째 게시글입니다.

second-post.md

# 두 번째 게시글
**작 성 일**: 2024-11-14

이것은 두 번째 게시글입니다.

 

3.4. markdownConverter.js

async function fetchMarkdownAsHTML(filePath) {
    const response = await fetch(filePath);
    const markdown = await response.text();
    const converter = new showdown.Converter();
    return converter.makeHtml(markdown);
}
  • showdown을 사용해 Markdown 파일을 HTML로 변환하는 함수를 만듭니다.

 

3.5. main.js

document.addEventListener("DOMContentLoaded", async () => {
    const postsList = document.getElementById("posts-list");
    const posts = [
        { title: "게시글 1", file: "posts/first-post.md" },
        { title: "게시글 2", file: "posts/second-post.md" }
    ];

    for (const post of posts) {
        const listItem = document.createElement("li");
        const link = document.createElement("a");
        link.href = "#";
        link.textContent = post.title;

        link.addEventListener("click", async (event) => {
            event.preventDefault();
            const content = await fetchMarkdownAsHTML(post.file);
            document.body.innerHTML = `
                <h1>${post.title}</h1>
                <div>${content}</div>
                <a href="index.html">← 돌아가기</a>
            `;
        });

        listItem.appendChild(link);
        postsList.appendChild(listItem);
    }
});
  • fetchMarkdownAsHTML 함수를 호출하여 posts/ 폴더의 Markdown 파일들을 불러와 HTML로 변환하고, 이를 index.html에 표시합니다.

 

3.6. style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  line-height: 1.6;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 10px 0;
}

a {
  text-decoration: none;
  color: #1e90ff;
}

a:hover {
  text-decoration: underline;
}
  • 기본적인 스타일링을 추가합니다.

 

4. 프로젝트 실행

python -m http.server 1114
  • python을 통해 로컬 서버를 실행합니다.

 

감사합니다.

'웹기술' 카테고리의 다른 글

[CWV] Core Web Vitals 특징과 간단한 예제  (1) 2024.11.20
[시네마틱 스크롤링] Cinematic Scrolling 특징과 간단한 예제  (2) 2024.11.15
[TFJS] TensorFlowJS 특징과 간단한 예제  (5) 2024.11.13
[WASM] WebAssembly 특징과 간단한 예제  (3) 2024.11.12
[PWA] Progressive Web Apps 특징과 간단한 예제  (0) 2024.11.12
최근에 올라온 글
Total
Today
Yesterday