2일 차

fetchAPI와 historyAPI를 연동해 페이지 리스트를 클릭 할 시 해당 페이지의 데이터를 불러와 편집 화면에 내용이 그려주는 기능을 구현했다.

크게 페이지 목록을 보여주는 섹션과 페이지를 편집하는 섹션으로 나뉜다.

흐름을 정리해보려고 한다.

step 1.

• 리스트를 클릭 이벤트를 걸어 history session에 리스트 id로 만든 url주소를 넣는다 (클릭 시 현재 페이지의 url이 history session넣은 주소로 바뀌게 된다.)

// pageList 컴포넌트
$pageList.addEventListener('click', e => {
    const { target } = e;
    const { className } = target;
    const $pageBlock = target.closest('.page_block');
    const { pageid } = $pageBlock.dataset;

    if (className === 'block_name') {
      push(`/pages/${pageid}`); 
      // historyAPI 실행 후, route처리까지 해주는 함수
    } 
  });

step 2.

• window.location객체에서 현재 페이지의 url의 pathname을 가져온다.
• url의 형태의 따라 다른 화면을 그려주기 위해 pathname을 사용해 편집 화면 컴포넌트의 상태를 바꿔준다.
  • 메인 화면: 새로 작성하는 페이지
  • 기존의 페이지 화면: 해당 페이지 내용
• 기존 페이지 pathname일시 pageid를 구해내서 편집화면 컴포넌트의 상태로 바꿔준다.(넘겨준다).

// app 컴포넌트
this.route = async () => {
    const { pathname } = window.location;
    if (pathname === '/') { // 메인 화면
      editFrame.setState({
        ...this.state,
        id: 'new',
      });
    } else if (pathname.indexOf('/pages/') === 0) {
      const [, , pageId] = pathname.split('/'); // 기존 페이지들
      editFrame.setState({
        ...editFrame.state,
        id: pageId,
      });
    }
  };

// 

step 3.

전 페이지(id)와 현 페이지(id)를 비교해서 그려줄 내용을 정한다

• 다른 페이지로 이동하는 경우
  • 다음 페이지의 데이터를 가져와서 화면을 그림
  • 새롭게 작성하는 페이지인 경우 -> 내용을 공백으로 그림
• 같은 페이지인 경우 (내용을 수정하는 경우)
  -> 서버에서 데이터를 가져오지 않고 새로 들어온 인풋(수정된 내용)으로 화면을 그림

  // EditFrame 컴포넌트
  this.setState = async nextState => {
    if (this.state.id !== nextState.id) { // 전 id와 새로 들어온 id가 다르다면
      this.state = nextState; // 새로 들어온 id로 현 상태를 업데이트한다 *이후의 과정들은 현 상태만을 이용할 것이기 때문
      if (this.state.id === 'new') { // new인 경우 공백으로 그림
        this.state = {
          ...this.state,
          title: '',
          content: '',
        };
        editor.setState(this.state);
      } else { // new가 아닌 경우
        fetchPage(); // 현재 id로 해당 데이터를 불러온 후 this.state에 업데이트 한다. 그 후  this.setState 다시 호출
        // 이 경우 전 후id가 같게 같아지게 되어 현재 state의 내용(받아온 데이터)으로 화면이 그려지게 된다.
      }
      return; // 
    }
    this.state = nextState; // 수정된 새로운 내용 담아서 바꾸기

    editor.setState( // 실제 화면을 그려주는 함수
      this.state || {
        // 가져온 데이터가 없다면 빈 텍스트
        title: '',
        content: '',
      },
    );
  };

// **일단 자기 상태를 업데이트 시키고 나서(필요한 데이터들로 채우고 나서 자식을 변화시켜줘야 함)

3줄 요약

• 리스트 클릭 시 리스트id로 url을 만들어 history sesstion에 축적.(현재 url변경)
• 현재 pathname을 가져와 pageid를 뽑아내 편집 화면 state로 전해준다.
• 편집 화면 컴포넌트에서 전해진 id로 서버에서 해당 id의 데이터를 받아와서 화면을 그려준다.

---

이 프로젝트의 가장 어려운 logic중 하나인 것 같다.
url이름을 통해 data를 불러와야하는데 페이지 이동의 모든 경우를 생각해서 처리해야하는게 너무 복잡하고 어려웠다.
데이터를 불러오는 과정을 명확하게 인지하려고 애썼다.
구현하고 난 후 글로 과정을 하나하나 써보니까 머리 속이 더 잘 정리되는 것 같다.
프로젝트 일지를 쓰는 것이 단지 기록으로 남기는 목적 뿐이라 생각했는데
깨달은 내용을 정리하면서 더 잘 습득할 수 있게 해주는 효과가 있다는 것을 알았다. 이전에는 프로젝트 일지를 잘 쓰지 않았다. 앞으로의 프로젝트를 하면서도 빼먹지 않고 쓰려고 한다.