NightShadow의 블로그

새로운 언어를 좀 배워보고 싶다거나, 프로그래밍 문제풀이등을 위해 간단히 프로그래밍 할 수 있는 환경이 필요할 때가 있습니다. 그런데 새로운 언어를 연습해 보기 위해선 컴파일러를 설치하고 에디터를 설정하거나 IDE 등을 받아서 설치하거나 이런저런 과정이 필요합니다.

뭐...사실 하면 되는데....귀찮기도 하고...그냥 간단히 연습만 해 볼건데...간단히 해 볼 수 없나 싶을때가 있는데...

그럴때 사용할 수 있는 사이트가 바로 replit.com 입니다.

가입에는 외국 사이트가 그렇듯 이메일만 있으면 됩니다. 가입후에 메일주소로 확인 메일이 도착할 거고 링크를 클릭해 주면 가입이 완료 됩니다.

구글이나 페이스북 아이디로도 사용가능한데 저는 왠만하면 그냥 이메일로 가입을 하는 편이라....

가입후에 몇가지 설문이 있습니다. 무슨 목적으로 쓰는거냐...뭐...그런겁니다.

가입완료하고 홈에 들어가 보면 위와 같이 나올텐데..."+New Repl" 이나 Create 에서 "+" 를 누르면 어떤 프로그래밍 언어를 이용할지를 물어봅니다.

>

프로그래밍 언어로 Rust 를 선택해서 들어간 화면입니다. 오른쪽에 컴파일 과정과 실행 결과가 보입니다.

>

프로그래밍 언어를 공부하고 간단히 사용해 보기에 좋습니다. 웹브라우저만 있으면 왠만한 대부분의 프로그래밍 언어들을 사용해 볼 수 있으니 정말 유용하죠.

유료로 사용하면 이런저런 기능이 추가가 됩니다만...간단한 용도로는 무료로도 사용해도 무리는 없습니다.

무료의 경우는 작성한 소스가 public(공개) 로만 설정이 됩니다만....Private 로 작성해야 할 프로젝트를 할 생각이라면 자신의 컴퓨터에 환경을 갖춰놓고 프로그램을 작성하는게 좋겠죠.

최근 디스토리 블로그의 에디터가 신버전으로 바뀌었습니다. 메뉴를 보던 도중 코드블럭 기능이 생겨서 한번 사용해 봤는데요. 소스코드는 입력이 되긴 하지만 그냥 밋밋하더군요. 그래서 이번에 다시 syntax highlight 기능이 되도록 설정을 해 봤습니다.

예전에 syntaxhighlighter 라는 스크립트를 설치한 적이 있었지만 이번에는 다른 스크립트를 찾아 봤습니다.

highlight.js 입니다. https://highlightjs.org/ 에서 다운 받을 수 있습니다.

이 스크립트를 추가하는 방법은 CDN 을 이용하는 방법과 직접 소스를 다운받아 자신의 블로그에 업로드하고 설정하는 방법이 있습니다.

자신의 블로그에 직접 파일을 업로드 할 수 없다면 CDN 을 이용한 설치만 가능합니다. 그리고 블로그의 HTML 직접 수정도 가능해야 이 스크립트를 설치할 수 있습니다.

위 스크린샷 화면의 "Get version XXXX" 라고 되어 있는 부분을 클릭하면 다음과 같은 화면이 나옵니다.

>

페이지의 상단부분에는 CDN 설정방법이 나와있습니다. 저는 아래쪽 jsdelivr 거를 썼는데 작동만 잘 되면 어느걸 써도 상관없습니다.

스크린샷 맨 아래 "style directory" 라는 곳을 클릭하면 style css 가 여러개 있는데 이중 자신의 맘에드는 css 를 선택해서 설치할 수 있습니다. 단 CDN 설치의 경우엔 .css 앞에 .min 을 붙여야 합니다.

예를 들어 내가 vs.css 라는 스타일을 쓰고 싶다면 첫째 줄 뒷부분에 있는 default.min.css 부분에  vs.min.css 라고 입력해 주면 됩니다. 메인페이지에서 여러 스타일을 직접 확인해 볼 수 있으니 참고하세요.

>

CDN 링크도 알았겠다. 이젠 블로그 스킨에서 HTML 만 수정해 주면 됩니다.

관리자 페이지에서 스킨편집 --> HTML 편집으로 들어 갑니다.

제가 추가한 소스코드 입니다.  CDN 부분은 그대로 복사해 넣은거고 마지막 줄만 추가 해 넣었습니다.

티스토리 에디터에서 '코드블럭' 을 선택해서 소스코드를 넣어준 경우 설치가 완료되면 바로 적용됩니다.

만일 CDN 을 이용하지 않고 직접 파일을 다운받아 설정해 준다면 위 스크린샷에서 보이는 '파일 업로드' 를 통해 파일을 업로드 하고 아래 처럼 설정 해 주면 됩니다.

<link rel="stylesheet" href="./images/atom-one-dark.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

(바로 위의 html 이 바로 highlight 가 적용된겁니다. 참고삼아 보세요.)

업로드할 파일은 highlight.pack.js 파일과 자신이 사용할 스타일 파일만 업로드 하면 됩니다.

위 예의 atom-one-dark.css 는 제 블로그에서 쓰는 스타일입니다. 다운받은 파일의 styles 디렉토리에서 자신이 사용할 스타일 파일을 업로드 하면 됩니다.

CDN 을 사용하지 않고 직접 파일을 블로그에 업로드해서 쓰는것의 장점은 좀 더 다양한 언어의 syntax highlight 가 가능하다는 것입니다.

CDN 으로 사용시 지원하는 프로그램언어는 24가지라고 합니다.

위 스크린샷이 다운로드 페이지 하단 부분입니다. 자신이 사용할 언어를 체크하고 아래의 다운로드 버튼을 누르면 프로그램을 다운 받을 수 있습니다. 상당히 많은 언어를 지원합니다.

많이 쓰이는 프로그램언어를 사용한다면 CDN 을 사용하는 방법으로 충분합니다만....직접 파일을 업로드 해서 설정한다고 해도 설정이 무척 간단해서 어렵지 않게 사용할 수 있을 겁니다.

리눅스에서 간단히 GUI 프로그램을 만들고자 하니 아무래도 귀찮아서.....좀 쉽게 살아보고자.....윈도우에서의 비주얼 베이직 6.0 같은거 없나 찾다보니 GAMBAS 라는 베이직 프로그램이 나옵니다.

뭐...GUI 만 그 툴로 만들고 다른건 파이썬이던 뭐던 다른걸로 만들어도 상관은 없다 싶긴 하지만 GAMBAS 는 리눅스에서만 되서....사실 이것도 상관없지만 이왕이면 크로스 플랫폼 개발툴로.....!!!! 라는 쓸데없는 고집을 피운 나머지 라자루스를 써보고 있습니다. 결국 오브젝트 파스칼 까지 와버리고 말았습니다.  ㅡㅡ;

파스칼은 예전에 좀 공부해 보다가 바로 C 언어로 넘어갔기 때문에 기초중에 기초밖에 모릅니다. 사실 이제 기억도 잘 안나고요. 그래도 프로그래밍 언어라는게 기본은 다 비슷하니 그럭저럭 쓸 정도만 하면 되겠죠. 뭐....

확실히 GUI 만들어 보니 편합니다. ^^; 어느정도 델파이와 비슷하다는거 같은데 델파이는 구경도 거의 못해 봐서 알 수가 없네요. 이것저것 왠만한건 거의 건드려 봤는데 델파이 만큼은 인연이 없었습니다.

간단히 필요한거 만들어 볼때 편하게 쓸 수 있을거 같아요. ^^;