그 동안 블로그에서 코드를 넣을 때 항상 syntaxhighlighter를 사용했습니다.
그리고 잘 나오는 걸 확인했었죠.

그런데 어느날 모바일에서 제 글을 보는데,, 이상하게 코드가 하나도 안보이더군요...
처음엔 제가 syntaxhighlighter를 잘 못 설치한 건 줄 아랐는데,,
결국 알고보니 <script>태그를 이용했기 때문이더군요..;;

이건 티스토리만의 문제인지,, <script>태그 자체의 문제인지는 모르겠으나 중요한건 <script>태그를 이용해서 코드를 적을 경우 모바일에서 코드를 전혀 볼 수 없다는 것입니다.ㅠ_ㅠ
<script>태그를 사용하면 안에 또 태그를 넣을 수 있어서 좋았는데,,ㅠ_ㅠ
이제 <pre>태그를 사용해야겠네요. 그러면 < 는 &lt;로 바꿔주고 >는 &gt;로 바꿔줘야겠죠ㅠ_ㅠ

에휴==333
저작자 표시
신고
Posted by Code-Moon

댓글을 달아 주세요

오늘은 이클립스에 subclipse를 설치하여 팀 프로젝트를 효율적으로 하는 방법을 배워보겠다.

팀 작업을 효율적으로 하기 위해서는 svn이라는 버전 관리 시스템이 사용된다. 이를 사용하면 업데이트한 시간별로 프로젝트를 관리할 수 있고, 동시 작업을 할 때 각자 맡은 부분을 작성한 다음 merge기능을 이용해 합쳐줄 수도 있다.
그러면 먼저 svn을 다운받아보자.

http://subversion.tigris.org/가 svn을 제공해주는 공식 홈페이지이다.
여기에서 svn을 다운받을 수 있는데 우리는 이클립스에서 작업을 진행할 것이므로 eclipse버전의 svn을 다운받아야 한다.
홈페이지의 아래쪽으로 내려보면 아래 그림과 같은 메뉴를 볼 수 있을 것이다.



위의 메뉴를 발견했으면 Eclipse를 누르자. 그러면 Subclipse라는 페이지로 넘어가게 되는데 여기에서 Download and Install을 클릭하자.




이제 다운로드 페이지에서 최신 버전의 Eclipse update site URL을 복사해야한다. 현재 최신 버전은 1.6.x이므로 이 주소를 복사하자. (여기에서 zip파일을 다운받는 것이 아니라 이클립스의 URL을 이용한 업데이트를 할 것이므로 site URL을 복사하는 것이다.)



이 주소를 복사했으면 이클립스를 켜고  Help - Install New Software... 을 클릭하자.
Add버튼을 누르고 Name과 Location란에 복사한 링크를 붙여넣자.
그러고 나면 Install목록에 아래 그림과 같이 3개가 생길 것이다. 모두 체크하고 Next버튼을 눌러서 설치하자.




소프트웨어 인스톨이 다 끝나고 나면 이클립스를 재시작하고 이클립스의 오른쪽 상단을 보자.



>>버튼을 눌러서 SVN Repository Exploring을 누르자. (만약 >>버튼을 눌러서 나오지 않는다면
버튼을 눌러서 나오는 메뉴 중에 SVN Repository Exploring이 있는지 보자. 있으면 클릭하고 없으면 Other...을 클릭해서 보면 SVN Repository Exploring이 있을 것이다. Other...을 눌러서도 없다면 svn설치가 제대로 되지 않은 것이다.)

위의 과정을 잘 따라왔다면 아래 그림과 같이 왼쪽편에 SVN Repositories창이 생긴다.



SVN Repositories창 안에서 오른 클릭하여 New - Repository Location... 을 누르자.
그러면 아래 그림과 같이 저장소의 위치를 입력하는 창이 뜬다. 여기에서 자신이 사용할 저장소의 주소를 넣으면 되는 것이다.


여기에서는 구글 프로젝트에서 제공해주는 저장소를 사용하고 있다. 하지만 개인적으로 다른 곳에 svn서버가 있어서 그것을 이용하는 것도 괜찮다.

다음 포스팅에서는 구글 프로젝트에서 어떻게 저장소를 만들고 사용하는지는 알아보도록 하자.
신고
Posted by Code-Moon

댓글을 달아 주세요

  1. 내내 2012.05.10 21:21 신고 Address Modify/Delete Reply

    헛 동수다

저번 포스팅에서 마지막에 저장소의 위치로 구글 프로젝트를 사용했었다. 그래서 이번에는 구글 코드의 프로젝트 호스팅을 이용해서 어떻게 프로젝트를 생성하고 사용하는지 알아보겠다.

먼저 구글 코드 사이트(http://code.google.com)로 이동하자.
여기에는 여러가지 서비스들이 제공되는데 우리는 프로젝트 호스팅을 사용할 것이다.


추천제품에 보면 프로젝트 호스팅 메뉴가 있는데 이를 클릭하자.
프로젝트 호스팅으로 들어가면 화면의 오른쪽 편에 2. 오픈소스 프로젝트에 참여합니다. 를 클릭하자.

그러면 Getting Started페이지로 이동하게 되는데 이 화면에서 조금만 아래쪽으로 내려가 보면 create project라는 링크가 있다.




이 링크를 따라가면 프로젝트를 생성하는 화면이 나온다.



project name : 프로젝트의 이름으로 사용된다. 영어 소문자로 시작하고, 그 뒤에는 영어 소문자, 숫자, - (빼기)만이 올 수 있다. 스페이스라든지 한글, 영어 대문자 등은 프로젝트 이름으로 사용될 수 없다.

project summary : 프로젝트에 대한 요약이다. 이 부분은 최소 몇 글자 이상 적어야 create project 버튼이 활성화 된다.

project description : 프로젝트에 대한 세부 설명이다. 이 부분도 몇 글자 이상 적어야 create project 버튼이 활성화 된다.

version of control system : 프로젝트 저장소의 타입이다. svn을 사용할 것이므로 subversion을 선택한다.

source code license : 라이센스를 선택하는 부분이다. 아무거나 선택해도 무방하다.

project labels : 블로그의 태그와 비슷한 개념이다. 다른 사람들이 검색해서 찾을 수 있게 키워드를 적는 곳이다.

위의란을 모두 제대로 입력했다면 create project버튼이 활성화될 것이다. 만약 create project버튼이 비활성화 상태라면 project summary나 project description을 더 길게 해보거나, project name이 유효한지 확인해 봐야 한다. (project name이 유효하지 않다면 바로 오른쪽에 빨간색으로 경고 메시지가 뜰 것이다.)

create project버튼을 이용해 프로젝트를 생성했다면 새로운 페이지로 넘어갔을 것이다. 이제 저장소의 주소를 알아야 한다.


source를 눌러서 이동하면 두개의 주소가 나올 것이다.

첫번째 주소는 https로 시작하고 두번째 주소는 http를 사용한다는 차이인데, 두번째 주소는 read만 가능하고 첫번째 주소로는 commit을 통해 코드의 내용을 수정하는 것이 가능하다.
따라서 우리는 첫번째 주소를 사용할 것이다. 이 주소를 이클립스에서 저장소 주소로 넣으면 된다.(https://donxu.googlecode.com/svn/trunk/)
그리고 저장소에 접속하기 위해서는 아이디와 비밀번호가 필요한데 아이디는 자신의 구글 아이디가 되고, 비밀번호는 자신의 비밀번호가 아니다.!!!
비밀 번호는 위의 그림에서 보이는 googlecode.com password.를 클릭하면 나오게 된다.


이렇게 만들어진 구글 프로젝트의 저장소를 이용해서 팀 프로젝트를 수월하게 진행할 수 있다. 물론 공개되면 안되는 프로젝트라면 이 저장소를 사용하는 것에 대해 조금 더 신중을 기울여야할 필요는 있을 것이다.
신고
Posted by Code-Moon

댓글을 달아 주세요

프로그래밍과 관련된 포스팅을 하다보면 소스 코드를 넣는 경우가 많다.
이럴 때 그냥 다른 글과 똑같이 소스 코드를 적어 넣으면 다른 글과 구별되지 않을 뿐더러 별로 이쁘지도 않다.
그래서 오늘은 SyntaxHighlighter를 이용해서 블로그에 소스코드를 넣는 방법을 알아보려고 한다.
(티스토리를 기준으로 설명할 것이다.)

먼저 http://alexgorbatchev.com/wiki/SyntaxHighlighter 로 가서 SyntaxHighlighter를 다운받자.
다운 받은 압축파일을 풀면 3개의 폴더가 있을텐데 거기에서 필요한 폴더는 scripts와 styles폴더이다.

자신의 블로그의 파일 업로드 기능을 이용해서 scripts폴더와 styles폴더 안의 파일들을 모두 업로드한다.

업로드가 완료되었다면 이제 skin.html파일을 수정해야한다.
css파일을 로드하는 부분의 코드 바로 뒤에 다음 코드를 삽입해 주자.

<link type = "text/css" rel = "stylesheet" href = "./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">
<script language="javascript" src="./images/shCore.js">< /script>
<script language="javascript" src="./images/shBrushCSharp.js">< /script>
<script language="javascript" src="./images/shBrushXml.js">< /script>
<script language="javascript" src="./images/shBrushCss.js">< /script>
<script language="javascript" src="./images/shBrushCpp.js">< /script>
<script language="javascript" src="./images/shBrushJava.js">< /script>
<script language="javascript" src="./images/shBrushJScript.js">< /script>
<script language="javascript" src="./images/shBrushPhp.js">< /script>
<script language="javascript" src="./images/shBrushAS3.js">< /script>
<script language="javascript">
SyntaxHighlighter.all();
</script>

이 부분은 css와 자바스크립트로 나눠서 설명을 하겠다.
먼저 css를 보면 기본적으로 shCore.css는 포함해야 한다. 그리고 하나 더 테마 css파일이 필요한데, shTheme으로 시작하는 css파일들이다. 이 중 하나를 선택해서 적으면 된다.
여기에서는 shThemeDefault.css를 사용했다.


자바 스크립트 부분을 보면 여기에도 shCore.js가 기본적으로 필요하다. 그리고 자신이 입력하고 싶은 코드의 언어와 관련있는 파일을 추가해줘야 한다.
여기에서는 c#, xml, css, c++, java, javascript, php, action script 3를 포함했다.

너무 많은 언어를 포함하면 약간 느려질 수도 있다고 하니 참고하자.



이제 소스 코드를 넣을 준비가 끝났다.
이제 실제로 코드를 넣어봐야 하는데 이때에는 <script />태그 또는 <pre />태그가 사용된다.
그리고 위지윅 편집모드가 아닌 html편집 모드에서 편집을 해야 한다.


먼저 <pre />태그를 사용하는 방법부터 알아보자.
<pre class="brush: js">
function foo() {
//소스 코드
}
</pre>

이렇게 태그를 이용해서 소스코드를 삽입할 수 있다. class="brush:"부분에 소스코드의 언어를 입력하면 된다.
이때 자바스크립트를 사용하고 싶다면 js, jscript, javascript중 하나를 brush 뒤에 입력하면 된다. 
소스 코드의 언어에 해당하는 브러쉬 이름과 파일 명은 아래의 표를 참고하자.

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

SyntaxHighlighter가 2.1버전으로 업데이트되기 이전까지는 <pre />태그만을 이용해서 소스코드를 넣었었다.
그런데 이 <pre />태그에는 치명적인 단점이 있다. <pre />태그 안에서 <를 사용하면 새로운 태그가 시작됨을 의미한다.
그래서 글쓴이가 원하지 않는 결과를 초래할 수 있다.

예를 들어,
#include<iostream>

int main() {
return 0;
}

위와 같은 코드를 입력하고 싶어서 <pre>코드 안에 소스를 입력하면 다음과 같은 예상치 못한 결과를 볼 수 있다.

#include<iostream>
int main() {
return 0;
}
</iostream>

이렇게 되는 이유는 간단하다. <iostream>이 태그의 시작으로 보고 자동으로 이를 닫아주는 </iostream>을 생성하기 때문이다.
그렇다면 이러한 문제를 해결하려면 어떻게 해야할까? <대신에 <에 해당하는 escape문자인 &lt;을 사용하는 것이다. 이런식으로 특수 문자를 표현되는 형식이 아닌 &와 함께 escape 문자로 바꿔서 입력하는 것이다.
그런데 이렇게 하려면 정말 귀찮다. <뿐만 아니라 여려가지 다른 기호들도 있는데 그들을 모두 코드 방식으로 입력해야 한다면 너무 불편하다.

그래서 SyntaxHighlighter 2.1버전에서는 <script />태그를 사용할 것을 추천한다.
사용방법은 다음과 같다.

<script type=" syntaxhighlighter"="" ><![CDATA[
  #include<iostream>

  int main() {
    return 0;
  }
]] >< /script>

이렇게 <script />태그를 이용하면 <![CDATA[ 이후에 escape문자를 사용할 필요없이 그대로 소스 코드를 복사 + 붙여넣기를 할 수 있다는 것이 이점이다. 위 코드를 입력하면 다음과 같은 결과를 볼 수 있다.
#include<iostream>

int main() {
return 0;
}

그래서 결론은 태그의 코드가 약간 길어지더라도 escape문자를 사용하는 것보다 나으니까 <script/>태그를 이용해서 소스 코드를 입력하자.
신고
Posted by Code-Moon

댓글을 달아 주세요

블로깅을 하다보면 글을 쓸 때에 기본적인 텍스트 에디터가 불편하다는 것을 많이 느끼게 된다.
그래서 오늘은 MS Word를 이용해서 편리하게 포스팅하는 방법을 배워보도록 하겠다.


  1. 먼저 티스토리 관리자 화면으로 들어가 보자.

    관리자 화면에서 환경설정 – BlogAPI 설정에 들어가면 아래와 같은 화면을 볼 수 있을 것이다.

    여기에서 BlogAPI 설정을 사용하도록 버튼을 누르자.

    이렇게 해야만 워드 2007을 이용해서 블로깅을 할 수 있으니 이 과정을 꼭 거치도록 하자!!

     

  2. 워드 2007을 실행하여 을 눌러 나오는 메뉴 중 를 누른다.


  3. 새문서 창이 뜨면 새 블로그 게시물을 눌러서 새 블로그 문서를 만든다.



  4. 이제 버튼을 눌러서 계정을 추가해야 한다.


    위의 그림에서 버튼을 누르면 아래와 같이 블로그 계정이라는 창이 뜬다.



    아직 계정을 등록하지 않았다면 버튼을 눌러서 계정을 등록하자.

    버튼을 누르면 아래와 같이 새 블로그 계정 창이 뜬다.



    여기서 이라고 되어 있는 드랍 박스를 클릭하면 아래 그림과 같이 기본적으로 등록이 되어 있는 블로그 공급자가 나온다.



    만약 자신의 블로그 계정이 위의 블로그 공급자 중에 하나라면 위에서 선택을 하면 되고 없다면 기타를 클릭한 후 버튼을 누르자.



    그러면 위 그림과 같은 새 계정 창이 뜨는데 여기서 ATOM이라고 되어 있는 드랍 박스를 클릭하면 아래 그림과 같이 두개의 선택 항목이 나온다.
    자신의 블로그에서 어떤 API를 지원하는 지에 따라서 둘 중 하나를 선택해야 한다.


    티스토리에서는 MetaWebLog라는 API를 사용한다.


    그래서 API에 MetaWebLog를 선택하고, 블로그 게시 URL을 입력한다. 이 때 URL은 정확히 자신의 블로그 주소가 아니다!
    텍스트 큐브의 경우에는 자신의 블로그 주소에 api라는 폴더를 추가해야 된다. 다른 블로그 공급자의 경우는 약간 다를 수도 있으니 블로그 공급자의 홈페이지를 참조하기 바란다.



    위 그림과 같이 모든 항목을 다 채우자.

    버튼을 누르기 전에, 버튼을 누르면 아래와 같이 그림 옵션 창이 뜬다.

    여기에서 확인을 해주자. 만약 이 부분을 해주지 않으면 워드로 작성한 글을 올려도 자신의 블로그에서 이미지를 볼 수 없을 것이다.

     

    이 과정을 끝내고 버튼을 누르면 아래와 같이 새로운 계정이 추가되었고 기본값으로 설정이 되어있다는 것을 확인할 수 있다.




    이제 글을 쓰면 된다.


    만약 범주(카테고리)를 설정하고 싶다면 버튼을 누른다.



    여기에서 자신이 원하는 범주를 선택하면 된다.

    글을 모두 다 입력했다면 이제 실제로 올려야 되는데 이 때에는 버튼을 누르면 쉽게 자신의 블로그에 올릴 수 있다.


    이렇게 하여 Word2007에서 블로깅을 하는 방법을 배워 보았다.
    이 방법은 잘 쓰면 정말 편하게 블로깅을 할 수 있는 방법이라 생각된다. 아직 그렇게 많이 사용해 보지는 않았지만 그림 편집이나 효과 등에서 기본적인 블로그의 에디터보다 훨씬 뛰어나고 반면에 태그를 입력할 수 없다는 단점이 있었다.

신고
Posted by Code-Moon

댓글을 달아 주세요

티스토리 툴바