커넥터

Svelte 및 Couchbase와 빠르고 동기화됨

반응형 실시간 웹 애플리케이션을 구축할 준비가 되셨나요? 

요약 이 튜토리얼 전체를 읽고 따라할 시간이 없으신가요? 운이 좋으세요! 다음에서 완벽하게 작동하는 예제를 찾을 수 있습니다. GitHub. 자유롭게 그곳으로 가서 리포지토리를 복제하고 탐색을 시작하세요.


이 튜토리얼에서는 다음과 같은 조합을 살펴봅니다. Svelte 그리고 카우치베이스 카펠라 를 사용하여 역동적인 대화형 채팅 애플리케이션을 만들었습니다. 72.8%의 인상적인 감탄률을 기록한 Svelte는 2024 스택 오버플로 개발자 설문조사은 여러 가지 이유로 유명합니다. 컴포넌트를 DOM을 직접 조작하는 매우 효율적이고 필수적인 코드로 컴파일하여 브라우저에서 많은 작업을 효율적으로 처리하므로 가상 DOM이 필요하지 않으며 업데이트 속도가 빨라지고 번들 크기가 작아집니다.

Svelte의 기본 제공 리액티브 기능은 상태 변경 사항을 자동으로 추적하여 복잡한 상태 관리 라이브러리 없이도 빠르고 효율적인 업데이트를 보장합니다. 이러한 반응성은 개발 프로세스를 간소화하고 성능을 향상시킵니다. 또한 Svelte의 컴포넌트 기반 아키텍처를 사용하면 복잡한 사용자 인터페이스를 더 쉽게 구축하고 유지 관리할 수 있어 보다 간단하고 즐거운 개발 환경을 제공합니다. 또한 애플리케이션에 반응형 적응형 데이터가 필요한 경우 Couchbase Capella는 간단한 솔루션으로 구현할 수 있습니다.

Couchbase Capella는 단순한 NoSQL 클라우드 데이터베이스 플랫폼이 아니라 전체 텍스트 검색, 벡터 검색, 데이터 캐싱, 분석 등을 제공하는 올인원 데이터 플랫폼입니다. 이 포괄적인 기능을 통해 다양한 데이터 요구 사항을 충족하는 강력한 애플리케이션을 구축할 수 있습니다. Svelte와 Couchbase Capella를 함께 사용하면 놀랍도록 빠른 성능의 실시간 애플리케이션을 구현할 수 있습니다.

자, 이야기는 충분합니다. 시작하겠습니다!

개발 환경 설정

새 SvelteKit 프로젝트 만들기

설정에 들어가기 전에 Svelte와 SvelteKit의 차이점을 명확히 알아봅시다. Svelte는 코드를 DOM을 직접 조작하는 매우 효율적이고 필수적인 코드로 컴파일하는 프런트엔드 프레임워크입니다. 따라서 업데이트 속도가 빨라지고 번들 크기가 작아집니다. 반면에 SvelteKit은 풀스택 웹 애플리케이션을 구축하기 위해 설계된 Svelte 위에 구축된 프레임워크입니다. 라우팅, 서버 측 렌더링, 정적 사이트 생성 등의 추가 기능을 제공하여 최신 웹 애플리케이션을 개발하는 데 강력한 도구입니다.

프로젝트에서 애플리케이션 구조, 라우팅 및 서버 측 렌더링은 SvelteKit이 처리하고 UI 구성 요소의 효율적인 렌더링은 Svelte가 관리합니다.

새 프로젝트를 시작하려면 명령줄에서 초기화할 수 있습니다:

CLI 도구에서 몇 가지 선택 사항을 묻는 메시지가 표시됩니다. 다음과 같은 응답을 선택합니다:

    • 스켈레톤 프로젝트: 선택 yes 를 사용하여 기본 프로젝트 구조부터 시작하세요.
    • 타입스크립트: 선택 아니요 를 사용하여 간단하게 유지하세요.
    • ESLint: 선택 yes 를 사용하여 코드 품질을 유지하는 데 도움이 되는 린팅을 포함할 수 있습니다.
    • 예쁘다: 선택 yes 를 사용하여 코드 서식을 지정합니다.
    • 극작가: 선택 아니요 처음부터 엔드투엔드 테스트를 작성할 계획이 아니라면 말이죠.

그런 다음 다음을 실행하여 종속성을 설치합니다. npm 설치 를 실행합니다. 이 명령을 실행하면 새 SvelteKit 프로젝트가 설정되고 바로 사용할 수 있습니다!

종속성 설치

다음으로 스타일링을 위한 Tailwind CSS, 데이터베이스 상호 작용을 위한 Couchbase SDK, 실시간 통신을 위한 WebSocket 지원 등 프로젝트에 필요한 추가 종속 요소를 설치합니다.

이러한 각 종속성은 애플리케이션에서 어떤 역할을 하나요?

    • TailwindCSS 는 미리 정의된 클래스로 애플리케이션의 스타일을 보다 간단하게 지정할 수 있는 유틸리티 우선 CSS 프레임워크입니다.
    • 그리고 카우치베이스 Node.js SDK 는 많은 작업을 추상화하는 방법을 사용하여 Couchbase Capella에서 데이터와 상호 작용할 수 있는 기능을 소개합니다.
    • ws 는 Node.js용 작은 웹소켓 라이브러리입니다. 웹소켓을 사용하면 애플리케이션에서 실시간 채팅 기능을 활성화할 수 있습니다.
    • 마지막으로 dotenv 에서 환경 변수를 로드합니다. .env 파일을 process.env 구성 관리가 더 쉬워집니다.

TailwindCSS 구성

위에서 언급했듯이 TailwindCSS는 애플리케이션의 스타일을 정의하는 데 사용할 수 있는 클래스를 소개합니다. 프런트엔드 전문가가 아니거나 전문가라고 하더라도 우아하게 디자인된 애플리케이션을 만드는 과정을 단축하려는 경우 유용합니다. Svelte 프로젝트에서 TailwindCSS를 사용하려면 다음 단계를 따르세요:

구성 tailwind.config.js

업데이트 tailwind.config.cjs 파일을 사용하여 콘텐츠 소스를 지정할 수 있습니다. 이렇게 하면 Tailwind CSS가 프로덕션 빌드에서 사용하지 않는 스타일을 제거하여 더 효율적으로 작업할 수 있습니다.

Tailwind CSS 지시문 추가

생성 또는 업데이트 src/app.css 파일에 Tailwind CSS 지시어를 추가하세요. 이러한 지시어는 Tailwind의 기본, 컴포넌트 및 유틸리티 스타일을 로드합니다.

Svelte 프로젝트에 CSS 포함하기

열거나 생성합니다. src/routes/+layout.svelte 파일을 열고 CSS 파일을 가져옵니다. 이렇게 하면 애플리케이션 전체에서 Tailwind의 스타일을 사용할 수 있습니다.

이제 이 단계를 완료했으니 애플리케이션에서 TailwindCSS가 성공적으로 초기화되었습니다! 이제 카우치베이스 카펠라를 설정하고 채팅 애플리케이션의 백엔드를 구축할 준비가 되었습니다. 

카우치베이스 아카펠라 설정

클러스터 만들기

카우치베이스 카펠라에 무료로 가입하여 사용해 볼 수 있으며, 아직 가입하지 않은 경우 다음 주소로 이동하여 사용해 볼 수 있습니다. cloud.couchbase.com 을 클릭하고 GitHub 또는 Google 자격 증명을 사용하여 계정을 만들거나 이메일 주소와 비밀번호 조합으로 새 계정을 만들 수 있습니다.

이렇게 하면 Capella 대시보드에서 첫 번째 클러스터를 만들 수 있습니다. 이 안내를 위해 클러스터의 이름을 다음과 같이 지정해 보겠습니다. SvelteChatApp.

새 클러스터의 요약이 대시보드 왼쪽에 표시됩니다. Capella는 멀티클라우드이며 AWS, Google Cloud 또는 Azure에서 작동할 수 있습니다. 이 예에서는 AWS에 배포합니다.

클러스터를 생성한 후, 다음과 같이 버킷. A 버킷 는 데이터가 저장되는 컨테이너입니다. 문서라고 하는 각 데이터 항목은 대부분의 개발자에게 익숙한 구문인 JSON으로 보관됩니다. 버킷의 이름은 원하는 대로 지정할 수 있습니다. 그러나 이 안내에서는 이 버킷의 이름을 다음과 같이 지정해 보겠습니다. 슬기로운_채팅_앱_메시지.

이제 데이터베이스와 버킷을 모두 만들었으므로 데이터베이스 액세스 자격 증명을 만들고 Lambda 함수에서 사용할 연결 URL을 가져올 준비가 되었습니다.

연결 세부 정보 얻기

연결 세부 정보는 애플리케이션에서 카우치베이스 데이터에 대한 연결을 설정하고 데이터와 상호 작용하는 데 사용되므로 필수입니다. 연결 세부 정보로 이동합니다. 연결 섹션에 있는 아카펠라 대시보드의 연결 문자열.

Capella SDK connection details

그런 다음 데이터베이스 액세스 링크를 클릭합니다. 이 섹션에서 애플리케이션에서 데이터베이스 인증에 사용할 자격증명(사용자 아이디와 비밀번호)을 만들 수 있습니다. 자격 증명을 생성한 특정 버킷으로 범위를 지정하거나 계정의 모든 버킷과 데이터베이스에 대한 권한을 부여할 수 있습니다. 어떤 경우든 읽기 및 쓰기 액세스 권한이 모두 있는지 확인해야 합니다.

완료되면 이 부분의 마지막 단계는 새 연결 문자열과 연결 자격 증명을 애플리케이션에 환경 변수로 추가하는 것입니다.

환경 변수 설정

프로덕션 환경에서는 애플리케이션에 대한 자격 증명 및 기타 기밀 정보를 안전한 형식으로 저장합니다. 클라우드 제공업체마다 민감한 정보를 저장하는 경로가 다르므로 AWS, Google Cloud, Azure, Netlify, Vercel 등 사용 중인 클라우드 제공업체에서 정의한 절차를 따라야 합니다. 저희의 목적상, 귀하는 귀하의 자격 증명을 .env 파일을 애플리케이션의 루트 폴더에 저장합니다. 애플리케이션의 dotenv 패키지는 거기에서 자격 증명을 읽고 애플리케이션에 로드합니다.

이제 끝났습니다! Couchbase 클러스터가 모두 설정되어 사용할 준비가 되었습니다. 이제 애플리케이션을 빌드할 준비가 되었습니다. Nodejs를 사용하여 백엔드 서버부터 시작한 다음 Svelte를 사용하여 프론트엔드로 이동해 보겠습니다.

Node.js로 백엔드 구축하기

개발 환경이 설정되었으니 이제 실시간 채팅 애플리케이션을 위한 백엔드를 구축할 차례입니다. Node.js를 사용하여 서버를 생성하고, 데이터 저장을 위해 Couchbase Capella에 연결하고, 실시간 통신을 위해 WebSocket 서버를 설정하겠습니다.

만들기 server.cjs

먼저 백엔드의 진입점 역할을 할 server.cjs라는 파일을 생성합니다.

    1. 만들기 server.cjs:
      프로젝트의 루트 디렉터리에 다음과 같은 이름의 새 파일을 만듭니다. server.cjs.
    2. Express 및 종속성 설정:
      서버 프레임워크에는 Express를, 데이터베이스 작업에는 Couchbase SDK를, 실시간 통신에는 WebSocket을 사용할 것입니다. dotenv 환경 변수 관리를 위해 에 다음 코드를 추가합니다. server.cjs:

Couchbase에 연결

다음으로 Couchbase Capella에 대한 연결을 설정합니다. .env 파일에 올바른 연결 세부 정보가 포함되어 있는지 확인합니다. 다음 코드를 server.cjs  를 클릭하여 Couchbase에 연결합니다:

이 함수는 필요한 모든 매개변수가 올바르게 구성되었는지 확인하면서 Couchbase에 대한 연결을 처리합니다. 백엔드에 남은 것은 새 채팅 메시지의 송수신을 처리할 웹소켓 서버를 만드는 것뿐입니다.

웹소켓 서버 설정

웹소켓 서버 기능도 다음과 같이 추가됩니다. server.cjs 파일에 저장합니다. 서버는 애플리케이션의 프론트엔드에서 수신할 모든 새 메시지를 브로드캐스트하고, 새로 생성한 모든 메시지를 사용자가 만든 버킷에 저장할 수 있도록 Couchbase로 전송합니다.

메시지를 Couchbase로 보내기 전에 먼저 메시지를 문자열 는 기본적으로 바이너리 데이터 버퍼로 수신되기 때문입니다. 변환은 문자열 형식은 toString() 함수를 사용할 수 있습니다. 새로 정의된 메시지 문자열 변수는 이제 카우치베이스로 전송하고 애플리케이션에서 렌더링할 수 있는 읽기 가능한 형식의 데이터를 포함합니다.

이것이 새로운 실시간 채팅 애플리케이션의 전체 백엔드입니다. 그러나 웹 애플리케이션의 백엔드가 아무리 훌륭해도 사용자에게 렌더링하기 위해서는 프론트엔드가 필요합니다. Svelte는 빠른 속도와 뛰어난 개발자 경험으로 이를 수행할 수 있는 성능과 반응성을 제공합니다. 

Svelte로 프론트엔드 만들기

백엔드 설정이 완료되었으면 이제 Svelte를 사용하여 실시간 채팅 애플리케이션의 프론트엔드를 구축할 차례입니다. Svelte의 강점을 활용하여 반응이 빠르고 역동적인 채팅 인터페이스를 만들 수 있습니다.

채팅 인터페이스 구축하기

    1. Svelte 컴포넌트 만들기
      SvelteKit 프로젝트에서 다음과 같은 이름의 새 파일을 만듭니다. +page.svelte 에서 src/routes 디렉토리에 저장합니다. 이 파일은 채팅 인터페이스의 주요 구성 요소로 사용됩니다.

    2. 기본 구조 설정
      열기 +page.svelte 를 사용하여 기본 HTML 구조를 설정하고 스타일링을 위해 TailwindCSS 클래스를 사용합니다:

그리고 <script> 섹션은 위 코드 예제의 웹소켓을 초기화하고 송수신 메시지를 모두 처리합니다. 그리고 onMount 함수는 컴포넌트가 초기화될 때 웹소켓 연결이 설정되도록 합니다. Svelte의 반응성은 컴포넌트 초기화 시점에 메시지 배열이 변경되어 새 메시지가 실시간으로 표시되도록 합니다. 이제 프론트엔드가 완성되었습니다.

해냈습니다! 사용자에게 최적의 경험을 제공하기 위해 Svelte와 Couchbase의 성능, 유연성 및 적응성을 모두 활용하여 실시간 커뮤니케이션이 가능한 전체 채팅 애플리케이션을 구축했습니다. 예, 이것은 매우 간단한 구현이지만 훨씬 더 광범위하고 복잡한 실시간 애플리케이션을 구축할 수 있는 골격을 제공합니다. 잠재력은 여러분의 상상력에 의해 제한될 뿐입니다.

한 번 사용해 보시겠어요? 애플리케이션을 시작하고 채팅을 시작해 보겠습니다.

애플리케이션 실행

애플리케이션을 실행하려면 백엔드 Node.js 서버와 SvelteKit 프론트엔드를 모두 초기화해야 합니다. 먼저 터미널에서 백엔드를 시작하겠습니다:

그런 다음 새 터미널 창에서 프런트엔드를 시작합니다:

이제 브라우저에서 다음 주소로 이동합니다. http://localhost:5173 를 클릭하고 채팅을 시작하세요! 

backend Node.js server and the SvelteKit frontend.

여러 브라우저 탭을 열어 여러 사용자를 시뮬레이션하거나 다음과 같은 서비스를 사용할 수 있습니다. ngrok 을 클릭해 친구들과 애플리케이션을 공유하고 실시간으로 채팅할 수 있습니다.

마무리

이 튜토리얼에서는 실시간 데이터로 작동하는 완전 반응형 애플리케이션을 얼마나 빠르게 만들 수 있는지 배웠습니다. Svelte는 DOM을 쉽게 업데이트하며, Couchbase를 사용하면 단 몇 초 만에 메시지를 생성하고 저장할 수 있습니다. 

경쟁이 치열한 웹 프레임워크 분야에서 Svelte가 빠르게 찬사와 인기를 얻고 있는 데에는 여러 가지 이유가 있습니다. 데이터 백엔드로서 Couchbase를 Svelte와 함께 사용하면 훨씬 더 많은 것을 구축하고 달성할 수 있는 잠재력이 높아집니다. 복잡한 스키마를 정의할 필요도 없고, 데이터 캐싱이나 검색 기능을 구현하려는 경우 나중에 종속성을 더 추가할 필요도 없으며, 이 모든 것이 Couchbase에 내장되어 있어 즉시 사용할 수 있습니다. 

남은 질문은 '다음에 무엇을 구축할 것인가'입니다.

다음을 사용하여 무료로 시작하세요. 카우치베이스 카펠라.



이 문서 공유하기
받은 편지함에서 카우치베이스 블로그 업데이트 받기
이 필드는 필수 입력 사항입니다.

작성자

게시자 벤 그린버그, 수석 개발자 에반젤리스트

댓글 남기기

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

개발자 포털에서 NoSQL을 살펴보고, 리소스를 찾아보고, 튜토리얼을 시작하세요.

카펠라 무료 사용

클릭 몇 번으로 Couchbase를 직접 체험해 보세요. Capella DBaaS는 가장 쉽고 빠르게 시작할 수 있는 방법입니다.

연락하기

카우치베이스 제품에 대해 자세히 알고 싶으신가요? 저희가 도와드리겠습니다.