Kendrick's Blog

highlight.js? 자바스크립트로 만들어진 코드 구문 강조 라이브러리 입니다. 거의 모든 마크업에서 작동하고 자동 언어 감지 기능을 가지고 있습니다. 공식사이트 꾸준히 업데이트가 이루어 지고 있습니다. (Language, Style 등) 라이브러리이기 때문에 어디든 추가 하여 사용 가능합니다. 하지만 이 포스트는 설치가 아닌 하루패드와 Markdown-Here에 대해서 다루고 있으므로 설치 관련해서는 아래 블로그를 참조 부탁드리겠습니다. WEBDRI - highlight.js 하루패드, Markdown-Here에서의 Highlight.js 하루패드와 Markdown-Here는 모두 코드 구문강조를 지원하며, 둘 다 Highlight.js 라이브러리를 사용하고 있습니다. 하루패드 코드 구문 강조 문서..

불편함으로 다가온 에버노트의 변경점한달전 에버노트가 크게 변경될 것이라는 예고와 함께 메일이 왔었습니다.그 후 한달동안 신경 안쓰고 있었는데.. 포스트 작성을 위해서 접속을 해보니 웬걸 미묘한 변화가 느껴집니다.에버노트가 기기 제한 2개가 생기고 기존에 베타로 제공하던 기능이 기본적으로 작동하게 패치가 되었습니다.기기 제한은 회사 컴퓨터 집 노트북만 쓰면되지 사실 그렇게 큰 문제는 아니였습니다.문제가 된건 새로운 기능이었습니다.마크다운 문법에 따라 자동치환 해주는 기능인데 에버노트에서 Markdown-Here(크롬플러그인)을 연동해서 쓰는 저에게는 엄청 큰 불편함이 느껴지더군요.그런 이유로 미련을 버리고 새로운 마크다운 에디터를 찾아 떠나게 되었습니다.하루패드한국인 개발자가 개발한 마크다운을 제공하는 텍..

Canvas란간단하게 설명하자면 HTML5의 canvas는 그래픽들을 위한 컨테이너 입니다. 선, 사각형, 원, 문자, 이미지 등을 추가하는 메서드를 지원하며, canvas엘리먼트를 정의 후 자바스크립트를 이용하여 그림을 그려줍니다. html에 다음과 같이 정의 합니다. 도형 등은 자바스크립트를 이용하여 그려 줄 수 있습니다. w3s html5_canvas 하지만 급하게 canvas를 사용하고 싶거나 애니메이션을 적용하고 싶을 경우 처음부터 공부해야 하는 어려움이 있습니다. 그럴 때 아래에서 소개할 오픈소스 라이브러리를 사용하여 빠르게 내 사이트에 적용 시킬 수 있습니다. Brush.jsBrush.JS 소개 Brush.js는 canvas 사용을 도와주는 라이브러리 입니다. 간단한 그리기를 비롯해 애니메이..

Heroku Push 안되는 현상Mac환경에서 작업하여 Heroku에 Push할때는 별 이상없는데, 회사에서 수정해볼까 하고 소스를 받아서 수정 후 git push heroku master를 해보니 username, password를 입력하라고 뜹니다.C:\heroku>git push heroku master Username for 'https://git.heroku.com': Password for 'https://gnin@git.heroku.com': 처음보는 문구에 당황하긴 했지만 우선 입력해 보았습니다.remote: ! WARNING: remote: ! Do not authenticate with username and password using git. remote: ! Run `heroku l..

Emmet초고속 코딩 도구! 이름이 거창합니다. 하지만 아래 주소로 가셔서 사용 데모를 보시면 왜 초고속인지 이해가 되실거라 믿습니다. Emmet 공식 사이트간단하게 설명하자면 CSS 셀렉터를 이용하여 HTML코드로 변경하는 도구입니다.이 외에도 수많은 기능이 있으며 아래에서 설명하겠습니다. 이 포스트의 목적은 제가 작업중에 생각이 안날 때 쉽게 찾기 위함이었으나, 간단한 기능적 설명도 달아서 기능을 모르셔도 한번 봐두시면 도움이 될 것 입니다.설치하기package control을 이용하여 설치하겠습니다. 설치방법은 이전 포스트를 참조부탁드립니다.지난 포스트 보기Package Install에서 Emmet을 검색하여 설치합니다.Emmet의 경우 설치 후 Sublime Text의 재시작이 필요합니다. 재시작..

Heroku에 작업물을 올리고 빌드를 했더니 오류가 발생한다.디버그 해보니 로컬에서 작업할 때 사용한 NODE_ENV 환경변수를 webpack에서 빌드 후에 제대로 불러오지 못하고 있었다. process.env.NODE_ENV를 사용하기 위해서 webpack definePlugin 기능을 사용하였고 말끔하게 해결됐다.DefinePlugin 사용WebPack Config에 아래와 같이 설정을 추가해 주자module.exports = [{ plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) } }) }] 위 플러그인을 추가해주고 다시 빌드 하니 정상적으로 동작하는걸 확인 할 ..

테마 변경이전 포스트에서 처럼 package install로 테마설치 할 수 있으며 지원하는 테마는 아래 페이지에서 확인이 가능합니다.지난 포스트 보기 테마 보러가기들어가셔서 원하는 테마를 직접보시고 설치하기 원하시는 테마의 제목을 기억해둡시다 Package Install에서 검색하여 선택해주면 설치 끝!하지만 그대로인 반전설치후 바로 적용되는 것이 아닌 테마 활성화 코드를 입력해주어야 합니다. 예를들면 https://packagecontrol.io/packages/Agila%20Theme 이 테마의 내용을 보시면, 하단에 이런 내용이 있습니다. How to Activate Theme 목차를 보시면 옵션에서 어떻게 바꿔야 하는지 잘 설명해주고 있습니다. 이와같이 옵션에서 테마를 설정해주면 바로 테마가 활..

Sublime Text3Sublime Text란?간편하게 사용할 수 있는 텍스트 에디터 입니다. 주로 프론트엔드에서 많이 사용하며, node.js로 구성된 백엔드에서도 사용하기도 합니다.현대에 사용되는 언어는 대부분 지원하며, 없다면 추가 package 설치하여 사용 할 수 있습니다.특이하게 설정등이 json으로 되어있어서 처음에는 당혹스러울 수 있으나, 적응하게 되면 편…하다고는 못하겠으나 확장성이 좋습니다. 생각해보니 검색하기도 좋고 설정 할 수 있는 부분이 너무 많아서 GUI라면 약간 아찔하네요.아래 경로에서 다운받을 수 있습니다.Sublime text3 Download설정에 Default와 User?기본 sublime 설정이나 package 설정을 보면 Setting - Default, Setti..

Git & GitHubGitGit은 프로젝트 관리도구 입니다. 무료로 사용할 수 있는 오픈소스이며, 작은 규모, 큰 규모 상관없이 프로젝트 수행 시 필요한 거의 모든 기능을 제공합니다.GitHub웹에서언제 무슨 파일을 추가 한지, 어떤 내용을 수정한지, 이전에 지운 내용은 무엇인지 등 프로젝트를 전반적으로 유용하게 관리할 수 있게 해줍니다. 내컴퓨터에서 작업한 프로젝트를 GitHub에 올려서 관리 할 수 있으며 검색, 다운로드 등, 공유 등 다양한 기능을 지원합니다. 명령어Git GUI보다는 명령어를 자주쓰기 때문에 명령어 위주로 작성하겠습니다.초기화디렉터리를 Git으로 관리할 때 가장 먼저 할 일은 초기화 하는 것입니다. init 명령어를 사용하며, 명령어를 실행하면 .git 디렉터리가 프로젝트에 생성..

Markdown 문법Markdown Here를 기준으로 Markdown 문법에 대해서 정리하는 포스트입니다. Markdown 옵션의 미리보기를 기준으로 작성하였습니다.Syntax Highlightingfunction syntaxHighlighting() { var n = 33; var s = "hello, こんにちは"; console.log(s); } ```javascript function syntaxHighlighting() { var n = 33; var s = "hello, こんにちは"; console.log(s); } ``` 코드 블럭code block with no highlighting ``` code block with no highlighting ``` 인라인 코드 블럭inline cod..

Evernote?문서 노트 클라우드 서비스다양한 플랫폼에서 사용할 수 있는 문서 클라우드 서비스입니다. 어플리케이션도 제공하고 있으며 에버노트 사이트로 접속 할 경우 브라우저상에서 문서 작업을 가능하게 해줍니다. 리치 텍스트에디터를 사용하고 있습니다. 아래에 소개할 마크다운 히어(Markdown Here)와 함께 사용 할 수 있습니다.에버노트 가기 Markdown HereMarkdown마크업 언어의 일종입니다. 읽기도 쓰기도 쉽습니다. 확장자는 .md를 사용합니다.Markdown Here웹 페이지의 리치 텍스트 에디터에서 마크다운으로 작성한 글을 리치 텍스트로 즉석에서 변환해주는 웹 브라우저 확장 프로그램입니다. 아래와 같은 특징이 있습니다.크롬, 파이어폭스, 사파리, 오페라, 썬더버드 지원표, 울타리 ..

RFP : 제안 요청서 RFI : 정보 요청서(자료 의뢰서) 새로운 정보기술을 접목해 시스템을 구축할 때 어떤 기술과 업체를 선택할 것인가 하는 점은 일반적으로 제안요청서(RFP;REquest For Proposal)와 제안서라는 연속된 절차를 통해 결정난다. 이중 RFP는 사용자가 자사의 시스템에 대한 요구사항을 체계적으로 정식문서로 공급업체가 제안서를 작성할 때 기본적인 자료로 활용한다. 최근 정보기술의 발전속도가 급속도로 빨라지고, 다양한 기술을 통합한 정보시스템에 대한 요구가 높아지면서 RFP에 대한 중요성이 어느 때보다 커지고 있다. 얼마나 체계적으로 RFP를 작성느냐에 따라 제안서의 품질이 결정되는가 하면, 프로젝트의 성공여부에도 큰 영향을 미친다는 인식이 확산되고 있는 것이다. 대형 프로젝트..