새로운 웹 프레임워크: Rino
Tags: korean, webdev, javascript, tutorial
Published: 2023-09-17 02:24:10

원래 CMS용 템플릿 도구로 만들어진 Rino는 강력한 웹 개발 프레임워크로 발전했습니다. 이번 포스트에서는 Rino와 Rino의 고유한 기능을 살펴보겠습니다.

## Rino vs. Vue와 React
Rino가 Vue나 React보다 나은가요? 글쎄요. Rino, Vue 그리고 React의 관계는 누가 더 나아지는 것이 아닙니다. 서로 다르다는 것입니다. Vue와 React는 주로 웹 애플리케이션 구축에 사용되는 반면, Rino.js는 웹 사이트 구축에 중점을 두고 Next.js(React) 및 Nuxt.js(Vue)와 같은 서버측 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다.

## 설치

Rino를 시작하는 것은 쉽습니다. 프로젝트를 수동으로 구성할 수 있지만 프로세스를 간소화하기 위해 프로젝트 스타터를 준비했습니다.

```
npm create rino@latest
```

![Rino 설치](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t7lca16z16v8jte0nxu.PNG)

그리고 다음 명령을 사용하여 개발을 시작할 수 있습니다.

```
npm run dev
```

![Rino 기본 페이지](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22xn64vu3g0pjkkacf5h.PNG)


## Rino 시스템에 대한 이해
Rino는 전체 개발 프로세스를 전처리와 클라이언트측 렌더링이라는 두 가지 핵심 부분으로 나눕니다. 전처리에는 Rino 코어가 전처리 구문을 사용하여 웹페이지를 구축하는 작업이 포함됩니다. 클라이언트 측 렌더링을 위해 Rinokit 또는 다른 프론트엔드 라이브러리를 설치해서 사용할 수도 있습니다. Rino 페이지에서 전처리되는 모든 항목은 `{{ @component, ./src/comComponents/component-name.tot }}`와 같이 `@` 기호로 시작합니다.

Rino의 독특한 측면 중 하나는 .tot 파일 형식을 사용한다는 것입니다. 원래 JavaScript 데이터베이스를 만들기 위해 설계되었으나 데이터 관리 파일 포맷으로 발전했습니다. Rino는 단순성, 선형성 및 가독성 때문에 .tot 형식을 활용합니다. 또한 데이터 저장을 위해 .tot 파일을 사용할 수 있으며 이를 통해 국제화(i18n; 현지화)도 할 수 있습니다.

```
<d:html>
</d:html>
<d:js>
</d:js>
<d:css>
</d:css>
<d:somd-data>
</d:somd-data>
```
## 페이지 컴포넌트를 Javascript로 구성
최근에 추가된 기능을 먼저 소개합니다. 컴포넌트를 Javascript로 생성하는 기능인데, 최근에 만들어진 문서 툴 Rino Docs 에서는 이를 이용해 사이드바의 요소를 생성합니다. ‘result’, ‘data’ 그리고 ‘props’를 이용하여 여러가지를 만들 수 있습니다.

```
{{(
    result = `<ul class="menu-list">`
    let list = data.pageList;

    for(let i = 0; i < list.length; i++)
    {
        if(i == 0)
        {
            result = result + `
                <li><a href="/">${ list[i] }</a></li>
            `;
        }
        else
        {
            result = result + `
                <li><a href="/${ list[i] }.html">${ list[i] }</a></li>
            `;
        }
    }

    result = result + `</ul>`
)}}
```

![Rino Docs 이미지](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvt04yml4fsmad496ogi.PNG)

## 페이지 작성
Rino에서 페이지를 작성 하는 것은 간단합니다. 예를 들어 index.tot 페이지를 구성하는 방법은 다음과 같습니다.

./src/pages/index.tot:
```
<d:html>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="main.js"></script>
        <link rel="stylesheet" href="style.css">

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ @data.title }}</title>
    </head>
    <body>
        Some content..
    </body>
</html>
</d:html>
<d:js>
</d:js>
<d:css>
</d:css>
```

Vue에 익숙하다면 Rino의 구조를 비교적 쉽게 이해할 수 있을 것입니다. HTML은 `<d:html></d:html>` 안에, JavaScript는 `<d:js></d:js>` 안에, CSS는 `<d:css></d:css>` 안에 들어갑니다. 이러한 구성 요소는 각각의 HTML, JS와 CSS 파일에 저장됩니다.

## 마크다운 및 Tot 지원

Rino는 Markdown 및 .tot 파일에 대한 기본 지원을 제공합니다. 다음과 같이 페이지에 포함할 수 있습니다.

```
<d:html>
some html content...
{{ @md, ./src/mds/somecontent.md }}
some html content...
</d:html>
```
```
<d:html>
some html content...
{{ @tot.tagname, ./src/tots/somedata.tot }}
some html content...
</d:html>
```

## 컴포넌트 지원

Rino는 컴포넌트 통합을 단순화합니다. 컴포넌트를 포함하려면 다음 단계를 따르세요.

1. @component 추가
2. 컴포넌트의 파일 경로
3. props 추가 (예제에서는 props를 사용하지 않겠습니다.)

./src/components/sometest.tot:
```
<d:html>
some html...
{{ @component, ./src/components/some-component.tot }}
some html...
</d:html>
```
./src/components/some-component.tot:
```
<d:html>
<div>
some component
</div>
</d:html>
```
결과물:
```
some html...
<div>
some component
</div>
some html...
```

## 새 페이지 추가

Rino에서 새 페이지를 추가하는 것은 간단합니다. index.js를 수정하고 페이지 목록을 전달하거나 기본 설정에서 Pages.js에서 다른 페이지를 추가할 수 있습니다. 방법은 다음과 같습니다.

./src/pages.js:
```
const path = require('path');

async function pages()
{
    return [
        {
            data: {
                title: "Rino.js",
                desc: "Fast learning, preprocessing, intuitive web framework. Rino.js",
                url: ""
            },
            pageFilename: path.resolve(__dirname, "./pages/index.tot"),
            distDirname: path.resolve(__dirname, "../dist/"),
            filenames: {
                css: "style.css",
                js: "main.js"
            }
        },
        {
         	다른 페이지 정보
        }
    ]
}
// 페이지마다 파일 이름들을 다르게 해주세요
// 생성된 HTML, Javascript 그리고 CSS 파일들은 서로 전혀 다릅니다. 이 방식으로 각각의 파일들을 효율적으로 페이지에서 사용합니다.
module.exports = { pages }
```

## 끝마치며
Rino는 웹 개발에 대한 흥미로운 접근 방식을 제공합니다. 간단한 구문과 .tot 파일에 대한 지원으로 유니크한 웹 개발 툴킷입니다. 개인 블로그나 간단한 프로젝트에 사용해보세요!

## 쓸모 있는 링크들 🌐
- [Rino 공식 웹사이트](https://rinojs.org/ko/)
- [Rino 깃헙](https://github.com/rinojs)