|
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="guide" style="task" id="hello-world.js" xml:lang="ko">
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">Hello World (JavaScript)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#tutorials" group="#first"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<revision version="0.1" date="2013-06-17" status="review"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Susanna Huhtanen</name>
|
|
Packit |
1470ea |
<email its:translate="no">ihmis.suski@gmail.com</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
<credit type="editor">
|
|
Packit |
1470ea |
<name>Tiffany Antopolski</name>
|
|
Packit |
1470ea |
<email its:translate="no">tiffany.antopolski@gmail.com</email>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>기본 "hello, world" 프로그램</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>Hello World 프로그램의 <file>tar.xz</file> 파일을 빌드하고, 설치하고, 만들기</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
|
|
Packit |
1470ea |
<synopsis>
|
|
Packit |
1470ea |
이 지침서에서는 다음 방법을 보여줍니다:
|
|
Packit |
1470ea |
<list style="numbered">
|
|
Packit |
1470ea |
<item>JavaScript와 GTK+로 작은 "Hello, World" 프로그램 만들기 </item>
|
|
Packit |
1470ea |
<item><file>.desktop</file> 파일 만들기 </item>
|
|
Packit |
1470ea |
<item>빌드 시스템 구성 방법 </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
</synopsis>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="HelloWorld"><title>프로그램 만들기</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="script"><title>실행 프로그램 스크립트</title>
|
|
Packit |
1470ea |
스크립트의 첫줄에 다음 줄이 들어가있어야합니다:
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
이 부분은 스크립트에서 <link href="https://live.gnome.org/Gjs/">Gjs</link>를 활용하겠다고 알려줍니다. gjs는 그놈용 자바스크립트 바인딩입니다.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="imports"><title>가져올 라이브러리</title>
|
|
Packit |
1470ea |
const Lang = imports.lang;
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
우리가 작성한 스크립트가 그놈에서 동작하게 하려면, 그놈 라이브러리를 GObject 인트로스펙션으로 가져와야합니다. 여기서 우리는 언어 바인딩과 그놈 프로그램을 만들 때 그래픽 위젯이 들어있는 GTK+ 라이브러리를 임포팅합니다.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="mainwindow"><title>프로그램 메인 창 만들기</title>
|
|
Packit |
1470ea |
const Application = new Lang.Class({
|
|
Packit |
1470ea |
//A Class requires an explicit Name parameter. This is the Class Name.
|
|
Packit |
1470ea |
Name: 'Application',
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the application
|
|
Packit |
1470ea |
_init: function() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//connect to 'activate' and 'startup' signals to handlers.
|
|
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 |
//create the UI
|
|
Packit |
1470ea |
_buildUI: function() {
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({ application: this.application,
|
|
Packit |
1470ea |
title: "Hello World!" });
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'activate' signal
|
|
Packit |
1470ea |
_onActivate: function() {
|
|
Packit |
1470ea |
//show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'startup' signal
|
|
Packit |
1470ea |
_onStartup: function() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
GtkApplication은 GTK+를 초기화합니다. 또한 창을 만들 때 자동으로 붙인 <gui>x</gui> 단추를 "destroy" 시그널에 연결합니다.
|
|
Packit |
1470ea |
첫 창 만들기로 시작하겠습니다. _window 변수를 만들고 Gtk.ApplicationWindow 새 객체를 할당하겠습니다.
|
|
Packit |
1470ea |
창에 title 속성을 설정해야합니다. 제목은 원하는대로 지을 수 있습니다. 안전한 방편으로, UTF-8 인코딩으로 작성하시는게 좋습니다.
|
|
Packit |
1470ea |
이제 제목과 동작하는 "닫기" 단추가 붙은 창을 만들었습니다. 이제 실제 "Hello World" 문구를 찍어보겠습니다.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="label"><title>창 레이블</title>
|
|
Packit |
1470ea |
// Add a label widget to your window
|
|
Packit |
1470ea |
this.label = new Gtk.Label({ label: "Hello World" });
|
|
Packit |
1470ea |
this._window.add(this.label);
|
|
Packit |
1470ea |
this._window.set_default_size(200, 200);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
텍스트 레이블은 GTK+ 라이브러리에서 가져와서 사용할 수 있는 GTK+ 위젯 중 하나입니다. 텍스트 레이블을 사용하려면 레이블이라는 새 변수를 만들고 새 Gtk.Label을 할당합니다. 그 다음 {} 중괄호에 속성 값을 넣습니다. 지금 같은 경우, 레이블 값을 유지할 문장을 설정합니다. 마지막으로 프로그램을 만들고 실행하겠습니다:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//run the application
|
|
Packit |
1470ea |
let app = new Application();
|
|
Packit |
1470ea |
app.application.run(ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Gtk.ApplicationWindow는 한번에 위젯 하나만 가질 수 있습니다. 프로그램을 더 정교하게 만들려면 Gtk.Grid 같은 홀더 위젯을 창 안에 만들어 넣고 그 안에 위젯을 추가해야합니다.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="js"><title>hello-world.js</title>
|
|
Packit |
1470ea |
완전한 파일 내용:
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0'
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class Application {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//create the application
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//connect to 'activate' and 'startup' signals to handlers.
|
|
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 |
//create the UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({ application: this.application,
|
|
Packit |
1470ea |
title: "Hello World!" });
|
|
Packit |
1470ea |
this._window.set_default_size(200, 200);
|
|
Packit |
1470ea |
this.label = new Gtk.Label({ label: "Hello World" });
|
|
Packit |
1470ea |
this._window.add(this.label);
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'activate' signal
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
//show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//handler for 'startup' signal
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
//run the application
|
|
Packit |
1470ea |
let app = new Application();
|
|
Packit |
1470ea |
app.application.run(ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="terminal"><title>터미널에서 프로그램 실행</title>
|
|
Packit |
1470ea |
이 프로그램을 실행하려면 우선 hello-world.js 파일 이름으로 저장하십시오. 그 다음 터미널을 열고 프로그램을 저장한 폴더로 이동한 다음 실행하십시오:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>gjs hello-world.js</input></screen>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="desktop.in"><title><file>.desktop.in</file> 파일</title>
|
|
Packit |
1470ea |
터미널에서의 프로그램 실행은 프로그램을 처음 만드는 단계에서 상당히 유용합니다. 그놈 3에서 완벽하게 <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">프로그램 통합</link>하여 동작할 수 있게 하려면 데스크톱 실행 아이콘이 필요합니다. 이 아이콘을 만들려면 <file>.desktop</file> 파일을 만들어야합니다. 파일은 프로그램 이름, 사용 아이콘, 다양한 통합 부분을 서술합니다. <file>.desktop</file> 파일에 대한 더 자세한 관점은 <link href="http://developer.gnome.org/desktop-entry-spec/">여기</link>에 있습니다. <file>.desktop.in</file> 파일로 <file>.desktop</file> 파일을 만듭니다.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<note>
|
|
Packit |
1470ea |
계속하기 전에 <file>hello-world.js</file> 파일을 <file>hello-world</file>로 다시 저장하십시오. 그 다음 명령줄에서 다음 명령을 실행하십시오:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
|
|
Packit |
1470ea |
</note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
예제에서는 .desktop.in 파일에서 최소한 필요한 내용을 보여줍니다.
|
|
Packit |
1470ea |
[Desktop Entry]
|
|
Packit |
1470ea |
Version=1.0
|
|
Packit |
1470ea |
Encoding=UTF-8
|
|
Packit |
1470ea |
Name=Hello World
|
|
Packit |
1470ea |
Comment=Say Hello
|
|
Packit |
1470ea |
Exec=@prefix@/bin/hello-world
|
|
Packit |
1470ea |
Icon=application-default-icon
|
|
Packit |
1470ea |
Terminal=false
|
|
Packit |
1470ea |
Type=Application
|
|
Packit |
1470ea |
StartupNotify=true
|
|
Packit |
1470ea |
Categories=GNOME;GTK;Utility;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
이제 .desktop.in 파일 부분으로 들어가보겠습니다.
|
|
Packit |
1470ea |
<terms>
|
|
Packit |
1470ea |
<item><title>Name</title>프로그램 이름입니다. </item>
|
|
Packit |
1470ea |
<item><title>Comment</title>프로그램의 간단한 설명입니다. </item>
|
|
Packit |
1470ea |
<item><title>Exec</title>메뉴에서 프로그램을 선택했을 때 실행할 명령을 지정합니다. 이 예제에서는 <file>hello-world</file> 파일을 어디서 찾는지 알려주며 파일을 다루는 방식은 나머지 부분에서 다룹니다. </item>
|
|
Packit |
1470ea |
<item><title>Terminal</title>Exec 키의 명령을 터미널 창에서 실행할 지 여부를 지정합니다. </item>
|
|
Packit |
1470ea |
</terms>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
프로그램을 적당한 분류에 넣으려면 Categories 줄에 필요한 분류 이름을 추가해야합니다. 다른 분류에 대한 자세한 정보는 <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">메뉴 명세</link>에 있습니다.
|
|
Packit |
1470ea |
이 예제에서는 이미 있는 아이콘을 사용하겠습니다. 개별 아이콘을 사용하려면 <file>/usr/share/icons/hicolor/scalable/apps</file> 경로에 저장한 svg 아이콘 파일이 필요합니다. 아이콘 파일 이름을 .desktop.in file 파일 7번째 줄에 적어 넣으십시오. 더 자세한 아이콘 정보는 <link href="https://live.gnome.org/GnomeGoals/AppIcon">테마 아이콘 설치</link>와 <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>에 있습니다.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="autotools"><title>빌드 시스템</title>
|
|
Packit |
1470ea |
그놈 3의 일부 프로그램을 만들려면 autotools의 도움을 받아 설치해야합니다. autotools 빌드는 필요한 모든 파일을 모든 올바른 경로에 설치합니다.
|
|
Packit |
1470ea |
진행하려면 다음 파일이 필요합니다:
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="autogen"><title>autogen.sh</title>
|
|
Packit |
1470ea |
#!/bin/sh
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
set -e
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
test -n "$srcdir" || srcdir=`dirname "$0"`
|
|
Packit |
1470ea |
test -n "$srcdir" || srcdir=.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
olddir=`pwd`
|
|
Packit |
1470ea |
cd "$srcdir"
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
# This will run autoconf, automake, etc. for us
|
|
Packit |
1470ea |
autoreconf --force --install
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
cd "$olddir"
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
if test -z "$NOCONFIGURE"; then
|
|
Packit |
1470ea |
"$srcdir"/configure "$@"
|
|
Packit |
1470ea |
fi
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<file>autogen.sh</file> 파일을 준비했고 저장하고 나면, 다음을 실행하십시오:
|
|
Packit |
1470ea |
<screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="makefile"><title>Makefile.am</title>
|
|
Packit |
1470ea |
# The actual runnable program is set to the SCRIPTS primitive.
|
|
Packit |
1470ea |
# # Prefix bin_ tells where to copy this
|
|
Packit |
1470ea |
bin_SCRIPTS = hello-world
|
|
Packit |
1470ea |
# # List of files to be distributed
|
|
Packit |
1470ea |
EXTRA_DIST = \
|
|
Packit |
1470ea |
$(bin_SCRIPTS)
|
|
Packit |
1470ea |
#
|
|
Packit |
1470ea |
# # The desktop files
|
|
Packit |
1470ea |
desktopdir = $(datadir)/applications
|
|
Packit |
1470ea |
desktop_DATA = \
|
|
Packit |
1470ea |
hello-world.desktop
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="configure"><title>configure.ac</title>
|
|
Packit |
1470ea |
# This file is processed by autoconf to create a configure script
|
|
Packit |
1470ea |
AC_INIT([Hello World], 1.0)
|
|
Packit |
1470ea |
AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
|
|
Packit |
1470ea |
AC_CONFIG_FILES([Makefile hello-world.desktop])
|
|
Packit |
1470ea |
AC_OUTPUT
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="readme"><title>README</title>
|
|
Packit |
1470ea |
사용자가 우선 읽어야 할 내용입니다. 이 파일은 비워둘 수 있습니다.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
올바른 내용을 넣고 권한을 설정한 <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file>, <file>autogen.sh</file> 파일을 갖췄다면, <file>README</file> 파일에 다음 내용을 넣을 수 있습니다:
|
|
Packit |
1470ea |
To build and install this program:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
./autogen.sh --prefix=/home/your_username/.local
|
|
Packit |
1470ea |
make install
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
-------------
|
|
Packit |
1470ea |
Running the first line above creates the following files:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
aclocal.m4
|
|
Packit |
1470ea |
autom4te.cache
|
|
Packit |
1470ea |
config.log
|
|
Packit |
1470ea |
config.status
|
|
Packit |
1470ea |
configure
|
|
Packit |
1470ea |
hello-world.desktop
|
|
Packit |
1470ea |
install-sh
|
|
Packit |
1470ea |
missing
|
|
Packit |
1470ea |
Makefile.in
|
|
Packit |
1470ea |
Makefile
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Running "make install", installs the application in /home/your_username/.local/bin
|
|
Packit |
1470ea |
and installs the hello-world.desktop file in /home/your_username/.local/share/applications
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
You can now run the application by typing "Hello World" in the Overview.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
----------------
|
|
Packit |
1470ea |
To uninstall, type:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
make uninstall
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
----------------
|
|
Packit |
1470ea |
To create a tarball type:
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
make distcheck
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
This will create hello-world-1.0.tar.xz
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</page>
|