[개발] 블로그 내부에 코딩환경을 추가하자. (ft. PlayGround Embedding)

블로그 내부에 코딩환경 구축하기

 

1. 포스팅의 목표 

이번 포스팅의 목표는 아래와 같이 블로그 내부에, DataCamp Play Ground 환경을 임베딩하는 것이다. 

포스팅에서 설명하고자 하는 것을 즉각적으로 확인이 가능할 것이다. 왼쪽은 스크립트 형식의 코드이며, 오른쪽은 ipython과 같은 인터렉티브 쉘( interactive shell)이다. 

이번 포스팅은 블로그(티스토리) 내부에 코딩 환경을 구축하는 것이다. 

 

2. 배경  - 기존 블로그 내부에 코드블럭 스타일

 

프로그래밍 언어와 코드를 다르는 포스팅의 경우, 블로거 및 글쓴이는 아래와 같이 "코드블럭"을 삽입하곤 한다.

import numpy as np 
import pandas as pd
a = 10 
b = np.arange(0,10,2)
print(b)

단순하게 영역만 나뉠뿐 아니라, 키워드별 하이라이트(Highlight)들이 반영되어 있어서 보기 좋다. 그러나, 글을 읽는 사람입장에서는 결국 실제 코드를 복사/실행하거나, 타이핑을 해봐야 남는 지식이 된다. 즉, 이 코드를 어디론가 옮겨야 한다는 것이다. (환경이 갖추어져 있다면,)

 

 

3. 장기 기억의 영역 - 실행해 봐야 한다.

단순히 보고 지나가면 기억에 남지 않는다. 천부적인 재능과 두뇌를 타고 났다면 뭐.. 보는 즉시 머리속에서 시뮬레이션을 돌리고 결과를 냈겠지만, 그런 천재라면 이런 글이 필요치 않을 것이다. 

 

백문이 불여일견이고 백견이 불여일행 이지 않겠는가? (코드 영영에서는 불여일"타" 이려나?)

이러한 이유로 프로그래밍 언어/코드를 취급하는 글에는  "코드 실행 환경"을 동반 해야 효과적이다. 

이 Needs를 반영한 것이 바로 Jupyter Notebook이고, 이 것을 서비스화 하여 사용하고 있는 교육 서비스들로 DataCamp, Coursera 등이 있다 하겠다. 

 

 

블로그 포스팅은 ?

전술한 Jupyter Notebook은 Application이고, DataCamp와 Coursera 등은 기업형 서비스이다. 그렇다면, 개인적으로 글을 쓰는 블로거들은 어떠한가? 결론적으로, 대다수가 아직 Code Block 형태로 표현하고 있을 뿐이다. 현실적으로, 많은 리소스를 투입할 수 없기 때문이다. 

 

그런데, 또다른 방법이 하나 있다. 제 3의 PlayGround를 활용하여 블로그에 임베딩 하는 방법이다. 

 

웹상에서 실행환경을 제공하는  PlayGround들을 다음 글들을 참조하시길 바랍니다. 

2020.05.09 - [개발 이야기] - 온라인 IDE - 개발 환경 구축 없어 어디서나 웹브라우저로 개발하기

2020.05.18 - [개발 이야기] - [클라우드 데이터 분석 플랫폼 비교-1] 구글 코랩 (Google Colab) vs. MS Azure Notebook

2020.05.18 - [개발 이야기] - [클라우드 데이터 분석 플랫폼 비교-2] 바인더(Binder)와 깃파드(Gitpod)

 

PlayGround 들 이러한 방법들 또한 별도의 웹브라우저/탭을 열고, 해당 글과는 별개로 실행을 해야 한다는 번거로움이 있다.

결론적으로, 블로그 독자를 읽는거 따로, 실행하는 것 따로,  매우 번거롭게 만든다. 

 

온라인 코드 실행 환경 (Play Groud)를 블로그에 임베딩 하자. 

 

이제 결론이다.

온라인 코드실행환경인 Play Ground를 블로그 내부에 임베딩 해주자.

만약 "Iframe" 등의 테그를 허용한다면, Iframe을 사용하겠지만, 티스토리/네이버블로그 등 대다수의 블로그 플랫폼은 Iframe을 허용하지 않는다. 따라서, 별도의 스크립트를 삽입하여 임베딩하는 기능이 필요하다. 

보통 Javascript 또는 Html/CSS를 다루는 코드들이 이 방법을 많이 사용하고 있다. (이것은 웹브라우저 자체에서 바로 실행이 가능하기 때문이다.) 그러나, Python, R 등 다른 코드들은 이 방식을 바로 적용하기는 어렵다. 파싱/시뮬레이션 환경이 필요하기 때문에다. 

 

다행히도, 최근 교육용으로 많이 사용되고 있는 DataCamp는 임베딩용 스크립트를 지원하고 있다. 다음은 DataCamp에서 제공하고 있는 임베딩 가능한 datacamp 코드실행환경 이다. 

https://github.com/datacamp/datacamp-light

datacamp/datacamp-light

 

상기 Github를 방문하면, 해당 DataCamp-light를 사용하는 방법이 자세히 설명되어 있다. 1) 관련된 script를 추가하고, 2) 실제 playground를 추가하는 2개 단계로 이루어져 있다. 

임베딩 단계 1) script 설치 (?)

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

임베딩 단계 2) 샘플코드 블럭 HTML 추가

<div data-datacamp-exercise data-lang="r">
	<code data-type="sample-code">
		# Create a variable a, equal to 5
		# Print out a
	</code>
</div>

상기 코드를 보면 알 수 있지만, "data-lab" 필드값을 변경하여,  "r"과 "Python" 언어를 선택해 줄 수 있다. DataCamp의 라이브러리로 r/Python을 지원하지만, 다른 임베딩 가능한 라이브러리를 사용하면 다른 언어도 가능할 것으로 보인다. 

 

Github에서는 DataCamp 학습과정에 적합하도록, "pre-exercise-code", "Solution" 등 별도의 data-type을 포함하고 있다. 이러한 학습유도에 필요한 상세내용은 Github를 참조하기 바란다. 필자의 경우 코드실행환경이 필요할 뿐이었으므로 이에 대한 내용설명은 생략한다. 

 

처음에는 단계1)의 코드를 스킨의 HTML Header에 추가 했었다. 그러나, 티스토리 블로그의 내부 웹에디터가 이 코드를 자꾸 강제변경한다. 이 때문에, 각 포스팅 글의 HTML 본문에 삽입하는 것으로 변경하였다. 확인 결과, BODY 태그 내부에 삽입되어도 문제없이 잘 동작한다. 

 

다음은, 전술한 DataCamp (언어: Python)의 PlayGround 환경을 임베딩한 결과 이다. 

 

 

 

다음은 Python 연습코드를 추가한 결과이다. 

 

import numpy as np import pandas as pd a = 10 a = 10 b = np.arange(0,10,2) print(b)

Use the assignment operator (<-) to create the variable a.