Retool Dashboard 101 - (6) ETC

⚠︎ 유의사항

• velog에 영상 업로드가 불가능한 관계로 스크린샷으로 대체합니다.
• 스크린샷은 조만간 업데이트 하겠습니다.

---

✐ 기타

☺︎ 기본

✔︎ 쿼리 - 캐시 설정하기

• 쿼리마다 캐시를 설정할 수 있습니다.
  • 리툴앱을 최적화하기 위해서 필요합니다. 화면 기록 2023-01-30 오후 12.03.22.mov
    
• 캐시 관련 설명

---

✔︎ 툴팁

• 마크다운을 이용하여 입력할 수 있습니다. 화면 기록 2023-01-30 오후 12.15.22.mov
  

---

✔︎ progress bar / circle

• 숫자를 입력할 수도 있지만, 실시간으로 변하는 것을 보여주기 위해서는 Value에 {{query.data.column}} 과 같이 쿼리 결과를 넣어주는 것이 좋습니다. 화면 기록 2023-01-30 오후 2.09.48.mov 화면 기록 2023-01-30 오후 2.11.39.mov
  

---

✔︎ select - 옵션 앞에 색 입히기

• select 컴포넌트 선택 후 Inspect → Options에서 Assign option colors automatically를 체크해줍니다. 화면 기록 2023-01-30 오후 12.09.41.mov
  

---

✔︎ 모바일 환경에서 그럴싸하게 보여주기

• 각 컴포넌트 별로 Inspect → Responsive에서 Show on mobile을 체크해줍니다.
  
• 이후 리툴 상단에 모니터와 모바일 아이콘이 생기는데, 모바일 아이콘을 눌러 컴포넌트를 원하는 위치에 배치합니다. 화면 기록 2023-01-30 오후 12.33.13.mov
  

☻ 심화

✔︎ 새로고침 기능(Event handler)

• 버튼을 하나 추가하고, Inspect → Interaction → Event handlers에서 원하는 기능을 추가합니다. 화면 기록 2023-01-30 오후 12.39.12.mov
  

---

✔︎ 인터랙티브 기능 ({{anything.you_want}})

• 컴포넌트의 Value에 쿼리 결과 넣기
  
• 쿼리의 조건문에 컴포넌트 값 넣기

  select * 
  from orders_order
  where modified >= **{{date1.value}}**
  order by modified desc
  limit 10

• 헷갈릴 때는 state를 확인하는 것이 좋습니다.

  • 궁금한 부분에 커서를 올려놓으면 아래 사진과 같은 화면이 나오는데, Inspect 버튼을 눌러 확인할 수 있습니다.

    

  • 우측 하단의 디버그 버튼을 눌러 확인하실 수도 있습니다.

    ![스크린샷 2023-02-03 오전 8.19.30.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cd62ea63-6ec6-4a82-a0cd-cef72ef74f0e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2023-02-03_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_8.19.30.png)

    예시

    select * 
    from orders_order
    order by modified desc
    limit 10

    

• .(dot)을 누르고 나오는 것들을 확인하면서 기능을 만들면 좋습니다.
  • 위의 예시에서 {{query1.data.amount['0']}} 와 같이 입력하면 어떤 것이 나올까요? 당연하게도 179900이 나오게 됩니다.
    

---

✔︎ CSS 가져오기

• 인터넷 페이지에서 command(control)+s 를 누르면 html 파일과 해당 페이지의 css파일을 받을 수 있습니다.
• 이것을 각각 HTML, CSS 입력칸에 붙여넣기하면 됩니다.
• 다음은 네이버를 이용한 예시입니다. 화면 기록 2023-01-30 오후 2.25.40.mov