Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

42min
개요
이 가이드는 Mithril.js를 사용하여 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 만드는 과정을 안내합니다.
이 튜토리얼을 통해 Basic-CRUD-App-MithrilJS라는 제목의 Back4app 프로젝트를 구성하여 웹 애플리케이션의 강력한 백엔드로 활용하는 방법을 배우게 됩니다.
효율적인 데이터 스키마를 설계하고, Back4app의 관리 패널을 통해 이를 관리하며, REST API 호출을 사용하여 Mithril.js 프론트엔드를 통합할 것입니다.
배울 내용
신뢰할 수 있는 백엔드를 사용하여 데이터를 처리하는 CRUD 시스템을 설정하는 방법.
확장 가능한 데이터베이스 설계를 구축하고 이를 Mithril.js 애플리케이션에 연결하는 전략.
Back4app의 직관적인 드래그 앤 드롭 관리 인터페이스를 활용하여 CRUD 작업을 수행하는 방법.
애플리케이션을 신속하게 배포하기 위한 방법, 포함하여 Docker 컨테이너화.
﻿
요구 사항
시작하기 전에 다음 사항을 확인하십시오:
Back4app 계정과 활성 프로젝트가 있습니다.
도움이 필요하면 Back4app 시작하기를 참조하십시오.
Mithril.js 개발 환경이 필요합니다.
npm 또는 CDN을 통해 Mithril을 포함할 수 있습니다. Node.js (v14+)가 설치되어 있는지 확인하십시오.
JavaScript, Mithril.js 및 RESTful API에 대한 기본 지식이 필요합니다.
추가 지침은 Mithril.js 문서를 확인하십시오.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정
Back4app 계정에 로그인하십시오.
대시보드에서 새 앱 버튼을 클릭하십시오.
프로젝트 이름을 제공하십시오: Basic-CRUD-App-MithrilJS 및 안내된 단계를 따르십시오.
새 프로젝트 만들기
﻿
설정이 완료되면, 귀하의 프로젝트는 대시보드에 나열되어 애플리케이션의 백엔드 허브 역할을 합니다.
﻿
2단계 – 데이터베이스 스키마 만들기
데이터 모델 구성
이 CRUD 앱을 위해 몇 가지 주요 컬렉션을 설계할 것입니다. 아래는 CRUD 작업을 효과적으로 처리하기 위해 해당 필드와 함께 컬렉션을 만드는 개요입니다.
1. 항목 수집
이 수집은 각 항목에 대한 세부 정보를 보유합니다.
필드
유형
목적
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
생성 타임스탬프.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 프로필 및 인증 세부정보를 관리합니다.
필드
유형
목적
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자의 고유 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전한 인증을 위한 해시된 비밀번호.
생성일
날짜
사용자가 등록된 타임스탬프.
업데이트됨
날짜
수정 사항에 대한 타임스탬프.
Back4app 대시보드를 통해 새로운 클래스를 생성하고 각 열을 적절히 정의하여 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 적절한 데이터 유형을 선택하고, 이름을 제공하고, 기본값을 설정하고, 필수 여부를 표시하면 됩니다.
열 만들기
﻿
﻿
Back4app의 AI 에이전트를 활용한 스키마 자동화
Back4app의 통합 AI 에이전트는 제공된 프롬프트를 기반으로 컬렉션을 자동 생성하여 스키마 생성을 간소화합니다.
AI 에이전트 활용 방법:
프로젝트 대시보드에서 AI 에이전트에 접근합니다.
컬렉션과 필드를 자세히 설명하여 원하는 스키마를 설명합니다.
생성된 스키마를 검토하고 변경 사항을 적용합니다.
샘플 프롬프트:
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 도구는 데이터베이스 설계가 일관되고 CRUD 작업을 처리하는 데 최적화되도록 보장하는 데 도움이 됩니다.
﻿
3단계 – 관리자 인터페이스 및 CRUD 기능 활성화
관리자 인터페이스 개요
Back4app 관리자 인터페이스는 백엔드 데이터를 손쉽게 관리할 수 있도록 설계된 코드 없는 솔루션입니다. 드래그 앤 드롭 디자인 덕분에 CRUD 작업을 쉽게 수행할 수 있습니다.
관리자 인터페이스 활성화 방법
Back4app 대시보드의 더보기 섹션으로 이동합니다.
 관리자 앱을 클릭한 다음 관리자 앱 활성화을 선택합니다.
첫 번째 관리자 사용자를 만들기 위해 관리자 자격 증명을 설정합니다. 이 과정은 역할(예: B4aAdminUser) 및 시스템 컬렉션도 구성합니다.
관리자 앱 활성화
﻿
활성화 후, 관리 인터페이스에 로그인하여 컬렉션을 관리하세요.
관리 앱 대시보드
﻿
관리 인터페이스를 통한 CRUD 작업 수행
새 레코드 추가: 항목(예: 아이템)에서 “레코드 추가” 옵션을 사용하여 항목을 생성합니다.
레코드 보기/수정: 레코드를 클릭하여 세부 정보를 확인하거나 필드를 편집합니다.
레코드 제거: 삭제 기능을 사용하여 오래된 항목을 제거합니다.
이 직관적인 인터페이스는 일상적인 CRUD 작업을 단순화하여 사용자 경험을 향상시킵니다.
﻿
4단계 – Mithril.js와 Back4app 연결
백엔드가 준비되고 관리 인터페이스를 통해 관리되면, Mithril.js 프론트엔드를 REST API 호출을 사용하여 Back4app에 연결할 시간입니다.
Mithril.js와 함께 REST API 호출 사용
Back4app 백엔드와 상호작용하기 위해 REST API 호출에 의존할 것입니다.
예: 아이템 가져오기 및 표시
아이템 컬렉션에서 아이템을 검색하는 Mithril 컴포넌트를 생성합니다:
JS
// src/components/ItemsList.js
const ItemsList = {
  items: [],
  loadItems: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      ItemsList.items = data.results;
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  },
  oninit: function() {
    ItemsList.loadItems();
  },
  view: function() {
    return m('div', [
      m('h2', 'Items'),
      m('ul',
        ItemsList.items.map(item =>
          m('li', { key: item.objectId },
            `${item.title} — ${item.description}`
          )
        )
      )
    ]);
  }
};

export default ItemsList;
// src/components/ItemsList.js
const ItemsList = {
  items: [],
  loadItems: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      ItemsList.items = data.results;
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  },
  oninit: function() {
    ItemsList.loadItems();
  },
  view: function() {
    return m('div', [
      m('h2', 'Items'),
      m('ul',
        ItemsList.items.map(item =>
          m('li', { key: item.objectId },
            `${item.title} — ${item.description}`
          )
        )
      )
    ]);
  }
};

export default ItemsList;
﻿
이 컴포넌트는 Mithril의 생명주기 메서드 oninit를 사용하여 컴포넌트가 초기화될 때 데이터를 로드합니다.
예제: 새 항목 추가하기
새 항목을 추가하기 위해 POST 요청을 보내는 양식을 통합할 수 있습니다:
JS
// src/components/AddItem.js
const AddItem = {
  title: '',
  description: '',
  submitItem: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          title: AddItem.title,
          description: AddItem.description
        })
      });
      const data = await response.json();
      console.log('Item added:', data);
      // Optionally, refresh the list or redirect the user.
    } catch (error) {
      console.error('Error adding item:', error);
    }
  },
  view: function() {
    return m('div', [
      m('h2', 'Add Item'),
      m('input[type=text]', {
        placeholder: 'Title',
        oninput: m.withAttr('value', value => AddItem.title = value),
        value: AddItem.title
      }),
      m('input[type=text]', {
        placeholder: 'Description',
        oninput: m.withAttr('value', value => AddItem.description = value),
        value: AddItem.description
      }),
      m('button', { onclick: AddItem.submitItem }, 'Add Item')
    ]);
  }
};

export default AddItem;
// src/components/AddItem.js
const AddItem = {
  title: '',
  description: '',
  submitItem: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          title: AddItem.title,
          description: AddItem.description
        })
      });
      const data = await response.json();
      console.log('Item added:', data);
      // Optionally, refresh the list or redirect the user.
    } catch (error) {
      console.error('Error adding item:', error);
    }
  },
  view: function() {
    return m('div', [
      m('h2', 'Add Item'),
      m('input[type=text]', {
        placeholder: 'Title',
        oninput: m.withAttr('value', value => AddItem.title = value),
        value: AddItem.title
      }),
      m('input[type=text]', {
        placeholder: 'Description',
        oninput: m.withAttr('value', value => AddItem.description = value),
        value: AddItem.description
      }),
      m('button', { onclick: AddItem.submitItem }, 'Add Item')
    ]);
  }
};

export default AddItem;
﻿
유사하게, 해당 HTTP 메서드(업데이트를 위한 PUT/PATCH 및 삭제를 위한 DELETE)를 사용하여 업데이트 및 삭제 작업을 구현할 수 있습니다.
﻿
5단계 – 백엔드 보안 강화
접근 제어 구현
각 객체에 접근 제어 목록(ACL)을 적용하여 데이터를 안전하게 보호하세요. 예를 들어, 소유자만 수정할 수 있는 항목을 생성하려면:
JS
async function createSecureItem(itemData, ownerId) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          "*": { read: false, write: false }
        }
      })
    });
    const data = await response.json();
    console.log('Secure item created:', data);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerId) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          "*": { read: false, write: false }
        }
      })
    });
    const data = await response.json();
    console.log('Secure item created:', data);
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
클래스 수준 권한 설정 (CLPs)
Back4app 대시보드 내에서 각 컬렉션의 CLPs를 조정하여 기본 보안 정책을 정의합니다. 이를 통해 권한이 있는 사용자만 민감한 정보에 접근할 수 있도록 보장합니다.
﻿
6단계 – 사용자 인증 설정
사용자 계정 구성
Back4app은 Parse User 클래스를 사용하여 인증을 관리합니다. Mithril.js를 사용하면 REST API 호출을 통해 등록 및 로그인을 관리할 수 있습니다. 아래는 사용자 가입 예제입니다:
JS
// src/components/Auth.js
const Auth = {
  username: '',
  email: '',
  password: '',
  signUp: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: Auth.username,
          email: Auth.email,
          password: Auth.password
        })
      });
      const data = await response.json();
      alert('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  },
  view: function() {
    return m('form', {
      onsubmit: function(e) {
        e.preventDefault();
        Auth.signUp();
      }
    }, [
      m('input[type=text]', {
        placeholder: 'Username',
        oninput: m.withAttr('value', value => Auth.username = value),
        value: Auth.username
      }),
      m('input[type=email]', {
        placeholder: 'Email',
        oninput: m.withAttr('value', value => Auth.email = value),
        value: Auth.email
      }),
      m('input[type=password]', {
        placeholder: 'Password',
        oninput: m.withAttr('value', value => Auth.password = value),
        value: Auth.password
      }),
      m('button', { type: 'submit' }, 'Sign Up')
    ]);
  }
};

export default Auth;
// src/components/Auth.js
const Auth = {
  username: '',
  email: '',
  password: '',
  signUp: async function() {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: Auth.username,
          email: Auth.email,
          password: Auth.password
        })
      });
      const data = await response.json();
      alert('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  },
  view: function() {
    return m('form', {
      onsubmit: function(e) {
        e.preventDefault();
        Auth.signUp();
      }
    }, [
      m('input[type=text]', {
        placeholder: 'Username',
        oninput: m.withAttr('value', value => Auth.username = value),
        value: Auth.username
      }),
      m('input[type=email]', {
        placeholder: 'Email',
        oninput: m.withAttr('value', value => Auth.email = value),
        value: Auth.email
      }),
      m('input[type=password]', {
        placeholder: 'Password',
        oninput: m.withAttr('value', value => Auth.password = value),
        value: Auth.password
      }),
      m('button', { type: 'submit' }, 'Sign Up')
    ]);
  }
};

export default Auth;
﻿
로그인 및 세션 관리를 위해 유사한 방법을 채택할 수 있습니다.
﻿
7단계 – Mithril.js 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리를 연결하여 Mithril.js 애플리케이션을 원활하게 호스팅할 수 있습니다.
7.1 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이것은 최적화된 정적 파일이 포함된 build 폴더를 생성합니다.
7.2 코드 정리 및 커밋하기
귀하의 저장소는 다음과 유사한 구조를 가져야 합니다:
Text
Basic-CRUD-App-MithrilJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── ItemsList.js
│   │   ├── AddItem.js
│   │   └── Auth.js
│   └── app.js
├── package.json
└── README.md
Basic-CRUD-App-MithrilJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── ItemsList.js
│   │   ├── AddItem.js
│   │   └── Auth.js
│   └── app.js
├── package.json
└── README.md
﻿
예시: src/index.js
JS
import m from "mithril";
import ItemsList from "./components/ItemsList";
import AddItem from "./components/AddItem";
import Auth from "./components/Auth";

// Define a simple routing system
m.route(document.body, "/", {
  "/": {
    view: function() {
      return m("div", [
        m(ItemsList),
        m(AddItem),
        m(Auth)
      ]);
    }
  }
});
import m from "mithril";
import ItemsList from "./components/ItemsList";
import AddItem from "./components/AddItem";
import Auth from "./components/Auth";

// Define a simple routing system
m.route(document.body, "/", {
  "/": {
    view: function() {
      return m("div", [
        m(ItemsList),
        m(AddItem),
        m(Auth)
      ]);
    }
  }
});
﻿
GitHub에 커밋하고 푸시하기
Git 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 추가하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Initial commit of Mithril.js frontend"
git commit -m "Initial commit of Mithril.js frontend"
﻿
GitHub에 리포지토리 생성하기 (예: Basic-CRUD-App-MithrilJS-Frontend) 그리고 코드를 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-MithrilJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-MithrilJS-Frontend.git
git push -u origin main
﻿
7.3 GitHub와 웹 배포 연결하기
Back4app 대시보드에 로그인하고, 프로젝트 (Basic-CRUD-App-MithrilJS )로 이동한 후 웹 배포를 선택하세요.
화면의 안내에 따라 GitHub 계정을 연결하세요.
Mithril.js 소스 코드가 포함된 저장소와 브랜치를 선택하세요 (예: main).
7.4 배포 구성 설정하기
구성:
빌드 명령어: 빌드 폴더가 없으면 npm run build를 지정하세요.
출력 디렉토리: 정적 자산을 가리키도록 build로 설정하세요.
환경 변수: 필요한 API 키나 설정을 추가하세요.
7.5 애플리케이션 도커화하기 (선택 사항)
컨테이너화를 선호하는 경우, Dockerfile:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve using Nginx
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as builder

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve using Nginx
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 애플리케이션 배포
Back4app 웹 배포 섹션에서 배포 버튼을 클릭하세요.
Back4app이 애플리케이션을 가져오고, 빌드하고, 배포하는 동안 빌드 프로세스를 모니터링하세요.
완료되면, 라이브 Mithril.js 앱의 URL을 받게 됩니다.
7.7 배포 확인
제공된 URL을 브라우저에서 엽니다.
애플리케이션이 로드되고, 탐색이 작동하며, 자산이 제대로 제공되는지 확인하세요.
필요한 경우 브라우저 개발 도구를 사용하여 문제를 해결하세요.
﻿
8단계 – 마무리 및 향후 방향
잘 하셨습니다! Mithril.js와 Back4app이 통합된 기본 CRUD 앱을 성공적으로 구축했습니다.
Basic-CRUD-App-MithrilJS"라는 프로젝트를 설정하고, 아이템과 사용자에 대한 데이터베이스 스키마를 정의했으며, 관리 인터페이스를 통해 백엔드를 관리했습니다.
또한, REST API 호출을 사용하여 Mithril.js 프론트엔드를 연결하고 데이터를 보호하기 위한 보안 조치를 적용했습니다.
다음은 무엇인가요?
프론트엔드 개선: 상세 보기, 검색 기능 또는 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 기능 확장: 클라우드 기능, 추가 API 통합 또는 역할 기반 권한을 탐색하세요.
더 배우기: Back4app 문서 및 Mithril.js 가이드를 통해 고급 기능을 심화하세요.
코딩을 즐기시고 프로젝트에 행운이 있기를 바랍니다!
필드	유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	생성 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자의 고유 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전한 인증을 위한 해시된 비밀번호.
생성일	날짜	사용자가 등록된 타임스탬프.
업데이트됨	날짜	수정 사항에 대한 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Building a CRUD App with Inferno.js: A Comprehensive Walkthrough
How to Build a Basic CRUD App with Marko? A Step-by-Step Guide