"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "소개", "hProperties": { "id": "소개" } }, "depth": 2, "value": "소개" }, { "data": { "id": "배경", "hProperties": { "id": "배경" } }, "depth": 2, "value": "배경" }, { "data": { "id": "설정-기반-개발cdd이란", "hProperties": { "id": "설정-기반-개발cdd이란" } }, "depth": 2, "value": "설정 기반 개발(CDD)이란?" }, { "data": { "id": "다이내믹-폼이란", "hProperties": { "id": "다이내믹-폼이란" } }, "depth": 2, "value": "다이내믹 폼이란?" }, { "data": { "id": "스키마-설계", "hProperties": { "id": "스키마-설계" } }, "depth": 2, "value": "스키마 설계" }, { "data": { "id": "react-hook-form을-사용하여-폼-구축하기", "hProperties": { "id": "react-hook-form을-사용하여-폼-구축하기" } }, "depth": 2, "value": "React-Hook-Form을 사용하여 폼 구축하기" }, { "data": { "id": "결론", "hProperties": { "id": "결론" } }, "depth": 2, "value": "결론" }]; const readingTime = { "minutes": 1, "words": 303, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "소개", children: ["소개", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#소개", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "커넥터" }), "는 Logto에서 중요한 역할을 합니다. 커넥터를 통해 Logto는 최종 사용자가 비밀번호 없는 등록 또는 로그인을 하거나 소셜 계정으로 로그인할 수 있는 기능을 제공합니다. Logto는 사용자가 자신의 커넥터를 설치하거나 만들 수 있도록 하며, 이미 20개 이상의 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "공식 커넥터" }), "가 존재합니다. 우리의 커넥터는 매우 유연하도록 설계되어 있으며, 사용자가 설치하거나 새로운 커넥터를 개발하는 것이 쉽습니다. 이를 위해 설정 기반 개발(CDD)에서 영감을 받은 '다이내믹 폼'이라는 솔루션을 설계하고 구현했습니다."] }), "\n", _jsxs(_components.h2, { id: "배경", children: ["배경", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#배경", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logto의 커넥터 설정은 JSON 형식입니다. 이 형식은 유연하지만 편집하고 검증하는 데 어려움이 있을 수 있습니다. 처음에는 대부분의 JSON 설정이 다음과 같았기 때문에 큰 문제가 아니었습니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"appId\": \"xxx\",\n \"appSecret\": \"xx\"\n}\n" }) }), "\n", _jsx(_components.p, { children: "그러나 더 많은 공급자와 프로토콜을 지원하면서 상황이 변했습니다. 'SAML 커넥터'를 예로 들어보면, JSON 설정에는 10개 이상의 키가 있으며, 값의 유형은 문자열, 숫자, JSON, 선택 값, 인증서에 대한 다중 라인 문자열 등 복잡합니다." }), "\n", _jsx(_components.p, { children: "그래서 우리는 JSON 편집기를 대체하기 위해 잘 설계된 폼이 필요하다고 생각했습니다. Logto 커넥터는 제3자 애플리케이션으로 설계되었기 때문에 하드 코딩된 폼은 실현 가능한 솔루션이 아닙니다. 결과적으로 관리하기 쉬우면서 사용자가 편리하게 사용할 수 있는 다이내믹 폼이 필요합니다. 우리가 언급한 SAML 커넥터의 폼은 다음과 같습니다:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML connector config", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "설정-기반-개발cdd이란", children: ["설정 기반 개발(CDD)이란?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#설정-기반-개발cdd이란", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, 또는 구성 요소 기반 개발은 애플리케이션을 구축하는 대체 접근 방식입니다. 기존 방법에서는 주도적인 아키텍트가 비즈니스 요구 사항을 기반으로 설계를 만들고, 애플리케이션은 개발 및 배포된 후 추가 요소나 어려운 리팩토링을 통해 수정됩니다." }), "\n", _jsx(_components.p, { children: "반면, CDD는 시작부터 독립적인 구성 요소를 구축하는 데 중점을 둡니다. 일반적으로 JSON 형식의 인터페이스를 통해 상위 사용자 인터페이스를 구성합니다. 이 방법은 재사용 가능한 구성 요소와 JSON 청사진의 결합을 포함하여 개발자가 보다 유연하고 확장 가능한 방식으로 애플리케이션을 쉽게 구축할 수 있도록 합니다." }), "\n", _jsx(_components.p, { children: "CDD의 본질은 모듈성을 활용하여 느슨하게 연결된 구성 요소 세트를 제작하고, 이를 표준화된 인터페이스로 조합하는 것입니다." }), "\n", _jsxs(_components.h2, { id: "다이내믹-폼이란", children: ["다이내믹 폼이란?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#다이내믹-폼이란", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "설정 기반 개발(CDD) 접근 방식을 활용하여 다이내믹 웹 폼을 만들 수 있습니다. 이는 고정된 변하지 않는 필드를 가진 일반적인 폼이 아니라, JSON 파일에 기반하여 생성되는 필드를 가진 다이내믹한 엔티티입니다. 이러한 다이내믹 웹 폼의 매력은 그 유연성에 있습니다. 폼 필드의 변경이 필요하다면 JSON 설정의 업데이트만으로 가능합니다. 이러한 적응력은 Logto 커넥터에 이상적인 솔루션이며, Logto가 알 수 없는 다양한 폼 설정을 요구합니다." }), "\n", _jsxs(_components.h2, { id: "스키마-설계", children: ["스키마 설계", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#스키마-설계", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "우리는 스키마를 폼 항목 배열로 설계했으며, 각 항목은 이름, 라벨, 자리 표시자, 그리고 가장 중요하게는 유형을 가질 수 있습니다. 6개의 폼 항목 유형이 있으며, 열거형으로 정의되었습니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Text',\n Number = 'Number',\n MultilineText = 'MultilineText',\n Switch = 'Switch',\n Select = 'Select',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "폼 항목의 유형 정의는 다음과 같습니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type FormItem = {\n type: FormItemType;\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n" }) }), "\n", _jsx(_components.p, { children: "전체 스키마는 다음과 같습니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["하지만 작은 문제가 있습니다. 폼 유형 \"select\"는 옵션 목록이 필요해서 ", _jsx(_components.code, { children: "FormItem" }), "에 이 필드를 추가해야 합니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type BaseFormItem = {\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n\ntype FormItem =\n | ({\n type:\n | FormItemType.Text\n | FormItemType.Number\n | FormItemType.MultilineText\n | FormItemType.Switch\n | FormItemType.Json;\n } & BaseFormItem)\n | ({ type: FormItemType.Select } & BaseFormItem & {\n options: Array<{ value: string; title: string }>;\n });\n" }) }), "\n", _jsxs(_components.h2, { id: "react-hook-form을-사용하여-폼-구축하기", children: ["React-Hook-Form을 사용하여 폼 구축하기", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-hook-form을-사용하여-폼-구축하기", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "이제 스키마가 설정되었으므로, 이를 기반으로 프론트엔드에 폼을 구축할 수 있습니다. React Hook Form을 사용하여 이를 구현할 것입니다." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), "은 React에서 효율적이고 사용하기 쉬운 폼을 만드는 강력한 도구입니다."] }), "\n", _jsxs(_components.p, { children: ["첫 번째로 폼을 초기화하는 것입니다. JSON 설정이 가져와졌다고 가정하고 이를 ", _jsx(_components.code, { children: "formItems" }), "로, 폼 내 데이터는 ", _jsx(_components.code, { children: "formData" }), "로 부릅니다:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "type FormData = Record;\n\ntype Props = {\n formItems: FormItem[];\n formData: FormData;\n};\n\nconst Form = ({ formItems, formData }: Props) => {\n const { register, control, handleSubmit } = useForm({ defaultValues: formData });\n\n const onSubmit = handleSubmit(async (data: FormData) => {\n await submitFormToServer(data);\n });\n\n return ;\n};\n" }) }), "\n", _jsx(_components.p, { children: "그런 다음, 유형에 따라 폼 제어 요소를 구현합니다. 여기 간단한 구현 예시입니다:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {formItems.map((formItem) => (\n

{formItem.label}

\n {formItem.type === FormItemType.Text && (\n \n )}\n {formItem.type === FormItemType.Number && (\n \n )}\n {formItem.type === FormItemType.MultilineText && (\n

\n        )}\n        {formItem.type === FormItemType.Switch && (\n          <input type=\"checkbox\" {...register(formItem.name, { required: formItem.required })} />\n        )}\n        {formItem.type === FormItemType.Select && (\n          <select {...register(formItem.name, { required: formItem.required })}>\n            {formItem.options.map((option) => (\n              <option key={option.value} value={option.value}>\n                {option.title}\n              </option>\n            ))}\n          </select>\n        )}\n      </div>\n    </div>\n  ))}\n</form>\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "결론",
      children: ["결론", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#결론",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "설정 기반 개발(CDD)의 유연성은 다이내믹 폼 생성에 적용될 때 두드러지며, 특히 Logto의 커넥터의 경우에 그렇습니다. 장점은 두 가지입니다:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "개발자에게는 상호작용이 가능하고 사용자 친화적인 폼을 만드는 과정을 단순화합니다. 복잡한 코딩 문제를 처리하는 대신, 개발자는 Logto 팀이 설계한 잘 디자인된 직관적인 사용자 인터페이스를 얻기 위해 JSON 파일만 정의하면 됩니다."
      }), "\n", _jsx(_components.li, {
        children: "사용자에게는 커넥터 설정 과정을 크게 단순화합니다. 통합의 복잡성을 제거하여 사용자가 Logto를 소셜 로그인 기능이나 이메일 또는 SMS 서비스와 쉽게 통합할 수 있게 합니다."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "최근 인터넷에는 로우 코드에 대한 기사가 넘쳐납니다. 이 솔루션은 실제 사용자 요구 관점에서 개발되었으며, 우리는 이것이 로우 코드의 훌륭한 예라고 믿습니다."
    }), "\n", _jsx(_components.p, {
      children: "한번 시도해보고 싶나요? Logto 클라우드에 가서 커넥터를 선택하세요."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "오늘 Logto를 사용해보세요"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  headings,
  readingTime,
  frontmatter,
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}
</article></body></html>