<Teddistory dev />
🌙
💻 Tech

Teddistory를 시작합니다

draft
draft
date
Aug 12, 2023
slug
first-post
author
status
Public
type
Post
category
💻 Tech
tags
Blog
Next.js
Notion
summary
blog commit -m “First Post”
thumbnail
og_image.png
updatedAt
Sep 2, 2023 01:08 PM

김테디의 기술 블로그, Teddistory

안녕하세요:D 4년차 Front-end 개발자 겸 대학교 3학년에 재학 중인 김만수 (Teddy) 라고 합니다. 제가 본격적으로 개발 공부를 시작했던 게 2019년인데, 개발을 시작하고 4년만에 기술 블로그를 만들게 되네요.
 
그동안 기술 블로그를 만들어야겠다는 생각은 꾸준히 가지고 있었습니다. 인프런 CTO 이동욱 님의 “기억보단 기록을”, 그리고 벨로퍼트 님의 “VELOPERT.LOG” 를 비롯해 엄청난 개발자 분들의 기술 블로그를 참고하면서 정말 많이 배우고 인사이트를 얻었었고, 저 또한 나중에 다른 개발자 분들께 조금이라도 도움이 될 수 있는 블로그를 운영할 수 있으면 좋겠다는 꿈을 가졌었습니다.
 
저와 함께 일을 하시는, 일을 해 봤던 분들이 모두 공통적으로 언급해주시는 제 특징이 있는데, 그 중 가장 많이, 그리고 가장 먼저 언급되는 특징이 바로 “실행력” 입니다. 20년도에 신입 개발자로서 개발자 생활을 시작한 지 얼마 안 되었던 저는 Front-end 개발을 본격적으로 시작한 지 얼마 되지 않아 바로 꿈을 실현하고자 기술 블로그 구현과 관련해 리서치를 시작합니다 🔥
 

기술 블로그를 시작해보자

기술 블로그를 구글에 검색했을 때 가장 많이 만난 플랫폼은 크게 3가지였습니다.
  • Github Pages + Jekyll
  • Velog, Medium
  • Tistory
 
과거 기술 블로그를 운영하려고 마음 먹고 처음으로 시도했을 때 제가 선택한 플랫폼은 Github Pages + Jekyll 이었습니다. 이유는 간단했습니다.
🤔
Front-end 개발자인데 그래도 CSS, JS로 직접 페이지 디자인하고 예쁘게 구현해야지
굉장히 잘못된 판단이었습니다. Jekyll을 활용해 블로그를 구현하기 위해서 구글링을 해 하나씩 구현하다보면 어느 순간 Ruby 언어를 마주하고 있고, bundle이라는 걸 설치하고 있고, 문서 작성도 markdown 으로 해야 했습니다. 당시 기술 블로그를 구현하면서 개발 공부도 가성비 있게 함께 처리해야지! 라고 행복 회로를 돌리던 저는 몇 시간 만에 멀지 않은 미래의 제가 블로그와 점점 사이가 멀어질 것이라는 걸 직감했습니다.
 
(처음으로 기술 블로그 구현을 시도했을 때에도, 지금 이 글을 작성하면서도 어느정도 공감하는 부분입니다 🥲)
notion image
 
그렇게 기술 블로그와 잠시 멀어진 저는, 3년 간 데이팅 어플 “아만다”를 서비스 하는 테크랩스, 그리고 뷰티 샵 B2B SaaS “공비서”를 서비스 하는 헤렌에서 매일 정신 없이 개발하며 하루하루를 보내던 저는 우연치 않게 기술 블로그 구현의 필요성을 두 번째로 느끼게 됩니다.
 
헤렌에서 저는 다양한 업무를 담당하고 있는데, 회사 홈페이지 유지보수가 그 중 하나입니다. CP (Culture & People) 팀과 수시로 소통하며 회사 홈페이지 내부 디자인, 내용을 수정하던 저에게 기술 블로그 고도화와 관련된 문의가 들어오고, 현재 헤렌 기술 블로그의 구현 방식으로는 요구 사항을 만족시키기 어렵겠다는 판단이 든 저는 새로운 기술 블로그 구현 쪽으로 리서치를 진행했습니다.
 
새로운 기술 블로그 구현에 있어 제가 가장 중요하게 생각한 부분은 다음과 같았습니다.
  • 요기요, 화해 팀 기술 블로그처럼 트렌디(?) 한 디자인을 구현할 수 있어야 한다.
  • 개발파트 구성원 뿐만 아니라 사내 구성원 누구든 편하게 작성할 수 있어야 한다.
    • Markdown 문법은 되도록 지양하자.
    • 기술 블로그를 포함해 헤렌의 대부분 문서는 Notion으로 작성되고 있어 구성원들에게 가장 익숙한 Tool은 Notion이다.
 
이 두 가지 요건을 종합했을 때, “Notion으로 작성한 데이터를 새롭게 구현할 기술 블로그 페이지에서 읽어온 후, 데이터를 우리가 원하는 포맷으로 정제해서 보여주자” 로 기술적 요구사항을 정리할 수 있었고 진행이 가능한지 확인하기 위해 제 개인 기술 블로그를 구현해 보는 식으로 PoC를 진행하게 됩니다 (?).
 
그렇게 퇴근하고 틈틈이 구글링을 하던 저는 요구사항에 부합하는 레퍼런스와 자료를 찾게 되고, Teddistory는 세상에 나오게 되었습니다 🙌
 

Teddistory는 이렇게 구현되었어요

Teddistory는 Next.js 기반으로 구현되었고, 제 개인 Notion의 Database에 Notion 페이지로 글을 작성하고 Vercel로 배포하면 Server-Side에서 Notion Database의 데이터를 읽어온 후 정제하여 Feed와 상세 Post로 보여주는 방식으로 동작하고 있습니다. morethan-log 프로젝트를 기반으로 커스터마이징을 진행하고 있어요.
 
기술 스택은 다음과 같습니다.
  • Next.js 13.4
  • React 18+
  • Notion Client / react-notion-x
  • Emotion
  • React-Query
  • Axios
  • Vercel
  • AWS Route 53
 
하단에 첨부되어 있는 스크린샷과 같이, Notion Database에 미리 세팅되어 있는 Scheme에 맞춰 데이터를 입력 후 Vercel을 활용해 배포합니다. 이 때 slug 를 잘 설정해야 해요. slug 값이 곧 기술 블로그에서 포스팅의 Path가 되기 때문입니다.
notion image
Private 상태의 글들은 작성해야지 마음은 먹어 시작이 반인 상황의 친구들입니다. 곧 만나요 ✨
 
기술 블로그의 글은 업데이트가 빈번하게 발생하지 않습니다. 따라서, 블로그 배포 과정 중 Build 타임 때 내부 페이지별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 해당 페이지를 반환해주는 SSG (Static-Site-Generation) 방식을 활용하고 있어요. 이 때, pages 디렉토리 내부에 [slug].tsx 와 같이 포괄 경로를 사용하는 페이지가 있을 경우 Next.js는 매개 변수를 배열로 받아 페이지를 정적으로 생성하는데요. 이 때 매개 변수 배열에 바로 Notion Database의 slug 값이 활용된답니다 ⭐️
 
Teddistory의 경우, Feed 페이지 (Index 페이지)는 getStaticProps로, Feed 페이지에 리스트 형식으로 출력되어 유저가 클릭 시 상세 페이지로 이동하는 Post의 경우에는 Post에 따라 url이 달라지기 때문에 getStaticPaths 로 구현되어 있어요.
Rendering: Static Site Generation (SSG)
Use Static Site Generation (SSG) to pre-render pages at build time.
Rendering: Static Site Generation (SSG)
https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation
Rendering: Static Site Generation (SSG)
 
추가적으로, 본격적인 기술 블로그 운영을 위해 meta 태그를 포함한 SEO 세팅, Google Search Console을 활용해 도메인 등록 및 색인 요청을 진행해 구글에서 “김테디의 기술 블로그” 를 검색하면 페이지가 보이고 Slack, 카카오톡과 같은 SNS 서비스에서 링크 전송 시 페이지 정보가 출력되도록 구현했습니다. GA4 (Google Analytics)를 연동해 블로그 방문자 수 추이 등 웹 분석을 진행할 예정이며, Utterance를 연동하여 포스팅에 대해 다양한 의견을 나눌 계획이에요 😎
notion image
notion image
 

마무리하며

이렇게 개발 생활 4년만에 갑작스럽게 기술 블로그 운영을 시작하게 되었습니다. 대다수의 기술 블로그는 기술적인 인사이트나 문제 해결 과정을 기술적으로 풀어나가는 데 초점이 맞춰져 있다고 생각이 드는데요. Teddistory는 기술 블로그 보다는 기술과 관련되어 있는 제 다양한 일상을 기록하고, 이런 캐릭터의 개발자도 있구나 라는 관점을 제시해주는 일상 블로그처럼 운영할 계획을 가지고 있습니다 🫠
 
개발자 생활을 하면서 “테디는 개발자 느낌이 잘 안 나요. 10년 넘게 이 업계에서 PM으로 일하면서 이런 캐릭터는 처음 보는 것 같아요. 좋은 느낌으로 정말 신선해요.” 라는 피드백부터 “테디님은 연차에 비해 엄청 다양한 이슈들을 접하시고 해결해 오셨는데, 어떻게 해결했는지 접근한 관점이랑 프로세스를 기술 블로그로 기록해 주시면 안 될까요? 보면 정말 도움이 많이 될 것 같아요”, “테디님처럼 개발과 함께 외부 컨퍼런스나 네트워킹 모임, 커피챗도 챙겨서 병행해서 해 보고 싶어요. 어떻게 준비했는지 알 수 있을까요?” 와 같은 질문들, 요구사항을 많이 받았어요.
 
개발 실력은 많이 부족하지만, 연차에 비해 다양한 분야의 경험을 해 보고 DevRel 활동을 포함해 다양한 직군에 속해 있는 분들과 원활하게 커뮤니케이션을 할 수 있는 게 저만의 장점이라고 생각합니다. 그래서 블로그의 글도 기술에만 치중하지 않고 개발과 관련되어 있다면 어떤 분야든 다양하게 작성하고자 합니다.
 
앞으로 개발자 생활을 하면서 겪는 다양한 이슈, 그리고 새로운 지식부터 시작해서 DevRel 활동, 컨퍼런스 / 네트워킹 참여 후기, 그리고 다양한 일상까지 열심히 글과 기록으로 남겨 보도록 하겠습니다!
Teddistory Let’s Go 🔥
← Back↑ Top