eedler

TISTORY에 소스코드를 넣어보자.

구글에서 검색을 해봤는데 사람들은 

Syntax Highlighter 를 사용하는 사람들이 대부분이었습니다. 그래서 필자도 해당 사이트로 날아갔으나,

세상에. Swift가 지원되지 않더군여.

저희 팀에서는 주로 MEAN을 위한 javascript 와 iOS App을 위한 swift 를 사용하고 있습니다.

그래서 swift 소스코드를 추가하는 기능이 필요한건데... 그래서 조금 더 찾아보니.

https://highlightjs.org/ 에서 제공을 해준다고 합니다.

Swift도 있고 CDN도 지원을 해주는 듯 싶었으나.... CDN 버젼에서는 Swift를 지원하지 않더군요.

그래서 어쩔 수 없이 다운로드해서 업로드 하는 방식으로 써야했습니다.

common에서 지원해주는 언어에 사용하시는 언어들이 들어있다면 단순히 cdn의 주소만 넣는 방식으로 쓰시면 편할듯합니다.

전체 순서는

1. 사이트에서 관련 파일 다운로드

2. 티스토리에 업로드

3. 코드 추가

1. 사이트로 이동 https://highlightjs.org/ Get version x.x.x 를 클릭합니다.

2. 아래처럼 cdnjs 주소도 보이는데여. 아래 common에 있는 언어만 사용하신다면 그냥 저 cdn 주소만 사용하셔도 됩니다.

아래는 기본적으로 제공해주는 언어의 목록입니다. cdn에서도 22개의 언어에 대해서 제공해주고 있으니,

이 안에 목록에 포함되실 경우 파일 다운로드 없이 위의 cdn주소만 추가해서 사용하셔도 됩니다.

전 Swift 가 필요했으므로, 아래쪽에 Custom에서 Swift 체크 후 다운로드 했습니다.

그러구나서 압축을 풀고. 티스토리 관리자 페이지로 갑니다.

아래 HTML/CSS 편집 메뉴를 클릭해줍니다.

파일업로드를 클릭해주시고, 아까 다운받은 파일에서 압축해제 했던 파일 중.

highlight.pack.js 파일과 style 폴더 안에 있는 원하는 스타일의 파일을 업로드 해줍니다.

전 스타일 고르기 귀찮아서 일단 다 업로드 했습니다.

이제 코드를 추가해줘야 합니다. HTML 버튼을 클릭해 줍니다.

아래 <link>와 <script> 태그들 사이에 아래 소스를 붙여줍니다.

물론 css 스타일은 default.css 가 아닌 원하는 스타일 파일로 작성해 주시면 됩니다.

개인적으로 default를 좋아해서 저흰 그냥 default ^^

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

이렇게여.

설정할 부분은 끝이 났고, 이제 사용만 하시면 됩니다.

사용법은 글 작성시 글 작성란에서 HTML 체크박스를 체크해주시고,

작성법은

<pre><code class="swift">//소스 코드

NSLog("Hello World!")

</code></pre>

라고 작성하시면 됩니다.

그러면 결과가.

//소스 코드
NSLog("Hello World!")

이렇게 나옵니다.

 class에는 자신이 표현하고자 하는 언어를 넣어주시면 됩니다.

그러면 글 보기를 할 때 해당 언어에 맞게 이뿌게 표시됩니다.

감사합니다.

iOS - 앱 상단 상태바를 없애자.

상태바가 뭔가 하면.

바로 이겁니다.

앱의 기획의도에 따라 상태바가 보이지 않는게 더 어울릴 때가 있는데요.

그럴 때 해당 상태바를 손쉽게 없애는 방법을 안내하겠습니다.

의외로 쉽게 없애는게 가능합니다

각 View 의 ViewController 클래스에 아래 소스만 추가해주면 됩니다.

override func prefersStatusBarHidden() -> Bool {
        return true
 }

return 을 true 인가 false 인가 라고 설정하면 반영됩니다.

하지만 모든 ViewController에 해당 함수를 넣는 것도 약간은 불편한데요.

쉽게 Xcode에서 설정할 수 있습니다.

1. info.plist 에 View controller-based status bar appearance 를 NO 로 추가한다.

2. 프로젝트 설정에서 Hide status bar 에 체크한다.

각 View 마다 함수를 override라는 방식보다는 전체를 없애야할 경우 편합니다.

물론 특정 View에서 상태바가 필요하다면 전체 hide 설정 후 해당 View에서만

위에 함수 prefersStatusBarHidden 에서 false 를 반환해주면 해당 뷰만 Status bar 가 보이게 됩니다.

아래는 Status Bar 제거를 설정한 화면입니다.

설정에서의 특징은 LaunchScreen 에서도 상태바가 제거된다는 겁니다.

LaunchScreen은 따로 클래스를 만들어주기 불편한데 해당 설정은 시작 화면에서도 제거를 해주니 편합니다.

설정과 함수를 통해서 전체를 없애고 필요한 곳에 표시하든.

전체는 있게하고 필요한 곳에서만 제거하든. 각자 필요대로 사용하시면 됩니다.

이상 eedler 개발팀이었습니다.^^

EzCurrency : How to add EzCurrency to your iPhone's Notification Center

한국어 : http://blog.eedler.com/2

EzCurrency is an awesome widget to help you with calculating the currency exchange rate.

Way of use is simple and easy and it is applicable for various currencies.

After installation of the app, you can also use calculating feature through the widget.

Here is how to add the widget on your iPhone

1. Open "Notification Center" by sliding down the upper screen.

2. Tap "Today" button on the top of the page.

3. Scroll down and tap "Edit" button at the bottom.

4. At Do Not Include section tap the green "+" button at the left of EzCurrency.

5. Now you can check EzCurrency at the top screen widget list.

6. If you want to change the order of widget list, drag the three line button on the right of widget name and put it on the spot you want.

7. Tap "Done" button on top of the screen

That's all for adding the widget

From Now you are able to easily calculate the exchange rate at the Notification Center during the usage of iPhone.

Thank you.

AppStore : http://goo.gl/Nd51U3

EzCurrency : iPhone 위젯 등록 방법

English : http://blog.eedler.com/3

EzCurrency(쉬운환율계산)은 굉장히 멋진 환율계산위젯입니다.

사용법은 단순하고, 쉬우며, 다양한 통화를 지원합니다.

App 설치 후 환율계산은 앱과 위젯을 통해서 할 수 있습니다.

이제부터 iPhone 위젯 추가 방법을 안내하겠습니다.

1. 아이폰 상단 화면에서 쓸어내려 iPhone의 Notification Center를 엽니다.

2. 화면 상단의 Today 버튼을 탭합니다.

3. 스크롤 다운 후 하단의 Edit 버튼을 탭합니다.

4. 'Do Not Include 에서 EzCurrency 의 왼쪽 녹색 + 기호를 탭합니다.

5. 이제 화면 윗부분의 위젯목록에서 EzCurrency를 확인할 수 있습니다.

6. 만약 당신이 위젯의 정렬순서를 변경하고 싶다면, App 이름 오른쪽에 세 줄 아이콘을 드래그하여 원하는 위치에 놓으십시오.

7. 화면 상단의 Done 버튼을 탭합니다.

이것이 위젯등록을 위한 전부입니다.

이제 아이폰 사용 중 Notification Center에서 환율을 손쉽게 계산하세요.

감사합니다.

앱주소 : http://goo.gl/YUbPqd

ATOM 설치 방법을 작성합니다.

ATOM은 GitHub에서 공개한 텍스트편집기입니다.

무료이며, 다양한 패키지가 존재해서 기본 기능 외에도 다양한 기능을 추가적으로 설치하여 사용할 수 있습니다.

git과 연동되어 작업시 쉽게 구분이 가능합니다.

대부분 사용자의 경우 윈도우를 사용하므로 윈도우 기준으로 설명을 작성합니다.

설치는 매우 간단합니다.

우선 ATOM 공식페이지로 이동합니다.

https://atom.io/

아래 이미지의 [Download Windows Installer] 버튼을 클릭합니다.

파일다운로드가 진행됩니다.

해당 파일에서 우클릭 후

관리자 권한으로 실행으로 실행을 해주시면 됩니다.

Next를 클릭할 필요도 없이 설치 바로 진행되고 설치가 완료되면 자동실행이 됩니다.

패키지 설치

ATOM 은 각종 패키지를 설치해서 다양한 기능을 사용할 수 있도록 지원합니다.

File > Settings 를 클릭합니다.

Install을 클릭합니다.

Search packages 란에 설치하고자 하는 패키지명을 검색하면 아래 목록에 바로 표시가 됩니다.

아래 목록에서 Install 버튼을 클릭하면 바로 설치가 진행됩니다.

제가 주로 사용하는 패키지들을 소개합니다.

minimap : 화면 한 쪽에 파일 전체 내용의 미니맵이 표시됩니다. 서브라임텍스트를 사용하셨던 분이라면 익숙한 기능입니다.

AtomicChar : 한글을 한 줄로 길게 쓸 때에 개행이 이상하게 되는데, 그 문제를 해결해줍니다.

emmet : zen-coding 이라고도 합니다. html 등의 문서를 작성시 css selector 방식으로 구조화된 구문을 빠르게 작성합니다.

highlight-selected : 한 페이지에서 선택되어진 단어와 동일한 단어를 표시해줍니다. 기본인줄 알았는데, 안되서 찾아보니 패키지가 있더군요.

Remote-FTP : FTP 또는 SFTP, FTPS 를 이용해 원격지에 있는 파일을 다운로드 하고 수정하고 저장과 동시에 업로드가 가능합니다.

linter : 다양한 문법적 오류를 표시해주는 유용한 패키지입니다. 설치 후 프로그램 언어별로 추가 설치하면 문법적 오류나 권장 내용에 대해 색상과 문구로 알려줍니다.

linter-jshint : linter 의 Javascript 버젼입니다. 최근 제가 사용하는 언어가 웹 서버 관련 작업은 Javascript가 대부분이라 필수입니다.

linter-csslint : linter 의 CSS 버젼입니다. 웹 작업시 없어서는 안될 .CSS 파일 작성시 관련 정보를 표시해줍니다.

ATOM을 쓰면서.

편의적인 부분은 굉장히 만족합니다. 기본적인 서브라임텍스트와 같은 형태의 단축키와 구성으로 되어 있어서 처음 사용할 때도 별로 어색하지 않았습니다.

하지만 몇 가지 불편한 점은 속도에 관한 이슈가 발생한다는 것입니다.

파일이 길 경우 highlight가 느리게 반영되며, 심지어 파일이 과도하게 길 경우에는 ATOM 자체가 멈춰버리는 현상도 발생합니다.

그리고 패키지가 안정화되지 않은 부분이 있는지 FTP관련 패키지는 사용시 목록을 제대로 반영하지 못하는 등 자잘한 버그들이 존재합니다.

그럼에도 불구하고, 익숙한 UI를 제공하고, 서브라임이나 노트패드++와 같이 각종 패키지를 설치해서 사용할 수 있다는 매력은 굉장합니다.

무엇보다 무료. 이걸로 끝이죠.