먼저 개발중인 pagenation에 대해 쓰는게 맞지만, 귀찮아서 지금 하고 있는 위키 기능부터 블로그에 포스팅합니다
위키 기능 관련해서 포스팅 될 주제는 3가지로 아래와 같습니다
1. 간단하게 마크다운 파싱 테스트
2. 위키 문서 정의 및 db 스키마 설계
3. crud api 만들기
오늘은 이 중 첫번째인 간단한 마크다운 파싱 테스트를 오전에 진행했습니다
먼저 마크다운 형식의 텍스트를 파싱하는 곳은 clien side로 정했습니다
서버쪽에서 더이상의 부담을 주기 싫었고, js에서 충분히 해결 할 수 있는 부분이라 이렇게 결정했습니다
이를 위해 메모장을 이용해 아주 간단한 html문서를 작성했고, plain text(markdown 형식의)를 js 스크립트를 이용, html 형식으로 파싱하는 실습을 했고, 실제 서버단에서 model을 이용해 client로 보낸 텍스트 파일을 파싱하는 실습을 진행했습니다
https://jung-max.github.io/2019/09/27/Web-Javascript-MarkDown구현/
Javascript로 Markdown 파서 구현하기
이번에는 javascript로 markdown 파서를 구현하는 것을 살펴보겠습니다. html일단 html 부분을 살펴보겠습니다.간단히 입력부분은 aside로 contenteditable 옵션을 줘서 수정 가능하게 했습니다.그러고 출력
jung-max.github.io
위 블로그를 보며 첫번째 실습을 진행했고, 본격적으로 https://github.com/markedjs/marked 를 참고하여 두번째 실습을 진행했습니다
실습에 진행한 내부 컨트롤러는 아래와 같습니다
@GetMapping("/home")
String index(Model model) {
String str = "## Marked in the browser Rendered by **marked**.";
model.addAttribute("tmp",str);
return "index";
}html파일은 아래와 같습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="content" th:text="${tmp}" />
<div id="content2"></div>
<input type="button" id="btn" onclick="A()">
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
function A() {
var trg=document.getElementById('content');
document.getElementById('content2').innerHTML = marked(document.getElementById('content').innerHTML);
}
</script>간단하게 버튼을 누르면 파싱하는 실습을 진행했습니다
결과 화면은 아래와 같습니다
'개발' 카테고리의 다른 글
| id generator 개발하기 - 2 (타임스탬프) (0) | 2021.09.22 |
|---|---|
| id generator 개발하기 - 1 (개요) (0) | 2021.09.22 |
| 알파벳 로그인 기능 개발기 (0) | 2021.07.07 |
| oracle cloud (0) | 2021.06.24 |
| sonarqube에서 test coverage 0% 버그 (0) | 2021.06.12 |