realgrid2-examples 를 windows 의 local 환경에서 실행해 보기

 

 

 

 

https://github.com/realgrid/realgrid2-examples

 

ruby 와 devkit 을 설치하며, 2.7.2.1 버전을 설치해야 이슈없이 작동이 된다. 설치 가이드는 wikidocs 아래 사이트를 참고하면 된다. 설치 이후 ruby 버전을 확인해서 설치가 잘 되었는지 검증하고, sample 폴더 하위에서 gem 명령어를 통해 bundler 를 설치한다. 그 다음 의존성 파일을 읽어 bundle 명령어를 통해 설치를 한다.

 

jekyll serve 명령어를 통해 모든 .md, .html, _layouts, _includes, _posts 등의 요소를 조합하여 _site/ 디렉터리 안에 정적인 HTML/CSS/JS 파일로 변환한다. 그 다음, eventmachine 을 이용한 TCP/HTTP 서버 시작하고 em-websocket 으로 파일 변경 감지 및 라이브 리로드를 한다.

 

# 설치하기
https://rubyinstaller.org/downloads/archives/

rubyinstaller-devkit-2.7.2-1-x64

# Windows에 Ruby 및 Jekyll 설치하기
https://wikidocs.net/235107

# Ruby 버전 확인
ruby -v

# sample 폴더로 이동
cd C:\Users\lucks\Downloads\realgrid2-examples-master\sample

# bundler 설치
gem install bundler

# 프로젝트 의존성 설치
bundle install

# Jekyll 서버 실행
bundle exec jekyll serve

 

✅ 현재 환경 요약

항목내용

OS 플랫폼	Windows (x64-mingw32)
Ruby 기반 서버	eventmachine, em-websocket 포함
Jekyll 버전	3.8.7
Webrick 없음	WEBrick이나 Puma, Rack은 포함되어 있지 않음
기타	listen, wdm 등 윈도우 파일 시스템 감지용 gem 포함

 

---

❗ 결론부터 말하자면:

👉 현재 Jekyll 개발 서버는 WEBrick, Puma, Rack 기반이 아닌:

eventmachine + em-websocket 조합의 자체 이벤트 루프 기반 서버를 사용합니다.

---

📦 왜 WEBrick이 없는가?

Jekyll 3.x 버전에서는 다음과 같은 구조로 작동합니다:

• em-websocket → 웹소켓 기반으로 라이브 리로드 및 감시 기능 처리
• eventmachine → Ruby의 비동기 이벤트 루프를 담당
• 자체적으로 경량 HTTP 서버를 내장하여 4000 포트로 서빙

📌 참고로 Jekyll 4.x 이후부터 WEBrick이 기본적으로 명시 설치되어야 작동합니다. Ruby 3.0부터는 WEBrick이 기본 Gem에서 제거되었기 때문입니다. 그러나:

Jekyll 3.8.7은 Ruby 2.x 환경을 기본 타겟으로 만들었기 때문에, WEBrick 없이도 작동합니다.

---

⚙️ 작동 방식 요약

bundle exec jekyll serve 명령 시 내부 프로세스

1. 정적 빌드 수행 (jekyll build)
   • _layouts, _includes, .html, .md, _posts 등을 읽어들여 → _site 폴더에 정적 HTML 생성
2. 간이 웹 서버 실행
   • eventmachine을 이용한 TCP/HTTP 서버 시작
   • em-websocket으로 파일 변경 감지 및 라이브 리로드
3. Windows에 특화된 감시기
   • wdm Gem은 Windows 전용 파일시스템 변경 감지 도구
   • 이는 listen과 함께 사용되어 실시간 변경 감지를 안정적으로 수행

---

🧠 Jekyll 서버 관련한 실전 팁

목적도구비고

개발용 프리뷰	jekyll serve	eventmachine 기반
실제 서비스 배포	정적 HTML만 필요	AWS S3, Netlify, GitHub Pages 등에 _site 폴더 업로드
커스터마이징된 서버	jekyll build 후 정적 파일을 nginx, IIS 등에서 서빙	WAS 불필요

 

---

✅ 정리

• 현재 시스템은 Jekyll 3.8.7이며 WEBrick, Puma, Rack 없이 eventmachine + em-websocket을 이용한 내장 HTTP 서버를 통해 작동합니다.
• 이는 개발용 임시 서버이며, 실제 배포는 _site/ 폴더를 업로드하여 정적으로 서비스합니다.
• Windows에선 wdm을 통해 파일 변경 감지가 잘 작동하도록 구성되어 있습니다.

 

 

---

 

bundle exec jekyll serve

 

bundle exec jekyll serve는 Jekyll 개발 서버를 로컬에서 실행하는 명령어입니다. 말씀하신 대로 **실제 웹 서비스에 사용되는 WAS(Web Application Server)**는 아니며, 그 작동 원리를 정확히 이해하는 것이 중요합니다. 아래에서 단계별로 자세히 설명드리겠습니다.

---

✅ 먼저, bundle exec란?

 

bundle exec jekyll serve

 

이 명령은:

• Gemfile에 정의된 정확한 버전의 Jekyll과 관련 gem들을 사용하여
• 해당 프로젝트의 환경에 맞춰 실행하라는 의미입니다.

즉, 시스템 전체에 설치된 Ruby나 Jekyll이 아니라, 현재 프로젝트에서 지정한 의존성을 사용하는 안전한 방식입니다.

---

✅ jekyll serve 작동 원리

1. 내부적으로 jekyll build를 먼저 수행

Jekyll은 정적 사이트 생성기이기 때문에 먼저 모든 .md, .html, _layouts, _includes, _posts 등의 요소를 조합하여 _site/ 디렉터리 안에 정적인 HTML/CSS/JS 파일로 변환합니다.

 

즉, 이 단계는:

jekyll build → _site 폴더 생성 → 실제 배포 가능한 정적 웹사이트 완성

 

---

2. Ruby의 WEBrick 또는 eventmachine  기반의 간단한 웹 서버를 띄움

• 기본 포트는 localhost:4000
• 개발용이기 때문에 고성능이거나 보안에 초점 맞춘 서버는 아님

이는 Node.js의 vite, webpack-dev-server, Python의 flask run과 같은 역할을 합니다.

---

3. 변경 감지 기능 (watcher)

• 파일을 수정하면 자동으로 jekyll build를 다시 실행하여 _site/ 폴더를 업데이트합니다.
• 사용자가 새로고침하면 수정된 내용이 반영됩니다.

 

bundle exec jekyll serve --livereload

 

 

을 사용하면 브라우저도 자동 새로고침됩니다.

 

 

---

 

 

Windows 환경에서 Ruby만 설치되어 있다는 전제하에, Jekyll을 설치하고 HTML, Layout, CSS 기반으로 간단한 ToDo List CRUD 웹사이트를 만드는 전 과정을 개발자 입장에서 단계별로 천천히 설명해 드리겠습니다.

---

✅ 1단계: 개발 환경 준비

1-1. Ruby가 제대로 설치되었는지 확인

ruby -v

 

정상적으로 설치되어 있다면 Ruby 버전이 출력됩니다. 예:

ruby 3.1.2p20 (2022-04-12 revision 4491bb740a)

---

1-2. RubyGems로 Jekyll 설치

gem install jekyll bundler

 

 

이 명령어는 Jekyll과 의존성 관리를 위한 bundler를 설치합니다.

🔍 설치 확인

jekyll -v

---

1-3. Jekyll 프로젝트 생성

jekyll new my-todo
cd my-todo

 

 

이 명령어는 기본적인 Jekyll 폴더 구조와 예제 파일들을 자동으로 생성해 줍니다.

---

✅ 2단계: 로컬 서버 실행

bundle install         # Gemfile 의존성 설치
bundle exec jekyll serve

 

 

브라우저에서 http://localhost:4000 접속하면 Jekyll 홈페이지가 뜹니다.

---

✅ 3단계: ToDo 리스트 개발 준비

3-1. 필요 폴더 구조

my-todo/
├── _layouts/
│   └── default.html       # 공통 레이아웃
├── css/
│   └── style.css          # 스타일 정의
├── todo/
│   └── index.html         # ToDo 리스트 HTML 페이지
├── _includes/
├── _config.yml
└── ...

---

✅ 4단계: 기본 레이아웃 설정

📄 _layouts/default.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>{{ page.title }}</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1>My ToDo List</h1>
  </header>
  <main>
    {{ content }}
  </main>
</body>
</html>

---

✅ 5단계: CSS 스타일 작성

📄 css/style.css

body {
  font-family: Arial, sans-serif;
  background: #f8f9fa;
  margin: 0;
  padding: 2rem;
}

h1 {
  color: #343a40;
}

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

li {
  margin-bottom: 10px;
}

input[type="text"] {
  padding: 8px;
  width: 300px;
  margin-right: 10px;
}

button {
  padding: 8px 12px;
}

---

✅ 6단계: HTML 기반 ToDo CRUD 만들기 (JavaScript 활용)

📄 todo/index.html

---
layout: default
title: ToDo List
---

<h2>오늘 할 일</h2>

<input type="text" id="taskInput" placeholder="할 일을 입력하세요">
<button onclick="addTask()">추가</button>

<ul id="taskList"></ul>

<script>
let tasks = [];

function renderTasks() {
  const list = document.getElementById('taskList');
  list.innerHTML = '';
  tasks.forEach((task, index) => {
    list.innerHTML += `
      <li>
        ${task}
        <button onclick="deleteTask(${index})">삭제</button>
        <button onclick="editTask(${index})">수정</button>
      </li>
    `;
  });
}

function addTask() {
  const input = document.getElementById('taskInput');
  if (input.value.trim()) {
    tasks.push(input.value);
    input.value = '';
    renderTasks();
  }
}

function deleteTask(index) {
  tasks.splice(index, 1);
  renderTasks();
}

function editTask(index) {
  const newTask = prompt("새로운 내용을 입력하세요", tasks[index]);
  if (newTask !== null) {
    tasks[index] = newTask;
    renderTasks();
  }
}

renderTasks();
</script>

---

✅ 7단계: 로컬에서 확인

bundle exec jekyll serve

 

 

브라우저에서 http://localhost:4000/todo로 접속하면 간단한 ToDo CRUD 앱이 작동합니다!

---

🧠 부가 팁

목적 팁

CRUD 데이터 저장	현재는 메모리 기반 (새로고침 시 초기화됨), 추후 LocalStorage로 개선 가능
디자인 향상	Bootstrap이나 TailwindCSS 연결 가능
Jekyll Collections	복잡한 데이터 관리가 필요할 경우 _data 또는 Collection 기능 활용 가능

---

📌 결론

• Ruby만 설치되어 있어도 Jekyll 설치와 실행은 매우 간단합니다.
• HTML, CSS, JavaScript 기반으로도 Jekyll에서 충분히 CRUD 앱을 만들 수 있습니다.
• .md 없이 .html만으로도 구조화된 정적 웹사이트 구축이 가능합니다.

---

 

 

 

 

https://wikidocs.net/235107

Windows에 Ruby 및 Jekyll 설치하기