15.옵시디언 - dataviewjs

dataviewJs 특정 폴더의 파일 리스트 불러오기

이 글에서 변수 선언과, 파일 리스트를 불러오는 방법을 알아보겠습니다.
이 포스트에서 사용할 코드는 다음과 같습니다.

• const list : 변수 선언
• dv.pages() : 폴더 경로 설정
• dv.list() : 리스트 타입으로 파일 조회
• console.log() : 데이터 콘솔 표시

자 시작하기 앞서 Ctrl + Shift + I 를 하여 개발자 도구를 열어줍니다. 이 안에서 우리가 사용하는 변수의 값을 확인할 수 있습니다. 이 콘솔창을 보며 하나하나씩 파헤쳐가 봅시다. 사진과 같이 창을 띄운후 Console 탭을 눌러주세요

 

```dataviewjs
const list = dv.pages('"1.Project/4.dataview"')
console.log(list)
```

그리고 코드를 작성하고 텍스트 커서를 dataviewjs 영역을 나가면 바로 console창에 list에 대한 값이 나타납니다.

무언가 값이 표시 되었나요? 뭔가 나타난 행 Proxy ... 뭐시기

아이콘을 클릭하여 하나씩 열어줍니다.

Proxy -> Target -> values 순으로 열어주면 사진과 같이 표시되는 것을 확인할 수 있습니다.

표시된 값들이 보이시나요? 지금 제가 지정한 폴더안에 있는 파일 리스트들이 나타납니다.

values 각 파일들에 대한 정보들이 있는데 그 안에는 무엇이 있을까요?

아주 유용한 정보들이 보이는군요. 앗!? 혹시 보이시나요 이전에 배웠던 dataview 에서 기본적으로 제공해주는 메타데이터 들이 있다고 했던 것이요. 보니까 ctime : 파일 생성시간 .. name : 파일이름 . . . 뭔가 익숙한 것들이 보입니다. 맞습니다. DQL 에서는 이 정보를 가지고 우리가 간편하게 코드를 작성할 수 있도록 도와주고 있었습니다. dataviewjs 는 이 데이터를 가지고 우리가 직접 코드를 작성해야하니 좀 어려울 수 있습니다. 서론이 길었군요 이제 파일 이름을 불러오는 방법을 알아봅시다. 자! 보시면 name 이 부분이 파일 이름입니다. 우리는 저것을 가져올거에요. 다음과 같이 코드를 작성하고 콘솔창을 봅시다

 

```dataviewjs
const list = dv.pages('"1.Project/4.dataview"').file.name
console.log(list)
```

우리가 원하는 대로 파일 이름 리스트를 불러왔습니다. 이제 다왔습니다! 이제 이것을 리스트로 뽑아주는 dv.list 를 사용해보지요.

dv.list 는 알아서 values 영역을 참고하여 표시된 데이터를 순서대로 리스트를 뽑아주는 기능. 이라고 이해하시면 됩니다.

 

```dataviewjs
const list = dv.pages('"1.Project/4.dataview"').file.name
console.log(list)
dv.list(list)
```

 

정상적으로 화면에 표시 되었나요!? 그렇다면 아주 잘 따라온 것입니다. 축하합니다! 하지만 ... 제목을 클릭하면 해당 파일로 이동이 안 됩니다. 왜그럴까요?
이것은 그냥 단순 텍스트에 불과하기 때문입니다. 여러분이 원하는 것은 불러온 리스트의 제목을 클릭해서 해당 파일로 이동하는 것을 원하시겠지요 걱정마세요 해당 정보도 file 안에 있으니까 그것을 화면에 뿌려주면 됩니다. 다음과 같이 코드를 수정해볼까요?

링크 관련된 정보는 file.link 안에 정보가 담겨있군요. 해당 정보를 표시할 수 있도록 코드를 수정합니다

 

 

```dataviewjs
const list = dv.pages('"1.Project/4.dataview"').file.link
console.log(list)
dv.list(list)
```

이제 링크가 가능한 제목 리스트가 뿌려집니다. 이러면 모든게 완료 되었습니다. 이 외에 file 안에 있는 모든 데이터를 표시할 수 있으므로 한번 테스트 해보세요!