April 12, 2020 ( last updated : April 11, 2020 )
Open Icon Open Color Surge Snippet

https://github.com/gmm117/gmm117.github.io

Abstract

    Open Icon
    Open Color
    Surge.sh
    Snippet

Blog Theme

• Jekyll theme 테마를 이용한 개인 블로그 만들기

  • Blog Theme 1
  • Blog Theme 2

Open Icon

• 웹페이지 개발시 필요한 아이콘을 무료로 다운 받을 수 있는 페이지

• Icon 1
• Icon 2

Open Color

• 글꼴, 배경, 테두리 등과 같은 UI에서 사용하는 Color 집합체를 정리한 페이지

• Open Color
• npm Open Color

Surge.sh 로 무료로 정적 웹 어플리케이션 배포

Surge.sh는 정적 웹 어플리케이션을 귀찮은 가입 과정 혹은 복잡한 설정 과정 없이 배포할 수 있는 프론트엔드를 위한 호스팅 서비스이다. 아주 큰 특징은 지금 코드를 작성하고 있는 IDE 혹은 터미널에서 벗어나지 않고, 커맨드라인에서 명령어 몇줄로 아주 간단하게 배포할 수 있다는 것이 특징이다. 그리고, 가격도 개인적인 프로젝트 수준에서는 무료 플랜을 사용해도 정말 무방하다. 별도의 서버가 필요없거나 API 서버가 따로 있는 경우의 정적 웹사이트, 웹 어플리케이션, SPA 등의 배포에 아주 최적화 되어있다. 이런 장점에도 의외로 국내자료가 매우 없기 때문에 직접 소개를 해보려 한다.

• 참고사이트

Snippet

• 정형화된 코드를 prefix를 입력해서 바로 자동완성 시켜주는 기능을 snippert이라고 한다.

intellij

• 사용법
• File-Setting-Live Templates-javascript
• abbreviation : prefix fc, Description : Function Componenets
• Template text : template 사용할 컴포넌트 작성

define(function (require) {
	"use strict";
	
	/**
	 * @param 
	 * @constructor 
	 */
	function $FILE_NAME$() {
	}
	
    return $FILE_NAME$;
});

• Edit validables 클릭 :
  • Template 등록($FILE_NAME$)
  • Expression : fileNameWithoutExtension() 선택

vs code

• 사용법
• snippet text : 사용할 javascript 컴포넌트 작성

define(function (require) {
	"use strict";
	
	/**
	 * @param 
	 * @constructor 
	 */
	function ${TM_FILENAME_BASE}() {
	}
	
    return ${TM_FILENAME_BASE};
});

• https://snippet-generator.app 홈페이지에서 vscode에 맞는 snippet 변환
  • Description : Function Componenets
  • Tab trigger : fc
  • your snippet : snippet text 붙이기
• 아래 변환된 snippet 텍스트 복사
• File-Preferences-User Snippets-javascript.json
• 변환된 snippet 텍스트 붙이기
• js 파일 생성 후 fc tab할 시 등록한 snippet 사용

Originally published April 12, 2020
Latest update April 11, 2020

Related posts :