Golang과 Svelte.js를 함께 사용하여 웹사이트 만들기

11037 단어 webdevsveltego
안녕 Gophers,

경우에 따라 웹 사이트에서 동적 또는 단일 페이지를 사용해야 합니다. 이를 위해 리액티브 자바스크립트 프로그래밍 도구(또는 프레임워크) 등으로 개발할 수 있습니다.

이 게시물에서는 Go로 작성된 서버에서 Svelte.js를 사용하는 방법을 보여 드리겠습니다.

이 예에서는 웹 서버 패키지로 gofiber 패키지를 선호했습니다.

시작하자!

기본 Gofiber 웹서버 만들기



Go side의 프로젝트 구조는 아래와 같습니다.

먼저 go.mod 파일을 초기화해야 합니다.

2단계로 다음과 같은 main.go 파일을 생성할 수 있습니다.

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()
    app.Static("/public","./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

func mainPage(c *fiber.Ctx) error {
    //This function will be see different soon
    return c.SendString("Hellö")
}

Svelte 프로젝트를 생성한 후 Go 사이드를 변경합니다.

이 Go 프로젝트 위에 간단한 Svelte 프로젝트를 만들어 보겠습니다.

기본 Svelte 프로젝트 만들기



이 방법,
npx degit sveltejs/template . --force
이 프로젝트 폴더가 비어 있지 않기 때문에 --force 플래그를 사용하고 있습니다.

후에,
npm install
모든 의존성을 설치하기 위해.

테스트를 위해 npm run dev 명령을 실행할 수 있습니다.

작동하는 경우 다음 단계로 이동할 수 있습니다.

따라서 *public 폴더를 일부 파일로 채웠습니다.

Go와 함께 Svelte를 사용하려면 Svelte 쪽에서 일부 설정을 변경해야 합니다.

1 단계


rollup.config.js
...
svelte({
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production,
                customElement: true,
            }
        }),
...
customElement: true, 행을 추가해야 합니다.
이 추가는 기본 프로젝트에서 요소를 분할하는 데 도움이 됩니다.
따라서 <App/>와 같은 요소 이름을 사용하여 구성 요소를 Go 템플릿에 추가할 수 있습니다.

2 단계



go 앱을 다시 시작하지 않고도 Svelte 측면 변경 사항을 사용할 수 있습니다.
이를 위해 rollup.config.js 파일에 한 줄 주석을 달아야 합니다.

// In dev mode, call `npm run start` once
        // the bundle has been generated
        //!production && serve()
!production && serve() 주석을 달아야 합니다.

3단계


./src/main.js 파일을 편집하는 중입니다.

이 파일은 다음과 같습니다.

import App from './App.svelte';
import 라인만 사용하겠습니다.
이 코드에서는 구성 요소를 App으로 가져왔지만 이 이름은 중요하지 않습니다. 먼저 구성 요소 파일에서 구성 요소 태그를 지정합니다.

3단계



편집./src/App.svelte
<script>
    // It can be empty for this example
</script>
<svelte:options tag="my-app"/>
<p>My App</p>
<style>
    /* It can be empty :) */
</style>

이 프로세스를 통해 앱 구성 요소를 <my-app/> 태그로 사용할 수 있습니다.

우리는 완전한 Svelte.js 편입니다. 이제 우리는 Golang 쪽으로 갈 수 있습니다.

먼저 템플릿 렌더 엔진을 정의할 것입니다.
main.go 파일을 다음과 같이 편집합니다.

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)

func main() {

    //template render engine
    engine := html.New("./templates", ".html")

    app := fiber.New(fiber.Config{
        Views: engine, //set as render engine
    })
    app.Static("/public", "./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

Don't forget run go mod tidy command :)



이제 mainpage 기능을 다음과 같이 변경하겠습니다.

func mainPage(c *fiber.Ctx) error {
    return c.Render("mainpage", nil)
}

다음과 같이 변경합니다./templates/mainpage.html.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel='stylesheet' href='/public/global.css'>
    <script defer src='/public/build/bundle.js'></script>
</head>
<body>
    <my-app/>
</body>
</html>
App 구성 요소를 my-app 로 호출할 수 있습니다.

마지막 단계


방법.1



이 명령으로 앱을 실행할 수 있습니다.npm run build 번들 파일js을 빌드합니다.go run . 웹 서버를 시작합니다.

방법.2



이 명령으로 앱을 실행할 수 있습니다.npm run dev & go run .
따라서 웹 페이지를 다시 로드하면 go 앱을 다시 시작하지 않고도 변경 사항을 볼 수 있습니다. 그러나 Svelte 측면 변경에만 유용할 수 있습니다.

팁



We can run server easy way, creating makefile.
Create makefile in project directory.
This way,



run:
    npm run dev & go run .
build:
    npm run build

and from terminal, run make run or make build commands.



내 GitHub Repo를 확인할 수 있습니다.


kskaan1 / go-and-svelte-템플릿






내 블로그 기사를 위해 생성됨

시작하기 전에 명령줄에서 npm install를 실행합니다.


View on GitHub
[C#] - 사용자 정의 컨트롤(소스 코드 포함) - 필렛 패널
AES 대칭 암호화의 간단한 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage