프로젝트 구조

Rino 2는 버전 1과 다릅니다. 모든 것은 프로젝트 폴더와 파일 구조를 통한 자동화로 이루어집니다.

즉, 표준 HTML, CSS, Javascript, Node.js로 웹사이트를 쉽고 간단하게 제작할 수 있습니다. 프로젝트 구조를 이해하면 빠르게 작업이 가능합니다.

- pages
- components
- mds
- public
- scripts
  - export
- styles
  - export
rino-config.js
image-compression.bat
image-compression.sh
image-compression.html
image-compression.js
            

/pages

/pages 폴더는 기본 HTML 파일을 넣는 공간입니다. Rino는 이 폴더를 기반으로 웹 페이지를 생성합니다. 파일 및 폴더 구조는 그대로 유지됩니다.

/components

/components 폴더는 컴포넌트 HTML 파일을 넣는 공간입니다. 컴포넌트는 다른 컴포넌트를 포함할 수 있지만, 동일한 컴포넌트를 반복해서 사용하여 무한 루프 오류를 발생시키지 않도록 주의하세요. 컴포넌트는 다음과 같은 문법으로 사용할 수 있습니다:

<component @path="" @tag="" />

@path: 컴포넌트를 불러오기 위한 필수 속성입니다. 컴포넌트의 경로를 지정해야 합니다. 예: @path="/header" 또는 @path="/ko/footer".

@tag: 선택적 속성입니다. 컴포넌트 태그에서 HTML 속성을 사용하려면 HTML 요소 이름을 지정해야 합니다. 예: @tag="div" 또는

<component @path="/button" @tag="button" onclick="myFunction()" />

/mds

/mds 폴더는 마크다운 파일을 넣는 공간입니다. Rino는 요청 시 모든 마크다운 파일을 로드하고 HTML로 변환합니다.

<script @type="md" @path="" @tag="" type="text/markdowns"></script>

@type: 이 속성은 마크다운을 사용하기 위해 필수입니다. md 또는 markdown을 입력해야 합니다.

@path: 마크다운을 불러오기 위한 필수 속성입니다. 마크다운 파일의 경로를 지정해야 합니다.

@tag: 선택적 속성입니다. 컴포넌트 태그에서 HTML 속성을 사용하려면 HTML 요소 이름을 지정해야 합니다.

/public

/public 폴더는 정적 파일을 넣는 공간입니다. 이미지, 외부 CSS, Javascript 라이브러리 및 기타 자산을 여기에 배치할 수 있습니다.

/scripts

/scripts 폴더는 Javascript 라이브러리를 빌드하는 공간입니다. npm 패키지를 사용할 수 있으며, /scripts/export/ 폴더에 Javascript 파일을 배치하여 내보낼 파일을 선택할 수 있습니다. Rino는 Javascript를 빌드하고 /scripts 폴더에 내보냅니다. 이후 HTML에서 일반적으로 사용하는 방식으로 Javascript 파일을 사용할 수 있습니다. 2.1.1 버전부터 타입스크립트를 사용할 수 있습니다.

우리는 import/export 모듈 타입을 사용하여 스크립트를 처리하고 있습니다. 따라서 파일 이름은 스크립트 인스턴스의 이름이 됩니다. 예를 들어 파일 이름이 hello.js 또는 hello.ts라면, 외부에서 함수를 호출할 때는 hello.FunctionName() 형식으로 호출해야 합니다. 이를 import하여 javascript/typescript 브라우저 개발 표준에 따라 원하는 작업을 수행할 수 있습니다.

<script src="/scripts/example.js" />

/styles

/styles 폴더는 CSS 라이브러리를 빌드하는 공간입니다. /styles/export/ 폴더에 CSS 파일을 배치하여 내보낼 파일을 선택할 수 있습니다. Rino는 로컬 CSS 파일을 가져와 CSS 라이브러리를 빌드하고 /styles 폴더에 내보냅니다. 이후 HTML에서 일반적으로 사용하는 방식으로 CSS 파일을 사용할 수 있습니다.

<link rel="stylesheet" href="/styles/example.css" />

로컬 CSS 파일을 가져오는 예시:

@import "../header.css";
@import "../sidebar.css";
@import "../footer.css";
            

rino-config.js

rino-config.js는 Rino의 설정 파일입니다. npm run generate 명령을 위한 배포 폴더를 변경하거나, npm run dev를 위한 개발 서버 포트 번호를 설정하고, npm run sitemap 또는 npm run generate-sitemap를 위한 사이트 URL 및 사이트맵 설정을 할 수 있습니다.

image-compression 파일들

image-compression 파일들은 이미지 압축 앱을 실행하기 위한 것 입니다. 이는 다른 웹 프레임워크가 이미지 압축 문제를 제대로 처리하지 못한다는 점을 발견하고 개발되었습니다. 이 이미지 압축 앱을 실행하여 압축된 이미지를 public 폴더에 배치할 수 있습니다.