본문 바로가기

프로그래밍/Web78

svelte 번역 - 8 - Template Syntax / Special elements Svelte에서 컴포넌트는 태그를 사용하여 자식 콘텐츠를 받을 수 있습니다. 이 콘텐츠는 기본적으로 컴포넌트 소비자가 제공한 자식 요소들로 대체됩니다. 자식 요소가 없을 경우, 슬롯 안에 있는 대체 콘텐츠(fallback content)가 렌더링됩니다.기본 사용법: 이 기본 콘텐츠는 자식 요소가 제공되지 않으면 렌더링됩니다. 이 자식 콘텐츠는 기본 슬롯 콘텐츠를 덮어씁니다.명명된 슬롯(Named Slots):슬롯에 이름을 지정하여 특정 위치에 콘텐츠를 전달할 수 있습니다. 각 명명된 슬롯은 대체 콘텐츠를 가질 수 있습니다. 헤더가 제공되지 않았습니다. 헤더와 푸터 사이의 콘텐츠 푸터가 제공되지 않았습니다. Hello © 2019 Svelte Industries명명된 슬롯에 컴포넌트를 전달하.. 2024. 10. 17.
svelte 번역 - 7 - Template Syntax / Component directives on:eventnameSvelte 컴포넌트는 DOM 이벤트와 동일하게 컴포넌트에서도 이벤트를 발생시키고 수신할 수 있습니다. 이벤트는 createEventDispatcher 함수를 사용하여 프로그램적으로 디스패치할 수 있으며, DOM 이벤트를 전달(forwarding)하는 방식으로도 가능합니다. dispatch('hello')}> one two 컴포넌트 이벤트 수신은 DOM 이벤트와 동일하게 처리됩니다.on: 지시어가 값 없이 사용되면 이벤트가 전달되며, 소비자가 해당 이벤트를 수신할 수 있게 됩니다.--style-props컴포넌트에 CSS 사용자 정의 속성을 사용해 스타일을 props로 전달할 수 있습니다. Svelte는 이를 위해 래퍼 요소를 추가하는 문법적 설탕을 제공합니다.예를 들어:위 코드는 .. 2024. 10. 17.
svelte 번역 - 6 - Template Syntax / Element directives on:eventnameon: 지시어는 DOM 이벤트를 수신하는 데 사용됩니다. count: {count}핸들러는 인라인으로 선언할 수 있으며, 성능에 영향을 주지 않습니다. (count += 1)}> count: {count}이벤트에 수정자를 추가할 수 있으며, | 문자로 구분합니다. 사용할 수 있는 수정자는 다음과 같습니다:preventDefault — event.preventDefault()를 호출하여 기본 동작을 막음stopPropagation — event.stopPropagation()을 호출하여 이벤트가 다음 요소에 도달하는 것을 방지stopImmediatePropagation — 다른 리스너가 실행되지 않도록 방지passive — 터치/휠 이벤트에서 스크롤 성능을 향상capt.. 2024. 10. 17.
svelte 번역 - 5 - Template Syntax / Special tags {@html ...} 블록{@html} 블록은 HTML 표현식을 사용하여 HTML을 렌더링할 때 사용됩니다. 일반 텍스트 표현식에서는 및 >와 같은 문자가 이스케이프 처리되지만, {@html} 표현식에서는 이스케이프 처리가 되지 않습니다.HTML 표현식은 독립적으로 유효한 HTML이어야 합니다. 예를 들어, {@html ""}과 {@html ""}를 각각 사용하여 내용을 감싸는 것은 유효한 HTML이 아니므로 작동하지 않습니다. 또한, Svelte 코드 자체를 컴파일하지는 않습니다.Svelte는 HTML을 삽입하기 전에 표현식을 자동으로 정리하지 않으므로, 신뢰할 수 없는 데이터에서 HTML을 삽입할 경우 XSS(크로스 사이트 스크립팅) 공격에 노출될 수 있습니다. 따라서 외부 데이터를 HTML로 삽입.. 2024. 10. 17.
svelte 번역 - 4 - Template Syntax / Logic blocks {#if ...} 블록{#if} 블록은 조건부 렌더링을 위해 사용됩니다. 특정 조건이 충족되면 해당 내용을 렌더링할 수 있습니다.{#if answer === 42} what was the question?{/if}추가 조건은 {:else if}와 함께 사용할 수 있으며, 선택적으로 {:else}로 끝날 수 있습니다.{#if porridge.temperature > 100} too hot!{:else if 80 > porridge.temperature} too cold!{:else} just right!{/if}{#if} 블록은 요소뿐만 아니라 텍스트를 포함할 수도 있습니다.{#each ...} 블록{#each} 블록은 값의 리스트를 반복하여 렌더링하는 데 사용됩니다.Shopping list {#.. 2024. 10. 17.
svelte 번역 - 3 - Template Syntax / Basic markup 태그 (Tags)소문자로 된 태그 는 일반 HTML 요소를 나타냅니다. 대문자로 시작하는 태그, 예를 들어 또는 은 컴포넌트를 나타냅니다. 속성과 속성 전달 (Attributes and Props)기본적으로, HTML 요소의 속성은 HTML에서와 동일하게 작동합니다. can't touch thisHTML처럼 값이 따옴표 없이도 작성될 수 있습니다.속성 값은 JavaScript 표현식을 포함할 수 있습니다.page {p}또는 속성 자체가 JavaScript 표현식일 수 있습니다....불리언 속성은 그 값이 참일 경우 요소에 포함되며, 거짓이면 제외됩니다.This div has no title attribute경우에 따라, HTML 문법이 깨지지 않도록 속성 값에 따옴표를 추가할 수 있습니다. 따옴표는.. 2024. 10. 17.
svelte 번역 - 2 - Template Syntax / Svelte Components Svelte ComponentsSvelte 컴포넌트는 Svelte 애플리케이션의 기본 구성 요소입니다. 이들은 .svelte 파일에 작성되며, HTML의 상위 집합을 사용합니다.세 가지 섹션(스크립트, 스타일, 마크업)은 모두 선택 사항입니다.속성에 대해 기본 초기값을 지정할 수 있으며, 이는 컴포넌트가 인스턴스화될 때 소비자가 속성을 지정하지 않으면 사용됩니다. 속성이 이후에 업데이트되면 지정되지 않은 속성은 undefined로 설정됩니다.const, class, function을 export하는 경우, 외부에서 읽기 전용으로만 사용할 수 있습니다. 함수는 유효한 속성 값으로 사용할 수 있습니다.속성을 읽기 전용으로 만든 경우, bind:this 문법을 사용하여 엘리먼트의 속성으로 접근할 수 있습니다... 2024. 10. 17.
svelte 번역 - 1 - Introduction IntroductionSvelte 참조 문서에 오신 것을 환영합니다! 이 문서는 Svelte에 대해 어느 정도 익숙한 분들이 더 자세히 알아보고자 할 때 참고할 수 있는 리소스입니다.아직 Svelte에 익숙하지 않다면, 이 참조 문서를 보기 전에 대화형 튜토리얼이나 예제를 먼저 살펴보는 것이 좋을 수 있습니다. REPL을 사용하여 온라인에서 Svelte를 시도해 볼 수 있습니다. 또는 더 완전한 기능을 갖춘 환경을 원한다면, StackBlitz에서 Svelte를 사용해 볼 수 있습니다.새 프로젝트 시작하기Svelte 팀의 공식 애플리케이션 프레임워크인 SvelteKit을 사용하는 것을 권장합니다:npm create svelte@latest myappcd myappnpm installnpm run devS.. 2024. 10. 17.
Laravel Prism 사용하기(번역) - 7 - Prism 로드맵Prism은 대규모 언어 모델을 다루는 개발자들의 요구를 충족시키기 위해 지속적으로 진화하고 있습니다. 다음은 단기, 중기, 장기 목표로 분류된 우리의 개발 계획입니다.단기 목표우리의 즉각적인 초점은 기존 기능을 개선하고 중요한 기능을 추가하는 것입니다:text 개선: 더 정확하고 맥락적으로 관련성 있는 출력을 제공하기 위해 핵심 텍스트 생성 기능을 향상시킵니다.오류 처리 개선: 더 포괄적인 오류 처리 메커니즘을 구현하여 패키지의 견고성을 향상시킵니다.도구 사용 개선: Prism이 외부 도구를 통합하고 활용하는 방식을 최적화하여 개발자가 AI의 기능을 쉽게 확장할 수 있도록 합니다.text 이미지 지원: 텍스트와 함께 이미지를 생성하고 처리할 수 있는 기능을 추가하여 Prism의 다중 모.. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 6 - 사용자 정의 제공자사용자 정의 제공자 만들기사용자 정의 제공자를 만들려면 EchoLabs\Prism\Contracts\Provider 인터페이스를 구현해야 합니다. 다음은 단계별 가이드입니다:제공자를 위한 새 클래스를 만듭니다. 예: MyCustomProvider.Provider 인터페이스에서 필요한 메서드를 구현합니다:phpmodel = $model; return $this; } public function text(TextRequest $request): ProviderResponse { // 사용자 정의 AI 제공자에게 요청을 보내는 로직을 구현하고 // ProviderResponse 객체를 반환합니다 }}text 메서드에서 다음을 수행해야.. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 5 - Prism 서버Prism 서버는 Prism으로 구동되는 AI 모델을 표준화된 API를 통해 노출할 수 있게 해주는 강력한 기능입니다. 이를 통해 채팅 인터페이스나 OpenAI 호환 API를 지원하는 다른 도구들을 포함한 다양한 애플리케이션에 커스텀 AI 솔루션을 쉽게 통합할 수 있습니다.작동 원리Prism 서버는 미들웨어 역할을 하며, OpenAI 호환 클라이언트의 요청을 Prism 특정 작업으로 변환합니다. 이는 ChatGPT 웹 UI나 OpenAI SDK를 사용하여 커스텀 Prism 모델과 상호작용할 수 있음을 의미합니다.Prism 서버 설정하기1. Prism 서버 활성화먼저 config/prism.php 파일에서 Prism 서버가 활성화되어 있는지 확인하세요:'prism_server' => [ .. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 4 - 에이전트Prism의 AI 에이전트는 언어 모델이 비결정적인 방식으로 일련의 단계를 실행할 수 있게 합니다. 모델은 대화 컨텍스트, 사용자 입력, 이전 도구 호출 및 결과를 기반으로 도구 호출 결정을 내릴 수 있습니다.에이전트 구현하기Prism에서 에이전트를 구현하는 효과적인 접근 방식 중 하나는 LLM이 루프에서 다음 단계를 선택할 수 있도록 하는 것입니다. 도구를 withMaxSteps() 메서드와 결합함으로써, 각 단계에서 추론하고 컨텍스트를 기반으로 결정을 내리는 에이전트를 만들 수 있습니다.예시: 수학 문제 해결 에이전트Prism을 사용하여 수학 문제를 해결하는 에이전트를 만들어 보겠습니다. 이 에이전트는 수학 표현식을 평가하기 위해 호출할 수 있는 계산기 도구(PHP의 bcmath 확장을 사용).. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 3 - 도구 호출AI 어시스턴트가 날씨를 확인하거나 실시간 데이터를 조회할 수 있기를 바라셨나요? Prism의 도구 호출 기능을 통해 이제 가능합니다! 이 강력한 기능을 통해 AI가 외부 서비스 및 데이터 소스와 상호 작용할 수 있어, 그 어느 때보다 다재다능하고 유용해졌습니다.도구란 무엇인가요?Prism에서 도구는 AI가 특정 작업을 수행하는 데 사용할 수 있는 특별한 객체입니다. AI의 스위스 아미 나이프라고 생각하세요 - 각 도구는 날씨 확인이나 데이터베이스 검색과 같은 특정 기능을 가지고 있습니다.Prism의 도구를 구성하는 요소는 다음과 같습니다:이름: 도구의 고유 식별자설명: 도구가 하는 일에 대한 간단한 설명매개변수: 도구가 작업을 수행하는 데 필요한 정보함수: 도구가 호출될 때 실행되는 실제 코드.. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 2 - 텍스트 생성하기Prism은 대규모 언어 모델(LLM)을 사용하여 텍스트를 생성하는 강력하고 유연한 인터페이스를 제공합니다. 이 가이드에서는 텍스트 생성의 기본, 구성 옵션, 그리고 생성된 데이터에 접근하는 방법을 안내해 드리겠습니다.기본 사용법Prism을 사용하여 텍스트를 생성하려면 Prism 파사드와 text() 메서드를 사용합니다. 다음은 간단한 예시입니다:using(Provider::Anthropic, 'claude-3-sonnet') ->withPrompt('용감한 기사에 대한 짧은 이야기를 들려주세요.') ->generate();echo $response->text;다양한 제공자와 모델Prism은 여러 AI 제공자와 모델을 지원합니다. using() 메서드에서 이를 지정할 수 있습니다:usi.. 2024. 10. 15.
Laravel Prism 사용하기(번역) - 1 - Introduction대규모 언어 모델(LLM)은 인공지능과의 상호작용 방식을 혁신했습니다. 이를 통해 애플리케이션은 전례 없는 정교함으로 인간의 언어를 이해하고, 생성하며, 조작할 수 있게 되었습니다. 이러한 강력한 모델들은 개발자들에게 챗봇과 콘텐츠 생성기 제작부터 복잡한 AI 기반 애플리케이션 구축에 이르기까지 흥미로운 가능성을 열어줍니다.Prism은 LLM을 Laravel 프로젝트에 통합하는 과정을 단순화하여, 다양한 AI 제공자들과 작업할 수 있는 통합 인터페이스를 제공합니다. 이를 통해 개발자는 서로 다른 API와 구현 세부사항의 복잡성에 얽매이지 않고, 사용자를 위한 혁신적인 AI 기능을 만드는 데 집중할 수 있습니다.다음은 Prism을 사용하여 텍스트를 생성하는 간단한 예시입니다:Anthr.. 2024. 10. 14.

티스토리툴바