NETAMlog[4] 검색 기능과 에러덩어리 이미지 컴포넌트

오늘의 한 일

오늘은 검색 기능을 완성시켰다.

코드는 Brad Traversy's Devspace에서 가져와 일정 부분 내 필요에 맞게 고쳤다.

그리고 본문에서 검색하는 것도 일단은 빠르게 계산할 수 있을 것 같아서 결국 마크다운 파일 자체를 파싱하는 것과 다름없다.(그러고 보니 나중에 vercel로 deploy하고 나면 이렇게 하기 힘들거 같은데 따로 방법을 찾아봐야겠다.)

Z-index는 이상하다

이전 글에 katex가 목차 위로 렌더링되는 현상이 있었는데 이번에는 이미지가 그런 현상을 일으키길래 원래 이런 일을 담당하는 z-index에 대해 더 깊게 알아보았다.

알고보니 부모 태그가 자식의 z-index를 막지 않아야 하며 position이 z-index와 함께 설정되어 있어야 한다는 것이다.

그래서 필요한 태그들에 적절하게 z-index를 걸어주니 katex와 이미지 모두 검색 결과와 목차 밑으로 렌더되었다.

이래서 코드를 뜯어봐야하는건가...

위에서 이미지가 갑자기 맨 위로 렌더링 되었던 이유는 기존에 img 태그를 쓰는 것에서 next/image 태그를 사용하였기 때문이다.

이 컴포넌트는 자동으로 이미지 사이즈와 lazy loading을 지원하는 성능에 매우 좋은 컴포넌트이지만 사이즈를 명시하지 않으면 사용할 수 없다는 것이다.

최적화를 해야하니 정보가 많아야 하는 것은 이해하지만 모든 이미지마다 크기 확인해가며 사용하고 싶지는 않았기 때문에 찾고 찾아 이 글을 찾게 되어 원하는 대로 사용할 수 있게 되었다. 내가 사용한 방법

mdx에서 버그나면 어쩌라는거지?

이렇게 이미지를 힘들게 넣고 나니 콘솔에 뜨는 p 태그 안에는 div가 들어갈 수 없습니다에러.

알고보니 mdx의 버그(가 아니라 의도된 거라고 하지만 에러인데...?).

결국 찾다가 remark-unwrap-images라는 플러그인을 찾아 추가하니 정상적으로 작동하는 것을 확인했다.

해야할 일

일단 계속 적고 있지만 메인 페이지를 만들어야 하는데 이게 가장 쉬운 거라 계속 미루고 있다.

기능적인 부분만 끝내면 UI 부분은 금방 되지 않을까...?

그리고 사실 이 프로젝트의 가장 시간 걸리고 힘든 일은 이전 블로그의 글들을 전부 옮겨오는 것이다.

예전 블로그를 없앨 것은 아니지만 어쨌든 이 블로그가 메인이고 웬만해서는 이 블로그에서 다 해결되었으면 하는 마음이다.

소감

마치 끝나지 않는 일같은 느낌이 든다.

글은 굉장히 짧게 표현하지만 위의 일을 하는데 7시간 정도 걸렸다.

진짜 자바스크립트는 이상한 버그의 총 집합인 것 같다.