복습

쿠키

• stateless의 단점을 보완하기위해 상태를 클라이언트 사이드에 저장하기위함
• 쿠키는 다음번 요청에 쿠키를 보냄
• 쿠키로 저장할 수 있는 데이터는 문자열로 한정
  • 이진데이터를 쿠키로 보낸다면? -> 인코딩 및 크기제한

특징

• 타입안전성 보장을 위해 json으로 마셜링, 언마셜링

속성

name, value

• name
• value: 특수문자 포함시, 인코딩 필수
  • 서버에서 만든 후 네트워크를 통해 문자열이 전송되기때문에 URL Encoding 방식이 필요

MaxAge, Domain, Path, HttpOnly, Secure

---

---

---

파일 탐색기

• https://github.com/mar10/fancytree/wiki

주요사항

• fancytree 문서
• fancyTreeNode
  • fancy tree node == java의 File
  • 팬시트리 비동기로 보내려면 어떻게 해야하나 확인
  • 서블릿에서는 리턴하는 valid한 JSON이 어떻게 생겼나 확인해야함 (트리하나를 표현하는 json)
• fancytree는 client, fancytreenode가 가져야하는 인터페이스 구조를 맞춰주는 어댑터를 만들고 그 어댑터안에 java File객체를 넣어줘야한다?

Embed Fancytree on a Web Page

Define the Tree Data

처음에 동기로 만들었던 tree

<ul id="explorerUL">
  <%
  List<FileWrapper> list = (List) request.getAttribute("children");

  for(FileWrapper tmp : list) {
  %>
    <li id="<%=tmp.getRelativePath() %>" class="<%=tmp.getClzName()%>"><%=tmp.getName() %></li>
  <%
  }
  %>
</ul>

동기로 만든 ul태그를 source를 대신하기

$("#tree").fancytree({
  source: [
    {title: "Node 1", key: "1"}, // 객체하나가 li
    {title: "Folder 2", key: "2", folder: true, children: [
      {title: "Node 2.1", key: "3"}, // key가 id
      {title: "Node 2.2", key: "4"}
    ]}
  ],
  ...

비동기로 tree만들기 => 이 방법 사용!!

$("#tree").fancytree({
  source: {
    url: "/getTreeData",
    cache: false
  },
  ...

• https://github.com/mar10/fancytree/wiki/TutorialLoadData 레이지로딩

FileWrapper를 FancyTreeNode의 구현체로 만들자

기존소스를 레이지로드로 대체

기존소스

<script type="text/javascript">
	$("#explorerUL").on("click", ".folder", function() {
		let serverSidePath = $(this).prop("id");
		location.href="?base=" + serverSidePath; // 동기 요청
	});
</script>

파일 순서 정렬

• treeSet과 comparable 확인하기

파일에 대한 커맨드 처리 - extenstion

https://github.com/mar10/fancytree/wiki/TutorialExtensions

드래그앤드랍

https://github.com/mar10/fancytree/wiki/ExtDnd

• 1단계) ui완성되어 노드가 이동 or복사되도록 하는게 미션
• 2단계) 서버사이드에서 정말 복사, 이동이 일어나도록

    // Events that make tree nodes draggable 출발노드
    dragStart: null,      // Callback(sourceNode, data), return true to enable dnd
    dragStop: null,       // Callback(sourceNode, data)
    initHelper: null,     // Callback(sourceNode, data)
    updateHelper: null,   // Callback(sourceNode, data)

    // Events that make tree nodes accept draggables 도착노드
    dragEnter: null,      // Callback(targetNode, data)
    dragExpand: null,     // Callback(targetNode, data), return false to prevent autoExpand
    dragOver: null,       // Callback(targetNode, data)
    dragDrop: null,       // Callback(targetNode, data)
    dragLeave: null       // Callback(targetNode, data)

자기 안에서 이동 복사 막고
폴더 드래깅 막고

relativePath 없애고 key의 path따오기
https://wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html#getKeyPath