nextjs 블로그
![NETAMlog[7] GraphQL을 통해 데이터 불러오기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbpnwak%2FbtrjkyTrnnC%2FGZnpRiONSy5D8NynW4SwFk%2Fimg.png)
NETAMlog[7] GraphQL을 통해 데이터 불러오기
한 일 저번 글에서 GraphQL을 사용하게 된 것에 대해 작성하였는데 오늘은 GraphQL을 통해 실제로 데이터를 가져오는 기능을 구현하였습니다.(저번에는 셋업이라고 볼 수 있죠) 사용방법은 크게 어렵지 않고 apollo 서버의 클라이언트를 만든 다음 GraphQL 쿼리를 통해 데이터를 가져오기만 하면 되는 것으로 기존의 로컬 마크다운 파일을 파싱하는 코드를 수정하였습니다. 생각보다 더 쉽게 데이터를 불러올 수 있고 무거운 gray-matter 라이브러리(마크다운 파일에서 메타데이터와 실제 내용을 구분해서 반환해줌)을 더이상 사용할 필요가 없어져 기분이 좋았습니다. 또한, 이 글을 통해 api 경로를 같은 사이트에서만 사용할 수 있도록 바꿨습니다. 원래는 api를 딱히 쓸 생각이 없었는데 프론트 쪽에서..
![NETAMlog[5] 타입스크립트 사용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fec3JEh%2FbtrjoPsCCUL%2Fho7PC4uRliVSBpbC6natOk%2Fimg.png)
NETAMlog[5] 타입스크립트 사용하기
타입스크립트 타입스크립트는 기존의 자바스크립트에 타입을 명시할 수 있게 해주는 자바스크립트의 슈퍼셋으로 굉장히 많은 기업과 사람들이 자바스크립트 대신 타입스크립트를 사용하고 있습니다. 대신 사용한다곤 하지만 사실 타입스크립트는 브라우저가 이해할 수 없기 때문에 전부 자바스크립트로 변환된 다음 실행되는 방식을 취합니다. Next.JS에서는 기존의 프로젝트에 tsconfig.json이라는 파일을 생성한 다음 npm run dev를 실행하면 타입스크립트 사용 절차를 거치게 됩니다. 더 자세한 내용은 Next.JS 공식 타입스크립트 문서를 참고하시기 바랍니다. 개인적인 생각 솔직히 작은 규모의 프로젝트 - 파일 한 두개 정도로 거의 단순 스크립트 정도의 프로젝트 - 가 아니라면 타입스크립트는 무조건 도움이 된다..
![NETAMlog[4] 검색 기능과 에러덩어리 이미지 컴포넌트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fw2Hi8%2FbtrgA5lp1Ry%2FvoUEKbqGkxBxcbacEcEylk%2Fimg.png)
NETAMlog[4] 검색 기능과 에러덩어리 이미지 컴포넌트
오늘의 한 일 오늘은 검색 기능을 완성시켰다. 코드는 Brad Traversy's Devspace에서 가져와 일정 부분 내 필요에 맞게 고쳤다. 그리고 본문에서 검색하는 것도 일단은 빠르게 계산할 수 있을 것 같아서 결국 마크다운 파일 자체를 파싱하는 것과 다름없다.(그러고 보니 나중에 vercel로 deploy하고 나면 이렇게 하기 힘들거 같은데 따로 방법을 찾아봐야겠다.) Z-index는 이상하다 이전 글에 katex가 목차 위로 렌더링되는 현상이 있었는데 이번에는 이미지가 그런 현상을 일으키길래 원래 이런 일을 담당하는 z-index에 대해 더 깊게 알아보았다. 알고보니 부모 태그가 자식의 z-index를 막지 않아야 하며 position이 z-index와 함께 설정되어 있어야 한다는 것이다..
![NETAMlog[3] 드디어 진전이...? 모바일 지원](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fzejb3%2Fbtrf1iYIx4B%2Fv7znMZgE4sVC2pdll3t0CK%2Fimg.png)
NETAMlog[3] 드디어 진전이...? 모바일 지원
오늘의 한 일 오늘 메인으로 한 일은 모바일 지원입니다. 아직 할일이 많이 남았고 안 만든 페이지도 많은데 이건 비교적 천천히 해도 되는 일이라 가장 중요한 블로그 페이지와 네비게이션을 사이즈에 맞게 조정되도록 했습니다. 보시다시피 디자인 자체는 간단하고 좌측 상단의 아이콘을 통해 토글할 수 있습니다. 이 부분에서 시간을 많이 잡아먹었는데 여기엔 두 가지 이유가 있습니다. 첫 번째로는 이거 어떻게 만들지 찾다가 결국 그냥 useState로 버튼 만드는 방법을 자각하는데 시간이 많이 들었습니다. 리액트에 좀 더 익숙해질 필요가 있나 봅니다. 두 번째로는 화면 크기가 변할 때 네비게이션이 자동으로 열리는 것이었습니다. 이제와서 생각해보면 굳이 유저가 화면 크기를 조절할 필요가 있을까 싶지만 어쨌든 이런 디테..
![NETAMlog[0] 블로그 개편의 시작 - Next.JS, TailwindCSS](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKMMmQ%2Fbtrb6TJxNpE%2Fcw7jU3derpsbshIqkh2FV0%2Fimg.jpg)
NETAMlog[0] 블로그 개편의 시작 - Next.JS, TailwindCSS
블로그 새로 만들기 이유 솔직히 티스토리로도 충분한데, 요즘 프로젝트를 안 한 거 같아서 Next.JS랑 TailwindCSS를 배운 김에 블로그를 새로 만들면 어떨까 해서 이 프로젝트를 진행하게 되었습니다. 사실 몇 주 전에 글을 올렸어야 하는데 이런저런 일들이 있어서 어느 정도 프로젝트가 윤곽이 잡히고 나서야 글을 올리게 되네요. 기술 스택 Next.JS Next.JS는 리액트 프레임워크로 기존의 리액트에 서버 관련 기능을 갖추고 SSR과 SSG를 간편하게 구현할 수 있도록 도와줍니다. 쓰다 보면 확실히 편리한데, 아주 디테일하게 들어가면 살짝 옵션 설정이 안 되는 게 아쉽더라고요(물론 지원하는 게 많아서 충분히 다른 방법을 찾을 수 있긴 합니다). TailwindCSS TailwindCSS는 부트스..