'전체'에 해당되는 글 67건

  1. Node.js express 4.x 프레임워크 설치 및 실행
  2. 유니티(Unity) 설치하기
  3. 맥(Mac)에서 파이썬(Python) 설치하기 (5)
  4. 티스토리에 프로그램 소스코드 테마적용하기 - SyntaxHighlighter (1)
  5. Pinterest 이미지기반 소셜 큐레이션 서비스 (2)

Node.js express 4.x 프레임워크 설치 및 실행



§ express 프레임워크란?

  • express 모듈로 만든 프레임워크
  • 프로젝트를 손쉽게 만들어준다.
  • 기본적인 뷰 지원과 세션 지원을 한다.

설치
  • 관리자 권한으로 설치해야 한다.
$ sudo npm install -g express
[ sudo ] password for USER: 비밀번호 입력


프로젝트 생성

  • 'express 프로젝트명' 형태 명령어를 사용하여 프로젝트를 생성한다.
$ express HelloExpress

express 프레임워크과 관련된 모듈 설치

$ cd HelloExpress && npm install
  • HelloExpress 프로젝트를 생성했으므로 HelloExpress 폴더가 생성되어 있는 상태이다.
  • cd HelloExpress 명령어로 폴더에 들어간 후 npm install 명령어로 관련 모듈이 자동으로 설치가 된다.

express 프로젝트 실행
  • express 2.x의 경우 아래 명령어도 실행한다.
$ node app

  • express 4.x의 경우 아래 명령어로 실행한다. app으로 실행이 안된다.
$ node ./bin/www


  • 프로젝트 실행은 기본적으로 3000 포트를 사용한다. http://localhost:3000 을 브라우저에 입력하여 접속하면 아래와 같은 화면이 출력된다.





'Programming > Node.js' 카테고리의 다른 글

Node.js express 4.x 프레임워크 설치 및 실행  (0) 2016.02.11
Node.js express 모듈  (6) 2015.01.25
Node.js 외부 모듈  (0) 2014.11.12
Node.js http 모듈  (0) 2014.11.05
Node.js 이벤트  (0) 2014.07.06
Node.js 기본 내장 모듈  (2) 2014.06.29

유니티(Unity) 설치하기





1. 다운로드


  • "PERSONAL" 맨 아래의 Free Download 를 누른다.
    • 스터디 용으로 사용하기에 충분한 버전이다.
    • 유료버전과 무료버전의 차이를 보여주고 있다.



2. 설치
  • DOWNLOAD INSTALLER 를 누른다.


  • 다운로드 된 "UnityDownloadAssistant-5.1.1f1.dmg" 파일을 실행한다. "Unity Download Assistant" 를 더블클릭한다.



  • "열기" 버튼을 누른다.


  • Install 화면이다. "Continue" 버튼을 누른다.


  • 라이센스 약관 화면이다. "Continue" 버튼을 누른다.


  • 라이센스 약관에 동의하는지 확인하는 화면이다. "Agree" 버튼을 누른다.


  • 설치할 컴포넌트를 선택하는 화면이다. 설치할 항목을 선택 후 "Continue" 버튼을 누른다.
    • Unity 5.1.1f1 : Unity를 사용하기 위해서 반드시 설치해야 할 항목
    • Web Player : Internet Explorer, Chrome, Firefox 등의 웹브라우저에서도 Unity로 만든 프로그램 실행이 가능하다.
    • Standard Assets : Assets은 게임개발에 필요한 리소스를 말한다. 이미지 파일이나 기본 스크립트 등을 말한다.
    • Example Project : 예제용 프로젝트이다.



  • 맥 로그인 계정을 입력한다.


  • 설치할 디스크(Macintosh HD)를 선택 후 "Continue" 버튼을 누른다.


  • 파일을 다운로드하는 화면이다.


  • 설치가 완료되었다.




3. Unity 가입
  • 설치된 Unity 를 실행하면 아래 화면처럼 이메일주소와 비밀번호를 묻는다.
  • 계정이 없으므로 "create one" 글씨를 클릭한다.



  • 웹브라우저가 실행되면서 Unity3d 사이트로 이동된다.
    • 이름, 이메일, 비밀번호 등 필요한 정보를 입력한 뒤 "Create account" 버튼을 누른다.


  • 입력한 이메일주소로 인증메일을 보냈으니 이메일을 확인하여 계정을 활성화 시키라는 메시지가 나온다.


  • 도착한 이메일의 화면이다. "Confirm email" 버튼을 누른다.


  • 성공적으로 계정이 확인되었고 로그인을 하라는 메시지가 나온다. 이메일과 비밀번호를 입력후 "Sign in" 버튼을 클릭한다.



  • 로그인에 성공한 화면이다.



4. Unity 실행

  • 위에서 실행했던 Unity 화면을 보자. 가입한 계정으로 이메일과 비밀번호를 입력한 뒤 "Sign In" 버튼을 누른다.



  • Unity를 Professional Edition으로 사용할 지, Personal Edition 으로 사용할지 선택하는 화면이다. Personal Edition 을 선택하고 "Next" 버튼을 누른다.
    • Professional Edition은 유료로 사용할 수 있으며 Serial Number를 입력해야 한다.
    • Personal Edition은 무료이다.


  • 라이센스 동의화면이다. "I agree" 버튼을 누른다.


  • 설문조사 화면이다. 질문에 대한 몇 개의 답을 작성했는데 생각보다 문항이 많아서 그만두고 다음 화면으로 넘어갔다.


  • 최종화면이다. "Start Using Unity" 버튼을 누르면 Unity가 실행된다.




링크



'Programming > Unity' 카테고리의 다른 글

유니티(Unity) 설치하기  (0) 2015.06.21

맥(Mac)에서 파이썬(Python) 설치하기




1. 파이썬 다운로드

  • http://www.python.org 에 접속하여 Downloads 를 클릭한다.


  • Download Python 3.4.3 을 클릭한다.



2. 설치

  • 설치과정은 간단하다. [계속] 버튼을 눌러주고 약관동의에서는 [동의] 버튼을 눌러주고 [설치] 버튼을 눌러주면 끝이다.
  • 아래 그림 순서대로 진행하면 된다.











  • Launchpad 에 가면 아래 그림처럼 2개의 앱이 설치된 것을 확인할 수 있다.




3. Python IDLE

  • IDLE은 Intergrated Development Environment 의 약어로 통합개발환경이라는 의미다.
  • IDLE을 통해 파이썬이란 언어로 컴퓨터와 대화하는 공간이라 생각하면 된다.
  • 다음은 Launchpad 에 들어가 "IDLE" 을 실행시킨 화면이다.


  • 아래 print 명령어를 그대로 IDLE에 입력후 엔터를 눌러보자.

>>> print("Hello World")


  • print 명령문 실행결과 화면이다. Hello World 가 출력되는 것을 볼 수 있다.



4. IDLE and tkinter with Tcl/Tk on Mac OS X
  • IDLE 실행하면 경고 문구가 있다.



  • 경고 문구에 적힌대로 Tcl/Tk (8.5.9) 버전이 불안정하므로 http://www.python.org/download/mac/tcltk/ 에 가보자.
  • ActiveTcl 8.5 글자를 클릭하자.



  • Download ActiveTcl 8.6.4 버튼 이미지를 클릭하면 안된다. 8.6.4 버전으로는 해결되지 않는다.
  • 빨간색 박스로 표시한 8.5.18.0 버전에 해당하는 Mac Disk Image 를 클릭한다. "ActiveTcl8.5.18.0.298892-macosx10.5-i386-x86_64-threaded.dmg" 파일이 다운로드 된다.



  • 다운로드돈 dmg 파일을 실행한다.




  • ActiveTcl-8.5.pkg 부분을 더블클릭하면 "확인되지 않은 개발자자가 배포했기 때문에 열 수 없습니다."란 안내메시지가 나오므로 마우스 오른쪽 버튼을 클릭한다.

  • [ 다음으로 열기 > 설치 프로그램(기본) ] 을 클릭한다.



  • [열기]를 누른다.



  • [계속]을 눌러 설치를 진행한다.




  • [동의]를 누른다.




  • 각자 컴퓨터에 맞는 계정을 입력하고 [소프트웨어 설치]를 누른다.



  • 설치완료



  • IDLE을 실행하면 경고 메시지가 사라진 것을 확인할 수 있다.

  • 2시간 넘도록 영어 페이지들을 보며 이렇게 저렇게 설치했다가 지웠다가 하면서 해결!!!




링크
  • 파이썬 공식 사이트 : http://www.python.org
  • Tcl/Tk : http://www.python.org/download/mac/tcltk/


'Programming > Python' 카테고리의 다른 글

맥(Mac)에서 파이썬(Python) 설치하기  (5) 2015.06.18
문자열  (0) 2009.08.23
수치 자료형과 연산자  (0) 2009.08.23
제어문  (0) 2009.08.23
Python 기초  (0) 2009.08.23

티스토리에 프로그램 소스코드 테마적용하기 - SyntaxHighlighter





티스토리 블로그에 프로그램 소스코드를 작성하면 일반적인 텍스트 방식으로 표현되기에 가독성이 떨어진다.

프로그램 소스코드를 좀 더 읽기 쉽게 표현해주는 SyntaxHighlighter 를 티스토리 블로그에 적용하는 방법에 대해 알아보자.



1. 다운로드

  • 다운로드 주소 : http://alexgorbatchev.com/SyntaxHighlighter/download/
  • 다운로드 주소로 접속하여 "Click here to download" 를 클릭하면 최신 버전으로 다운로드 된다. (v3.0.83)
  • 다운로드된 syntaxhighlighter_3.0.83.zip 파일을 압축해제한다.
  • 압축해제하면 아래 그림처럼 파일구성을 하고 있다. 이 중 "scripts"와 "styles"를 티스토리에 업로드 해야한다.




2. 티스토리에 파일 업로드

  • 티스토리 관리자 모드로 로그인한다.
  • " 꾸미기 > HTML/CSS 편집 " 메뉴로 이동하여 "파일 업로드" 탭을 클릭하면 위 화면을 볼 수 있다.
  • "추가" 버튼을 클릭하여 다운로드 받았던 "styles"와 "scripts" 폴더안의 파일을 모두 업로드한다.

3. 업로드한 파일을 스킨에 적용하기
    • " 꾸미기 > HTML/CSS 편집 " 메뉴의 "HTML/CSS" 탭으로 이동한다.
    • "skin.html" 에서 "</body>" 바로 위에 아래 스크립트를 입력한다. (Ctrl + F 로 </body>를 검색한다.)

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    • 스크립트를 입력한 화면

    • Default 테마 외에 다른 테마를 적용하고 싶으면 shCore.css 와 shThemeDefault.css 파일명을 변경하면 된다.

    4. SyntaxHighlighter를 이용하여 소스코드 입력하기
    • 글쓰기 화면에서 HTML 체크박스를 선택하면 HTML 입력화면으로 변경된다.


    • SyntaxHighlighter를 이용하려면 아래 형식으로 작성해야 한다.
    형식)
    <pre class="brush:브러시이름">
    소스코드 입력
    </pre>

    예제) javascript 소스코드
    <pre class="brush:html">
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <script type="text/javascript" src="./images/shBrushBash.js"></script>
    <script type="text/javascript" src="./images/shBrushCpp.js"></script>
    <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
    <script type="text/javascript" src="./images/shBrushDiff.js"></script>
    <script type="text/javascript" src="./images/shBrushGroovy.js"></script>
    <script type="text/javascript" src="./images/shBrushJava.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPhp.js"></script>
    <script type="text/javascript" src="./images/shBrushPython.js"></script>
    <script type="text/javascript" src="./images/shBrushSql.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushVb.js"></script>
    <link rel="stylesheet" type="text/css" href="./images/shCore.css">
    <link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">
    <script type="text/javascript">
    SyntaxHighlighter.all();
    </script>
    </pre>

    결과) Emacs 테마로 적용된 모습을 볼 수 있다.


    Pinterest 이미지기반 소셜 큐레이션 서비스



    소셜 큐레이션 서비스를 알아보던 중 Pinterest(핀터레스트)가 대표적으로 많이 언급되어 알아보고자 한다.


    소셜 큐레이션이란?

    큐레이션이란 박물관이나 미술관에서 쓰이는 용어로 전시된 작품을 기획하고 설명하는 큐레이터에서 파생된 단어이다.

    요즘같이 정보가 넘쳐나는 정보홍수의 시대에 정보가 과잉됨에 따라 정작 필요한 것을 얻지 못하고 정보 공해에 의해 혼란스럽기까지 하다.

    이에 원하는 정보를 수집, 분류, 공유함으로써 정보를 가치있게 하는 것을 소셜 큐레이션이라 한다.



    이미지 기반 소셜 큐레이션 서비스의 대표 'Pinterest (핀터레스트)'

    핀터레스트는 이미지 기반 소셜 큐레이션 서비스이다.

    사용자가 인터넷 서핑을 하다가 원하는 이미지가 있을 경우 '핀잇(Pin it)'을 하면 핀터레스트에 스크랩이 된다. 이미지를 클릭하면 이미지가 있었던 원래 페이지로 이동하여 쉽게 접근이 가능하다.

    예를 들어 일반적으로 요리를 좋아하는 사람들은 레시피에 대한 정보를 다시 찾아보기 위해 에버노트나 즐겨찾기 등의 다양한 방법으로 저장해놓곤 한다.(아니면 일일이 필요할 때마다 검색해보곤 한다.) 일종의 필요한 정보를 수집하는 것인데 여간 불편한 것이 아니다.

    이런 점을 해결해 주는 서비스가 소셜 큐레이션 서비스라 할 수 있다.



    트랜드 파악이 쉬운 'Pinterest (핀터레스트)'

    핀터레스트를 가입하면 제일 먼저 관심사 주제를 팔로우(핀 설정)하도록 되어있다.

    전세계 사람들이 수집하여 올린 정보에서 내가 설정한 핀 주제에 해당되는 것을 보여준다.

    사람들이 수집한 정보는 관심이 있다는 것이고 그것이 트랜드라 할 수 있다.

    영감이 필요한 작업에 있어서 좋을거라 생각된다.



    서비스 소개 영상





    링크