[ 목차 ]
배경
연동 규격서나 다양한 정보를 모아놓은 자료실을 만들고 있다. 마크다운 정보를 DB에 넣고 자료를 관리하여 홈페이지에 내용을 띄울때는 자동으로 html로 변환하는 내용이였다.
하지만 바뀐 내용으로 정보의 양은 많지 않고 view ejs 부분 내용만 바꾸면 되기 때문에 서버를 재부팅할 필요없어 그냥 프로젝트에 정보를 넣어놓는 방식으로 바꾸기로 하였다.
그러나 ejs를 사용하면서 라우터 문제나 한 페이지 뷰를 만들기 위해서 프로젝트 구조상 index.ejs, js등 총 4개의 페이지를 새로 만들어야 한다는 문제점이 발생하였다. 만일 이 문제를 해결하지 않는다면 자료실에 1개의 내용을 추가한다면 4개의 페이지를 추가하거나 수정해야 한다는 문제점이 있어 .md 파일을 미리 만들어 놓고 자료실 페이지에서 이 텍스트 문서를 읽어와 페이지에 뿌리는 방법을 생각하여 사용하기로 하였다.
html구조
<!DOCTYPE html>
<html>
<head>
<title>Markdown Viewer</title>
</head>
<body>
<div id="out" class="markdown-body">
<!-- 여기에 Markdown 내용을 표시할 것입니다. -->
</div>
<button onclick="loadContent(1)">내용 1</button>
<button onclick="loadContent(2)">내용 2</button>
<button onclick="loadContent(3)">내용 3</button>
<button onclick="loadContent(4)">내용 4</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.1.0/markdown-it.min.js"></script>
JavaScript 구조
<script>
// .md 파일의 경로 배열
const mdFiles = [
'../content1.md',
'../content2.md',
'../content3.md',
'../content4.md'
];
// .md 파일을 불러오고 표시하는 함수
function loadContent(index) {
if (index >= 1 && index <= mdFiles.length) {
const fileName = mdFiles[index - 1];
fetch(fileName) // .md 파일 경로를 지정합니다.
.then(response => response.text())
.then(markdownText => {
// .md 파일 내용을 Markdown으로 변환하여 표시합니다.
const md = window.markdownit({ html: true });
const resultHTML = md.render(markdownText);
document.getElementById("out").innerHTML = resultHTML;
})
.catch(error => {
console.error('Error fetching .md file:', error);
});
}
}
// 초기 .md 파일을 로드합니다.
loadContent(1);
</script>
JavaScript 코드 설명
.md 파일의 경로 배열: Markdown 파일의 경로가 들어 있는 배열을 정의한다. 각 파일은 'content1.md', 'content2.md' 등과 같이 상대 경로로 지정.
loadContent(index) 함수: 버튼 클릭 이벤트에서 호출되며, 선택한 Markdown 파일을 로드하고 렌더링
fetch(fileName): fetch 함수를 사용하여 선택한 Markdown 파일을 가져온다.
.then() 메서드를 사용하여 성공적으로 파일을 가져왔을 때, 해당 Markdown 파일을 텍스트로 변환하고 Markdown으로 렌더링한다.
window.markdownit({ html: true }): markdown-it 라이브러리를 사용하여 Markdown 텍스트를 HTML로 변환. 변환된 HTML을 document.getElementById("out").innerHTML을 통해 div 요소에 삽입하여 Markdown 내용을 웹 페이지에 표시한다.
loadContent(1);: 초기로드를 위해 페이지가 로드될 때 loadContent 함수를 호출하여 첫 번째 Markdown 파일을 표시한다.
위 내용은 기본적인 내용이며 추가로 필요한 js, css 등 많은 코드가 있다. 이는 내가 문제를 조금이라도 편하게 해결하기 위해 그저 정리한 틀일 뿐이다.
'업무 기록 > WEB' 카테고리의 다른 글
| SpringBoot, Node Express JS 활용한 세션으로 페이지 변경 (0) | 2023.11.10 |
|---|---|
| 프로젝트 요약 정리 SpringBoot 와 Node ExpressJs (1) | 2023.10.21 |
| 자바스크립트 마크다운 검색창 만들기 (0) | 2023.09.08 |
| 자바스크립트 이용한 마크다운 자동 목차 만들기 (0) | 2023.09.07 |
| JSP 모달창 버튼 출력 조건 (0) | 2023.08.30 |
