|  Postman 설정하기  

 

 

> 티스토리 OPEN API를 사용하려고 할 때, 개인서버를 구축은 해야하지만 그 전에 간단하게 테스트 해보고 싶어서 해당 프로그램을 선택했다. 위에 첨부된 이미지에 있는 대로 Postman 7.5.0 을 사용했다. 

 

👉 티스토리 Open API 가이드 (https://tistory.github.io/document-tistory-apis/) 를 우선 옆에 띄워두고 시작한다. 

 

1) Collection을 하나 만들고 (개취), 테스트 할 탭을 하나 생성한 후  Authorization 으로 이동한다. 

2) 위에 가이드 문서에서 보면 인증은 OAuth 2.0 프로토콜을 사용한다고 하니, 왼편 TYPE에서 OAuth2.0을 선택한다. 

3) 이제 토큰을 받기 위해 Get New Access Token 버튼을 클릭하면 아래와 같은 창이 나올 것이다.  

 

4) 가이드 문서를 보면서 해당 정보를 기입한다. 

Grant Type : Implicit로 선택 
Callback URL : 포스트맨에서 제공하는 oauth2.0 callback url 
Auth URL : 인증 URL
Access Token URL :  사용자가 인증을 완료하면 리디렉션 되는 URL
Client ID :  이전 포스팅에서 티스토리에 신청해서 받은 App ID
Client Secret : 이전 포스팅에서 티스토리에 신청해서 받은 Secret Key

 

> 아무래도 개인정보에 관련한 토큰이다보니, 로컬에서 진행하는 방법도 있지만, 우선 테스트용으로 했지만 난 포스트맨으로 사용했다. 

> Grant Type을 선택해주지 않으면 이런 에러 메세지를 를 알려줄 것이다.

5) Request Token 을 클릭하면, 처음 요청하는 경우 아래와 같이↙️ 티스토리에 로그인하라고 되어 있다. 그럼 로그인하고, "티스토리-포스트맨 애플리케이션" 기능 사용을 허가하겠다고 승인한다.  

 

 

6) 짜잔! 이렇게 ACCESS TOKENS을 발급받을 수 있다.  그럼 이제 이 토큰을 사용해서 다른 API 호출할 수 있다.  

반응형

 

| 키 발급하기 

👉 키 발급하러 가기 : https://www.tistory.com/guide/api/manage/register

서비스 명 : 티스토리 API를 적용할 서비스의 명칭을 적는다. (선택)
설명 : 티스토리 API를 적용할 서비스에 대한 설명을 간략하게 적는다. (선택) 
로고등록 : 로고를 등록한다. (선택)
서비스 URL : 티스토리 API를 적용할 서비스의 URL을 적는다 (선택) 
서비스 형태 : 티스토리 API를 적용할 서비스의 형태를 선택한다. (필수)
서비스 권한 : 신청할 티스토리 API의 권한을 선택한다. (필수)
CallBack : 해당 정보를 요청했을 때 응답값으로 오는 주소를 작성한다.(가장 필수)

 

 

> 오픈API 이용약관 선택하고, 위에 주황색으로 체크(✔︎) 되어 있는 부분 작성하고 등록 누르면 AppID와 Secret Key가 발급이 될 것이다. 

나의 경우에는 PostMan 으로 테스트 해봤기 때문에 PostMan CallBack Url을 입력했다. (CallBack 주소는 다음 포스팅에서..)

 

 

 

 

반응형

웹폰트 적용하는건 간단하다. 

 1) 웹폰트 파일(혹은 CDN주소) 

 2) CSS에 적용

 

👉 웹폰트 파일을 찾으러 가보자. 

Google Font : Google에서 제공하는 웹폰트 프리뷰

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

1) 나눔고딕 코딩

Embed Font

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.

<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding|Noto+Sans');
</style>

Specify in CSS

Use the following CSS rules to specify these families:

  1. font-family: 'Noto Sans', sans-serif;
  1. font-family: 'Nanum Gothic Coding', monospace;

 

2) 나눔스퀘어라운드 : 요즘에 많이 쓰인다는데 이쁘다. (난 요걸로 PICK!)

> https://github.com/innks/NanumSquareRound 

 

Build software better, together

GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

github.com

 

👉 이제 다 찾았으니 티스토리에 적용해보자. 

기존에 import되었던 폰트를 나눔스퀘어라운드로 변경하고 /**/ 를 사용하여 기존 소스를 주석처리 한다.

@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css?family=Lato:400,700');*/

@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');

font-family에 추가해준다. 

아마 순서가 Apple SD Gothic Neo가 먼저 되어 있을 텐데, 난 이번에 추가한 폰트를 맨 앞에다 추가했다. 

body, button, input, select, table, textarea {

  color: #333;

  font-family: 'NanumSquareRound', "Apple SD Gothic Neo", "Nanum Gothic", 'Lato', Helvetica, sans-serif,  "Noto Sans KR" ,"Malgun Gothic", "맑은 고딕", Dotum, '돋움' ;

}

그럼 끝. :

반응형


블로그에 소스를 삽입 하자!




1.  The latest SyntaxHighlighter version is 3.0.83download.

shttp://alexgorbatchev.com/SyntaxHighlighter/download/


2. syntaxhighlighter_3.0.83\scripts 의 파일들을 모두 업로드한다.  shCore.js and shCore.css) 

3. D:\downloads\syntaxhighlighter_3.0.83\syntaxhighlighter_3.0.83\styles 의 파일 중, 

shCore.css 그외 테마들 중에 선태해서 업로드한다 ( 나는, shCoreRDark.css )


4. skin.html에 css와 js를 include한다. 


* css (shCore.css 와 사용할 테마.css)


<link rel="stylesheet" type="text/css" href="./images/shCoreMidnight.css">


* js


필요한 js를 모두 import 한다.

<script type="text/javascript">
    SyntaxHighlighter.all();

</script>




http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html


5. 설치는 끝.


* 사용 방법

<pre /> method
 
function test()
{
alert('test');
}

<script /> method
<script type="syntaxhighlighter" class="brush: js">
<![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]>
</script>



* brush


Brush name

Brush aliases

File name

ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js



기타 사용 방법 참조

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html



반응형

+ Recent posts