본문 바로가기

테크니컬 라이팅

goormide에서 Markdoc HTML 템플릿 테스트하기

반응형

요즘 간단한 도구 테스트 시에는 goormide를 사용하고 있습니다. 무료 계정에서 컨테이너를 5개까지 만들 수 있어서 자주 테스트하는 건 만들어놓고 임시로 테스트하는 것은 만들어서 확인하고 삭제해버리고 있습니다.

이번에는 Markdoc HTML 템플릿 실행을 goormide 환경에서 테스트해보았습니다.

 

컨테이너 생성 및 환경 설정

Markdoc를 사용하는 방법은 몇 가지가 있는데 HTML 템플릿을 사용하는 방법과 Next.js, React를 사용하는 방법입니다. HTML 템플릿을 사용하는 방법은 좀 원초적이긴 하지만 다른 도구에 대한 기본적인 지식 없이도 사용할 수 있어서 사용해보았습니다.

 

goormide에서 아래와 같이 설정한 후 컨테이너를 생성합니다.

(2022. 5. 17. 기준입니다. 옵션은 달라질 수 있겠죠).

템플릿: 기본 템플릿
배포: Not used
소프트웨어 스택: Node.js
Template: Node.js 빈 프로젝트
추가 모듈/패키지: Node.js 버전 16.x로 업그레이드

추가 모듈/패키지를 선택하면 좀 더 시간이 걸립니다. 

Node.js 기본 설치는 10.16.3인데 기본으로 설치하면 실행 시 오류가 나더라구요~

소프트웨어 스택을 'Node.js'로 선택하면 Express3, Express4도 기본 이미지로 설정이 됩니다.

 

작업을 위해서는 WebPack 설치도 필요하기 때문에 WebPack을 설치합니다.

음. WebPack은 예제 프로젝트 설정 후 install 에서 처리하더군요. 아래 설치는 하지 않아도 됩니다.

 

npm install --save-dev webpack
npm install --save-dev webpack-cli

 

예제 프로젝트 설정

markdoc 저장소(https://github.com/markdoc/docs)에서 코드를 내려받습니다.

그리고 컨테이너 실행 환경에서 프로젝트창 > Import > Folder 를 선택하고 exmples 폴더 아래에 html-nodejs 폴더를 선택합니다.

폴더를 옮기고 나서 터미널에서 해당 폴더로 이동한 후 install 명령을 실행하면 WebPack 설치 등 필요한 설정을 처리합니다.

npm install

 

 

그리고 앱 실행 시 기본 4242 포트로 동작하고 있어서 Project > Running URL and Port 항목에서 기본 등록된 Port를 4242로 변경해줍니다.

 

 

예제 프로젝트 실행

터미널에서 아래 명령으로 빌드 후 실행합니다. 

npm run build
npm run start

 

설정한 URL을 실행하면 아래와 같은 결과를 볼 수 있습니다.

 

 

참고

'Using Markdoc with HTML and Web Components'라는 문서에서 설명하는 내용입니다.

대략 이런 식으로 동작한다는 설명이라서 실제 실행은 저장소에 있는 예제와 가이드를 참조해야 합니다.

예제를 한번 실행해보고 관련 문법과 기능을 공부한 후 확인하는 식으로 접근하면 좋을 듯합니다.

https://markdoc.io/docs/examples/html

 

A powerful, flexible, Markdown-based authoring framework

From personal blogs to massive documentation sites, Markdoc is a content authoring system that grows with you.

markdoc.io

 

728x90