---
layout: post
title: "typescript source file을 문서화하기"
date: 2021-06-23 15:00:00
author: 고윤호
categories: Technology
tags: typescript, documentation, package
cover: "/assets/2021-06-23/documentation.jpg
---
Happy Hacking!! 💻
저는 비브로스 백엔드팀 개발자 고윤호입니다. 팀에서 typescript, 계정 및 인증 관련 서비스, 라이브러리 관리 등을 주로 담당하고 있습니다.
이번에 비브로스에서 새로운 라이브러리를 선보이게 돼서 간략한 설명과 함께 소개해드리고자 합니다.
비브로스 백엔드 팀은 서비스 운영을 위해서 많은 mongoose 스키마와 API 인터페이스를 관리하고 있습니다.
현재까지 백엔드 팀에서 사용하고 있는 Mongoose의 스키마 정의는 Confluence 문서에 사람이 직접 작성, 수정하는 형태라 누락되거나 오기입 될 수 있었습니다. 때문에 스키마를 정의하면 Mongoose Schema와 Interface, Confluence 문서 세가지를 생성, 수정하기 때문에 관리 포인트도 늘어나고 정보가 상이할 경우 대조, 추적해야하는 번거로움도 있었습니다.
이를 해결하기 위해서 비브로스에서는 Typescript Interface를 분석하여 markdown 파일로 내보내주는 라이브러리를 작성하였고 이제 여러분들에게 소개해드립니다. 👏
typescript를 이용한다는게 무슨 의미일까요? typescript는 그 자체로 TS compiler 역할을 수행하기도 하지만 휼륭한 TS Source Parser이기도 합니다. 종종 typescript 패키지를 이용하시면서 내부 패키지를 열어보시면 const ts = require('typescript') 이런 코드가 있는 것을 보실 수 있으실텐데요. 별도 외부 라이브러리 없이 typescript를 분석하거나 코드를 수정하실 수 있습니다.
typescript를 sourcefile을 분석하면 Typescript AST를 얻을 수 있습니다.
AST란? Abstract Syntax Tree. 프로그래밍 언어로 작성된 소스코드를 Node의 Tree 구조로 표현한 객체라고 생각하시면 됩니다. 자세한 내용은 링크를 살펴보세요.
typescript답게 AST 객체도 정형화된 객체들이 이미 typescript 안에 각 type별로 정의되어 있습니다.
파일 경로를 통해 바로 분석된 AST를 얻는 방법은 찾지 못했지만 createSourceFile 함수를 통해 파일 경로에서 읽어온 파일 내용을 넣어주면 분석된 AST를 얻을 수 있습니다.
import * as ts from 'typescript';
import * as path from 'path';
const sourceFilePath = '...' // .ts 타입스크립트 소스파일 경로
const file = ts.sys.readFile(sourceFilePath); // source file 내용 불러오기
const {name} = path.parse(sourceFilePath); // source file에서 파일 이름만 parse
const node = ts.createSourceFile(name, file, ts.ScriptTarget.Latest); // AST 생성
AST 객체 안에는 다양한 Node 개념들이 있습니다. 여기서 일일이 다 설명 드릴 수 없을 정도로 다양한 Node 들이 있으며 그 하위에는 Type Node, Token 등 개념들이 등장합니다. 이에 대한 자세한 문서를 찾을 수 없어서 작업을 하며 개인적으로 추측한 정보를 정리하면 아래와 같습니다.