원래 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
그리고 다음 명령을 사용하여 개발을 시작할 수 있습니다.
npm run dev
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에서 페이지를 작성 하는 것은 간단합니다. 예를 들어 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는 컴포넌트 통합을 단순화합니다. 컴포넌트를 포함하려면 다음 단계를 따르세요.
- @component 추가
- 컴포넌트의 파일 경로
- 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 파일에 대한 지원으로 유니크한 웹 개발 툴킷입니다. 개인 블로그나 간단한 프로젝트에 사용해보세요!
Top comments (0)