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[6] Prisma와 GraphQL 추가하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbuQa6S%2FbtrjoQkKa7M%2Fk9JNYI9OPonnks8iUgn44K%2Fimg.png)
NETAMlog[6] Prisma와 GraphQL 추가하기
오늘의 한 일(이라 적고 지난주에 한 일이라 읽는다) 이 프로젝트를 위해 여러가지를 검색하다 Vercel의 Prisma 연동와 Prisma의 GraphQL 연동를 찾게 되었고 역시 로컬 파일만 가지고 블로그를 만드는 건 좀 별로인 것 같아서 외부 데이터베이스를 사용하기로 결정했습니다. 특히, 평소에 사용해보고 싶었던 GraphQL를 사용해보고 싶어 이에 대한 부분도 공부하여 추가하였습니다. 그리고 데이터를 외부 DB에서 가져오게 되면서 사이트 내부에서 글을 추가하기 위해 로그인 기능도 next-auth를 통해 추가하였습니다. Prisma 사용하기 Prisma는 ORM 중 하나로 관계형 데이터베이스와 더 편하게 소통할 수 있는 방법으로 관계형 데이터베이스를 NoSQL 데이터베이스같은 느낌으로 사용할 수 있..
![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[2] 삽질과 에러](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEDxDU%2FbtrePVQ3Vpo%2F7NLSq7ouVx8D6C3bQlSHB0%2Fimg.png)
NETAMlog[2] 삽질과 에러
오늘의 여정 지난 주에 마크다운을 처리하고 주중에 목차를 만들고 나서 오늘은 굉장히 많은 일을 하려고 했습니다. 블로그 페이지의 메인 화면과 메타 태그 정리, 웹사이트의 메인 페이지, 블로그 글별 레이아웃 정리 등 거의 끝낼 수 있을 거라고 생각했죠. 근데 목차가 누르면 페이지를 다시 로딩하고 href가 바뀌더라고요? 그래서, '음, remark나 rehype 플러그인을 쓰자' 해서 가져와서 써봤는데 얘는 제대로 만들지를 않더라고요? (한글 때문인가...) 결국 직접 만들어야 해서 이 분의 블로그에서 코드를 가져와 생성했습니다. 그리고 얘를 렌더를 해야 하는데 여기서부터 온갖 삽질과 에러가 시작됩니다... mdx 파싱은 싫어요 커스텀 목차 코드를 실행하면 'ul'이 만들어지는..
![NETAMlog[1] 마크다운 처리와 여러 결정들](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Frxg5P%2Fbtrd3bOpXTe%2FnfP2d8AYbKp0gKyQdPRNrk%2Fimg.png)
NETAMlog[1] 마크다운 처리와 여러 결정들
블로그 글 쓰기에 대한 결정 feat. Headless CMS 지난 글을 쓰고 나서 블로그 글 관리에 대해서 CMS(Content Management Software), 즉 콘텐츠 관리 소프트웨어를 사용하는 것을 고민해보았고 Ghost를 사용하기로 마음을 먹었습니다. Ghost를 설치하고 사용하는데 어떻게 호스팅을 할까 고민하다 Heroku는 무료 버전이 하루 중 18시간만 사용 가능하고 다른 VPS(간단하게 말하면 클라우드로 컴퓨터를 빌리는 것)를 사용하기에는 굳이 쓸데없이 돈을 쓰기는 싫어 제 라즈베리파이에 호스팅을 하기로 결심했습니다. 그러나 문제가 있었습니다. Ghost는 우분투 20.04까지만 지원하는데 제 라즈파이 세팅이 외장하드를 사용하는데 20.04는 ARM기반 시스템(라즈파이 포함)은 외..
![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는 부트스..