source-git / gnome-devel-docs

Clone
Source Code
GIT

Blame platform-demos/ko/hellognome.js.page

c8 master
  1.   1470ead63cdc56c84b491edf46f35990ec57fc33
  2.   platform-demos
  3.   ko
  4.   hellognome.js.page
Blob History Raw
Packit 1470ea
Packit 1470ea 
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="topic" style="task" id="hellognome.js" xml:lang="ko">
Packit 1470ea 
  <info>
Packit 1470ea 
    <link type="guide" xref="beginner.js#tutorials"/>
Packit 1470ea 
    <revision version="0.1" date="2012-07-17" status="draft"/>
Packit 1470ea
Packit 1470ea 
    <credit type="author copyright">
Packit 1470ea 
      <name>Taryn Fox</name>
Packit 1470ea 
      <email its:translate="no">jewelfox@fursona.net</email>
Packit 1470ea 
      <years>2012</years>
Packit 1470ea 
    </credit>
Packit 1470ea
Packit 1470ea 
    <desc>첫 그놈 프로그램!</desc>
Packit 1470ea
Packit 1470ea 
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea 
      <mal:name>조성호</mal:name>
Packit 1470ea 
      <mal:email>shcho@gnome.org</mal:email>
Packit 1470ea 
      <mal:years>2017</mal:years>
Packit 1470ea 
    </mal:credit>
Packit 1470ea 
  </info>
Packit 1470ea
Packit 1470ea 
  <title>1. 안녕, 그놈!</title>
Packit 1470ea 
  <synopsis>
Packit 1470ea 
    
이 지침서에서는 자바스크립으로 첫 그놈 프로그램을 작성하는 방법을 알려드립니다. 웹 프로그램을 작성했던 것처럼 동일한 방식으로 그놈 프로그램 작성시 자바스크립트언어를 활용합니다. 그 다음, 다른 그놈 앱 처럼 보이는 프로그램을 작성할 목적으로 "자체" 위젯을 활용하는 방법을 알아보겠습니다.
Packit 1470ea 
    <note style="warning">
컴퓨터에 그놈을 설치하고 코드를 작성할 <link xref="set-up-gedit.js">지에디트</link>를 설정하셨죠? 우선 이 과정을 거쳐야합니다.
</note>
Packit 1470ea 
  </synopsis>
Packit 1470ea
Packit 1470ea 
  <links type="section"/>
Packit 1470ea
Packit 1470ea 
  <section id="webapp">
Packit 1470ea 
    <title>웹 페이지로 시작하죠</title>
Packit 1470ea
Packit 1470ea 
    
HTML, CSS, JavaScript 기본 코드가 몇개 있습니다. 어디서 많이 본 것 같죠?
Packit 1470ea
Packit 1470ea 
<!DOCTYPE html>
Packit 1470ea 
<html>
Packit 1470ea 
    <head>
Packit 1470ea 
        <title>Hello, GNOME!</title>
Packit 1470ea
Packit 1470ea 
        <!-- Use JavaScript to show a greeting when someone clicks the button -->
Packit 1470ea 
        <script type="application/javascript">
Packit 1470ea 
        function greeting () {
Packit 1470ea 
            document.getElementById ("greeting").innerHTML = ("O hai!");
Packit 1470ea 
        }
Packit 1470ea 
        </script>
Packit 1470ea
Packit 1470ea 
        <!-- Very basic CSS style using the GNOME font -->
Packit 1470ea 
        <style type="text/css">
Packit 1470ea 
            body {
Packit 1470ea 
                font-face: Cantarell, sans-serif;
Packit 1470ea 
                text-align: center; }
Packit 1470ea 
        </style>
Packit 1470ea
Packit 1470ea 
    </head>
Packit 1470ea 
    <body>
Packit 1470ea 
        <br /> <br />
Packit 1470ea 
        <button type="button" onclick="greeting()">Hello, GNOME!</button>
Packit 1470ea
Packit 1470ea 
        <!-- Empty H1 element gets filled in when the button is clicked -->
Packit 1470ea 
        <h1 id="greeting"></h1>
Packit 1470ea 
    </body>
Packit 1470ea 
</html>
Packit 1470ea
Packit 1470ea
Packit 1470ea 
    
이걸 <file>hellognome.html</file> 파일로 저장하고 실행했을 때 어떻게 나오는지 살펴보도록 하죠!
Packit 1470ea
Packit 1470ea 
    <media type="image" mime="image/png" src="media/hellognomewebapp.png"/>
Packit 1470ea
Packit 1470ea 
    
웹 브라우저에서 <file>hellognome.html</file> 파일을 열면 위 코드를 실행할 수 있습니다. 하지만 스크린샷으로 보시듯이 웹 앱을 실행할 그놈 프로그램을 만들려고 합니다. 창 크기를 조절하거나 최대로 확대할 수 있으며, 다른 그놈 앱처럼 구석의 X를 눌러 닫을 수 있습니다. 차이점이 있다면 프로그램에서 왭 코드를 실행한다는 점입니다.
Packit 1470ea 
    
대부분은요? 그놈에서 동작하는 앱의 모든 부분을 작성할 때 JavaScript를 사용하는 편으로 계속 진행하겠습니다. 코드를 보고 어떻게 돌아가는지 보도록 하죠!
Packit 1470ea 
  </section>
Packit 1470ea
Packit 1470ea 
  <section id="window">
Packit 1470ea 
    <title>웹 앱에 맞출 그놈 창 만들기</title>
Packit 1470ea
Packit 1470ea 
    
우선 그놈에게 gjs를 사용하는 JavaScript 프로그램임을 알려야 합니다. gjs는 JavaScript 코드를 이해할 수 있는 기계 명령으로 바꾸는 그놈의 처리 수단입니다. 따라서 프로그램 시작 부분에 항상 이 줄을 넣어야합니다.
Packit 1470ea
Packit 1470ea 
#!/usr/bin/gjs
Packit 1470ea
Packit 1470ea 
    
그 다음 우리가 가져올 라이브러리를 그놈에게 알려야겠죠.
Packit 1470ea
Packit 1470ea 
const GLib = imports.gi.GLib;
Packit 1470ea 
const Gtk = imports.gi.Gtk;
Packit 1470ea 
const Lang = imports.lang;
Packit 1470ea 
const Webkit = imports.gi.WebKit;
Packit 1470ea
Packit 1470ea 
    
jQuery가 JavaScript으로 할 수 있는 추가 행동을 우리에게 알려주도록 라이브러리를 추가하는 방식처럼, 이 라이브러리는 그놈 앱에서 처리할 수 있는 새 기능을 제공해줍니다:
Packit 1470ea 
    <steps>
Packit 1470ea 
      <item>
<file>Gtk</file>와 <file>Lang</file>은 그놈 프로그램의 기본적인 부분이며, 창과 위젯을 만들어 한데 묶어둘 수 있습니다.
</item>
Packit 1470ea 
      <item>
<file>GLib</file>는 우리가 만든 <file>hellognome.html</file> 파일에서 그놈에서 처리할 수 있는 동작이 가능하게 하는 보조 라이브러리입니다.
</item>
Packit 1470ea 
      <item>
그리고 <file>Webkit</file>은 HTML 파일을 여는 브라우저 창을 만들 때 사용하는 웹 렌더링 엔진입니다.
</item>
Packit 1470ea 
    </steps>
Packit 1470ea
Packit 1470ea 
    
이제 프로그램 그 자체를 만들어보죠:
Packit 1470ea
Packit 1470ea 
const HelloGNOME = new Lang.Class ({
Packit 1470ea 
    Name: 'Hello GNOME',
Packit 1470ea 
이
Packit 1470ea
Packit 1470ea 
    
이 코드는 이전에 다루어 보았다면 객체 지향 자바스크립트와 비슷해보일겝니다. 맞습니다. 이 전체 프로그램은 HelloGNOME 클래스입니다. 그리고 보시는 바와 같이 프로그램 이름을 지정하는 속성을 넣었습니다.
Packit 1470ea
Packit 1470ea
Packit 1470ea 
    // Create the application itself
Packit 1470ea 
    _init: function () {
Packit 1470ea 
        this.application = new Gtk.Application ();
Packit 1470ea
Packit 1470ea 
        // Connect 'activate' and 'startup' signals to the callback functions
Packit 1470ea 
        this.application.connect('activate', Lang.bind(this, this._onActivate));
Packit 1470ea 
        this.application.connect('startup', Lang.bind(this, this._onStartup));
Packit 1470ea 
    },
Packit 1470ea
Packit 1470ea 
    // Callback function for 'activate' signal presents windows when active
Packit 1470ea 
    _onActivate: function () {
Packit 1470ea 
        this._window.present ();
Packit 1470ea 
    },
Packit 1470ea
Packit 1470ea 
    // Callback function for 'startup' signal builds the UI
Packit 1470ea 
    _onStartup: function () {
Packit 1470ea 
        this._buildUI ();
Packit 1470ea 
    },
Packit 1470ea
Packit 1470ea 
    
여러분이 빌드한 모든 JavaScript 프로그램을 덜 또는 덜 복사하야 붙여넣을 코드 일부입니다. 이 코드로 새 프로그램을 만들고, activate 시그널과 startup 시그널을 함수에 바인딩하여 창을 나타내고 사용자 인터페이스를 구성합니다.
Packit 1470ea 
    
무슨 얘길까요? 그놈 프로그램의 모든 부분에서는 어떤 중요한 동작이 일어날 때 시그널을 내보냅니다. 예컨대, 단추를 누르면 clicked 시그널을 내보냅니다. 우리는 시그널을 처리할 함수와 연결하고 어떤 일을 벌일 코드를 만들겠습니다. 각각 두 인자를 가진 객체의 연결 메서드를 활용하겠습니다. 우리가 처리하고자 하는 시그널, 그리고 우리가 처리하고자 하는 시그널을 어떤 함수와 연결할 지 지시할 때 사용하는 Lang.bind 함수를 인자로 전달합니다.
Packit 1470ea 
    
이 경우 activate 시그널을 처리할 때 _onActivate 함수를, startup 시그널을 처리할 때 _onStartup을 사용하겠습니다. _onActivate는 창 자체를 나타내러고 지시합니다. 그래서 기본적으로는 <keyseq><key>Alt</key> <key>Tab</key></keyseq> 키를 누를 때마다 예상하던 대로 프로그램이 나타납니다. _onStartup 함수에서 사용자 인터페이스를 만들며 다음에  우리가 살펴볼 _buildUI를 호출합니다.
Packit 1470ea 
    <note style="tip">
위 코드를 프로그램에 복사하여 붙여넣을 때마다 바꿀 이름이 유일한 이름인지 확인하십시오.
</note>
Packit 1470ea 
  </section>
Packit 1470ea
Packit 1470ea 
  <section id="ui">
Packit 1470ea 
    <title>창 UI 디자인</title>
Packit 1470ea 
    
_buildUI 함수에서 그놈에게 창과 창에 있는 내용을 한번에 하나씩 언급하고 있습니다. 그 다음 개별 요소를 함께 연결하고 화면에 한번에 넣습니다.
Packit 1470ea
Packit 1470ea
Packit 1470ea 
    // Build the application's UI
Packit 1470ea 
    _buildUI: function () {
Packit 1470ea
Packit 1470ea 
        // Create the application window
Packit 1470ea 
        this._window = new Gtk.ApplicationWindow  ({
Packit 1470ea 
            application: this.application,
Packit 1470ea 
            title: "Welcome to GNOME",
Packit 1470ea 
            default_height: 200,
Packit 1470ea 
            default_width: 400,
Packit 1470ea 
            window_position: Gtk.WindowPosition.CENTER });
Packit 1470ea
Packit 1470ea
Packit 1470ea 
    
우리가 만들 첫 객체는 ApplicationWindow입니다. 제목 표시줄에 들어갈 제목, 우리가 위에서 만든 프로그램에 필요한 application 속성이 필요합니다. 모양새를 바꾸는 방법에는 여러가지가 있지만 <link xref="GtkApplicationWindow.js">ApplicationWindow</link> 참고 페이지의 내용에서 자세한 내막을 설명해줍니다. 여기서 보시듯, (픽셀 단위) 기본 너비, 높이 값을 설정하고 그놈에게 화면 한가운데에 창을 나타내고 싶음을 지시합니다.
Packit 1470ea
Packit 1470ea 
        // Create a webview to show the web app
Packit 1470ea 
        this._webView = new Webkit.WebView ();
Packit 1470ea
Packit 1470ea 
        // Put the web app into the webview
Packit 1470ea 
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
Packit 1470ea 
            "/hellognome.html", null));
Packit 1470ea
Packit 1470ea 
    
시작 부분에서 Webkit을 어떻게 가져왔는지 기억하시죠? 여기서는 앱을 안에다 넣고 실행할 수 있는 더도 덜도 아닌 웹 브라우저, WebView라고 하는 Webkit 클래스의 새 인스턴스를 만들겠습니다. 그 다음 프로그램을 시작할 때 우리가 불러올 URI를 설정하겠습니다.
Packit 1470ea 
    
<link href="http://gnome.org">http://gnome.org</link>와 같은 웹 URI를 그냥 설정 할 수 있습니다. 대신 우리가 작성한 <file>hellognome.html</file> 파일이 어디에 있는지 WebView에 알려줄 GLib 보조 함수 몇가지를 활용하겠습니다. GLib.get_current_dir에서는 앱을 실행할 디렉터리를 반환하고 GLib.filename_to_uri에서는 WebView의 load_uri 함수가 이해할 수 있도록 파일의 경로와 파일 이름을 URI 형식으로 반환합니다(filename_to_uri의 두번째 매개변수는 용도와 값을 바꿔야 할 이유를 정확하게 알기 전까지는 null 값이어야 합니다).
Packit 1470ea
Packit 1470ea 
        // Put the webview into the window
Packit 1470ea 
        this._window.add (this._webView);
Packit 1470ea
Packit 1470ea 
        // Show the window and all child widgets
Packit 1470ea 
        this._window.show_all();
Packit 1470ea 
    },
Packit 1470ea
Packit 1470ea 
});
Packit 1470ea
Packit 1470ea 
    
각 창은 하나 그리고 오직 하나의 위젯만을 소유할 수 있습니다. 보통 여러 위젯을 넣을 때 <link xref="grid.js">Grid</link>와 같은 컨테이너 위젯을 활용하고 창의 추가 함수로 Grid 안에 넣습니다. 우리는 WebView만 필요하기 때문에, WebView를 창에 넣기만 하면 됩니다. 그 다음 창을 만드는 _buildUI 함수의 마지막 부분으로 창에게 자신과 창의 내용을 보여주도록 지시하겠습니다.
Packit 1470ea
Packit 1470ea 
// Run the application
Packit 1470ea 
let app = new HelloGNOME ();
Packit 1470ea 
app.application.run (ARGV);
Packit 1470ea
Packit 1470ea 
    
마지막으로 HelloGNOME 클래스의 새 인스턴스를 만들고 그놈에게 이 코드를 실행하라고 지시하겠습니다.
Packit 1470ea 
  </section>
Packit 1470ea
Packit 1470ea 
  <section id="run">
Packit 1470ea 
    <title>그놈 프로그램 실행</title>
Packit 1470ea
Packit 1470ea 
    
이제 우리는 첫 그놈 프로그램을 만들었으니 시험해볼 떄가 왔습니다. 만드신 프로그램을 컴파일하거나 특별한 프로그램 마냥 설치할 필요가 없습니다. 그놈에는 그놈 셸을 실행하게 하는 gjs를 자체적으로 보유하고 있습니다. 그냥 터미널 상에서 접근할 수 있는 그 어떤 디렉터리에든 <file>hellognome.html</file> 파일과 실제 프로그램 <file>hellognome.js</file>파일을 저장하십시오(보통 사용자 이름이 붙은 '내 폴더'를 엽니다). 그 후 터미널을 열고 다음 명령을 입력하십시오:
Packit 1470ea 
    <screen> <output style="prompt">$ </output>gjs hellognome.js </screen>
Packit 1470ea 
    
앞서 보신바와 같이 간단한 메시지를 띄우는 단추가 나타나는, 더 혹은 덜 유사한 화면을 볼 수 있어야합니다.
Packit 1470ea
Packit 1470ea 
    <note style="tip">
Packit 1470ea 
        
터미널 명령을 사용핧 수 있습니다.
Packit 1470ea 
        <screen> <output style="prompt">$ </output>cd (디렉터리 이름) </screen>
Packit 1470ea 
        
터미널에서 저장한 파일이 어디에있는지 찾을 때 여러 디렉터리를 탐색하는 명령입니다. 그놈 파일 관리자 노틸러스에는 파일 탐색 창 어디에서든 마우스 오른쪽 단추를 누른 후 해당 위치에서 터미널을 여는 확장 기능도 있습니다. 새 프로그램을 설치할 때 사용하는 앱(프로그램 추가/제거 또는 소프트웨어 센터)을 확인해보십시오.
Packit 1470ea 
    </note>
Packit 1470ea 
  </section>
Packit 1470ea
Packit 1470ea 
  <section id="whatsnext">
Packit 1470ea 
    <title>다음은요?</title>
Packit 1470ea
Packit 1470ea 
    
HTML 코드와 웹 뷰 코드 대신, 다른 프로그램 같이 "자체" 그놈 프로그램을 빌드하는 방법을 알아보려면  <link xref="02_welcome_to_the_grid.js">다음 따라하기 지침서로 계속 진행하십시오</link>. 아니면 Gtk 위젯 예제 코드를 보고 싶으시면 일부 <link xref="beginner.js#samples">코드 예제</link>를 살펴보십시오.
Packit 1470ea 
    
마지막으로 웹용으로 만든 JavaScript 라이브러리로 그놈 프로그램을 만들어보고 싶다면, 그냥 여기서 멈추고 계속 진행하실 수 있습니다. 다른 앱처럼 데스크톱의 현재 활동 메뉴에 프로그램이 나타나도록 .desktop 파일을 만드는 방법을 알아보려면 <link xref="beginner.js#tutorials">다음 따라하기 지침서</link>를 확인해보십시오.
Packit 1470ea 
  </section>
Packit 1470ea
Packit 1470ea 
  <section id="complete">
Packit 1470ea 
    <title>완전한 코드 예제</title>
Packit 1470ea 
#!/usr/bin/gjs
Packit 1470ea
Packit 1470ea 
imports.gi.versions.Gtk = '3.0';
Packit 1470ea
Packit 1470ea 
const GLib = imports.gi.GLib;
Packit 1470ea 
const Gtk = imports.gi.Gtk;
Packit 1470ea 
const Webkit = imports.gi.WebKit;
Packit 1470ea
Packit 1470ea 
class HelloGNOME {
Packit 1470ea
Packit 1470ea 
    // Create the application itself
Packit 1470ea 
    constructor() {
Packit 1470ea 
        this.application = new Gtk.Application ();
Packit 1470ea
Packit 1470ea 
        // Connect 'activate' and 'startup' signals to the callback functions
Packit 1470ea 
        this.application.connect('activate', this._onActivate.bind(this));
Packit 1470ea 
        this.application.connect('startup', this._onStartup.bind(this));
Packit 1470ea 
    }
Packit 1470ea
Packit 1470ea 
    // Callback function for 'activate' signal presents windows when active
Packit 1470ea 
    _onActivate() {
Packit 1470ea 
        this._window.present();
Packit 1470ea 
    }
Packit 1470ea
Packit 1470ea 
    // Callback function for 'startup' signal builds the UI
Packit 1470ea 
    _onStartup() {
Packit 1470ea 
        this._buildUI();
Packit 1470ea 
    }
Packit 1470ea
Packit 1470ea 
    // Build the application's UI
Packit 1470ea 
    _buildUI() {
Packit 1470ea
Packit 1470ea 
        // Create the application window
Packit 1470ea 
        this._window = new Gtk.ApplicationWindow  ({
Packit 1470ea 
            application: this.application,
Packit 1470ea 
            title: "Welcome to GNOME",
Packit 1470ea 
            default_height: 200,
Packit 1470ea 
            default_width: 400,
Packit 1470ea 
            window_position: Gtk.WindowPosition.CENTER });
Packit 1470ea
Packit 1470ea 
        // Create a webview to show the web app
Packit 1470ea 
        this._webView = new Webkit.WebView ();
Packit 1470ea
Packit 1470ea 
        // Put the web app into the webview
Packit 1470ea 
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
Packit 1470ea 
            "/hellognome.html", null));
Packit 1470ea
Packit 1470ea 
        // Put the webview into the window
Packit 1470ea 
        this._window.add (this._webView);
Packit 1470ea
Packit 1470ea 
        // Show the window and all child widgets
Packit 1470ea 
        this._window.show_all();
Packit 1470ea 
    }
Packit 1470ea
Packit 1470ea 
};
Packit 1470ea
Packit 1470ea 
// Run the application
Packit 1470ea 
let app = new HelloGNOME ();
Packit 1470ea 
app.application.run (ARGV);
Packit 1470ea
Packit 1470ea 
  </section>
Packit 1470ea 
</page>

Powered by Pagure 5.13.3

SSH Hostkey/Fingerprint | Documentation