홍이순이

1. VSCode에서 터미널이용 설치

npm install simplemde --save

그러면 아래 화면 캡쳐처럼 node_modules 폴더 아래에서 simplemde폴더를 확인 할 수 있음.

dist 폴더는 배포파일(simplemde.min.css, simplemde.min.js)들이 들어있고 src폴더에는 소스파일이 들어 있음.

수정할 일이 없으므로 배포파일을 사용하기로 함.

2. SCSS 이용한 스타일적용

먼저 simplemde.min.css 파일을 열어 내용을 복사하여 scss 모아곳에 _sampleMDE.scss파일을 만들고 복사한 내용을 붙여넣기 한다.

Live Sass Compile 대상 파일은 main.scss 파일로 만들어 두었는데 이파일에 import 시키고 컴파일 한다.

만약 Scss가 처음 이라면 데브리님 부트스트랩5 커스트마이징 설명에 Scss 잘 정리되어 있습니다. 25분가량 동영상인데 시간이 정말 아깝지 않습니다.

https://www.youtube.com/watch?v=WlOBV00NldU&t=4s

3. Sevelte 적용

node_modules > simplemde > simplemde.min.js 파일을 import 한다.

<script>
    import { push } from "svelte-spa-router";
    import fastapi from "../lib/api";
    import Error from "../component/Error.svelte"
    import { is_login } from "../lib/store"
    import SimpleMDE from 'simplemde/dist/simplemde.min'
    import {preloadAll} from 'svelte-loadable'

    let error = {detail:[]}
    let subject = ''
    let content = ''

    let mk_content = ""
    
    
    function post_question(event) {
        event.preventDefault()
        let url = "/api/question/create"
        let params = {
            subject: subject,
            content: mk_content.value(),
        }
        console.log(params)
        fastapi('post',url,params,
            (json) => {
                push('/')        
            },
            (json_error) => {
                error = json_error
            }
        )
    }
    preloadAll().then(() => {
        // SimpleMDE 객체생성
        mk_content = new SimpleMDE({element: document.getElementById('markdown_content')})
    })
   
</script>

<div class="container">
    <h5 class="my-3 border-bottom pb-2">질문 등록</h5>
    <Error error={error} />
    <form method="post" class="my-3">
        <div class="mb-3">
            <label for="subject">제목</label>
            <input type="text" class="form-control" bind:value="{subject}">
        </div>
        <div class="mb-3">
            <label for="content">내용</label>
            <textarea id="markdown_content" class="form-control" rows="10" bind:value="{content}" ></textarea>
        </div>
        <button class="btn btn-primary {$is_login ? '' : 'disabled'}" on:click="{post_question}">저장하기</button>
    </form>
</div>

simpleMDE 동작방식을 간단히 설명한다면 javascript에서 simpleMDE 객체를 생성하고 이 생성한 객체를 <textarea> 태그와 연결 하는 것임.

다만 여기서 주의할 점은 simpleMDE객체는 <textarea> 태그 뒤에서 선언해야 한다는 점이다.

일반적인 html 이라면 <script> mk_content = new SimpleMDE(..... </script> 구문을 textarea 뒤에 두면 자연스럽게 해결되는데 svelte에서는 적용되지 않았다.

window.onload 리스너를 이용하려 했지만 svelte 역시도 SPA(Single Page Application)이기 때문에 화면이 리로드 되지않아 이 역시도 사용할 수 없었다.

다른 방법으로 <textarea on:load={}> 방식을 사용해볼려고 했는데 이 역시도 작동되지 않았다.

구글에서 svelte on load 로 검색했더니 svelte-loadable라는 모듈이 검색되어 살펴보니 react loadable 방식을 따와서 만든걸로 보이는데 살펴보니 원하는 기능이 있어서 적용시켜 보았다.

먼저 npm을 이용해서 설치한다.

npm install svelte-loadable

preloadAll() 메서드를 이용해서 SimpleMDE객체를 생성해줬다.

textarea 내용은 SimpleMDE객체.value() 메서드를 이용하여 위 소스처럼 읽고, 쓸 수 있다.

깃헙에 가면 사용에 관한 좀 더 다양한 내용을 확인 할 수 있다.

svelte-loadable Github

https://github.com/kaisermann/svelte-loadable

SimpleMDE Github 사용설명 참조.

https://github.com/sparksuite/simplemde-markdown-editor

svelte로 조건문 작성시 question.user 아래 처럼 사용했는데 userid가 정의되지 않았다고 함.

{#if question.user.userid == $userid}

원인은 알 수 없었지만 단순히 {#if question.user && quesetion.user.userid == $userid} 처럼 수정했더니 에러발생하지 않음.

<div class="my-3">
    {#if question.user && question.user.userid == $userid}
    <button class="btn btn-sm btn-outline-secondary">
        추천
        <span class="badge rounded-pill bg-success">{ question.voter.length }</span>
    </button>
    {:else}
    <button class="btn btn-sm btn-outline-secondary" on:click="{vote_question(question.id)}">
        추천
        <span class="badge rounded-pill bg-success">{ question.voter.length }</span>
    </button>

    {/if}

</div>