정상우
hELLO.
정상우
전체 방문자
347,891
오늘
976
어제
691
  • hELLO. (120)
    • 컴퓨터과학 (4)
      • 알고리즘 & 자료구조 (4)
    • 언어 & 프레임워크 (63)
      • Go (23)
      • PHP & Laravel (40)
    • 웹 (7)
    • 블록체인 (12)
      • 메인넷 (9)
      • 암호화폐 플랫폼 (3)
    • 포트폴리오 (10)
    • 칼럼 (19)
      • 에세이 (4)
      • 개발자스럽게 살기 (13)
      • 회고 (2)
    • 티스토리 (5)

블로그 메뉴

  • ⚡ 개발자 이력서
  • 🌟 깃허브
  • 💻 강의
  • ✨ 예제코드
  • ⭐ 브런치
  • 태그 클라우드
  • 방명록

공지사항

  • 2차 도메인을 설정했습니다 ✨

인기 글

  • [Laravel] 라라벨 프레임워크⋯
    2021.06.10
    [Laravel] 라라벨 프레임워크⋯
  • 'REST' 를 보다 'RESTful' 하게⋯
    2021.08.14
    'REST' 를 보다 'RESTful' 하게⋯
  • JWT(JSON Web Token)의 개념부⋯
    2021.07.29
    JWT(JSON Web Token)의 개념부⋯
  • 깃허브를 포트폴리오로 쓰려면⋯
    2021.12.25
    깃허브를 포트폴리오로 쓰려면⋯
  • 암호화폐 트레이딩 봇을 만들었⋯
    2021.05.12
    암호화폐 트레이딩 봇을 만들었⋯

태그

  • 개발
  • go
  • 블록체인
  • 프로그래머스
  • Algorithm
  • 포트폴리오
  • 코딩테스트
  • 개발 리뷰
  • 라라벨
  • php

최근 댓글

  • 공유해주셔서 감사합니다:)) 덕⋯
    wanderlust_sol
  • 감사합니다 ~~ :)
    정상우
  • 고맙습니다 :)
    정상우
  • 자료 받으면서 원래 댓글 잘 안⋯
    뷰스토리_
  • 다크모드 지원하는 스킨 찾고⋯
    PilTok

최근 글

  • 개발자와 엔지니어, 그 사이에서
    2022.05.10
    개발자와 엔지니어, 그 사이에서
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.03
    아임포트(Iamport)로 결제기능⋯
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.01
    아임포트(Iamport)로 결제기능⋯
  • [Laravel] 카페24 호스팅에 라⋯
    2022.03.29
    [Laravel] 카페24 호스팅에 라⋯
  • 2021년 회고―, 성찰
    2021.12.31
    2021년 회고―, 성찰

티스토리

hELLO · Designed By 정상우.
정상우

hELLO.

@nuxt-content  로 티도리 프레임워크 공식문서 개발하기
포트폴리오

@nuxt-content 로 티도리 프레임워크 공식문서 개발하기

2021. 11. 6. 00:57
티도리 프레임워크 공식문서 [https://tidory.com]

최근 진행하고 있는 사이드 프로젝트가 있어서 블로그 글이 뜸했는데, 프로젝트를 정리하면서 오랜만에 티도리 프레임워크의 공식문서인 tidory.com 의 다크 모드도 추가 겸하여 보수를 진행하고, 그에 대한 개발기를 써보기로 했다. Vue.js 의 SSR 프레임워크인 Nuxt.js 을 사용했지만, 만들어놓고 벌써 4년여의 시간이 지난터라 버전을 1.0 에서 2.x 로 업그레이드를 해보면 어떨까 싶어 진행하기로 했다. 게다가 기존의 코드도 영 마음에 들지 않는게 있었기 때문에 덤으로 리팩터링하기로 했다.

프론트엔드가 그저 취미인 내게는 리액트보다는 Vue.js 가 훨씬 더 간결하고 사용하기 좋다.


https://github.com/tidory/tidory.com

GitHub - tidory/tidory.com: 티도리 프레임워크 공식 문서

티도리 프레임워크 공식 문서. Contribute to tidory/tidory.com development by creating an account on GitHub.

github.com

nuxt/content

Nuxt.js 2.x 는 기존의 1.0 과 사용법이나 템플릿, 디렉터리 구조의 측면에서는 큰 차이가 없었지만, 새로 구성하면서 눈에 들어온 것이 있다면 바로 nuxt/content 라는 모듈이다. 원래는 문서의 본문을 .vue 로 관리하고 있던터라 이를 .md 로 변경하기 위해 markdown-it 과 같은 것을 사용하여 처리할까 생각했었는데, 마침 내 요구조건을 충족하는 모듈이 존재하여 그럴 필요가 없어졌다.

nuxt/content 는 문서나, 블로그를 구축하기에 적합한 구성을 가지고 있는데, 이를 사용하면 깃허브 블로그를 구성함에 있어서는 상당히 괜찮은 선택지가 될 수 있으리라 생각된다. 애초에 소개 문구조차 CMS(Content Management System) 라고 이야기한다.

a Git-based Headless CMS


포스트를 편하게 작성하기 위해 UI 를 별도로 제공하지는 않으며, 글을 쓰려면 content 에 .md 파일을 직접 만들고 이미지와 같은 정적 파일도 static 에 넣어서 git 에 직접 Push 를 해야하기는 한다. 이게 불편해보일지는 몰라도 사실은 지극히 개발자스럽기 때문에 내게는 오히려 좋다. 아마 내가 티스토리를 사용하지 않았다면 선택지에 있었을 듯하다.

https://content.nuxtjs.org/

Introduction

Empower your NuxtJS application with the @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS.

content.nuxtjs.org

nuxt/content 는 문서, 블로그 게시글을 작성할 때 상당히 적합하며 페이지의 레이아웃이나 틀은 기본적으로 .vue 로 구성하지만, 문서의 내용 자체는 .md 을 사용하여 구성할 수 있도록 되어있다. 게다가 마크다운에서 Vue Component 를 사용할 수도 있다(!)

마크다운 뿐만 아니라 추가적인 확장 기능도 제공하는데, 공식 홈페이지에도 나와있듯이 제목에 알아서 구성해주는 TOC(Table of Content), 페이징을 할 수 있도록 이전/다음 페이지에 대한 링크와 PrismJs 를 사용한 코드 하이라이트와 같은 기능들이 이미 내장되어 있어서 우리가 직접 관련 패키지를 설치할 필요도 없다.

문서에 작성자, 제목, 커버 이미지와 같은 사용자 정의 메타 정보(Front Matter)를 기입할 수도 있어서 컨텐츠를 구성하기에 있어서는 크게 제약은 없다. nuxt/content 에 대한 튜토리얼에서는 블로그를 만드는데 있어서 큰 도움이 된다.

https://nuxtjs.org/blog/creating-blog-with-nuxt-content

Create a Blog with Nuxt Content

The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and di

nuxtjs.org

마땅히 디자인하기 귀찮다면, 이미 디자인된 테마를 사용할 수도 있을 것이며, nuxt/content 에는 그러한 테마를 제공하고 있다. tidory.com 에서는 별도의 디자인을 사용하고 있기때문에 그 테마를 쓰지는 않았다.

마치며

코드에 대한 내용없이 왜 벌써 마치는지 의아할 수도 있는데, tidory.com 은 nuxt/content 를 사용했다는 점 이외에는 이야기 할만한 것이 없다. 더군다나 nuxt/content 를 소개하는 포스트도 아니기 때문에 내용이 짧을 수 밖에 없다. 대부분의 내용은 공식 문서를 보고 구현되었고, 그렇다고 특별히 설계된 부분도 별도로 없기 때문이다.

nuxt/content 를 추가하면서 얻은 이점이라면, 문서의 본문에 대한 부분을 .vue 에서 .md 로 관리할 수 있게 되어 코드가 깔끔해졌다는 점이다. 덕분에 페이지 컴포넌트(Page Component)를 건드리지 않고도 .md 를 편집하는 것만으로 문서를 수정할 수 있게 되었다. 설령 새로운 문서를 추가한다고 해도 새로운 페이지 컴포넌트를 만들지 않아도 된다는 점은 정말 좋은 일이다.

    '포트폴리오' 카테고리의 다른 글
    • 암호화폐 트레이딩 봇을 만들었다 (feat. 업비트)
    • 티스토리 구독 서비스 티네스(Tines) 개발 돌아보기
    • 티스토리 스킨을 원격으로 조작할 수 있다? 티스토리 스킨 API 만들기
    • 티스토리 스킨 프레임워크, 티도리는 어떻게 동작할까?
    tidory, tidory/tidory.com, 공식 문서, 티도리 프레임워크
    정상우
    정상우
    과거의 배움으로 현재를 바꾸고 미래를 만듭니다. #25+2살 #INFJ #개발자 #브런치작가
    댓글쓰기
    다음 글
    내가 오픈소스를 바라보는 관점(feat. Apache log4j)
    이전 글
    개발자를 넘어, 새로운 길로
    • 이전
    • 1
    • ···
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • ···
    • 120
    • 다음

    티스토리툴바