Dataview 심화: dv.view()

dv.view()란?

dv.view() 함수는 특정 경로의 JavaScript 파일을 로드하여, 코드 재사용성을 높이고 문서의 동적 뷰 생성을 위한 유연성을 제공합니다. 예를 들면, 여러 노트에서 동일한 스크립트를 사용하는 경우 단 하나의 파일로 이를 관리할 수 있습니다. JavaScript 파일을 수정하면 모든 관련 노트에 변경 사항을 쉽게 적용할 수 있게 하여, 관리의 효율성을 크게 향상시킵니다.

 

dv.view() 함수는 dv 객체와 input 객체를 인자로 받아, 사용자가 정의한 로직에 따라 동작합니다. 이 과정은 파일 입출력을 포함하기 때문에 비동기적으로 처리되어야 합니다. 따라서, 이 함수를 호출할 때는 await 키워드를 사용해야 합니다.

view 생성하기

view 폴더 생성

view를 저장할 폴더를 옵시디언 Vault 내에 생성합니다. 이 폴더는 볼트의 루트에서 시작하는 경로에 위치해야 하며, 점(.)으로 시작하는 숨김 폴더를 사용할 수 없습니다.

view 파일 생성

.js 확장자를 가진 파일을 생성하고, 코드의 내용을 이 파일에 붙여넣습니다. 생성한 파일은 이전 단계에서 만든 폴더 안에 위치해야 합니다. 스크립트 파일을 view.js 이름으로 생성할 경우, view 참조는 경로만 입력해도 됩니다. 또한 view.css를 같은 경로에 넣을 경우, 자동으로 뷰에 추가됩니다.

view 사용하기

view 참조

DataviewJS 코드 블록 안에서 view를 참조할 수 있습니다. view의 경로와 전달하고 싶은 인수를 코드 블록에 전달합니다.

view.js

파일 이름이 view.js일 경우, 뷰의 경로(예: Scripts/my-view)만 입력합니다.

```dataviewjs
await dv.view("Scripts/my-view")
```

뷰를 사용할 때 CSS를 함께 적용하고 싶다면, view.js와 view.css 파일을 뷰의 경로에 넣어줍니다. CSS 파일은 자동으로 뷰에 추가됩니다.

그 외

"Scripts/my-view/data.js" 경로에 뷰를 생성했다면, 다음과 같이 view를 참조할 수 있습니다.

```dataviewjs
await dv.view("Scripts/my-view/data")
```

인수 전달

뷰에 인수를 전달하려면 두 번째 인수로 전달할 수 있습니다. 문자열을 전달하는 예는 다음과 같습니다.

```dataviewjs
await dv.view("Scripts/my-view", "Hello world")
```

뷰 안에서는 input 변수를 통해 이를 접근할 수 있습니다.

dv.header(6, input);

객체 전달 예시

객체를 인수로 전달할 수도 있습니다.

```dataviewjs
await dv.view("Scripts/my-view", { message: "Hello world" })
```

뷰 내에서는 다음과 같이 접근합니다.

dv.header(6, input.message);

---