Coder38611

NETAMlog[7] GraphQL을 통해 데이터 불러오기

Coder38611 — Sat, 30 Oct 2021 23:32:48 +0900

한 일

저번 글에서 GraphQL을 사용하게 된 것에 대해 작성하였는데 오늘은 GraphQL을 통해 실제로 데이터를 가져오는 기능을 구현하였습니다.(저번에는 셋업이라고 볼 수 있죠)

사용방법은 크게 어렵지 않고 apollo 서버의 클라이언트를 만든 다음 GraphQL 쿼리를 통해 데이터를 가져오기만 하면 되는 것으로 기존의 로컬 마크다운 파일을 파싱하는 코드를 수정하였습니다.

생각보다 더 쉽게 데이터를 불러올 수 있고 무거운 gray-matter 라이브러리(마크다운 파일에서 메타데이터와 실제 내용을 구분해서 반환해줌)을 더이상 사용할 필요가 없어져 기분이 좋았습니다.

또한, 이 글을 통해 api 경로를 같은 사이트에서만 사용할 수 있도록 바꿨습니다.

원래는 api를 딱히 쓸 생각이 없었는데 프론트 쪽에서 데이터를 전송하게 되니 보안을 어느정도 고려를 안 할 수가 없더라고요.

해야할 일

검색 기능을 Fuse.JS라는 라이브러리를 통해 프론트에서 처리하도록 수정할 계획이고 관리자 페이지를 구성해야 합니다.

NETAMlog[6] Prisma와 GraphQL 추가하기

Coder38611 — Sat, 30 Oct 2021 23:30:52 +0900

오늘의 한 일(이라 적고 지난주에 한 일이라 읽는다)

이 프로젝트를 위해 여러가지를 검색하다 Vercel의 Prisma 연동와 Prisma의 GraphQL 연동를 찾게 되었고 역시 로컬 파일만 가지고 블로그를 만드는 건 좀 별로인 것 같아서 외부 데이터베이스를 사용하기로 결정했습니다.
특히, 평소에 사용해보고 싶었던 GraphQL를 사용해보고 싶어 이에 대한 부분도 공부하여 추가하였습니다.
그리고 데이터를 외부 DB에서 가져오게 되면서 사이트 내부에서 글을 추가하기 위해 로그인 기능도 next-auth를 통해 추가하였습니다.

Prisma 사용하기

Prisma는 ORM 중 하나로 관계형 데이터베이스와 더 편하게 소통할 수 있는 방법으로 관계형 데이터베이스를 NoSQL 데이터베이스같은 느낌으로 사용할 수 있게 해준다고 보시면 됩니다.
관계형 데이터베이스로는 Postgresql을 사용했는데 다른 것을 써도 되지만 postgresql 데이터베이스를 무료로 호스팅해주는 서비스가 있어 사용하게 되었습니다.
저는 테스트용으로는 Heroku에서 호스팅하고 실제 블로그를 호스팅할때는 Supabase에서 호스팅할 생각입니다.

GraphQL 사용하기

GraphQL은 REST와 같은 API를 정의하는 방법 중 하나이지만 REST와는 다르게 원하는 데이터를 특정해서 가져올 수 있다는 장점이 있습니다.
예를 들어 유저의 정보를 가져올 때 REST는 전부 가져온 다음 필요한 것들을 사용하지만 GraphQL은 애초에 필요한 것들만 가져오는 것입니다.
GraphQL은 데이터 전송량과 처리 과정을 줄일 수 있어 많은 관심을 가지고 있는 기술 중 하나입니다.
GraphQL을 사용하기 위해서는 이 API를 돌릴 서버 프레임워크가 필요한 데 이중 가장 유명한 것은 Apollo라는 것으로 Next.JS의 경우 apollo-server-micro를 사용합니다.
그리고 GraphQL 엔드포인트(통신 방법을 정의한 것)을 그냥 작성해도 되지만 코드 우선 방식을 통해 더 예측가능하고 타입 지정을 더 명확하게 할 수 있는 nexus를 통해 각종 스키마와 통신 방법을 정의하였습니다.

Next-Auth 사용하기

Next-Auth는 Next.JS에서 각종 데이터베이스와 로그인 방법을 쉽게 사용하기 위한 라이브러리로 저는 깃허브와 Prisma를 기본으로 사용하였습니다. (참고로 카카오와 네이버도 지원합니다.)
이 라이브러리는 사용 자체는 간단해서 개발자 문서만 보고 바로 사용하는데 큰 무리는 없지만 글을 작성하고 있는 시점에서 v3에서 v4로 전환하는 과정인데 아직 v4에 살짝 문제가 있는지 로그인 기능이 왔다갔다하네요.
로그인 기능에서 한 가지 추가한 점은 저만 로그인할 수 있게 해놓았다는 점입니다.
기본적으로 next-auth는 이런 기능이 없지만 깃허브는 동일 유저네임을 지원하기 않기 때문에 제 깃허브 유저네임이 아니면 로그인이 안 되도록 막아놓았습니다.
(근데 살짝 야매라서 좀 더 좋은 방법이 있는지 계속 찾아보는 중입니다. 그래도 잘 작동하긴 합니다.)

과정에 대한 생각

사실 Prisma가 워낙 잘 되어있어서 굳이 GraphQL까지 쓸 필요는 없었을 것 같은데 그래도 공부하기 위한, 그리고 (나름의?) 최신 기술들을 사용해보기 위한 프로젝트여서 최대한 넣어보자 라는 느낌으로 추가해보았습니다.
그런데 역시 자바스크립트는 라이브러리가 많은 만큼 건드릴 수 없는 에러가 많은 것이 참 마음을 불편하게 만드네요.
그리고 이거 하다가 마지막에 커밋을 해야하는데 vscode의 깃 탭에서 뭘 잘못 건드려서 아직 푸시를 안한 커밋들이 날라갔더라고요(아마 fetch나 pull과 같은 걸 눌렀나봅닌다).
그래서 계속 당황하면서 깃 커밋들 불러오는 법, 사라진 깃 커밋 찾는 법들을 찾다가 git reflog (https://stackoverflow.com/questions/10099258/how-can-i-recover-a-lost-commit-in-git 참고)를 찾고 겨우 새 브랜치를 만들어서 해결했습니다.
보통 커맨드라인을 조심하라고 하는데 전 GUI를 조심해야할 것 같네요…

NETAMlog[5] 타입스크립트 사용하기

Coder38611 — Sat, 30 Oct 2021 23:27:51 +0900

타입스크립트

타입스크립트는 기존의 자바스크립트에 타입을 명시할 수 있게 해주는 자바스크립트의 슈퍼셋으로 굉장히 많은 기업과 사람들이 자바스크립트 대신 타입스크립트를 사용하고 있습니다.

대신 사용한다곤 하지만 사실 타입스크립트는 브라우저가 이해할 수 없기 때문에 전부 자바스크립트로 변환된 다음 실행되는 방식을 취합니다.

Next.JS에서는 기존의 프로젝트에 tsconfig.json이라는 파일을 생성한 다음 npm run dev를 실행하면 타입스크립트 사용 절차를 거치게 됩니다.

더 자세한 내용은 Next.JS 공식 타입스크립트 문서를 참고하시기 바랍니다.

개인적인 생각

솔직히 작은 규모의 프로젝트 - 파일 한 두개 정도로 거의 단순 스크립트 정도의 프로젝트 - 가 아니라면 타입스크립트는 무조건 도움이 된다고 생각합니다.

컴파일 언어를 사용할 때처럼 코드의 거의 모든 과정을 거의 꿰뚫어야 하기 때문에 코드에 대한 이해도가 높아지고 코드의 안전성 또한 올라간다는 것이 굉장히 큰 장점이라고 생각합니다.
(원래 컴파일 언어보단 인터프리터 언어들(파이썬이나 자바스크립트 등)이 더 편해서 더 선호했는데 요즘은 컴파일 언어의 안전성을 무시할 수가 없어서 자꾸 Go같은 언어로 눈길이 가네요)

물론 단점도 있는데요, 기존의 프로젝트에서 타입스크립트로 바꾸려니 여간 귀찮은게 아니라서 기왕이면 처음부터 타입스크립트를 사용하시고 아니라면 하루라도 빨리 바꾸시는 것을 추천합니다.

나중에 바꾸려고 하면 귀찮음만 늘어납니다.

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

Coder38611 — Fri, 1 Oct 2021 23:46:49 +0900

오늘의 한 일

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

코드는 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시간 정도 걸렸다.

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

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

Coder38611 — Sat, 25 Sep 2021 23:48:52 +0900

오늘의 한 일

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

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

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

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

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

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

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

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

목차 디자인 결정

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

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

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

이상한 에러

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

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

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

검색

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

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

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

후에 할 일

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

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

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

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

NETAMlog[2] 삽질과 에러

Coder38611 — Sat, 11 Sep 2021 22:53:16 +0900

오늘의 여정

지난 주에 마크다운을 처리하고 주중에 목차를 만들고 나서 오늘은 굉장히 많은 일을 하려고 했습니다.

블로그 페이지의 메인 화면과 메타 태그 정리, 웹사이트의 메인 페이지, 블로그 글별 레이아웃 정리 등 거의 끝낼 수 있을 거라고 생각했죠.

근데 목차가 누르면 페이지를 다시 로딩하고 href가 바뀌더라고요?

그래서, '음, remark나 rehype 플러그인을 쓰자' 해서 가져와서 써봤는데 얘는 제대로 만들지를 않더라고요? (한글 때문인가...)

결국 직접 만들어야 해서 이 분의 블로그에서 코드를 가져와 생성했습니다.

그리고 얘를 렌더를 해야 하는데 여기서부터 온갖 삽질과 에러가 시작됩니다...

mdx 파싱은 싫어요

커스텀 목차 코드를 실행하면 'ul'이 만들어지는데 이게 html이 로딩한 뒤에야 만들 수 있어서 얘를 어떻게 집어넣지 고민을 하다가 appendChild 함수를 통해 넣으려고 했습니다.

근데 얘는 리액트 컴포넌트를 못 쓰더라고요?(어찌보면 당연하긴 합니다만)

그래서 mdx 파싱 결과를 html로 받을 수는 없는지 찾다가 mdx-bundler라는 모듈을 알게 되어 얘는 좀 다를까 해서 기존의 next-mdx-remote를 잠시 주석 처리하고 코드를 바꿔봤습니다.

그런데 갑자기 아무 문제 없던 fs 모듈이 webpack에서 없다고 뜹니다.

그래도 이건 자주 듣던 일이라 처리를 해줬어요.

근데 이젠 함수가 존재하지 않는다네요? 심지어 에러 내용도 역추적이 안되서 그 상태로 학원 갔다가 와서 2시간 반을 때려 넣었습니다.

결과적으로 못 고쳤습니다.

그냥 다시 next-mdx-remote으로 돌아오고 나니 갑자기 생각이 들더라고요?

아! 리액트는 조건별로 렌더링이 가능하지!

답은 언제나 간단하다

리액트에는 useState와 useEffect, useRef라는 훅이 존재합니다.

useState는 변수를 바꾸고 리로딩, useEffect는 모든 엘리먼트가 다 로딩되고 나서 코드를 실행하기 위한 용도, useRef는 로딩 사이에 변수가 값을 유지하는데 쓰입니다.

이를 통해 HTML이 전부 로딩되고 나면 useEffect가 실행되어 useState를 통해 변수를 true로 바꿔 목차를 로딩하면 되는 것이죠. useRef는 목차 정보는 한 번만 가져오면 되는 거라 그 값을 두 번 이상 가져오지 않게 합니다.

이러고 나니까 실행이 잘 되더군요. 스타일링이 끝난 뒤 모습입니다.

그래서 오늘 한 일&결론

결국 쓸데없는 일에 시간 다 뺏기고 npm install을 약 10번을 하고 하다가 목차만들고 메타 태그 정리하는거 밖에 못했습니다.

진짜 자바스크립트는 프로젝트를 할때마다 쓸데없는 일에 시간을 뺏기는 일이 많은거 같은데 이건 웹개발의 숙명이라 생각하고 안고 가는 방법 외엔 없는 것 같습니다.

제가 프레임워크 다 뜯어보는거 아니면 문제가 안 풀리는 경우도 있는데 이건 뭐 일부 포기하거나 우회하며 가야죠.

남은 일

일단 메인 페이지들 구성을 해줘야 합니다.

그런 다음에 모바일 지원을 해줘야 하는데 이것도 시간을 많이 잡아먹을 것 같습니다.
윈도우 사이즈 테스트겸 몇 번 바꿔봤는데 딱히 희망이 보이지 않아요.

다 만들고 나면 배포한 다음에 댓글 기능과 조회수 기능을 추가해야합니다.
배포한 다음 추가하는 이유는 외부에서 사용하는데 배포 후에 할 수 밖에 없기 때문입니다.(그 주에 올릴 글에 더 자세한 설명이 있을 겁니다.)

배포하고 나서 PWA, 즉 모바일 웹앱 기능도 추가할 예정입니다.
누가 굳이 제 사이트를 웹앱으로 쓸까 싶지만 그냥 써보고 싶어서 넣을 예정입니다.

NETAMlog[1] 마크다운 처리와 여러 결정들

Coder38611 — Sat, 4 Sep 2021 22:52:11 +0900

블로그 글 쓰기에 대한 결정 feat. Headless CMS

지난 글을 쓰고 나서 블로그 글 관리에 대해서 CMS(Content Management Software), 즉 콘텐츠 관리 소프트웨어를 사용하는 것을 고민해보았고 Ghost를 사용하기로 마음을 먹었습니다.

Ghost를 설치하고 사용하는데 어떻게 호스팅을 할까 고민하다 Heroku는 무료 버전이 하루 중 18시간만 사용 가능하고 다른 VPS(간단하게 말하면 클라우드로 컴퓨터를 빌리는 것)를 사용하기에는 굳이 쓸데없이 돈을 쓰기는 싫어 제 라즈베리파이에 호스팅을 하기로 결심했습니다.

그러나 문제가 있었습니다.

Ghost는 우분투 20.04까지만 지원하는데 제 라즈파이 세팅이 외장하드를 사용하는데 20.04는 ARM기반 시스템(라즈파이 포함)은 외장하드 같은 USB 대용량 스토리지(USB Mass Storage)는 부팅이 되지 않는다는 것이었죠.

그래서 결국 다른 CMS를 사용할 바에는 원래 계획이었던 마크다운 파서를 사용하는 블로그를 만들기로 했습니다.

어차피 CMS를 써도 파서를 사용한 버전을 만들 계획이었기 때문에 딱히 상관은 없는데 좀 아쉽긴 합니다.

(Ghost가 굉장히 기능이 많고 실제로 블로그를 만드는 데 자주 사용되는 블로그 전용 CMS입니다. Ghost만으로도 블로그로 쓸 수 있고요-워드프레스와 비슷한데 더 간편한 방법인 것이죠)

마크다운 파서

지난 글에서 언급하였듯이 기본적으로는 MDX, 더 정확히는 next-mdx-remote를 사용하여 마크다운을 HTML로 변환하고 그 과정에서 remark(마크다운에서 전처리)와 rehype(HTML에서 후처리) 플러그인을 통해 코드 하이라이팅과 katex 지원을 하였습니다.

코드 하이라이팅도 저번 글에서는 shiki라는 라이브러리를 사용한다고 했는데 next-mdx-remote와 함께 쓰려고 보니 그냥 remark-prism을 사용하는 게 더 편하고 빨라서 바꾸게 되었습니다. (테마로는 nord를 사용합니다.)

katex 지원은 mdx에서 추천하는 remark-math와 rehype-katex를 사용하였습니다.

위 두 플러그인의 사용방법은 serialize 함수에서 불러오기만 하면 됩니다.

const markdown = await serialize(content, {
    scope: frontmatter,
    mdxOptions: {
      remarkPlugins: [
        require('remark-prism'), 
        require('remark-math'),
    ],
      rehypePlugins: [require('rehype-katex')],
    },
})

기타 추가한 점

미디엄이나 다른 블로그들을 보면 글을 읽는데 걸리는 시간이 표시된 경우가 많은데 저도 그런 기능이 있으면 좋을 것 같아서 찾아보니 $Math.ceil((글의 길이)/200)$라는 간단한 수식이어서 추가했습니다.

마크다운을 HTML로 변환한 후에 각 태그 별로 CSS를 넣어줘야 하는데 처음에는 Tailwind의 플러그인 중 하나인 Typography를 쓰려 하다가 딱히 마음에 들지 않기도 하고 다크모드를 지원하지 않아서 global.css에서 각 태그마다 간단한 CSS를 설정해주었습니다.

결과 사진

해야할 일

아직 변환된 HTML에 대한 CSS 설정이 끝나지 않아 이를 마무리 해야합니다.

또한, 마크다운에는 frontmatter라는 메타데이터를 설정할 수 있는데 이를 어떻게 화면에 표시할 건지 결정할 후 코딩해야 합니다.

블로그들에 있는 목차를 만드는 방법을 찾아 기능을 추가할 생각입니다. 현재 블로그도 목차가 제공되는데 있는게 개인적으로는 굉장히 편리하다고 생각합니다.

현재 왼쪽의 네비게이션 바가 별로여서 유튜브에서 찾아놓은 더 예쁘고 쓰기 편한 걸로 바꿀 계획입니다. 티스토리처럼 블로그의 카테고리를 보여주는 방식과 유사할 것 같습니다.

열람 횟수 기능도 추가할까 고민중인데 외부 DB를 redis와 firebase중에 고민중입니다.

댓글 서비스를 깃허브 이슈 기반으로 바꿀 계획입니다. 이유는 CMS를 쓰지 않은 이유와 비슷합니다.

소감

쓰다보니 왠지 그냥 안되니까 포기한 것 같은데...하드웨어가 안되는 것을 굳이 돌아가는 것은 보안 문제도 있고 해서 굳이 어렵게 가진 않겠습니다.

다른 CMS도 있기는 한데 그건 나중에 필요할 것 같으면 추가하면 될 것 같습니다. 지금은 이정도로도 충분한 것 같네요.

계속 이 프로젝트를 진행하며 느끼지만 저는 프론트보다는 백엔드가 더 좋은 것 같습니다. 아마 다음 프로젝트는 백엔드 기반이지 않을까 싶네요.(사실 이미 기획중인 것이 있습니다.)

하루빨리 이 프로젝트를 호스팅까지 끝내고 쓰고 싶은데 시간이 없어 천천히 진행되는게 아쉽지만 그래도 혼자 이렇게 진행하니 재밌기도 하네요.

[VIM] 더 효율적인 프로그래머가 되자!

Coder38611 — Sat, 14 Aug 2021 00:11:48 +0900

VIM으로 효율적인 프로그래머가 될 수 있을까?

VIM이란?

VIM은 VI라는 소프트웨어의 강화 버전이라고 생각하시면 되는데, 결국 키보드로 문서 편집을 한다는 뜻입니다.
처음 VI가 등장하게 된 배경은 마우스가 없거나 지원되지 않던 시절 키보드를 통해서만 작업을 해야 했던 프로그래머들이 더 나은 UX를 위해 만들었으며 지금도 UNIX 계열 OS(리눅스, 맥)에서는 기본적으로 깔려서 옵니다.

VIM의 단점

이런 밈이 있을 정도로 VIM은 진입장벽이 매우 큽니다.(VIM에서 저장하지 않고 나가려면 :q를 누르시면 됩니다.)
저도 한 3번 포기했다가 이번에 드디어 손에 익어서 사용하게 되었는데 진짜 생각보다 너무 편하고 좋더라고요.
근데 이 벽만 한 번 넘으면 그다음부터는...
더 많은 것들이 기다립니다.
아무래도 한정된 키들을 가지고 다양한 일들을 하려고 하니 살짝 복잡해지는데 사실 커맨드 몇 개만 알아 둬도 능률이 확 올라갑니다.

VIM의 장점

아마 대부분의 분들이 IDE나 텍스트 에디터를 사용할 것이라고 생각됩니다.
파이참, VSC, CodeBlocks 같은 것들 말이죠.
이런 에디터들은 키보드 단축키가 존재하고 이 단축키들을 많이 알아두면 인생이 편리해진다는 것은 다 아실 겁니다.
VIM은 여기서 하나 더 나아가서 마우스에 손을 대지 않고 파일에서 커서를 움직이고, 줄을 선택하고, 지우고, 되돌리고, 단어 교체하고 등등 다양한 것을 하게 해 줍니다.
즉 마우스로 왔다 갔다 하는 시간을 아예 없애버릴 수 있다는 뜻이죠.
실제로 전 데탑 없이 맥북으로 개발하고 다 하는데 기본적으로도 글 선택하는 것 아니면 마우스를 잘 쓰지 않았는데 VIM을 쓰기 시작하고부터는 거의 손이 키보드를 떠나질 않게 되더라고요.

VIM 쓰는 법

VIM은 기본적으로는 콘솔 창에서 쓰이도록 개발되었지만 실제로 콘솔 창에서 작업하는 것은 어느 정도 불편함이 따르기 때문에 NeoVim 같은 VIM 전용 IDE를 쓰거나 VSC 같은 에디터에 VIM 확장팩을 설치해서 쓰는 것이 더 일반적입니다. (저도 VSC에서 쓰고 있습니다)

VIM 배우기

VIM은 배울 양이 꽤 큰 편이라 제대로 배우려면 적지 않은 시간이 걸릴 텐데요, 이 글에서는 간단히 자주 쓰일만한 커맨드만 소개하고 추가적인 기능은 직접 찾아보시는 것을 추천드립니다.

커서 이동하기

기본적으로 VIM에서는 h, j, k, l을 통해 각각 상, 하, 좌, 우로 이동하며 gg를 통해 글 맨 위로, G를 통해 글 맨 아래로 움직입니다.
0을 통해 해당 줄의 맨 앞으로 갈 수 있고 $를 통해 해당 줄의 맨 끝으로 갈 수 있습니다.
w를 통해 다음 단어의 첫 글자로, e를 통해 다음 단어의 맨 뒷글자로, b를 통해 이전 글자로 이동할 수 있습니다.
t에 찾고 싶은 글자를 입력하면 커서 뒤의 글 중 가장 가까운 곳 바로 앞으로 커서를 이동하며 f에 찾고 싶은 글자를 입력하면 커서 뒤의 글 중 가장 가까운 곳으로 커서를 이동시킵니다.
T와 F는 소문자 형태와 유사한데 뒤가 아닌 앞에서 찾는다는 차이점이 있습니다.

글 쓰고 지우기

아마 VIM을 처음 접하시면 가장 당황스러운 게 키가 안 먹히는 것 같다는 느낄 일 텐데요, 이는 VIM이 노멀 모드, 간단히 커맨드 모드에 있어서 그렇습니다.
글을 입력하기 위해서는 인서트 모드에 들어가야 하는데 이를 위해 i를 누르시면 입력이 정상적으로 들어갑니다.
i는 커서의 앞에서 입력을 시작하고 a는 커서의 뒤에 입력을 시작합니다.
I를 통해 맨 앞의 텍스트에서 입력을 시작할 수 있고 A를 통해 맨 뒤의 텍스트에서 입력을 시작할 수 있습니다.
ESC 키를 통해 다시 커맨드 모드로 돌아갈 수 있습니다.
지우기 기능은 d를 통해서 사용할 수 있습니다.
물론 d하나만 가지고 하는 것은 아니고 숫자, w, e, b, t, f, T, F 등과 결합하여 원하는 형태로 지울 수 있습니다.
예를 들어 괄호 안의 글을 모두 지우고 싶다면 'dt)'를 통해 할 수 있으며 단어 2개를 지우고 싶으시면 'd2w'를 통해 하실 수 있습니다.

글 저장하고 나가기

:w를 통해 글을 저장할 수 있고 :q를 통해 나갈 수(닫을 수) 있습니다.
:wq를 하면 저장하고 닫을 수 있고요.
:q! 를 통해 모든 것을 무시하고 나갈 수도 있습니다.

단어 교체하기

:s/교체될 단어/교체할 단어를 통해 현재 커서 뒤에 있는 가장 가까운 단어를 교체할 수 있습니다.
뒤에 /g를 붙여 해당 줄에서 전부 교체할 수 있고 앞의 s를 %s로 교체하고 /g를 붙여 글 전체에서 교체할 수 있습니다.

글쓴이의 생각

VIM을 전부 배우려 하기보다는 필요한 기능들 위주로 배워나가도 충분히 처리 속도가 빨라진 것을 느끼실 수 있을 것 같습니다.
이건 타자연습처럼 꾸준히 하지 않으면 처음에는 오히려 평소보다 느려져서 답답하실 수 있는데 그래도 계속하시면 어느 순간 '아, 난 지금까지 손해보고 살았구나!'를 느끼시게 될 겁니다.

지금 티스토리가 마크다운 에디터가 한글 입력이 제대로 안 먹히고 VSC도 한글이 씹혀서 옵시디언이라는https://obsidian.md 마크다운 노트 앱을 쓰고 있는데 VIM을 지원해서 너무 좋습니다 진짜

팁

캡스락 키를 잘 사용하지 않으시는 분들은 캡스락을 ESC로 키 바인딩을 해서 쓰시거나 jk를 ESC로 바꾸시는 것을 추천드립니다.
*VSC에서 jk 바인딩하기:

"vim.insertModeKeyBindings": [
        {
            "before": ["j", "k"],
            "after": ["<Esc>"]
        }
    ],

NETAMlog[0] 블로그 개편의 시작 - Next.JS, TailwindCSS

Coder38611 — Fri, 13 Aug 2021 23:23:52 +0900

블로그 새로 만들기

이유

솔직히 티스토리로도 충분한데, 요즘 프로젝트를 안 한 거 같아서 Next.JS랑 TailwindCSS를 배운 김에 블로그를 새로 만들면 어떨까 해서 이 프로젝트를 진행하게 되었습니다.

사실 몇 주 전에 글을 올렸어야 하는데 이런저런 일들이 있어서 어느 정도 프로젝트가 윤곽이 잡히고 나서야 글을 올리게 되네요.

기술 스택

Next.JS

Next.JS는 리액트 프레임워크로 기존의 리액트에 서버 관련 기능을 갖추고 SSR과 SSG를 간편하게 구현할 수 있도록 도와줍니다.

쓰다 보면 확실히 편리한데, 아주 디테일하게 들어가면 살짝 옵션 설정이 안 되는 게 아쉽더라고요(물론 지원하는 게 많아서 충분히 다른 방법을 찾을 수 있긴 합니다).

TailwindCSS

TailwindCSS는 부트스트랩 같은 UI를 미리 선언해놓은 프레임워크가 아니라 일반적인 CSS를 작성하는데 클래스만으로 작성할 수 있도록 해줍니다.

예를 들어 버튼이 원래는 보라색인데 커서를 가져다대면 파란색으로 변하게 하고 싶다면 다음과 같이 작성하면 됩니다.

<button className='bg-purple-100 hover:bg-blue-100' />

기능

일단 실제로 지속적으로 사용하기 위해 만드는 거라 조사를 좀 했고 결론적으로 마크다운을 지원하는 블로그를 만들기로 했습니다.

Rich-Text 에디터를 가져와볼까 생각해보지 않은 것은 아닌데, 제 글쓰기 특성상 마크다운으로도 충분할 거 같아서 그렇게 결정했습니다.

글쓰기 방식은 저처럼 블로그를 직접 만드신 다른 분들의 사례를 보니까 마크다운 파일을 로컬에서 만들고 git으로 깃허브로 푸시하는 방식을 많이들 쓰시더라고요.

그래서 저도 어떻게 할지 고민하다가 블로그 사이트에 Next.JS의 Preview기능을 통해 마크다운 에디터를 만들고 서버에 마크다운 파일을 만드는 형식으로 가볼까 합니다.

보안으로는 구글 로그인 같은 것을 통해 저만 에디터 페이지로 갈 수 있도록 구현할 계획입니다.

마크다운은 브라우저에서 바로 파싱되지 않기 때문에 mdx라는 라이브러리에다가 코드 하이라이팅을 해주는 shiki라는 mdx 플러그인을 사용하게 되었습니다.

그리고 Tailwind가 다크 모드를 지원해서 저도 진정한 개발자(?)처럼 다크 모드 지원을 추가하기로 마음먹었습니다.

현재 진행상황

일단 404/500 에러 페이지와 내비게이션 바, about 페이지가 완성되었습니다.

마크다운 에디터를 만들까 말까 결정을 내린 지 얼마 안돼서 아직 그 부분은 건드리지 않았는데 이 부분만 잘 해결되면 금방 끝날 것 같습니다.(물론 그럴리는...)

다크 모드도 토글 버튼을 통해 전환할 수 있도록 설정해 놓았습니다.

희망사항

사실 블로그 글을 잘 안 적고 있긴 한데..앞으로는 매주 적어도 한 개의 글을 올리는 것을 목표로 하려고 합니다.

댓글 기능은 따로 Commento라는 서비스를 통해 셀프 호스팅으로 구현할 계획입니다.

그리고 문제풀이 글을 제외한 글들은 영어로도 작성할까 고민이 돼서 그 부분은 어떻게 할지 고민해봐야 할 것 같습니다.

[팁|TIP] 맥OS에서 bits/stdc++.h 사용하기

Coder38611 — Thu, 8 Jul 2021 19:05:43 +0900

이번에 새롭게 알고리즘을 공부할 각오를 다지며 책을 샀는데, 첫 장에 떡하니 #include <bits/stdc++.h>가 있더라고요.

사실 이 헤더가 존재하고, 알고리즘 사이트와 대회에서 지원되는 경우가 많다고 들어서 전에 쓰려고 했다가 MacOS에서는 자동으로 설치되는 헤더가 아니라서 쓰려고 해도 헤더파일을 못찾는다고 나오더라고요.

그래서 어떻게 추가하는지 찾아보니 Xcode의 헤더파일 폴더 안에 넣는 방법이 가장 많이 떠서 이 방법을 시도해봤는데 여전히 헤더파일이 없다고 해서 2시간 정도의 학교 동아리 시간을 날렸습니다.

그러다가 유튜브를 찾아보니 /usr/local/include에 bits라는 폴더를 만들고 그 안에 stdc++.h 파일을 넣으라는 영상을 찾았습니다.

이 방법은 실행해보니까 인식은 하는 것 같은데 굉장히 긴 에러 메세지가 출력되서 순간 매우 당황했습니다.

그런데 에러 메세지를 보니까 제가 아까 Xcode 안에 있는 stdc++.h를 찾고 있더라고요?

확인해보니 제가 /usr/local/include/bits에 넣을때 Xcode의 헤더를 끌어와서 복사가 아닌 참조로 저장되어 있었는데 제가 Xcode 쪽 헤더를 그 뒤에 바로 지워버려서 없는 파일에 참조해서 에러가 나던 것이더라고요.

그래서 다시 파일을 만들고 실행해보니 잘 되었습니다.

순서:

*참고: 저는 Xcode와 homebrew가 설치되어 있으며 homebrew를 통해 gcc가 설치되어진 상태입니다.

**원래 중간에 using namespace std;가 아래 텍스트에 있는데 컴파일러에서 경고가 뜨길래(아마 두 번 선언해서 그런거 같아요) 지웠습니다.

터미널을 통해 cd /usr/local/include를 쳐서 해당 경로로 들어갑니다.
mkdir bits를 통해 bits라는 폴더를 생성합니다.
touch stdc++.h를 쳐서 stdc++.h라는 파일을 생성합니다.
원하는 에디터를 통해 아래 텍스트를 넣은 다음 저장하면 바로 사용할 수 있습니다

// C++ includes used for precompiling -*- C++ -*-

// Copyright (C) 2003-2013 Free Software Foundation, Inc.
//
// This file is part of the GNU ISO C++ Library.  This library is free
// software; you can redistribute it and/or modify it under the
// terms of the GNU General Public License as published by the
// Free Software Foundation; either version 3, or (at your option)
// any later version.

// This library is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// Under Section 7 of GPL version 3, you are granted additional
// permissions described in the GCC Runtime Library Exception, version
// 3.1, as published by the Free Software Foundation.

// You should have received a copy of the GNU General Public License and
// a copy of the GCC Runtime Library Exception along with this program;
// see the files COPYING3 and COPYING.RUNTIME respectively.  If not, see
// <http://www.gnu.org/licenses/>.

/** @file stdc++.h
 *  This is an implementation file for a precompiled header.
  */




  // 17.4.1.2 Headers

  // C
#ifndef _GLIBCXX_NO_ASSERT
#include <cassert>
#endif
#include <cctype>
#include <cerrno>
#include <cfloat>
#include <ciso646>
#include <climits>
#include <clocale>
#include <cmath>
#include <csetjmp>
#include <csignal>
#include <cstdarg>
#include <cstddef>
#include <cstdio>
#include <cstdlib>
#include <cstring>
#include <ctime>

#if __cplusplus >= 201103L
#include <ccomplex>
#include <cfenv>
#include <cinttypes>
#include <cstdbool>
#include <cstdint>
#include <ctgmath>
#include <cwchar>
#include <cwctype>
#endif

// C++
#include <algorithm>
#include <bitset>
#include <complex>
#include <deque>
#include <exception>
#include <fstream>
#include <functional>
#include <iomanip>
#include <ios>
#include <iosfwd>
#include <iostream>
#include <istream>
#include <iterator>
#include <limits>
#include <list>
#include <locale>
#include <map>
#include <memory>
#include <new>
#include <numeric>
#include <ostream>
#include <queue>
#include <set>
#include <sstream>
#include <stack>
#include <stdexcept>
#include <streambuf>
#include <string>
#include <typeinfo>
#include <utility>
#include <valarray>
#include <vector>

#if __cplusplus >= 201103L
#include <array>
#include <atomic>
#include <chrono>
#include <condition_variable>
#include <forward_list>
#include <future>
#include <initializer_list>
#include <mutex>
#include <random>
#include <ratio>
#include <regex>
#include <scoped_allocator>
#include <system_error>
#include <thread>
#include <tuple>
#include <typeindex>
#include <type_traits>
#include <unordered_map>
#include <unordered_set>
#endif

이렇게 생겼습니다.