폼 작성

위젯 만들기

빠르게 시작하기

H:Dev+는 REST(Representational State Transfer) API 방식과 유사하게 동작하는 백엔드 서비스입니다.
프론트엔드에서 데이터를 요청하면 서버는 미리 정의된 방식에 따라 응답하며, 별도의 서버 코드 작성 없이 바로 사용할 수 있습니다.
아래의 3단계만으로 사용이 가능합니다.

STEP 1 프론트엔드에서 데이터 식별자를 정의
STEP 2 커넥터를 호출해 데이터를 요청
STEP 3 수신한 데이터를 프론트에서 사용

기본 용어 알아보기

H:Dev+는 아래와 같은 기본 개념만 익히면 누구나 쉽게 사용할 수 있습니다.
필요한 로직이나 데이터 흐름은 HTML 속성과 커넥터 호출로 간단히 연결됩니다.

데이타 식별자 (Data Identifier)

{
                        'dataID':'GET_POST_LIST',
                        'bbs_id':'my_post',
                        'page':1,
                        'order':'create_date',
                        'sort':'desc'
                    }

데이터 식별자는 백엔드에서 호출할 요청을 구분해 주는 JSON 형식의 고유 식별자입니다.
dataID는 요청할 데이터의 고유값이며, 함께 전달되는 속성은 API 요청에 사용될 필터나 조건입니다.
예시에서는 my_post 게시판의 최신 글 목록을 가져오는 요청입니다.

각 기능별로 사용 가능한 dataID와 옵션은 API 문서에서 제공됩니다.

커넥터 (Connector)

커넥터는 프론트엔드에서 정의한 데이터 식별자를 바탕으로 H:Dev+ 백엔드에 요청을 보내는 역할을 합니다.
커넥터는 다양한 개발 언어용 패키지로 제공되며, 패키지 매니저를 통해 설치하거나 파일로 다운로드하여 사용할 수 있습니다.

요청 결과 (Response Result)

커넥터를 통해 요청이 실행되면, 서버는 처리 결과에 따라 데이터를 반환하거나, 페이지를 이동하거나, 화면에 즉각적인 반응을 제공합니다. 이러한 요청 결과는 크게 다음 세 가지 유형으로 구분됩니다:

Redirect: 지정된 URL로 자동 이동
UI Feedback: alert, 모달 등 화면 반응이 자동 실행
JSON Response: 서버에서 데이터를 반환하며 아래의 기본 정보에 DataID에 해당하는 요철결과가 포함되어 제공됩니다.

{
  "user": { // 로그인된 사용자 정보(로그인이 안닐경우 auth_flg 만 false로 반환됩니다.)
    "seq": 4512345, // 사용자 시퀀스
    "email": "user@email.com",
    "cell_phone": "010234567879",
    "name": "User name",
    "nickname": "Nickname",
    "level": 2, // 사용자 레벨
    "avatar_url": "/avatar/url"
    "auth_flg": true, // 인증여부
    "notice_count": 74 // 사용자 알림수
  },
  "env": {
    "dataID": "DATA ID", // 요청된 Data ID
    "current_ver": "v1.0.32", // 현재 사용중인 H:Dev+ 버전
    "last_ver": "v1.0.32" // H:Dev+의 최종 버전
  },
  "session": {  // H:Dev+와 통신을 위환 보안 값
    "status": 2,
    "id": "6ikdvvulo9ibug8ceashc1nsv8",
    "api_token": "o1ln0VsGFbY14_ztfBtjjxMrr_e7QO0EhOVIi...."
  },
  "device": { // 접속중인 클라이언트의 정보
    "mobile_flg": false,
    "device": "desktop",
    "type": "unknow"
  }
}

각 요청결과 유형은 요청의 목적에 따라 자동 적용되며, 대부분 HTML 속성만으로 구현됩니다.

보안키 (Secure Key)

Secure Key는 프론트엔드가 H:Dev+에 요청을 보낼 때, 해당 요청이 인증된 것임을 확인하기 위한 비밀 키입니다.
보안 키는 시스템(System) 콘솔의 설정(Settings) 메뉴에서 발급받을 수 있으며, 개발 초기에는 데모용 보안 키를 사용할 수 있습니다.

Demo secure key : ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1

데모 키는 IP 또는 도메인 제한 없이 사용할 수 있으며, 실 서비스용 키는 보안 강화를 위해 IP 또는 도메인을 지정해야만 사용할 수 있습니다.

바로 시작해보기

프로젝트 생성 및 설정

npx nuxi init hdp-nuxt

cd hdp-nuxt

npm install @hdevplus/connector-nuxt3 dotenv h3

echo 'HDP_SECURE_KEY=ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1' > .env;
                            echo 'NUXT_PUBLIC_HDP_API_URL=https://api.hdevplus.com/request.js' >> .env;

vi nuxt.config.ts

nuxt.config.ts에 아래 내용을 추가합니다.

// nuxt.config.ts
                          modules: ['@hdevplus/connector-nuxt3'],
                      runtimeConfig: {
                        secureKey: process.env.HDP_SECURE_KEY,
                        public: {
                          apiUrl: process.env.NUXT_PUBLIC_HDP_API_URL
                        }
                      }

app.vue 수정 및 페이지 생성

vi app.vue

// app.vue
                      <template>
                        <div>
                          <NuxtLayout>
                            <NuxtPage />
                          </NuxtLayout>
                        </div>
                       </template>

mkdir pages

데이터 요청 및 출력

API 문서에 따라 데이터 식별자를 정의하고 커넥터를 통해 요청한 후 수신한 데이터를 출력하는 예제입니다.

vi pages/post-list.vue

// pages/post-list.vue
<script setup>
import { ref } from 'vue';
const output = ref(null);
// 1단계 - 데이터 식별자 정의
const requestData = {
  'dataID':'GET_POST_LIST',
  'bbs_seq':1,
  'page':1,
  'list_per_page':20,
  'order':'create_date',
  'sort':'desc'
}
// 2 단계 - 커넥터 호출
const { output: result } = await useNuxtApp().$connector(requestData);
output.value = result;
</script>
<template>
  <!-- 3 단계 - 수신데이터 사용 -->
  <div v-if="output">
    <pre>{{output}}</pre>
  </div>
</template>

데이터 저장

게시글을 수정하는 API 문서에 따라 HTML 속성을 정의하여 데이터를 저장하는 예제입니다.

vi pages/post-create.vue

// pages/post-create.vue
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const output = ref(null);
// 1단계 - 데이터 식별자 정의
const requestData = {
  'dataID':'ADD_POST'
}
// 2 단계 - 커넥터 호출
const { output: result } = await useNuxtApp().$connector(requestData);
output.value = result;
</script>
<template>
  <!-- 3 단계 - HTML 속성 지정 및 수신데이터 사용 -->
  <form id="frm_save_post">
    <input type="hidden" name="return_url" value="list.html" />
    <div>
      <label for="bbs_seq">BBS</label>
      <select id="bbs_seq" name="bbs_seq">
        <option v-for="bbs in output.bbs_list" :value="bbs.seq">{{bbs.bbs_name}}</option>
      </select>
    </div>
    <div>
      <label for="subject">Post subject</label>
      <input type="text" id="subject" name="subject" value="" placeholder="Input Subject" />
    </div>
    <div>
      <label for="email">Writer email</label>
      <input type="text" id="email" name="email" value="" placeholder="Input email" />
    </div>
    <div>
      <label for="cell_phone">Writer mobile number</label>
      <input type="text" id="cell_phone" name="cell_phone" value="" placeholder="Input mobile number" />
    </div>
    <div>
      <label for="reg_name">Writer name</label>
      <input type="text" id="reg_name" name="reg_name" value="" placeholder="Input name" />
    </div>
    <div>
      <label for="reg_name">Password</label>
      <input type="password" id="password" name="password" value="" placeholder="Input password" />
    </div>
    <div>
      <label for="content">Post content</label>
      <textarea id="content_1" name="content[]" rows="10" value="" placeholder="Input content"></textarea>
    </div>
    <div>
      <button type="submit">저장</button>
    </div>
  </form>
</template>
<style scoped>
  #frm_save_post{
    width:50em;
    max-width:90%;
    padding:1em 2em;
    margin:0 auto;
    border-radius:1em;
    background-color:#f1f1f1;
  }
  #frm_save_post label{
    display:block;
    margin:0.5em 0;
  }
  #frm_save_post > div {
    padding:0.5em 0;
  }
  #frm_save_post input,
  #frm_save_post select,
  #frm_save_post textarea {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  #frm_save_post button{
    padding:0.5em 1.5em;
  }
</style>

NUXT 실행 및 접속

아래와 같이 NUXT3를 실행하고 http://localhost:3000/post-list 로 접속하면 게시글 data의 JSON Data를 확인 할 수 있습니다.

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

설치 전 준비 사항

H:Dev+를 PHP와 연동하기 위해서는 cURL extension 과 Composer 가 필요합니다.
아래의 링크를 참고하여 설치하거나 apt, yum 또는 brew(curl은 php에 기본으로 포함)를 이용해 설치합니다.

sudo apt install php-curl composer

sudo yum install php-curl composer

brew install composer

프로젝트 생성 및 설정

mkdir hdp-php

cd hdp-php

composer init

composer require vlucas/phpdotenv hdevplus/connector-php

echo 'HDP_SECURE_KEY=ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1' > .env;
                            echo 'HDP_API_URL=https://api.hdevplus.com/request.js' >> .env;

mkdir public

페이지 생성 및 데이터 요청

API 문서에 따라 데이터 식별자를 정의하고 커넥터를 통해 요청한 후 수신한 데이터를 출력하는 예제입니다.

vi public/post-list.php

<?php
// /public/post-list.php
require '../vendor/autoload.php'; // change to your autoload.php location
use hdevplus\connector;
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable('../'); // change to your project root
$dotenv->load();

// Step 1 – Specify the data identifier to request
$arrRequestData = [
            'dataID'=>'GET_POST_LIST',
            'bbs_seq'=>1,
            'page'=>1,
            'list_per_page'=>20,
            'order'=>'create_date',
            'sort'=>'desc'
            ];
$oConnector = new connector($_ENV['HDP_API_URL'], $_ENV['HDP_SECURE_KEY']);

// Step 2 – Invoke the connector with the request data
$output = $oConnector->request($arrRequestData);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H:Dev+ PHP Demo</title>
</head>
<body>
    <!-- // Step 3 – Process and utilize the response data -->
    <pre>
        <?php print_r($output); ?>
    </pre>
    <!-- local H:Dev+ JS -->
    <?php $oConnector->loadScript(); ?>
</body>
</html>

데이터 저장

게시글을 수정하는 API 문서에 따라 HTML 속성을 정의하여 데이터를 저장하는 예제입니다.

vi public/post-create.php

<?php
// /public/post-create.php
require '../vendor/autoload.php'; // change to your autoload.php location
use hdevplus\connector;
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable('../'); // change to your project root
$dotenv->load();

// Step 1 – Specify the data identifier to request
$arrRequestData = [
    'dataID'=>'ADD_POST'
];
$oConnector = new connector($_ENV['HDP_API_URL'], $_ENV['HDP_SECURE_KEY']);

// Step 2 – Invoke the connector with the request data
$output = $oConnector->request($arrRequestData);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H:Dev+ PHP Demo</title>
    <style>
        #frm_save_post{
            width:50em;
            max-width:90%;
            padding:1em 2em;
            margin:0 auto;
            border-radius:1em;
            background-color:#f1f1f1;
        }
        #frm_save_post label{
            display:block;
            margin:0.5em 0;
        }
        #frm_save_post > div {
            padding:0.5em 0;
        }
        #frm_save_post input,
        #frm_save_post select,
        #frm_save_post textarea {
            width: 100%;
            padding: 0.6rem 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box;
        }
        #frm_save_post button{
            padding:0.5em 1.5em;
        }
    </style>
</head>
<body>
    <!-- // Step 3 – Process and utilize the response data -->
    <form id="frm_save_post">
        <input type="hidden" name="return_url" value="/post-list.php" />
        <div>
            <label for="bbs_seq">BBS</label>
            <select id="bbs_seq" name="bbs_seq">
                <?php foreach($output['bbs_list'] as $arrBBS){ ?>
                    <option value="<?=$arrBBS['seq'];?>"><?=$arrBBS['bbs_name'];?></option>
                <?php } ?>
            </select>
        </div>
        <div>
            <label for="subject">Post subject</label>
            <input type="text" id="subject" name="subject" value="" placeholder="Input Subject" />
        </div>
        <div>
            <label for="email">Writer email</label>
            <input type="text" id="email" name="email" value="" placeholder="Input email" />
        </div>
        <div>
            <label for="cell_phone">Writer mobile number</label>
            <input type="text" id="cell_phone" name="cell_phone" value="" placeholder="Input mobile number" />
        </div>
        <div>
            <label for="reg_name">Writer name</label>
            <input type="text" id="reg_name" name="reg_name" value="" placeholder="Input name" />
        </div>
        <div>
            <label for="reg_name">Password</label>
            <input type="password" id="password" name="password" value="" placeholder="Input password" />
        </div>
        <div>
            <label for="content">Post content</label>
            <textarea id="content_1" name="content[]" rows="10" placeholder="Input content"></textarea>
        </div>
        <div>
            <button type="submit">저장</button>
        </div>
    </form>
    <!-- local H:Dev+ JS -->
    <?php $oConnector->loadScript(); ?>
</body>
</html>

PHP 실행 및 접속

아래와 같이 PHP 내장서버를 실행하고 http://localhost:9000/post-list.php 로 접속하면 게시글 data의 JSON Data를 확인 할 수 있습니다.

php -S localhost:9000 -t public/

User Discussions

ADD

VueJS 선언적 렌더링(Declarative Rendering)방식으로 시작하기
지후아빠
12-15 15:55
Nuxt3 Service Side Rendering 환경으로 프론트앤드 개발 시작하기
지후아빠
12-12 20:27

시작하기

회원

포럼 / 게시판

웹 폼

위젯