[Phoenix #1] Phoenix에 gist 기반 snippets가 추가

hahwul

Jan 17, 2021

이전부터 디자인/기능 등 블로그 변경사항에 대한 글도 작성하려고 했었는데, 올해되서야 재대로 시작되네요. 사실 뭐 중요한 정보거리는 아니고, 그냥 개인적으로 변경사항에 대한 기록이 있으면 좋을 것 같아서 태그 하나 추가하고 작성해봅니다. 아마 간단한 내용들만 들어갈 것 같아요.

그 첫번째 변경 사항으로는 phoenix 페이지 내 gist 기반 snippets 기능 추가입니다.

Gist?

gist는 github에서 제공하는 간단한 코드, 스니펫 등을 쉽게 공유할 수 있는 서비스입니다. 예전에는 인증없이 가능했었으나, 워낙 악성코드 이슈가 많아서 현재는 인증 기반 서비스로 동작하고 있구요.

이를 활용하면 이런 형태의 사용법도 가능합니다. API가 제공되고 있어서 활용할 수 있는 방법은 많으니 개인에 스타일에 따라서 여러가지 형태로 만들어서 적용해보시는 것도 좋을 것 같습니다.

전 원래 코드 스니펫을 notion에 따로 보관 했었는데, gist 기반으로 천천히 옮기고 이를 뷰 해주는 페이지를 구성할까 계획을 세웠었습니다. 그래서 현재는 몇개 없는 상태입니다.

Why?

전 github의 기본 dark mode를 사용하고 있어서, github.com은 브라우저 확장 기능의 darkmode를 해제한 상태입니다. 그러다보니, gist는 darkmode가 별도로 없어 눈도 아프고, 보기에도 썩 좋은 구조는 아니라 따로 페이지가 필요하다고 생각했었습니다. (만드는건 어렵지 않으니, 의지의 문제)

How to?

아래 URL에 username만 바꿔서 접근하면 public gist의 정보를 얻을 수 있습니다. private gist는 인증토큰이 필요하기 때문에 아래 URL을 단순히 호출하는걸로는 public 정보만 얻어옵니다.

https://api.github.com/users/{username}/gists

e.g https://api.github.com/users/hahwul/gists

코드를 대충 짜고, 메인에서 불러줍니다.

<h2><i class="ion ion-ios-pricetags"></i> Snippets</h2>
{% include_relative gist.html %}

gist.html의 코드를 다 보여드릴 순 없지만, 핵심 부분만 뜯어서 보면 아래와 같습니다.

var files = []
$.ajax({
	url: "https://api.github.com/users/hahwul/gists",
	dataType: 'json',
	async: false,
	success: function(data) {
		data.forEach(function(nodes){
			var temp = {}
			var ifiles = Object.keys(nodes.files)
			var files_str = ''
			ifiles.forEach(function(d){
				if(files_str == ''){
					files_str = files_str + "- " + d
				} else {
					files_str = files_str + "\n- " + d
				}
			});
			temp['name'] = nodes.description
			temp['url'] = nodes.html_url
			temp['token'] = nodes.id
			temp['files'] = files_str
			files.push(temp)
		});
	},
	error: function(xhr,ajaxOptions, thrownError){
		console.log(xhr.state())
	}
});

files라는 array에 gists api를 통해 얻은 값을 가공하여 가지고 있고, 이를 vuejs로 table로 그리기만 했습니다.

Showcase

#develop