YETI DOCS

Introduction

송성근
2024년 6월 4일
인사하는 예티
인사하는 예티

개인 기록용 문서입니다.

  • #AI #LLM #Full-stack
  • 솔루션을 찾아내는 개발자
🎂 1997.10.08
🏛️ 한양대학교 : 2016.02 ~ 2024.02
🗺️ 스트리스 : 2020.08 ~ 2021.12
🚕 카카오모빌리티 : 2021.12 ~ 2022.05
✉️ sel9371@gmail.com

⚙️ 기술 스택

💬 언어

  • Python
  • C++
  • Javascript
  • Java

📚 데이터베이스

  • PostgreSQL
  • MongoDB

🛠️ 프레임워크

  • Pytorch
  • React
  • Spring Boot
  • Nodejs
  • Three.js
  • Langchain

☁️ 클라우드

  • GCP
  • Docker

🎯 프로젝트

📚 문서

기존에 개발을 진행하면서 이전에 이용했던 기술에 대하여 다시금 사용해야 할 때가 종종 있었어요. 그럴 때마다 예전 코드를 보며 기억을 상기하는 것이 생각보다 불편한 경험이더라고요. 그래서 개발을 진행하며 공부한 내용이나 사용한 기술에 대해 정리하는 것이 필요하다고 느껴졌습니다.
해당 페이지는 Gatsby Theme Document site preview image 를 기반으로 생성되었습니다. Typescript로 이식하고 아키텍처를 변경하여 리펙토링을 진행하였어요.

🏗️ 폴더 구조

문서를 구성하는 컨텐츠는 아래와 같은 폴더 구조를 따라야 합니다.
1
  • contents/index 폴더에 존재하는 index.mdx 파일은 문서의 첫 페이지에 대한 내용을 나타냅니다.
  • subject 폴더에 존재하는 index.mdx 파일은 해당 주제에 대한 기본 페이지 내용을 나타냅니다.
  • subject 폴더에 존재하는 index.mdx 제외한 나머지 .mdx 파일은 해당 주제의 하위 항목으로 표시됩니다.
  • 각 페이지에 들어갈 이미지와 같은 데이터는 해당 페이지를 구성하는 .mdx 파일과 동일한 위치에 존재합니다.
  • elements 폴더에 .tsx 파일은 컨텐츠에 사용할 ReactNode들을 나타냅니다.

메인페이지 규칙

메인페이지의 메타데이터는 아래와 같은 형식을 가집니다.
1
  • 업데이트 내역에 맞춰 날짜를 수정합니다.
  • 해당 내용에 맞춰 README.md 파일도 함께 변경합니다.

컨텐츠 생성 규칙

컨텐츠 생성 규칙은 docs-contents 문서 site preview image 에서 자세하게 다룹니다.

Element 추가 및 사용

새로운 Element를 추가할 때 index.ts 파일을 아래와 같이 변경해야합니다.
1
추가한 Element는 아래와 같이 사용할 수 있습니다.
1

✨ 업데이트 내역

현재 버전 : 2.5.0

버전 2

2.5.0 업데이트
문서의 코드와 콘텐츠를 분리하여 관리하려고 합니다. 서로의 저장소를 분리하고, 문서에서 콘텐츠를 서브모듈로 사용하도록 구조를 수정하였습니다. 문서의 코드와 콘텐츠 내용을 독립적으로 관리할 수 있도록 변경하였습니다.
  • 문서의 코드와 콘텐츠의 저장소를 분리하였습니다.
2.4.4 업데이트
  • <mark> 태그의 배경 색을 연하게 변경하여 글씨가 더욱 선명하게 보이도록 수정합니다.
2.4.3 업데이트
  • 링크를 게시할 경우 링크의 내용을 미리보기 형식으로 보여줍니다.
2.4.2 업데이트
  • 이미지 하단에 캡션이 표시됩니다.
2.4.1 업데이트
  • 컨텐츠의 유형에 따라 메타데이터 구조가 변경됩니다.
2.4.0 업데이트
  • 컨텐츠 메인과 하위 내용 파일의 메타데이터 구조가 변경됩니다.
2.4.0 업데이트
기존의 폴더 구조는 컨텐츠에 들어가는 이미지와 같은 파일들이 상대 경로로 사용되었습니다. 또 컨텐츠가 주제 폴더에 종속적으로 존재해야 했습니다. 이를 각 컨텐츠와 이미지가 모두 독립적으로 존재할 수 있도록 폴더 구조를 변경하였습니다. 또한 페이지의 URL을 주제와 파일명을 통해 어느 정도 예측 가능하도록 변경하였습니다.
  • 컨텐츠의 폴더 구조를 변경하였습니다.
  • 페이지의 URL을 주제와 파일명에 의해 정해집니다.
2.3.1 업데이트
  • 2열로 나눠 작성하는 컴포넌트를 미디어 크기에 따라 1열로 보이도록 설정합니다.
2.3.0 업데이트
  • 콘텐츠 작성시 2열로 나눠서 사용할 수 있는 컴포넌트를 추가합니다.
  • 콘텐츠 작성시 자세히-요약 컴포넌트를 추가합니다.
  • 콘텐츠 작성시 카드 컴포넌트의 제목이 일정 크기를 초과할 경우 줄임표를 사용하도록 변경합니다.
2.2.0 업데이트
  • 컨텐츠 비공개 옵션이 추가됩니다.
  • 컨텐츠 날짜를 설정할 수 있도록 변경하였습니다.
2.1.1 업데이트
  • 좌측 사이드바에 스크롤 기능이 작동하지 않던 현상이 수정됩니다.
2.1.0 업데이트
  • 좌측 사이드바에 구분선 항목을 추가합니다.
  • 좌측 사이드바에 하위 목록의 갯수를 표시합니다.
2.0.0 업데이트
기존 Gatsby Theme Document는 Gatsby V2 최신 버전의 패키지를 추가하는 부분에서 어려움을 겪었습니다. 이에 추후 확장성을 위해 최신 버전으로 업그레이드가 필요하다고 판단하여 Gatsby V5로 업데이트를 진행하였습니다. 버전의 차이가 크게 났기 때문에 많은 변경 사항이 발생하였고 호환되지 않는 부분이 많아 대부분의 기능을 새로 작성해야 하는 소요가 발생하였습니다. 이 기회에 기존의 javascript 기반으로 이루어진 모듈을 typescript 기반으로 변경하여 효율 또한 높이고자 하였습니다. 이에 따라 현재까지 작성한 문서의 일부가 기존 형식과 맞지 않을 수 있습니다.
  • Gatsby v5, Typescript 기반으로 변경하였습니다.
  • 모든 컴포넌트를 Atomic Design 패턴에 맞춰 새로 구성하였습니다.
여러 기기에서 사용할 수 있도록 화면 크기에 따라 더욱 부드럽게 레이아웃을 변경하였습니다. 또한 일부 기능을 추가하였습니다.
  • 테마가 Light, Dark 두 가지로 변경됩니다.
  • 좌측 사이드바의 하위 목록이 부드럽게 나타나도록 변경하였습니다.
  • 화면 크기가 변경함에 따라 좌우 사이드바가 축소하고 확장하도록 변경하였습니다.
  • 좌측 사이드바가 축소하였을 때 생성되는 메뉴 버튼이 부드럽게 나타나도록 변경하였습니다.
  • 문서 내용의 넓이를 확장 축소하는 버튼을 추가하였습니다.
  • 인스타그램 버튼을 추가하였습니다.
.mdx파일을 사용하여 생성된 내용들의 UI에 많은 변화를 주었습니다. 기본적으로 github의 스타일과 비슷하게 유지하였고, 일부는 문서 양식에 맞게 변경한 부분도 있습니다.
  • 문서 제목 부위에 유저와 수정된 날짜가 표기됩니다.
  • Heading의 크기와 구분선의 위치가 변경됩니다.
  • 기존 인용 블럭이 작동되지 않던 오류를 수정하였습니다.
  • 기존 붉은 글씨로 변하던 Code 형식이 이와 같이 표현됩니다.
  • Code Block이 Dark 테마에 맞춰 색을 변경합니다.

버전 1

1.1.3 업데이트
  • 일부 프로그램 언어에 대해서만 라인 넘버를 표시하도록 변경하였습니다.
1.1.2 업데이트
  • 모듈을 불러올 때 절대 경로를 사용하게 변경하였습니다.
1.1.1 업데이트
  • 컨텐츠 내용이 화면 사이즈에 맞춰 변화하도록 변경하였습니다.
  • 일정 길이 이상의 컨텐츠 목차에 대해 줄임표를 생성하도록 변경하였습니다.
1.1.0 업데이트
인터페이스 개선을 하였습니다.
  • 우측 사이드바 목록에 타이틀 계층 구조를 따라 표시합니다.
  • 코드 블럭의 가독성을 높이기 위해 스타일을 변화시켰습니다.
  • 컨텐츠 폴더 구조를 독립적으로 변경하였습니다.
1.0.0 업데이트
프로젝트를 진행하며 공부한 내용이나 개발 과정등을 기록으로 남기기 위해 블로그를 개설합니다.
당장 필요한 혹은 개발 소요가 크지 않은 기능을 우선적으로 추가하였습니다.
  • 컨텐츠에 수식을 입력할 수 있습니다.
  • 좌측 사이드바 목록이 오름차순으로 정렬되어 보여집니다.
  • 좌측 사이드바 하위 목록을 가진 컨텐츠의 기본 상태가 접힌 상태가 됩니다.