노션 클로닝

결과

💡

배포링크: https://main.d8cc6dvnxc088.amplifyapp.com/ GitHub: https://github.com/Outwater/notion-clone/tree/main

1. 요구사항 이해

import Sidebar from "./Sidebar.js";
import Editor from "./Editor.js";
import { initRouter, push } from "../utils/router.js";

import { $ } from "../utils/dom.js";
import { request } from "../utils/request.js";
import { flatDocuments } from "../utils/index.js";

export default function App({ $target }) {
  this.state = {
    documentList: [],
    currentDocumentId: null,
  };

  this.setState = async (nextState) => {
    this.state = { ...this.state, ...nextState };
    console.log("!! state변경 <App>: ", this.state);
    this.render();
  };

  this.init = async () => {
    initRouter(() => this.route());
    await fetchDocuments();
    this.route();
  };

  this.template = () => {
    console.log("<< <App> 렌더링 >>");
    return `
    <div class="app-container flex">
      <section class="sidebar-section flex-col">Sidebar</section>
      <section class="editor-section flex-col">Editor</section>
    </div>
    `;
  };

  this.render = () => {
    $target.innerHTML = this.template();
    this.mounted();
  };

  this.mounted = () => {
    new Sidebar({
      $target: $(".sidebar-section"),
      initialState: {
        documentList: this.state.documentList,
        id: this.state.currentDocumentId,
      },
      //- TODO_4: url path 및 라우트 관련 처리
      onClickItem: (id) => {
        //- Todo-refactor-routeFirst-렌더링최적화: setState 삭제
        // this.setState({ currentDocumentId: id });
        push(`/documents/${id}`);
      },
      //- TODO_2-1: add 처리
      onInsertItem: async (id) => {
        const parent = id ? Number(id) : null;
        const insertedItem = await request(`/documents`, {
          method: "POST",
          body: JSON.stringify({ title: "", parent }),
        });
        console.log("insertedItem: ", insertedItem);
        //- Todo-refactor-routeFirst-렌더링최적화: setState 삭제
        // this.setState({ currentDocumentId: insertedItem.id });
        push(`/documents/${insertedItem.id}`);
        await fetchDocuments();
      },
      //- TODO_2-2: remove 처리
      onRemoveItem: async (id) => {
        const removedItem = await request(`/documents/${id}`, {
          method: "DELETE",
        });
        console.log("removedItem: ", removedItem);
        const parentItemId = removedItem.parent?.id;
        //- TODO-refactor-02: parent가 없을 때 처리 defaultValue 깔끔하게,
        push(`/documents/${parentItemId || null}`);
        history.replaceState(null, null, `/documents/${parentItemId || null}`);
        //- Todo-refactor-routeFirst-렌더링최적화: setState 삭제
        // this.setState({ currentDocumentId: parentItemId });
        await fetchDocuments();
      },

      //TODO_05: 토글에 따른 접고펼치기 기능
      onToggleItem: (id) => {
        alert(
          id +
            "번 Item  토글 이벤트 발생 -> 해당 document 찾아서 isToggled 처리"
        );
        console.log(
          `this.state.documentList 순회하며, isToggled 처리 후 setState`
        );
      },
    });
    //TODO_06: 로컬스토리지 임시데이터 저장 기능
    // let documentLocalSaveKey = `DOCUMENT_SAVE_KEY_${this.state.currentDocumentId}`;

    //Todo-refactor-04: debounce 함수화하여 분리
    let timer = null;
    //Todo-refactor-03: editor state와 app State 구분
    new Editor({
      $target: $(".editor-section"),
      initialState: {
        currentDocumentId: this.state.currentDocumentId,
        document: {
          title: "",
          content: "",
        },
      },
      //- TODO_03: Editor serverData 연동 & 디바운스 관련 처리
      onEditing: async ({ currentDocumentId, document }) => {
        if (timer !== null) {
          clearTimeout(timer);
        }
        timer = setTimeout(async () => {
          console.log("** 수정 API 발생 in OnEditing() : ", {
            currentDocumentId,
            document,
          });
          await request(`/documents/${currentDocumentId}`, {
            method: "PUT",
            body: JSON.stringify(document),
          });
          // ToDo-refactor-01: title 변경 시에만 fetchDocuments 하도록
          fetchDocuments();
        }, 2000);
      },
    });
  };

  this.route = () => {
    const { pathname } = window.location;
    console.log("route 실행: ", pathname);
    if (pathname === "/") {
      //Todo-advance-01: localStorage에 최근 작업 id 저장 및 불러오기
      console.log("maybe localStrorage최신 작업 페이지 불러오기");
      this.setState({
        currentDocumentId: null,
      });
    } else if (pathname.indexOf("/documents/") === 0) {
      const [, , currentDocumentId] = pathname.split("/");
      //Todo-refactor-02: routeFirst로 렌더링최적화
      console.log("In route():", [
        "stateId",
        this.state.currentDocumentId,
        "pathId",
        currentDocumentId,
      ]);

      if (currentDocumentId === "null") {
        this.setState({ currentDocumentId: null });
        return;
      }
      if (this.state.currentDocumentId !== currentDocumentId) {
        this.setState({ currentDocumentId: currentDocumentId });
      }
    }
  };

  const fetchDocuments = async () => {
    const fetchData = await request("/documents");
    console.log("fetch All Documents: ", fetchData);
    this.setState({ documentList: flatDocuments(fetchData) });
  };

  this.init();
}

import { $ } from "../utils/dom.js";
const openToggleSvg = `<svg viewBox="0 0 100 100" class="triangle" style="width: 1rem; height: 1rem; display: block; fill: rgba(55, 53, 47, 0.45); flex-shrink: 0; backface-visibility: hidden; transition: transform 200ms ease-out 0s; transform: rotateZ(180deg); opacity: 1; user-select: auto;"><polygon points="5.9,88.2 50,11.8 94.1,88.2 " style="user-select: auto;"></polygon></svg>`;
const closeToggleSvg = `<svg viewBox="0 0 100 100" class="triangle" style="width: 1rem; height: 1rem; display: block; fill: rgba(55, 53, 47, 0.45); flex-shrink: 0; backface-visibility: hidden; transition: transform 200ms ease-out 0s; transform: rotateZ(90deg); opacity: 1; user-select: auto;"><polygon points="5.9,88.2 50,11.8 94.1,88.2 " style="user-select: auto;"></polygon></svg>`;

export default function Sidebar({
  $target,
  initialState,
  onClickItem,
  onInsertItem,
  onRemoveItem,
  onToggleItem,
}) {
  this.state = initialState; // {documentList: [[{id, title, isToggled,depth}, {}], []]}

  this.template = () => {
    const { documentList } = this.state;
    console.log("<<  <sideBar>  렌더링 >>");
    return `
      <div>
        <span class="workspace-title">워크스페이스</span>
        <div id="root-insert-button" class="insert-button button">+</div>
      </div>
      ${documentList
        .map((rootDocument) =>
          rootDocument
            .map((document) => {
              return `
              <div class="document depth${document.depth}" data-id=${
                document.id
              }>
                <div class="flex">
                  <div class="svg-button">
                    ${document.isToggled ? openToggleSvg : closeToggleSvg}
                  </div>
                  <span class="document-title">${
                    document.title || "제목 없음"
                  }</span>
                </div>
                <div class="flex">
                  <div class="remove-button button flex-end">-</div>
                  <div class="insert-button button flex-end">+</div>
                </div>
              </div>`;
            })
            .join("")
        )
        .join("")}
    `;
  };
  this.render = () => {
    $target.innerHTML = this.template();
  };
  this.mounted = () => {};
  // Todo-refactor-05: event처리 가독성 증가
  this.setEvent = () => {
    //- TODO_2-1: 추가 처리
    $target.addEventListener("click", ({ target }) => {
      if (target.closest("#root-insert-button")) {
        onInsertItem(null);
        return;
      }
      if (target.closest(".insert-button")) {
        const { id } = target.closest(".document").dataset;
        onInsertItem(id);
        return;
      }
    });
    //- TODO_2-2: 삭제처리
    $target.addEventListener("click", ({ target }) => {
      if (target.closest(".remove-button")) {
        const { id } = target.closest(".document").dataset;
        onRemoveItem(id);
        return;
      }
    });
    //- TODO_03: 에디터 불러오기 처리
    $target.addEventListener("click", ({ target }) => {
      //- Todo-issue: title이 빈 값일 때 element 선택이 안되는 이슈 -> title 빈값안되도록 해결
      if (target.closest(`.document-title`)) {
        const { id } = target.closest(".document").dataset;
        onClickItem(id);
        return;
      }
    });
    // TODO_05: 토글에 따른 블록 접기/열기 처리
    $target.addEventListener("click", ({ target }) => {
      if (target.closest(".svg-button")) {
        const { id } = target.closest(".document").dataset;
        onToggleItem(id);
        return;
      }
    });
  };

  this.render();
  this.setEvent();
}

import { $ } from "../utils/dom.js";
import { request } from "../utils/request.js";
import { push } from "../utils/router.js";

//Todo-refactor-03: app에서 내려온 documentId State와 Editor 내부의 state 구분하기
export default function Editor({ $target, initialState, onEditing }) {
  this.state = initialState; // { currentDocumentId, document: {title, content} }
  console.log("Editor 진입: ", this.state.currentDocumentId);
  this.setState = (nextState) => {
    this.state = { ...this.state, ...nextState };
    console.log("!! State변경 <Editor>: ", this.state);
    this.render();
  };

  //- TODO_04: 라우트 처리
  this.init = async () => {
    if (!this.state.currentDocumentId) {
      console.log("Editor init: currentDocumentId가 없습니다. ");
      $target.innerHTML = `
        <h1>선택된 도큐먼트가 존재하지 않습니다.</h1>
        <p>워크스페이스에서 새로운 도큐먼트를 생성하거나, 클릭하여 수정하십시오.</p>
      `;
      return;
    }
    $target.innerHTML = this.template();

    try {
      const fetchedData = await request(
        `/documents/${this.state.currentDocumentId}`
      );
      const { title, content } = fetchedData;
      console.log("Editor init - 'fetch Document Data': ", fetchedData);
      this.setState({ document: { title, content } });
    } catch (e) {
      console.log(e);
      push(`/documents/null`);
    }
  };

  this.template = () => {
    const { title, content } = this.state.document;
    console.log("<<  <Editor>  렌더링 >>");
    return `
      <input class="editor-input" placeholder="제목 없음" value="${title}" />
      <textarea class="editor-content" placeholder="내용 없음">${content}</textarea>
    `;
  };

  this.render = () => {
    const { title, content } = this.state.document;
    $(".editor-input").value = title;
    $(".editor-content").textContent = content;
  };

  //- TODO_03: server 데이터와 연동 (디바운스 처리)
  // Todo-refactor-05: event처리 가독성 증가
  this.setEvent = () => {
    $target.addEventListener("keyup", (e) => {
      if (!e.target.closest(".editor-input")) {
        return;
      }
      const nextState = {
        document: { ...this.state.document, title: e.target.value },
      };

      this.setState(nextState);
      onEditing(this.state);
    });

    $target.addEventListener("input", (e) => {
      if (!e.target.closest(".editor-content")) {
        return;
      }
      const nextState = {
        document: {
          title: this.state.document.title,
          content: e.target.value,
        },
      };
      this.setState(nextState);
      onEditing(this.state);
    });
  };
  this.setEvent();
  this.init();
}

function flat(document, depth = 0, flattedDocuments = []) {
  //* 1. 방문한 노드 넣기
  flattedDocuments.push({
    ...document,
    depth,
    isToggled: false,
  });

  //* 2. 탈출조건: 자식이 없을 때
  if (document.documents.length === 0) {
    return flattedDocuments;
  }

  //* 3. 자식노드 있다면 재귀 호출
  document.documents.forEach((childDocument) => {
    flattedDocuments = flat(childDocument, depth + 1, flattedDocuments);
  });

  return flattedDocuments;
}

export const flatDocuments = (fetchData) => {
  //* fetchData는 rootDocument로 이루어진 배열이다.
  //* rootDocument는 자식 Document를 트리구조로 가지고 있다.
  //* rootDocument를 순회하며, 1depth의 documentList로 풀어주고, 이를 합치는 동작
  //* Input: [[root1 : [child1, child2]], [root2 : [child3 : [grandChild1]]], ... ]
  //* Output: [[root1, child1, child2], [root2, child3, grandChild1], ... ]
  return fetchData.map((rootDocument) => flat(rootDocument, 0, []));
};

const ROUTE_CHANGE_EVENT_NAME = "route-change";

export const initRouter = (onRoute) => {
  console.log("router 등록");
  window.addEventListener(ROUTE_CHANGE_EVENT_NAME, (e) => {
    const { nextUrl } = e.detail;
    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      onRoute();
    }
  });
};

export const push = (nextUrl) => {
  console.log("router push Event발생 url: ", nextUrl);
  window.dispatchEvent(
    new CustomEvent("route-change", {
      detail: {
        nextUrl,
      },
    })
  );
};

function debounce(func, delay) {
    let timer = null;
    return function (...args) {
      console.log(timer, context, args);
      if (timer !== null) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => func.apply(...args), delay);
    };
  }
  const onEdit = async (currentDocumentId, document) => {
    console.log("here");
    await request(`/documents/${currentDocumentId}`, {
      method: "PUT",
      body: JSON.stringify(document),
    });
    console.log("** 수정API요청");
    await fetchDocuments();
  };

• 하나의 Document는 여러개의 Document를 자식으로 가질 수 있다.

• 하나의 Document는 자식 Document가 없을 수 있다.

• 여러개의 루트 Document가 존재가능하다.

• 모든 도큐멘트 조회 API
• App 접속 시 최초 호출 <Nav>
• 도큐멘트 추가 btn 클릭 시, state변경 후 리렌더링시 호출 <Nav>
Get/documents
[
		{
        "id": 23431,
        "title": "첫번째 루트 노드",
        "documents": [
            {
                "id": 23433,
                "title": "1-1",
                "documents": [
                    {
                        "id": 23436,
                        "title": "1-1-2",
                        "documents": [],
                        "createdAt": "2022-04-12T06:23:07.968Z",
                        "updatedAt": "2022-04-12T06:23:07.975Z"
                    },
                    {
                        "id": 23437,
                        "title": "1-1-3",
                        "documents": [],
                        "createdAt": "2022-04-12T06:23:32.587Z",
                        "updatedAt": "2022-04-12T06:23:32.592Z"
                    }
                ],
                "createdAt": "2022-04-12T06:20:35.597Z",
                "updatedAt": "2022-04-12T06:20:35.602Z"
            }
        ],
        "createdAt": "2022-04-12T06:16:47.442Z",
        "updatedAt": "2022-04-12T06:17:53.760Z"
    },
    {
        "id": 23432,
        "title": "두번째 루트 노드",
        "documents": [],
        "createdAt": "2022-04-12T06:20:11.370Z",
        "updatedAt": "2022-04-12T06:20:11.374Z"
    },
]
 

• 특정 도큐멘트 조회 API
• 도큐멘트 클릭 시 호출 <Nav>
Get/documents/{documentId}

{
    "id": 23431,
    "title": "첫번째 루트 노드",
    "createdAt": "2022-04-12T06:16:47.442Z",
    "updatedAt": "2022-04-12T06:17:53.760Z",
    "content": "내용수정2",
    "documents": [
        {
            "id": 23433,
            "title": "1-1",
            "documents": [
                {
                    "id": 23436,
                    "title": "1-1-2",
                    "documents": [],
                    "createdAt": "2022-04-12T06:23:07.968Z",
                    "updatedAt": "2022-04-12T06:23:07.975Z"
                },
                {
                    "id": 23437,
                    "title": "1-1-3",
                    "documents": [
                        {
                            "id": 23556,
                            "title": "",
                            "documents": [],
                            "createdAt": "2022-04-12T07:49:52.890Z",
                            "updatedAt": "2022-04-12T07:49:52.895Z"
                        }
                    ],
                    "createdAt": "2022-04-12T06:23:32.587Z",
                    "updatedAt": "2022-04-12T06:23:32.592Z"
                }
            ],
            "createdAt": "2022-04-12T06:20:35.597Z",
            "updatedAt": "2022-04-12T06:20:35.602Z"
        }
    ]
}

• parent : null 일 경우 루트Document로 생성된다.

• 부모와 자식 노드가 있을 때, 그 사이에 노드를 생성하여, 넣는 것은 불가하다.
• 부모 > 추가노드 > 자식노드 불가
• 부모 > 추가노드, 자식노드 가능

• 도큐멘트 생성 API
• 도큐먼트 추가 btn 클릭 시 Nav
POST/documents, {title, parent}

{
    "id": 23612,
    "title": "세번째 루트 노드",
    "createdAt": "2022-04-12T08:01:46.438Z",
    "updatedAt": "2022-04-12T08:01:46.442Z"
}

• 하나의 Document를 삭제할 경우, 해당 Document의 바로 자식 Document들은 루트 Document가 된다.

• 삭제할 Document의 자식 계층에 여러개의 Document가 존재할 때, 자식 Document들은 모두 루트 Document로 이동된다.
• 만약 해당 자식들이 자식Document(삭제기준 손자)를 가지고 있다면, 손자는 자식과 같이 움직이게 됨
즉 바로 밑의 자식들만 하위 노드들을 포함하여 루트 노드로 변경

// before
1 
	1-1
		1-1-1
			1-1-1-1
				1-1-1-1-자식
			1-1-1-2
		1-1-2
		1-1-3
	1-2
2

//After (1-1-1 삭제)
1
	1-1
		1-1-2
		1-1-3
	1-2
2
1-1-1-1
	1-1-1-1-자식
1-1-1-2

• 도큐멘트 삭제 API
• 마우스hover 후 삭제 btn 클릭 시 Nav
• 주의 해당 도큐멘트 삭제 후, 삭제된 도큐멘트정보 반환
DELETE/documents/{documentId}

{
    "id": 23437,
    "title": "1-1-3",
    "content": null,
    "parent": {
        "id": 23433,
        "title": "1-1",
        "content": null,
        "parent": 23431,
        "username": "outwater",
        "created_at": "2022-04-12T06:20:35.597Z",
        "updated_at": "2022-04-12T06:20:35.602Z"
    },
    "username": "outwater",
    "created_at": "2022-04-12T06:23:32.587Z",
    "updated_at": "2022-04-12T06:23:32.592Z"
}

• 데이터 수정 시 바꾸고 싶은 요소만 넣어서 수정 할 수 있다.
• Put/{documentId}, {title, content} title, content 중 바꿀 요소만 request body에 넣기

• 주의 이미 생성된 Document의 parent는 변경 불가하다.

• 도큐먼트 수정 API
• Editor내부에서 수정발생 시, 디바운스 이후 수정 Editor
• 도큐먼트에서 더보기 버튼을 통해 이름변경 시 Nav-선택
PUT/documents/{documentId}

{
    "id": 23556,
    "title": "네번째 루트 노드",
    "content": "내용은 수정했어요.",
    "parent": {},
    "username": "outwater",
    "created_at": "2022-04-12T07:49:52.890Z",
    "updated_at": "2022-04-12T08:21:19.800Z"
}

2. 컴포넌트 구조 및 state 설계

2.1 와이어프레임

2.2 컴포넌트 구조

컴포넌트 구조

2.3 State 설계

• state in App

{
	documentList: [
      [
        { id: 1, title: "1 루트노드", isToggled: true, depth: 0 },
        { id: 2, title: "1-1 자식노드", isToggled: false, depth: 1 },
      ],
      [{ id: 3, title: "2 루트노드", isToggled: false, depth: 0 }],
    ],
	currentDocumentId : new || 1
}

• documentList
• Sidebar 렌더링에 필요
• 루트노드 단위로 요소를 저장
• 루트, 자식, 손자노드는 depth로 구분하며, 루트노드 기준으로 이중 배열로 구성
• [ [루트노드1, 자식노드1, 손자노드1], 루트노드2, 루트노드3, ... ]
• 하나의 노드는 {id, title, isToggled, depth} 4가지 속성을 가짐
• currentDocumentId : 현재 EditPage에 보여주어야 할 documentId, url주소에서 가져옴
• initial 값은 ‘new’를 가지고, route에서 path가 변할 때 마다 반영하여 update 해줌

2.4 메서드

1. API 추가 요청  {title:'', parent: id}
2. fetchItems() -> 
3. setState(formatFetchItems) -> 
4. render()

2.5 시나리오

• 모든 렌더링은 App의 State가 흘러 내려가며 차례대로 render 함수가 실행되며 진행

• 초기 접속 시
• fetchItems() 로 serverData 받기
• serverData를 가공하여 App의 상태 변화(setState)
• 상태가 바뀌며 렌더링 진행

• 추가 발생 시
• onInsert(id) 이벤트 발생 → 추가 API 요청
• fetchItems()를 통해 추가 반영된 serverData 받기
• serverData 반영하여 리렌더링

• 삭제 발생 시
• onRemove(id) 이벤트 발생 → 삭제 API 요청
• fetchItems() 를 통해 삭제가 반영된 serverData 받기
• serverData 반영하여 리렌더링

• 토글 발생 시
• onToggle(id) 이벤트 발생
• 해당 요소가 true인 경우, false로 바꾸고, 해당 루트노드의 모든 자식,손자 요소들의 isToggled를 false로 바꿈
• 해당요소가 false인 경우, true로 변경
• setState로 state 변경 후 렌더링 반영
• render함수
• isToggled 상태가 true이면 아무 상태변화 없음
• false라면 class에 ‘toggle-closed’ 추가하기 → css에서 보이지 않도록 처리
• https://www.w3schools.com/howto/howto_js_treeview.asp

개발 중 고민 리스트

1. server State와 clientState를 하나로 통합시킬 것인가 VS 따로 관리할 것인가 ✅

• (3/13) state는 렌더링에 적합한 자료형태로 담아야한다. 즉 isToggled와 같은 clientState를 위한 속성이 있어야하고, documentsState를 순회하면서 심플하게 렌더링할 수 있어야한다.
• 따라서 serverState를 fetch 한 직후에 이를 format하는 유틸함수를 통해 필요한 state형식에 맞게 가공하고 state에 저장한다.

const serverData = await fetchItems();
const nextState = formatToState(serverData)
this.setState(nextState)

• flatDocuments() 함수는 재귀를 통해 serverData의 자식 document를 루트 도큐먼트를 기준으로 한 배열에 담는다.
• Before

[
 { id: 1, title: "1 첫번째 루트 노드", documents: [
			{ id: 3, title: "1-1 자식 노드", documents: []},
		],
  },
  { id: 2, title: "2 두번째 루트 노드", documents: [] },
],

• After

[
	[
		{id:1, title:"1", isToggled:false, depth: 0},
		{id:3, title:"1-1", isToggled:false, depth: 1}
	],
	[
		{id:2, title:"2", isToggled:false, depth: 0},
	] 
]

2. flex CSS에 대한 처리 부족

3. initialState 처리 필요한 것인가?

4. EditPage 의 필요성

• Editor에서 데이터 보관,저장 처리, 업데이트 등 모든 로직이 동작하고 있는데, 상태관리를 해주는 EditPage 컴포넌트를 만들어 Editor의 역할을 좀 더 분명히 하는 것이 바람직하다는 생각이 든다.

5. Router의 역할은 무엇인가 ✅ (3/19)

6. DocumentList에서 Document를 하나의 컴포넌트로 만들어 넣는 방식으로 변경하는 방법

• 현재는 template에서 document state를 순회하며, 템플릿에 직접넣어주고 있는데, Document를 하나의 컴포넌트로 만들어준다면, 렌더링 작업을 어디서해주어야할까..?
• 상위컴포넌트인 Sidebar의 mount 부분에서?
 

7. 리렌더링을 줄위기 위한 방법 ( router First, stateFirst) (3/19)✅

• 기존방식
onClickItem, onInserItem, onRemoveItem 등의 이벤트가 발생했을 때, setState로 currentDocumentId를 직접 바꾸어주는 방식

• 변경 방식
router의 push메소드를 통해 페이지 주소의 변경을 먼저 발생하게 하고, 이후 route() 함수가 실행되며, 현재 pathname을 통해 state의 currentDocumentId를 setState해주는 방식

• proxy를 통해 Model을 만들어 변경된 state를 가지는 Model만을 리렌더링하는 방법
• nextStep의 poco 사용방식
Proxy와 가상 돔을 사용하여 나만의 프레임워크 만들기 : NHN Cloud Meetup
기술을 공유하고 함께 성장해가는 개발 문화, NHN이 추구하는 가치입니다.

https://meetup.toast.com/posts/158

8. 없는 컨텐츠에 접근할 때의 에러처리

• url path로 없는 documentId를 직접 접근 할 때, 이에 대한 처리를 어떻게 해주어야 하나에 대한 고민

9. 404에러 처리를, 모든 api를 처리하고 있는 request.js에서 catch 하여 처리하는 것이 맞나?

10. focus 처리, contentEditable에서 focus 가장 뒤로 보내기

• 참고링크 (링크1)

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  range = document.createRange(); //Create a range (a range is a like the selection but invisible)

  range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range
  range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
  selection = window.getSelection(); //get the selection object (allows you to change selection)
  selection.removeAllRanges(); //remove any selections already made
  selection.addRange(range); //make the range you have just created the visible selection
}