데일리 노트와 네비게이션

오늘은 데일리 노트 작업을 해줬다.

데일리 노트는 하루의 지식의 근간이 되는 공간이다.

이곳에서 매일 발생하는 정보와 생각들을 캡처할 수 있다. 이곳에 배웠던 것들이나 몰랐던 것들의 키워드를 적어 놓고 나중에 정리하는 목적이다.

하루에 하나씩만 쓸 수 있게 해놓았다.

그 다음은 홈에서의 페이지 네비게이션 작업을 해주었다. 글쓰기나 수정을 누르면 이전에 보던 글로 돌아가지가 않는데 전에 보던 페이지로 로딩을 할 수 있게 해준다.

주소창의 url 만 바꿔주는 부분을 history 의 pushState 나 replaceState 로 작업을 해주려고 했는데 이 때 백 버튼을 누르면 페이지가 리프레시 되지 않는 특징이 있었다. mdn 문서를 보니 원래 그렇다고 한다…

새로운 세션 기록 항목의 URL. pushState() 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다.

즉 popState 를 호출하지 않는 다는 것인데 이렇게 되면 url 만 변경이 되고 리프레시가 되지 않는다. 리액트의 window event 에 popstate 를 관찰해서 window.location 을 변경시켜주면 되기는 하는데 이렇게 되면 모든 컴포넌트에서 다뤄줘야 한다.

그런데 검색을 해보니 next router 에 url 만 변경을 해주는 옵션이 있었다.

router.push(url, as, options)

options - Optional object with the following configuration options:
  shallow: Update the path of the current page without rerunning

router.push(url, undefined, { shallow: true }); 로 주면 리프레시를 하지 않고 url 만 바꾼다. as 는 url 이 어떻게 표시 될지 결정할 수 있는데 필요없으면 undefined 로 놓으면 된다.

휴 조금만 더 찾아볼걸 괜히 고생했다… next 공식문서 다 읽어야 하는데 언제 읽지…

그 후 잔잔바리들을 쳐냈다. 글씨 크기를 18 픽셀로 하니 훨씬 보기 좋아졌다. 원래는 16 픽셀 정도만 해도 괜찮았는데 이제는 모니터 등이 커져서 18 픽셀 정도도 괜찮은 듯 하다. 물론 스크롤이 좀 늘어나기는 하겠지만 말이다. line height 는 데스크탑 1.7 모바일과 에디팅에 1.6을 줬다. 모바일이 사용면적이 적으니 조금 줄여놨다. 라인 하이트가 너무 넓으면 다음 줄을 찾는데 에너지를 소비하게 된다. 무난하게 가면 1.5 도 괜찮을거 같다.

마크다운을 제거하기 위해 라이브러리를 찾아 봤는데 strip-markdown 은 데이터를 비동기로 처리하고 remove-markdown 은 효율적이지 않다. remove-markdown 에 contents를 통째로 건네줬더니 프론트 서버가 멈출뻔 했다… 리액트가 컴포넌트를 리렌더링 할 때 마다 무리한 작업을 해서 그런 것 같다.

뭔가 방법을 찾아봐야 겠다. 프리뷰 부분만 발췌해서 미리 저장을 해야 하나. 고민이다.

생각보다 잔잔바리가 너무 많다… css 언제 하지…