<div id="readability-page-1" class="page"><article id="mainContent">
                
                <p><cite>DarrenKwonDev</cite>
                  <span> 2021. 11. 1. 21:01</span>
                </p>
                
                            <div>
                                <h4 data-ke-size="size20"><b>Typed에서 구현한 하이라이트 기능에 대해</b></h4>

<p data-ke-size="size16">대외비임 ㅎ</p>


<h4 data-ke-size="size20"><b>gatsby.js의 mdx의 사례</b></h4>

<p data-ke-size="size16">gatsby.js를 만지다보니 재미있는 점을 발견했다. mdx가 파싱되는 꼴을 보자.</p>
<pre id="code_1635767525290" data-ke-language="javascript" data-ke-type="codeblock"><code>const saltyDuckEgg = 'chinese preserved food product'</code></pre>

<p data-ke-size="size16">@mdx-js/react의 MDXProvider로 감싸고, prev 태그의 props를 출력하려고 보았을 때 아래와 같은 꼴을 하고 있다.</p>
<figure data-origin-width="623" data-origin-height="588" data-ke-mobilestyle="widthOrigin">
    <span data-url="https://k.kakaocdn.net/dn/brbmA0/btrjEVrYIKT/boKGUkgKEOx4fdKFT5fuHK/img.png" data-lightbox="lightbox" data-alt="">
        <img src="https://k.kakaocdn.net/dn/brbmA0/btrjEVrYIKT/boKGUkgKEOx4fdKFT5fuHK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="623" data-origin-height="588" data-ke-mobilestyle="widthOrigin">
    </span>
    
</figure>

<pre id="code_1635767874333" data-ke-language="javascript" data-ke-type="codeblock"><code>props: {
  children: {
    props: {
      children: [
        {props: children: ...},
        {props: " saltyDuckEgg "},
        {props: children: ...},
        {props: " "},
      ]
    }
  }
}</code></pre>

<p data-ke-size="size16">최말단의 children들은 각각 "const", " saltyDuckEgg ", "=", " ", "'chinese&nbsp;preserved&nbsp;food&nbsp;product'"를 가지고 있다.</p>
<p data-ke-size="size16">결론적으로, prev 내부 문자로서의 코드들을 적절하게 구조화한 것이다.</p>



<h4 data-ke-size="size20"><b>HTML DOM Parsing에 대해</b></h4>

<p data-ke-size="size16">ㄴㅇㄹ</p>

<h4 data-ke-size="size20"><b>그렇다면 에디터를 구현해야 한다면 어떻게?</b></h4>


<p data-ke-size="size16">ㄴㅇㅌㄹ</p>


<p data-ke-size="size16"><b>reference)</b></p>
<p data-ke-size="size16"><a href="https://yceffort.kr/2021/05/ast-for-javascript" target="_blank" rel="noopener">https://yceffort.kr/2021/05/ast-for-javascript</a></p>
<figure id="og_1635767503196" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="blog" data-og-title="Home" data-og-description="yceffort" data-og-host="yceffort.kr" data-og-source-url="https://yceffort.kr/2021/05/ast-for-javascript" data-og-url="https://yceffort.kr" data-og-image="https://scrap.kakaocdn.net/dn/bs9b8X/hyMaT1oXac/fDE2kPP3Mr3tgGaYSkk7KK/img.png?width=2400&amp;height=1260&amp;face=0_0_2400_1260"><a href="https://yceffort.kr/2021/05/ast-for-javascript" target="_blank" rel="noopener" data-source-url="https://yceffort.kr/2021/05/ast-for-javascript">

<div>
<p data-ke-size="size16">Home</p>
<p data-ke-size="size16">yceffort</p>
<p data-ke-size="size16">yceffort.kr</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bs9b8X/hyMaT1oXac/fDE2kPP3Mr3tgGaYSkk7KK/img.png?width=2400&amp;height=1260&amp;face=0_0_2400_1260"></figure>
<p data-ke-size="size16"><a href="https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/" target="_blank" rel="noopener">https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/</a></p>
<figure id="og_1635767500585" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="원활한 콘텐츠 작성을 위한 에디터 개발기 - 오늘의집 블로그" data-og-description="오늘의집의 집들이, 노하우 에디터의 개발 과정을 소개합니다." data-og-host="www.bucketplace.co.kr" data-og-source-url="https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/" data-og-url="https://www.bucketplace.co.kr/post/2020-09-18-원활한-콘텐츠-작성을-위한-에디터-개발기/" data-og-image=""><a href="https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/" target="_blank" rel="noopener" data-source-url="https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/">

<div>
<p data-ke-size="size16">원활한 콘텐츠 작성을 위한 에디터 개발기 - 오늘의집 블로그</p>
<p data-ke-size="size16">오늘의집의 집들이, 노하우 에디터의 개발 과정을 소개합니다.</p>
<p data-ke-size="size16">www.bucketplace.co.kr</p>
</div>
</a></figure>

            
            
                </div>
                

              </article></div>

HotHandCoding

DarrenKwon

Typed에서 구현한 하이라이트 기능에 대해
 
대외비임 ㅎ
 
 
gatsby.js의 mdx의 사례
 
gatsby.js를 만지다보니 재미있는 점을 발견했다. mdx가 파싱되는 꼴을 보자.
const saltyDuckEgg = 'chinese preserved food product'
 
@mdx-js/react의 MDXProvider로 감싸고, prev 태그의 props를 출력하려고 보았을 때 아래와 같은 꼴을 하고 있다.
 
props: {
  children: {
    props: {
      children: [
        {props: children: ...},
        {props: " saltyDuckEgg "},
        {props: children: ...},
        {props: " "},
      ]
    }
  }
}
 
최말단의 children들은 각각 "const", " saltyDuckEgg ", "=", " ", "'chinese preserved food product'"를 가지고 있다.
결론적으로, prev 내부 문자로서의 코드들을 적절하게 구조화한 것이다.
 
 
 
HTML DOM Parsing에 대해
 
ㄴㅇㄹ
 
그렇다면 에디터를 구현해야 한다면 어떻게?
 
 
ㄴㅇㅌㄹ
 
 
reference)
https://yceffort.kr/2021/05/ast-for-javascript
https://www.bucketplace.co.kr/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/

DOM 구조화 : 하이라이트, 파싱, 에디터

댓글