시작하며 🌈

후! 어제 오늘 거의 10시간 동안 헤매다가 결국 구현해냈어요! 🖐🏻🖐🏻🖐🏻
사실 원리는 얼추 알고 있었는데, 제 코드를 다 뒤엎어야 하는 케이스라,
결국 다른 꼼수(?)를 찾다가 바꾸게 됐네요.

하지만 결국 귀한 걸 얻었어요.
망설일까, 말까할 때는 그냥 질러버리는 거죠 👍👍

그렇다면 어떻게 구현했는지 살펴 볼까요?!

본론 📖

저는 일단 먼저 App에서 다음과 같이 페이지를 놓았어요!
여기서 잘 살펴야 하는 것이, 바로 SPA의 특징인데요,
저렇게 라우트와 별개로 위쪽에 페이지를 인스턴스로 쫙~호출해줌으로써, 나중에 편하게 라우트 이동에 따라 갖다 붙일 수 있는 것이죠.
덕분에 초기 로딩은 좀 걸리지만, 나중에는 빠르다는 이점이 있습니다! 👍👍

사실 이걸 포기하려다, 취지상 일관성을 위해, 시간을 더 투자했네요!😅

코드는 다음과 같아요.

import router from './apis/router.js';
import MainPage from './pages/MainPage.js';
import PostEditPage from './pages/PostEditPage.js';
import { READ_POST_ROUTE } from '../src/utils/constants.js';
import removeAllChildNodes from './utils/removeAllChildNodes.js';

export default function App({ $target }) {
  const postEditPage = new PostEditPage({
    $target,
    initialState: {
      postId: 'new',
    },
  });

  const mainPage = new MainPage({
    $target,
    initialState: {
      username: 'jengyoung',
      documents: [],
    },
    onClick: id => {
      history.pushState(null, null, READ_POST_ROUTE + `/${id}`);
      this.route();
    },
  });

  this.route = () => {
    removeAllChildNodes($target); // App 초기화
    const { pathname } = window.location;
    const splitedPath = pathname.split('/');

    if (pathname === undefined || pathname === '/') {
      mainPage.setState();
    } else if (pathname.indexOf(READ_POST_ROUTE + '/') === 0) {
      const postId = splitedPath[2];
      postEditPage.setState({ postId });
    }
  };

  this.route();

  router(() => this.route());
}

여기서 특이한 점이라면... 음 removeAllChildNodes라고 해서, 노드들을 모두 지우는 함수를 하나 만들었네요! 별 거 없답니다. 그냥 while문 써서 다 지워냈어요.

export default function removeAllChildNodes(node) {
  while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
  }
}

특히 page에 설정된 state가 새롭게 바뀔 때마다, 렌더링을 해주기 때문에 (정확히 말하자면, 같은 페이지 컴포넌트로 이동하는 경우(posts/1 -> posts/2)에 대한 대비겠죠)
저는 다음과 같이 setState로 해주었답니다.

페이지를 살펴볼까요?!

MainPage.js

어제와 엄~청 많이 바뀌었답니다.
고민 끝에, 노션처럼 SideBar에 이름을 달기 보다, 그냥 개성 있게 헤더에 걸어주기로 했답니다. 나중에 이는 또, 따로 만들어볼 거에요!

import request from '../apis/request.js';
import Header from '../components/common/Header.js';
import SideBar from '../components/SideBar.js';

/*
  {
    username: string
    documents: [<object>]
  }
*/
export default function MainPage({
  $target,
  initialState = { username: '', documents: [] },
  onClick,
}) {
  this.state = initialState;

  const $page = new DocumentFragment();
  // const $page = document.createElement('div');
  const sideBar = new SideBar({
    $target: $page,
    initialState,
    onClick,
  });

  const header = new Header({
    $target: $page,
    headerSize: 'h5',
    initialState: {
      content: this.state.username,
    },
  });

  this.setState = () => {
    const posts = request();
    this.state = {
      ...this.state,
      documents: posts,
    };

    const { username, documents } = this.state;
    header.setState({ content: username });
    sideBar.setState({
      username,
      documents,
    });

    this.render();
  };

  this.render = () => {
    $target.appendChild($page);
  };
}

PostEditPage.js

여기도 정~말 많이 바뀌긴 했는데, 고민 끝에 렌더링을 다음과 같이 생각하니, 한결 편해지더라구요.

렌더링: 화면 위에 그리는 것.

이 렌더링의 주도권을 누가 갖고 있어야 되냐!라고 물었을 때,
결국 페이지가 들고 있는 게 좀 더 확실한 것 같아서 페이지에서 그려내기로 결심했어요.

왜냐하면, setState로 렌더링을 다시 그려낼 때, 결국 postForm이 독립적으로 컴포넌트 내부에서 렌더링 되면 결국 다시 render가 호출되지 않기 때문이죠!

import PostForm from '../components/PostForm.js';
import debounce from '../utils/debounce.js';
import { getItem, setItem } from '../utils/storage.js';
/*
 * this.state = {
 *   postId: string,
 * }
 */
export default function PostEditPage({
  $target,
  initialState = { postId: 'new' },
}) {
  const $page = document.createDocumentFragment();
  this.state = initialState;
  const { postId } = this.state;

  const defaultValue = { title: '', content: '' };
  const post = getItem(getLocalPostKey(postId), defaultValue);

  const postForm = new PostForm({
    $target: $page,
    initialState: {
      ...post,
    },
    onEdit: post => {
      debounce(setItem, 2000)(getLocalPostKey(this.state.postId), { ...post });
    },
  });

  // postId가 바뀔 때 페이지의 상태가 변화합니다!
  this.setState = nextState => {
    this.state = nextState;
    const post = getItem(getLocalPostKey(this.state.postId), defaultValue);
    postForm.setState(post);
    this.render();
  };

  this.render = () => {
    if ($target.querySelector('form') === null) {
      postForm.render(); // 에디터의 경우 여기서 렌더링을 해줘야, setState할 때 다시 렌더링되지 않습니다.
    }
    $target.appendChild($page);
  };
}

const getLocalPostKey = postId => {
  return `temp-save-${postId}`;
};

PostForm.js

대신 PostForm 컴포넌트의 경우에는 기존에 value를 렌더링에서 바꿔줬는데, 컴포넌트 렌더링의 측면에서 이는 부적절한 것 같아 setState에서 해주기로 했답니다.

대신, 이제는 컴포넌트 렌더링의 의존성이 좀 더 명확하게 파악이 되니, 나름 만족해요!😄

import Input from './common/Input.js';

export default function PostForm({
  $target,
  initialState = {
    title: '',
    content: '',
  },
  onEdit,
}) {
  // 초기 컴포넌트를 DOM에 추가하고, 상태를 초기화합니다.
  const $editor = document.createElement('form');
  /*
   * this.state = {
   *   title: string
   *   content: string
   * }
   */
  this.state = initialState;

  /*************************************
   *            component              *
   *************************************/
  const postTitle = new Input({
    $target: $editor,
    initialState: this.state.title,
    onChange: title => {
      const nextState = {
        ...this.state,
        title,
      };
      this.setState(nextState);
      postTitle.setState(title);
      onEdit(this.state);
    },
  });
  const $postContent = document.createElement('textarea');

  this.setState = nextState => {
    this.state = {
      ...this.state,
      ...nextState,
    };
    const { content } = this.state;
    $postContent.value = content;
    postTitle.setState(this.state.title);
  };

  this.render = () => {
    $editor.appendChild($postContent);
    $target.appendChild($editor);
  };

  $postContent.addEventListener('keyup', e => {
    this.setState({
      ...this.state,
      content: e.target.value,
    });
    onEdit({ ...this.state });
  });
}

router

아, 결국에는 컴포넌트는 이렇게 설정했는데, 어떻게 라우팅을 했냐구요?!
저는 historyAPI를 사용했답니다.
같이 공부하는 종현님께 도움도 받아서, 뒤로가기도 어ㅡ썸하게 구현했답니다!

이 시대 최고의 개발자 종현님께 아낌 없는 박수를 👏👏👏

간단히 설명하자면, app에서 설정한 this.route를 매개변수로 받아서, 이를 이벤트에 따라 처리해줍니다!

// route change라는 이벤트를 발생시킵니다.
const DISPATCH_ROUTE_CHANGE = 'route-change';

export default function router(onRoute) {
  window.addEventListener(DISPATCH_ROUTE_CHANGE, e => {
    const { nextUrl } = e.detail;

    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      console.log('nextUrl', nextUrl);
      onRoute();
    }
  });

  window.addEventListener('popstate', () => {
    onRoute();
  });
}

export const push = nextUrl => {
  window.dispatchEvent(
    new CustomEvent(DISPATCH_ROUTE_CHANGE, {
      detail: {
        nextUrl,
      },
    }),
  );
};

결과를 살펴 보죠!!

HTML 개발자로서 꽤나 이쁜 디자인에 어썸하군요!😅😅

마치며👏

일단 지금 라우트까지 해냈네요! 그렇다면 이제 기존에 구현되어 있는, 데브코스에서 제공한 api를 연동하여 본격적인 노션을 만들어봅시다!!

다들, 즐거운 코딩하시길!😃😄😝