NETAMlog[3] 드디어 진전이...? 모바일 지원

오늘의 한 일

오늘 메인으로 한 일은 모바일 지원입니다.

아직 할일이 많이 남았고 안 만든 페이지도 많은데 이건 비교적 천천히 해도 되는 일이라 가장 중요한 블로그 페이지와 네비게이션을 사이즈에 맞게 조정되도록 했습니다.

보시다시피 디자인 자체는 간단하고 좌측 상단의 아이콘을 통해 토글할 수 있습니다.

이 부분에서 시간을 많이 잡아먹었는데 여기엔 두 가지 이유가 있습니다.

첫 번째로는 이거 어떻게 만들지 찾다가 결국 그냥 useState로 버튼 만드는 방법을 자각하는데 시간이 많이 들었습니다.
리액트에 좀 더 익숙해질 필요가 있나 봅니다.

두 번째로는 화면 크기가 변할 때 네비게이션이 자동으로 열리는 것이었습니다.

이제와서 생각해보면 굳이 유저가 화면 크기를 조절할 필요가 있을까 싶지만 어쨌든 이런 디테일할 부분에서 그냥 무시하고 넘어가는게 싫어서 고친다고 이것저것 왔다갔다 하다가 결국 성공했습니다.

이거 한다고 대략 1시간 정도 소모한 거 같네요.

목차 디자인 결정

목차는 몇주째 제 발목을 잡았던 컴포넌트인데 드디어 디자인을 결정하게 되었습니다.

일단 태블릿 사이즈 부터는 목차가 뜨지 않도록 했습니다.
그 정도부터는 그냥 손으로 스크롤링 하는게 더 빠르기도 하고 화면 상단으로 네비게이션이랑 목차 둘 다 있는 것도 이상해서 그냥 뺐습니다.

목차도 네비게이션처럼 useState로 구성되고 디자인은 전과 동일합니다.

이상한 에러

왜인지는 모르겠는데 katex/latex가 렌더링되면 다른 요소들과 관계없이 그 위로 렌더되더라고요.

이유를 찾을려고 CSS를 봤는데 position: absolute가 문제인듯 싶다가도 그러면 그 위를 덮으면 안보여야 하는데 그래도 보이길래 그냥 수학 기호를 되도록 적게 쓰자하고 넘겼습니다.

고칠 수 있으면 고치겠는데 이유를 도저히 못 찾겠네요.

검색

개인적으로 블로그를 돌아다니면 주로 네비게이션 부분에 어떤 종류의 글들이 있는지 보고 여기저기 둘러보는 편입니다.

그래서 검색 기능을 잘 안쓰긴 하는데 그래도 다른 분들이 블로그를 만들 때 검색을 웬만하면 추가하시길래 저도 유튜브에서 적당한 코드를 찾아 사용해 보기로 했습니다.

코드 자체는 그냥 생으로 전부 찾는 방법이라 속도를 보고 글 전체에서 찾을지 아니면 제목과 카테고리 위주로 찾을지는 좀 더 고민해봐야 할 것 같습니다.

후에 할 일

일단 처음에 언급했다시피 카테고리 페이지, 메인페이지, 쇼케이스 페이지 등을 만들어야 하고 그에 맞는 전용 함수들도 따로 추가해야 합니다.

검색 기능도 아직 UI가 없기 때문에 만들어줘야 하고 SEO 부분도 좀 더 손을 대야합니다.

그리고 CSS 리팩토링이 시급합니다.

보고 있자니 tailwind랑 일반 CSS가 같이 상생 중인데 뭔가 어지러워서 파일 분리와 함께 좀 통일감을 줄 필요가 있어 보입니다.