How to Create a CRUD Application with Elm?

33min
개요
이 안내서에서는 Elm을 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
우리는 데이터를 손쉽게 관리하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다. 이 가이드는 Back4app 프로젝트를 구성하고, 유연한 데이터 스키마를 설계하며, REST API 호출을 사용하여 Elm 애플리케이션에 CRUD 작업을 통합하는 방법을 설명합니다.
Basic-CRUD-App-Elm"라는 이름의 Back4app 프로젝트를 설정합니다. 이는 강력한 비관계형 데이터베이스를 제공합니다. 데이터 모델을 수동으로 설계하거나 Back4app의 지능형 AI 에이전트를 사용할 수 있습니다.
다음으로, 데이터 조작을 위한 직관적인 드래그 앤 드롭 인터페이스를 제공하는 Back4app 관리 앱으로 백엔드를 관리합니다.
마지막으로, 안전한 데이터 작업을 보장하면서 RESTful API 요청을 통해 Elm 앱을 Back4app에 연결합니다.
이 튜토리얼이 끝나면 핵심 CRUD 기능과 안전한 사용자 인증을 지원하는 프로덕션 준비 완료 Elm 애플리케이션을 갖게 됩니다.
필수 통찰
비관계형 백엔드와 함께 Elm CRUD 애플리케이션을 구축하는 방법을 배우세요.
확장 가능한 백엔드를 구조화하고 Elm 프론트엔드와 연결하는 방법을 이해하세요.
원활한 생성, 읽기, 업데이트 및 삭제 작업을 위해 Back4app 관리 앱을 사용하세요.
Docker를 포함한 배포 옵션을 탐색하여 Elm 애플리케이션을 쉽게 시작하세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
프로젝트가 설정된 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
Elm 개발 환경입니다.
Elm을 설치하고 좋아하는 편집기를 사용하세요.
Elm 기초, 함수형 프로그래밍 및 HTTP 요청에 대한 친숙함입니다.
필요한 경우 Elm 가이드를 확인하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
“새 앱” 버튼을 클릭하세요 대시보드에서.
프로젝트 이름 지정: Basic-CRUD-App-Elm 설정을 완료하기 위한 지침을 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 준비되면 대시보드에 나타나며, 백엔드 구성을 위한 준비가 됩니다.
﻿
2단계 – 데이터 스키마 작성
데이터 구조 설정
이 CRUD 애플리케이션을 위해 Back4app에서 여러 컬렉션(또는 클래스)을 생성할 것입니다. 아래는 CRUD 작업을 지원하기 위한 주요 컬렉션과 그 필드의 예입니다.
1. 항목 수집
이 수집은 각 항목에 대한 세부 정보를 저장합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
생성 타임스탬프.
업데이트됨
날짜
마지막 업데이트를 표시하는 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 인증 및 자격 증명을 처리합니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호 해시
문자열
보안을 위한 암호화된 비밀번호.
생성일
날짜
계정이 생성된 시간의 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
Back4app 대시보드를 통해 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
적절한 유형을 선택하고, 필드 이름을 지정하고, 필드가 필수인지 여부를 지정하여 필드를 추가할 수 있습니다.
열 만들기
﻿
스키마 구성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 설명에 기반하여 데이터 스키마 생성을 간소화합니다. 이 자동화된 프로세스는 모든 필요한 CRUD 작업을 위해 스키마가 설정되도록 보장합니다.
AI 에이전트를 사용하려면:
AI 에이전트에 접근하기:
Back4app 대시보드에 로그인하고 프로젝트 설정에서 AI 에이전트를 찾습니다.
데이터 스키마 상세 설명:
필요한 컬렉션과 필드를 설명합니다.
검토 및 확인:
제안된 스키마를 확인하고 승인하여 백엔드를 구성합니다.
예시 프롬프트
Text
Create the following collections in my Back4app project:

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

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 스마트 접근 방식은 시간을 절약하고 강력하고 일관된 데이터 스키마를 보장합니다.
﻿
3단계 – 관리자 인터페이스 활성화 및 CRUD 작업 처리
관리자 인터페이스 소개
Back4app의 관리자 앱은 백엔드 데이터를 관리할 수 있는 코드 없는 인터페이스를 제공합니다. 사용자 친화적인 디자인 덕분에 레코드를 추가, 보기, 편집 및 삭제하는 CRUD 작업을 수행할 수 있습니다.
관리자 앱 활성화
“더보기” 메뉴로 가세요 Back4app 대시보드에서.
“관리자 앱”을 선택하세요 그리고 “관리자 앱 활성화”를 클릭하세요.
관리자 계정을 생성하세요, 이 계정은 B4aAdminUser와 같은 역할 및 시스템 컬렉션을 설정합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 데이터를 관리하세요.
관리자 앱 대시보드
﻿
관리자 앱에서 CRUD 작업 수행
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: 컬렉션(예: 항목)에서 “레코드 추가”를 선택하여 새 항목을 만듭니다.
레코드 검사/편집: 세부정보를 보거나 데이터를 수정하려면 레코드를 클릭하세요.
레코드 제거: 더 이상 필요하지 않은 항목을 삭제합니다.
이 사용하기 쉬운 인터페이스는 데이터 관리를 간소화합니다.
﻿
4단계 – Elm 애플리케이션을 Back4app에 연결하기
백엔드가 구성되었으므로 Elm 애플리케이션을 Back4app에 연결할 시간입니다.
Elm에서 REST API 호출 사용하기
Elm은 전용 Parse SDK를 지원하지 않으므로, Back4app의 REST 엔드포인트와 상호작용하기 위해 내장된 HTTP 기능을 사용할 것입니다.
예제: 항목 컬렉션에서 데이터 가져오기
아래는 Http 패키지를 사용하여 항목 목록을 검색하는 Elm 모듈 예제입니다:
Text
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
﻿
예제: 새 항목 만들기
새 레코드를 추가하기 위해 Elm에서 POST 요청을 구현할 수도 있습니다:
Text
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
﻿
PUT 및 DELETE 메서드를 사용하여 업데이트 및 삭제 작업에 대해 유사한 패턴을 반복하십시오.
﻿
5단계 – 백엔드 보호하기
액세스 제어 구성 (ACLs)
객체에 ACL을 설정하여 데이터를 보호하십시오. 예를 들어, 항목을 생성자에게만 제한하려면 다음과 같이 사용할 수 있습니다:
Text
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
﻿
클래스 수준 권한 설정 (CLPs)
인증된 사용자만 특정 컬렉션에 접근할 수 있도록 Back4app 대시보드에서 CLP를 정의하십시오.
﻿
6단계 – 사용자 인증 구현하기
사용자 계정 관리
Back4app은 인증 처리를 위해 내장된 사용자 컬렉션을 활용합니다. Elm 앱에서 REST API 호출을 통해 회원 가입 및 로그인을 관리할 것입니다.
예시: 사용자 가입 요청
Text
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
﻿
로그인 및 세션 관리에 대해 유사한 접근 방식을 따르십시오.
﻿
7단계 – Elm 애플리케이션 배포
Back4app은 원활한 배포를 지원합니다. Docker를 포함한 다양한 방법으로 Elm 애플리케이션을 배포할 수 있습니다.
7.1 Elm 애플리케이션 빌드하기
Elm 코드 컴파일하기:
Elm 컴파일러를 실행하여 JavaScript를 생성합니다:
Bash
elm make src/Main.elm --output=dist/main.js
elm make src/Main.elm --output=dist/main.js
﻿
자산 준비하기:
생성된 JavaScript 및 HTML 파일이 배포 준비가 되었는지 확인하십시오.
﻿
7.2 프로젝트 구조 정리하기
전형적인 Elm 프로젝트 레이아웃은 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
﻿
7.3 Elm 애플리케이션 도커화하기
컨테이너화할 경우, Dockerfile:
Dockerfile
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
﻿
7.4 Back4app의 웹 배포
저장소 연결:
GitHub에 Elm 프로젝트를 호스팅하세요.
배포 설정 구성:
Back4app 대시보드에서 웹 배포 기능을 선택하고, 저장소(예: Basic-CRUD-App-Elm)를 연결한 후 원하는 브랜치를 선택하세요.
빌드 명령 설정:
빌드 명령(예: elm make src/Main.elm --output=dist/main.js)와 아티팩트 위치를 지정하세요.
앱 배포:
배포를 클릭하고 앱이 라이브될 때까지 로그를 모니터링하세요.
﻿
8단계 – 최종 생각과 미래 방향
축하합니다! 당신은 Back4app과 통합된 Elm 기반 CRUD 애플리케이션을 구축했습니다. 
당신은 Basic-CRUD-App-Elm이라는 이름의 프로젝트를 설정하고, 아이템과 사용자에 대한 컬렉션을 설계했으며, Back4app 관리 앱을 통해 데이터를 관리했습니다. 
또한, REST API 호출을 사용하여 Elm 애플리케이션을 연결하고 보안 조치를 구현했습니다.
미래의 향상 사항:
기능 확장:
고급 검색 기능, 상세 보기 또는 실시간 업데이트를 통합하세요.
백엔드 기능 강화:
클라우드 기능, 서드파티 통합 또는 역할 기반 접근을 실험하세요.
지식 심화:
 Back4app 문서 및 기타 리소스를 방문하여 앱을 개선하세요.
행복한 코딩을 하시고 Elm과 Back4app으로 구축하는 것을 즐기세요!
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	생성 타임스탬프.
업데이트됨	날짜	마지막 업데이트를 표시하는 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호 해시	문자열	보안을 위한 암호화된 비밀번호.
생성일	날짜	계정이 생성된 시간의 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Develop a CRUD App with TypeScript?
Vue.js로 CRUD 앱을 개발하는 방법?