From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../add-ons/code_snippets/cookies/index.html | 15 + files/ko/archive/add-ons/code_snippets/index.html | 55 ++ .../add-ons/code_snippets/page_loading/index.html | 26 + .../code_snippets/running_applications/index.html | 51 ++ .../add-ons/code_snippets/windows/index.html | 25 + .../archive/add-ons/code_snippets/xml/index.html | 22 + .../index.html | 193 +++++++ files/ko/archive/add-ons/index.html | 8 + .../index.html | 114 ++++ files/ko/archive/api/index.html | 13 + files/ko/archive/api/navigator/index.html | 8 + files/ko/archive/apps/design/planning/index.html | 23 + files/ko/archive/apps/index.html | 14 + files/ko/archive/b2g_os/api/camera_api/index.html | 38 ++ .../b2g_os/api/camera_api/introduction/index.html | 247 +++++++++ files/ko/archive/b2g_os/api/index.html | 120 +++++ files/ko/archive/b2g_os/api/tcpsocket/index.html | 102 ++++ .../b2g_os/application_development/index.html | 12 + files/ko/archive/b2g_os/apps/index.html | 57 ++ .../writing_a_web_app_for_firefox_os/index.html | 25 + .../ko/archive/b2g_os/automated_testing/index.html | 84 +++ files/ko/archive/b2g_os/building/index.html | 125 +++++ .../building_and_installing_firefox_os/index.html | 49 ++ .../debugging/debugging_b2g_using_gdb/index.html | 153 ++++++ files/ko/archive/b2g_os/debugging/index.html | 84 +++ .../index.html | 79 +++ files/ko/archive/b2g_os/firefox_os_apps/index.html | 85 +++ .../b2g_os/firefox_os_apps/localization/index.html | 92 ++++ .../firefox_os_build_prerequisites/index.html | 267 ++++++++++ files/ko/archive/b2g_os/firefox_os_faq/index.html | 39 ++ files/ko/archive/b2g_os/index.html | 181 +++++++ .../installing_on_a_mobile_device/index.html | 61 +++ files/ko/archive/b2g_os/introduction/index.html | 83 +++ files/ko/archive/b2g_os/pandaboard/index.html | 36 ++ files/ko/archive/b2g_os/phone_guide/index.html | 6 + .../b2g_os/platform/architecture/index.html | 532 +++++++++++++++++++ files/ko/archive/b2g_os/platform/gonk/index.html | 103 ++++ files/ko/archive/b2g_os/platform/index.html | 99 ++++ files/ko/archive/b2g_os/porting/index.html | 121 +++++ .../preparing_for_your_first_b2g_build/index.html | 148 ++++++ files/ko/archive/b2g_os/quickstart/index.html | 49 ++ .../quickstart/intro_to_firefox_os/index.html | 14 + .../quickstart/intro_to_open_web_apps/index.html | 53 ++ files/ko/archive/b2g_os/security/index.html | 58 ++ .../index.html" | 253 +++++++++ files/ko/archive/b2g_os/simulator/index.html | 280 ++++++++++ .../b2g_os/\354\204\261\353\212\245/index.html" | 146 ++++++ .../index.html" | 247 +++++++++ files/ko/archive/css3/index.html | 582 +++++++++++++++++++++ files/ko/archive/index.html | 21 + files/ko/archive/mdn/index.html | 20 + files/ko/archive/meta_docs/index.html | 15 + files/ko/archive/misc_top_level/index.html | 8 + .../index.html | 18 + .../using_content_preferences/index.html | 35 ++ .../creating_a_skin_for_seamonkey_2.x/index.html | 19 + files/ko/archive/mozilla/drag_and_drop/index.html | 148 ++++++ files/ko/archive/mozilla/firefox/index.html | 8 + .../mozilla/firefox/using_microformats/index.html | 144 +++++ files/ko/archive/mozilla/index.html | 10 + .../mozilla/rdf_datasource_how-to/index.html | 224 ++++++++ files/ko/archive/mozilla/xbl/index.html | 32 ++ .../xbl/xbl_1.0_reference/elements/index.html | 387 ++++++++++++++ .../mozilla/xbl/xbl_1.0_reference/index.html | 118 +++++ .../xulrunner/dialogs_in_xulrunner/index.html | 121 +++++ .../getting_started_with_xulrunner/index.html | 98 ++++ files/ko/archive/mozilla/xulrunner/index.html | 26 + .../xulrunner/what_xulrunner_provides/index.html | 64 +++ .../xulrunner/xul_application_packaging/index.html | 107 ++++ .../mozilla/xulrunner/xulrunner_faq/index.html | 64 +++ .../xulrunner/xulrunner_hall_of_fame/index.html | 178 +++++++ .../mozilla/xulrunner/xulrunner_tips/index.html | 168 ++++++ files/ko/archive/rss/getting_started/index.html | 56 ++ .../rss/getting_started/what_is_rss/index.html | 230 ++++++++ files/ko/archive/rss/index.html | 48 ++ files/ko/archive/rss/module/index.html | 70 +++ files/ko/archive/rss/version/index.html | 109 ++++ files/ko/archive/security/index.html | 14 + files/ko/archive/security/tcp_ip/index.html | 50 ++ files/ko/archive/web/index.html | 12 + .../ecmascript_7_support_in_mozilla/index.html | 98 ++++ files/ko/archive/web/javascript/index.html | 12 + .../legacy_generator_function/index.html | 58 ++ .../legacy_generator_function_statement/index.html | 59 +++ files/ko/archive/web_standards/index.html | 64 +++ .../index.html | 66 +++ .../mozilla_s_doctype_sniffing/index.html | 141 +++++ .../rdf_in_fifty_words_or_less/index.html | 87 +++ .../web_standards/rdf_in_mozilla_faq/index.html | 292 +++++++++++ .../index.html | 263 ++++++++++ 90 files changed, 9039 insertions(+) create mode 100644 files/ko/archive/add-ons/code_snippets/cookies/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/page_loading/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/running_applications/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/windows/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/xml/index.html create mode 100644 files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html create mode 100644 files/ko/archive/add-ons/index.html create mode 100644 files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html create mode 100644 files/ko/archive/api/index.html create mode 100644 files/ko/archive/api/navigator/index.html create mode 100644 files/ko/archive/apps/design/planning/index.html create mode 100644 files/ko/archive/apps/index.html create mode 100644 files/ko/archive/b2g_os/api/camera_api/index.html create mode 100644 files/ko/archive/b2g_os/api/camera_api/introduction/index.html create mode 100644 files/ko/archive/b2g_os/api/index.html create mode 100644 files/ko/archive/b2g_os/api/tcpsocket/index.html create mode 100644 files/ko/archive/b2g_os/application_development/index.html create mode 100644 files/ko/archive/b2g_os/apps/index.html create mode 100644 files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/automated_testing/index.html create mode 100644 files/ko/archive/b2g_os/building/index.html create mode 100644 files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html create mode 100644 files/ko/archive/b2g_os/debugging/index.html create mode 100644 files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_apps/localization/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_faq/index.html create mode 100644 files/ko/archive/b2g_os/index.html create mode 100644 files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/ko/archive/b2g_os/introduction/index.html create mode 100644 files/ko/archive/b2g_os/pandaboard/index.html create mode 100644 files/ko/archive/b2g_os/phone_guide/index.html create mode 100644 files/ko/archive/b2g_os/platform/architecture/index.html create mode 100644 files/ko/archive/b2g_os/platform/gonk/index.html create mode 100644 files/ko/archive/b2g_os/platform/index.html create mode 100644 files/ko/archive/b2g_os/porting/index.html create mode 100644 files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html create mode 100644 files/ko/archive/b2g_os/security/index.html create mode 100644 "files/ko/archive/b2g_os/security/\353\263\264\354\225\210_\353\252\250\353\215\270/index.html" create mode 100644 files/ko/archive/b2g_os/simulator/index.html create mode 100644 "files/ko/archive/b2g_os/\354\204\261\353\212\245/index.html" create mode 100644 "files/ko/archive/b2g_os/\354\225\261_\352\264\200\353\246\254\354\236\220_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" create mode 100644 files/ko/archive/css3/index.html create mode 100644 files/ko/archive/index.html create mode 100644 files/ko/archive/mdn/index.html create mode 100644 files/ko/archive/meta_docs/index.html create mode 100644 files/ko/archive/misc_top_level/index.html create mode 100644 files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html create mode 100644 files/ko/archive/misc_top_level/using_content_preferences/index.html create mode 100644 files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html create mode 100644 files/ko/archive/mozilla/drag_and_drop/index.html create mode 100644 files/ko/archive/mozilla/firefox/index.html create mode 100644 files/ko/archive/mozilla/firefox/using_microformats/index.html create mode 100644 files/ko/archive/mozilla/index.html create mode 100644 files/ko/archive/mozilla/rdf_datasource_how-to/index.html create mode 100644 files/ko/archive/mozilla/xbl/index.html create mode 100644 files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html create mode 100644 files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html create mode 100644 files/ko/archive/rss/getting_started/index.html create mode 100644 files/ko/archive/rss/getting_started/what_is_rss/index.html create mode 100644 files/ko/archive/rss/index.html create mode 100644 files/ko/archive/rss/module/index.html create mode 100644 files/ko/archive/rss/version/index.html create mode 100644 files/ko/archive/security/index.html create mode 100644 files/ko/archive/security/tcp_ip/index.html create mode 100644 files/ko/archive/web/index.html create mode 100644 files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html create mode 100644 files/ko/archive/web/javascript/index.html create mode 100644 files/ko/archive/web/javascript/legacy_generator_function/index.html create mode 100644 files/ko/archive/web/javascript/legacy_generator_function_statement/index.html create mode 100644 files/ko/archive/web_standards/index.html create mode 100644 files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html create mode 100644 files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html create mode 100644 files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html create mode 100644 files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html create mode 100644 files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html (limited to 'files/ko/archive') diff --git a/files/ko/archive/add-ons/code_snippets/cookies/index.html b/files/ko/archive/add-ons/code_snippets/cookies/index.html new file mode 100644 index 0000000000..c3c25b033b --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/cookies/index.html @@ -0,0 +1,15 @@ +--- +title: Cookies +slug: Archive/Add-ons/Code_snippets/Cookies +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Cookies +--- +

 

+

쿠키 모두 없애기

+

다음 코드는 Firefox/Seamonkey에서 쿠키를 모두 없애는 법을 보여줍니다.

+
Components.classes["@mozilla.org/cookiemanager;1"]
+          .getService(Components.interfaces.nsICookieManager).removeAll();
+
+

{{ languages( { "en": "en/Code_snippets/Cookies", "fr": "fr/Extraits_de_code/Cookies" } ) }}

diff --git a/files/ko/archive/add-ons/code_snippets/index.html b/files/ko/archive/add-ons/code_snippets/index.html new file mode 100644 index 0000000000..09b381ed68 --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/index.html @@ -0,0 +1,55 @@ +--- +title: Code snippets +slug: Archive/Add-ons/Code_snippets +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets +--- +

+

이 문서는 확장기능 개발자들이 다양한 Mozilla 응용프로그램에 빠르게 쓸 수 있는 쓸모 있는 코드 조각(snippet) 목록입니다. 상당수는 XULRunner 응용프로그램 및 Firefox/Thunderbird 코드에서도 쓸 수 있습니다. +

+

일반

+
탭브라우저 코드 (Firefox/SeaMonkey) +
Mozilla 브라우저 응용프로그램의 핵심인 탭브라우저를 다루는 기본적인 코드 +
+
창 코드 +
창 열기 및 다루기 +
+
쿠키 +
쿠키 읽기, 쓰기, 고치기, 없애기 +
+
XML +
XML을 구문분석하거나, 작성하거나, 다루는 데 쓰는 코드 +
+
파일 입출력 +
파일을 읽거나, 쓰거나, 처리하는 데 쓰는 코드 +
+
대화상자 +
대화상자를 나타내거나, 처리하는 데 쓰는 코드 +
+
선택사항 +
선택사항을 읽거나, 쓰거나, 고치는 데 쓰는 코드 +
+
페이지 불러오기 +
페이지를 로드하거나, 재로드하거나, 페이지 로드를 청취하는 데 쓰는 코드 +
+
특권 코드와 비특권 코드 사이의 상호 작용 +
부가기능이 웹사이트와 또는 그 반대로 통신하는 법 +
+
JS XPCOM +
JavaScript로 맞춤 XPCOM 컴포넌트를 정의하고 호출하는 데 쓰는 코드 +
+
응용프로그램 실행하기 +
다른 응용프로그램을 실행하는 데 쓰는 코드 +
+

윈도 고유 코드

+
윈도 핸들(HWND) 구하기 (Firefox) +
Windows API로 가지각색의 Mozilla 윈도 핸들을 구하는 법입니다. 윈도 핸들은 IPC 및 접근성 목적으로 쓰일 수 있습니다. +
+
XPCOM으로 윈도 레지스트리 쓰기 +
레지스트리 키 및 값을 읽거나, 쓰거나, 고치거나, 없애거나, 열거하거나, 주목하는 법 +
+

외부 링크

+

MozillaZine 예제 코드의 내용이 여기로 천천히 옮겨지고 있습니다. 하지만 지금은 쓸만한 예제를 그곳에서 찾을 수 있습니다. +

{{ languages( { "en": "en/Code_snippets", "fr": "fr/Extraits_de_code", "ja": "ja/Code_snippets" } ) }} diff --git a/files/ko/archive/add-ons/code_snippets/page_loading/index.html b/files/ko/archive/add-ons/code_snippets/page_loading/index.html new file mode 100644 index 0000000000..ddf4043032 --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/page_loading/index.html @@ -0,0 +1,26 @@ +--- +title: Page Loading +slug: Archive/Add-ons/Code_snippets/Page_Loading +translation_of: Archive/Add-ons/Code_snippets/Page_Loading +--- +

 

+

페이지 불러오기

+
+
+ 페이지가 로드될 때
+
+ 새 페이지가 브라우저/메일에 로드될 때마다 코드를 실행하는 법
+
+
+
+ 진행 청취자
+
+ 진행 청취자는 확장기능이 브라우저 안의 문서 로드와 관련된 이벤트 및 탭 갈아타기 이벤트를 통보받을 수 있게 합니다.
+
+
+
+ 창에 데이터를 넘기기
+
+ 현존하거나 새로 만든 창/탭에 데이터를 넘기는 코드
+
+

{{ languages( { "en": "en/Code_snippets/Page_Loading", "fr": "fr/Extraits_de_code/Chargement_de_page", "ja": "ja/Code_snippets/Page_Loading" } ) }}

diff --git a/files/ko/archive/add-ons/code_snippets/running_applications/index.html b/files/ko/archive/add-ons/code_snippets/running_applications/index.html new file mode 100644 index 0000000000..a05c52db62 --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/running_applications/index.html @@ -0,0 +1,51 @@ +--- +title: Running applications +slug: Archive/Add-ons/Code_snippets/Running_applications +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Running_applications +--- +

+

본 페이지에서는 Mozilla XPCOM 인터페이스를 이용해서 chrome JavaScript 코드로 다른 프로그램을 실행하는 방법에 대해 설명하겠습니다. 프로그램을 실행하는데는 두 가지 방법이 있습니다. 첫번째 방법은 nsILocalFile:launch 메소드를 사용하는 것이고, 두번째 방법은 nsIProcess 인터페이스를 사용하는 것입니다. +

+

nsILocalFile.launch() 이용하기

+

이 방법은 실행 파일을 더블 클릭하는 것과 동일한 효과가 나타나며 파라미터 없이 실행됩니다. 또 구현되지 않은 플랫폼도 있으므로 여러분이 대상으로 하는 플랫폼에서 이 메소드가 구현되어 있는지 확인해야 합니다. +

nsIFile/nsILocalFile에 대한 보다 자세한 정보는 File I/O를 참조하세요. +

For more information on nsIFile/nsILocalFile, see File I/O. +

+
var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+file.launch();
+
+

nsIProcess 이용하기

+

nsIProcess 인터페이를 사용하는 것이 권장되는 방법 입니다. +

+
// create an nsILocalFile for the executable
+var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+
+// create an nsIProcess
+var process = Components.classes["@mozilla.org/process/util;1"]
+                        .createInstance(Components.interfaces.nsIProcess);
+process.init(file);
+
+// Run the process.
+// If first param is true, calling thread will be blocked until
+// called process terminates.
+// Second and third params are used to pass command-line arguments
+// to the process.
+var args = ["argument1", "argument2"];
+process.run(false, args, args.length);
+
+

참고

+ +
+
+{{ languages( { "en": "en/Code_snippets/Running_applications", "fr": "fr/Extraits_de_code/Ex\u00e9cuter_des_applications", "ja": "ja/Code_snippets/Running_applications", "pl": "pl/Fragmenty_kodu/Uruchamianie_aplikacji" } ) }} diff --git a/files/ko/archive/add-ons/code_snippets/windows/index.html b/files/ko/archive/add-ons/code_snippets/windows/index.html new file mode 100644 index 0000000000..00e4febdb1 --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/windows/index.html @@ -0,0 +1,25 @@ +--- +title: Windows +slug: Archive/Add-ons/Code_snippets/Windows +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Windows +--- +

 

+

새 브라우저 창 열기

+

브라우저 창을 새로 열려면 간단히 window.open()을 쓸 수 있습니다. 그러나 window.open()은 브라우저 창 자체가 아닌 내용의 Window 객체를 반환합니다. 그래서 먼저 크롬 Window를 구해야 합니다. 가장 간단한 방법은 nsIWindowMediator를 쓰는 것입니다.

+

예제

+

 

+
window.open();
+var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var newWindow = wm.getMostRecentWindow("navigator:browser");
+var b = newWindow.getBrowser();
+// why did we do this? we never do anything with |b|
+
+

다른 문서

+ +

{{ languages( { "en": "en/Code_snippets/Windows", "fr": "fr/Extraits_de_code/Onglets_de_navigation" } ) }}

diff --git a/files/ko/archive/add-ons/code_snippets/xml/index.html b/files/ko/archive/add-ons/code_snippets/xml/index.html new file mode 100644 index 0000000000..46749c928e --- /dev/null +++ b/files/ko/archive/add-ons/code_snippets/xml/index.html @@ -0,0 +1,22 @@ +--- +title: XML +slug: Archive/Add-ons/Code_snippets/XML +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/XML +--- + + +

{{ languages( { "en": "en/Code_snippets/XML", "fr": "fr/Extraits_de_code/XML" } ) }}

diff --git a/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html b/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html new file mode 100644 index 0000000000..f5f9d69790 --- /dev/null +++ b/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html @@ -0,0 +1,193 @@ +--- +title: 'Extension Versioning, Update and Compatibility' +slug: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility' +tags: + - Add-ons + - Extensions +translation_of: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility' +--- +

 

+

부가 기능 버저닝(Versioning)

+

부가 기능은 Toolkit version format을 이용해 자신의 버전을 명시해야 합니다. 이는 다음과 같이 점으로 분리된 버전 문자열이라고 말씀드릴 수 있습니다.

+ +
+ 참고: Firefox 1.5 이전에는 좀 더 기본적인 Firefox Version Format을 사용했었습니다. 이 포맷은 major.minor.release.build[+] 의 형태로 구성되며 숫자만 사용할 수 있었습니다. Toolkit version format은 Firefox version format을 지원하면서도 더 많은 유연성을 제공합니다.
+

응용 프로그램의 호환성 검사 방법

+

부가기능을 설치하기 전에 응용 프로그램은 부가기능의 <tt>install.rdf</tt>에 있는 targetApplication 항목을 조사합니다. 해당 항목에는 대상 응용프로그램과 동일한 ID가 존재해야 합니다. 또한 이 항목의 minVersion과 maxVersion은 부가기능이 실행되는 응용프로그램의 버전이 포함되는 범위이어야 합니다.

+

만일 응용프로그램이 targetApplication 요소를 가지고 있지만 호환되지 않는 버전일 경우 부가 기능의 updateURL에서 업데이트된 호환 정보를 조회해 제공합니다.

+

만일 <tt>install.rdf</tt>에 targetPlatform 항목들이 포함되어 있으며, 현재 응용프로그램이 실행되는 플랫폼이 해당 목록에 포함되어 있지 않을 경우 설치가 거부됩니다.

+

+

Firefox 3 note

+

Gecko 1.9 기반의 응용프로그램일 경우 targetApplication 항목에 응용프로그램이 실행되는 툴킷 버전에 해당하는 toolkit@mozilla.org, minVersion, maxVersion 값을 사용할 수 있습니다. 이는 여러분의 부가 기능이 해당 툴킷 기반의 어떤 응용프로그램에서도 설치 가능하다는 것을 나타냅니다.

+

+

호환성 검사 무시하기

+

테스트를 목적으로 할 경우 응용프로그램에 부가기능을 설치할 때 호환성 검사를 무시하도록 할 수 있습니다. 연산자(boolean) 형으로 extensions.checkCompatibility 설정을 만들고 false로 지정하면 됩니다.

+
+ 참고: Firefox 1.5 이전 버전에서는 app.extensions.version 설정을 통해 응용프로그램의 버전을 오버라이드할 수도 있습니다. 이는 응용프로그램 자신이 호환되지 않는 확장 기능을 설치할 수 있다고 믿게끔 해 줍니다.
+

minVersion과 maxVersion 결정하기

+

minVersion과 maxVersion은 여러분이 테스트한 응용프로그램의 버전 범위로 명시하는게 좋습니다. 특히 향후 API와 UI가 어떻게 변경될지 모르기 때문에 maxVersion을 현재 가능한 응용프로그램의 버전보다 높게 설정하지 않아야 합니다. 호환성 업데이트를 이용하면 확장기능의 새로운 버전을 공개할 필요 없이 maxVersion만 증가시키면 됩니다.

+

maxVersion에서는 여러분이 지원하는 응용프로그램의 하위(minor) 버전 위치에 *를 사용할 수 있습니다. 예를 들어 2.0.0.*은 2 버전 응용프로그램에서의 하위 업데이트를 지원하는다는 것을 의미합니다. 응용 프로그램은 보통 확장 기능 작성자에게 버전의 어떤 부분을 이렇게 사용할 수 있는지 제안할 것입니다.

+

실수로 *를 어떤 버전도 지원한다는 의미로 생각하지 마세요. 사실 *는 무한의 높은 숫자를 나타내며, 따라서 maxVersion에서 사용하였을때만 의미가 있습니다. 이를 minVersion에서 사용하면 여러분이 원하는 효과가 나지 않을 수 있습니다.

+

자동 부가기능 업데이트 검사

+

응용프로그램은 주기적으로 설치된 부가기능의 updateURL에서 정보를 가져와 업데이트 여부를 검사합니다. 반환된 정보는 사용자에게 부가기능의 업데이트된 버전이 있는지를 알려주고 응용프로그램에게는 해당 부가기능과 호환되는 응용프로그램의 버전을 알려줍니다.

+

호환성 업데이트

+

자동 업데이트 검사를 통해 응용프로그램은 현재 설치된 부가 기능 버전에 대한 새로운 버전과 갱신된 호환성 정보를 조사합니다. 만일 작성된 업데이트 선언에 현재 설치된 부가 기능에 대한 항목이 존재하고 해당 항목의 targetApplication에 더 큰 maxVersion이 명시되어 있을 경우, 응용 프로그램은 부가 기능의 <tt>install.rdf</tt>에 명시된 값 대신 이 값을 사용하게 됩니다. 이는 호환성 문제로 사용 안함 상태로 되어 있는 부가 기능을 사용 가능한 상태로 만들 수도 있으며, 정상적으로 설치되지 않은 부가 기능을 정상적으로 설치된 상태로 만들 수도 있습니다.

+

업데이트 RDF 포맷

+

여러분이 부가기능의 updateURL을 직접 호스팅하는 경우, 부가기능의 버전 정보를 RDF 포맷으로 반환해야만 합니다. 아래는 업데이트 선언(update manifest) 예제입니다. 여기서는 id가 foobar@developer.mozilla.org인 서로 다른 2가지 버전의 확장기능에 대한 정보를 나열하고 있습니다. 포함된 버전은 2.2와 2.5 이고 둘 다 Firefox 1.5에서 2.0.0.* 버전에서 호환된다고 명시하고 있습니다. 버전 2.2의 경우 https 업데이트 링크를 사용하고 있으며, 버전 2.5는 일반적인 http 링크를 사용하며 전송된 파일의 유효성을 검사하기 위해 해시를 포함하고 있습니다.

+

맨 처음에 있는 RDF:Description의 about 속성을 올바르게 설정하는 것이 중요합니다. 이 속성은 제공 정보가 어떤 종류의 부가기능에 대한 것인지에 따라 다음과 같이 달라집니다.

+ +

아래 예제의 경우 이후 버전이 이전 버전보다 나중에 명시되어야 한다는 점에서 <RDF:Seq> 요소 내에 있는 버전의 순서가 중요합니다. 만일 최종 버전이 제공된다면 이전 버전 모두가 명시될 필요는 없습니다(?).

+
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <!-- Description 리소스에는 id가 foobar@developer.mozilla.org인
+       단일 부가 기능에 대한 모든 업데이트와 호환성 정보를 포함합니다.
+       여러분은 하나의 RDF 파일에 여러개의 부가기능에 대한 정보를 나열할 수 있습니다. -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+
+        <!-- 각각의 li는 동일한 부가기능에 대한 서로 다른 버전을 나타냅니다. -->
+        <RDF:li>
+          <RDF:Description>
+            <em:version>2.2</em:version> <!-- 이것은 부가기능의 버전 번호입니다. -->
+
+            <!-- 이 부가 기능과 호환되는 각각의 응용 프로그램에 대해 targetApplication이 하나씩 존재합니다. -->
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+                <em:minVersion>1.5</em:minVersion>
+                <em:maxVersion>2.0.0.*</em:maxVersion>
+
+                <!-- 이 부가 기능을 다운로드 받을 위치를 나타냅니다. -->
+                <em:updateLink>https://www.mysite.com/foobar2.2.xpi</em:updateLink>
+
+                <!-- 업데이트된 버전에서 제공되는 새로운 기능을 설명하는 페이지에 대한 URL입니다. -->
+                <em:updateInfoURL>http://www.mysite.com/updateinfo2.2.xhtml</em:updateInfoURL>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+
+        <RDF:li>
+          <RDF:Description>
+            <em:version>2.5</em:version>
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+                <em:minVersion>1.5</em:minVersion>
+                <em:maxVersion>2.0.0.*</em:maxVersion>
+                <em:updateLink>http://www.mysite.com/foobar2.5.xpi</em:updateLink>
+                <em:updateHash>sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em:updateHash>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+
+      </RDF:Seq>
+    </em:updates>
+
+    <!-- 서명은 부가기능의 install.rdf에 updateKey를 포함하고 있는 경우에만 필요합니다. -->
+    <em:signature>MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad</em:signature>
+  </RDF:Description>
+</RDF:RDF>
+
+

어떤 사람들은 다음의 포맷을 더 좋아합니다(본 예제에서는 기본 구조를 중점적으로 보여주기 위해 몇 가지 정보가 생략되어 있습니다).

+
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <!-- Description 리소스에는 id가 foobar@developer.mozilla.org인
+       단일 부가 기능에 대한 모든 업데이트와 호환성 정보를 포함합니다.
+       여러분은 하나의 RDF 파일에 여러개의 부가기능에 대한 정보를 나열할 수 있습니다. -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+        <!-- resource 속성은 아래에 있는 RDF:Description의 동일한 about 속성을 가리킵니다.
+             실제 uri는 어떤 값이든 상관 없습니다. -->
+        <RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/>
+        <RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/>
+      </RDF:Seq>
+    </em:updates>
+    <em:signature>MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad</em:signature>
+  </RDF:Description>
+
+  <!-- 다음은 앞선 예제에서 li 요소 내에 있는 Description과 동일합니다. -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2">
+    <em:version>2.2</em:version>
+
+    <!-- 나머지 내용은 생략하였습니다. -->
+
+  </RDF:Description>
+
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.5">
+    <em:version>2.5</em:version>
+
+    <!-- 나머지 내용은 생략하였습니다. -->
+
+  </RDF:Description>
+
+</RDF:RDF>
+
+

갱신 사항에 대한 세부 정보 제공하기

+

+

부가 기능 사용자에게 갱신된 사항에 대한 세부 정보를 제공할 수 있습니다. 이는 사용자가 부가 기능의 업데이트 알림을 받은 경우에만 보여지는 것으로, 어떤 기능이 새롭게 추가되었고 보안과 관련된 어떤 문제들이 해결되었는지 등에 대한 빠른 개요를 제공해주는데 사용될 수 있습니다.

+

이를 위해 먼저 업데이트 선언 파일에 updateInfoURL 항목을 추가해야 합니다(위 예제를 보세요). 이 URL에 해당하는 페이지가 사용자에게 출력됩니다. 이 페이지는 일반적인 웹 페이지 외부에 출력되므로 깨끗하게 만들어져야 합니다. 이는 몇 가지 사항만이 가능하고 스크립트나 이미지들은 사용할 수 없다는 것을 의미합니다. 일반 규칙으로 다음의 태그들만 사용하는게 좋으며, 다른 태그들은 무시됩니다.

+ +

목록 내에서는 개별 항목을 나타내는 li 태그를 사용합니다.

+

h1, h2, h3, p, li 태그 내에서는 다음을 사용할 수 있습니다.

+ +

해당 페이지는 완전히 유효한 XHTML이어야 하면 MIME type이 application/xhtml+xml어야 합니다.

+

업데이트 선언 파일의 updateInfoURL에는 URL에 로케일 정보를 포함하고자 할 경우 %APP_LOCALE%을 포함할 수 있습니다. 이를 이용하면 사용자의 로케일에 따라 내용을 수정할 수 있습니다. 이 외에도 updateURL에서 지원하는 또 다른 치환 문자열을 사용할 수 있습니다만, 별로 필요하지는 않을 것입니다.

+

보안 업데이트

+

+

Gecko 1.9는 부가 기능 업데이트와 같은 경우에 사용자를 man-in-the-middle attacks에서 보호하기 위해 설계된 부가적인 요구 사항을 추가했습니다. 이미 설치된 부가 기능의 install.rdf에서 updateURL을 다음 방법 중 한 가지로 지정해야 합니다.

+ +

<tt>install.rdf</tt>에서 updateKey를 지정할 때는 업데이트 선언에 digital signature를 포함해야 하며 그렇지 않으면 정보가 거부됩니다.

+

updateURL에서 전달된 업데이트 선언에서는 updateLink를 다음 방법 중 한 가지로 지정해야 합니다.

+ +

업데이트 선언에서 위의 두 가지 요구 사항 중 하나를 만족하지 못하는 모든 항목은 새로운 버전을 확인할 때 무시됩니다.

+

잘못된 인증서를 가진 사이트로 가는 https 링크나 http 사이트로 리디렉트하는 것은 <tt>update.rdf</tt>와 updateLink의 두 가지 경우에 모두 실패합니다.

+

업데이트 해시

+

다운로드한 XPI의 무결성을 확인하기 위하여 updateLink와 함께 updateHash 항목을 제공해야 합니다. 이 해시는 파일 데이터에 대하여 문자열 형식으로 생성해야 합니다. 문자열의 시작에 사용한 해시 알고리즘을 넣고 :으로 해시와 구별합니다.

+
  <em:updateHash>sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em:updateHash>
+
+

해시가 지정되면 다운로드한 파일을 해시와 비교하고 일치하지 않으면 오류를 표시합니다.

+

업데이트 선언 서명하기

+

+

업데이트 RDF를 일반 http로 제공하기를 원한다면, Gecko 1.9 기반의 애플리케이션에서는 업데이트 선언을 서명해야 합니다. 이는 해당 정보를 생성한 여러분과 그것을 추출하는 애플리케이션 사이에서 간섭이 없었다는 것을 확인하기 위한 것입니다. 업데이트 RDF를 서명하는 데에는 McCoy 도구를 사용해야 합니다.

+

서명 방식에 대한 기술적인 세부 사항은 이 문서의 범위를 벗어나지만 기본적인 사항은 다음과 같습니다.

+

부가 기능 작성자가 공개/개인 RSA 암호 키 쌍을 생성합니다.

+

공개키는 DER로 인코드된 후에 base 64로 인코드되어 부가 기능의 <tt>install.rdf</tt>에 updateKey 항목으로 추가됩니다.

+

작성자가 업데이트 RDF 파일을 생성할 때 도구를 사용하여 개인키로 서명합니다. 대략적으로 이야기하면, 업데이트 정보는 문자열로 변환되어 sha512 해시 알고리즘으로 해시되고 개인키로 이 해시를 서명합니다. 결과 데이터는 DER로 인코드하고 base 64로 인코드한 후 업데이트 RDF에 em:signature 항목으로 포함합니다.

diff --git a/files/ko/archive/add-ons/index.html b/files/ko/archive/add-ons/index.html new file mode 100644 index 0000000000..d1851bd7ee --- /dev/null +++ b/files/ko/archive/add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: Add-ons +slug: Archive/Add-ons +translation_of: Archive/Add-ons +--- +

In progress. Archived add-ons documentation.

+ +

diff --git a/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html b/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html new file mode 100644 index 0000000000..96b33ef569 --- /dev/null +++ b/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html @@ -0,0 +1,114 @@ +--- +title: Listening to events +slug: Archive/Add-ons/Listening_to_events_in_Firefox_extensions +translation_of: Archive/Add-ons/Listening_to_events_in_Firefox_extensions +--- +

Gecko는 사용자가 알기 원하는 흥미로운 것들에 대해 정보를 전달하기 위한 이벤트들을 사용합니다. 이벤트들은 여러 종류 를 가지지만, 이 문헌은 여러분이 그것들에 대해 배우고 여러분이 그것들에 대한 더 특정한 문서들을 직접적(쉽게)으로 접근하는데 도와 줄 것입니다. 또 이 문헌은 관심을 가질 만한 몇 가지 케이스를 제공합니다.

+

이벤트들의 타입들

+

개발자들은 어플리케이션과 확장기능 안에 포함된 콘텐트의 load와 그 변경에 대해 알기 위해, browser 와 tabbrowser의 요소들로 부터의 알림을 받을 수 있는데 이것은 여러 이벤트들의 타입들로 가능합니다.

+

간단한 DOM 이벤트들

+

DOM 이벤트는 다음과 같은 코드로 등록할 수 있습니다:

+
function callback(evt) {
+  // Do your processing here. Check evt.target for the target of the event.
+}
+
+b.addEventListener("event", callback, false)
+
+

위에서 b는 여러분이 이벤트로부터 보기 원하는 browser 또는 tabbrowser 입니다. 명심해야 할것은 이벤트들은 browser의 프레임이나 또는 tabbrowser, 브라우저들의 안에 존재해야 될 것입니다.

+

아래 리스트는 여러분이 여러 상황을 모니터하기 원하는 좀 더 흥미로운 DOM 이벤트들입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이벤트설명
DOMLinkAdded새로운 HTML <link> 요소를 문서에서 감지했을 때 dispatch됩니다.
DOMTitleChanged페이지의 타이틀이 변경 되었을 때 dispatch됩니다.
DOMContentLoaded페이지의 초기 DOM이 완전히 로드되었을 때 dispatch됩니다.
loaddispatch된 후에 페이지가(이미지를 포함하여) 처음으로 로딩을 완료했을 때.
unload유저가 페이지로부터 떨어져 탐색할 때 dispatch됩니다.
pageshow페이지가 새롭게 표시되었을 때 dispacth됩니다.
pagehide페이지가 감춰졌을 때 dispatch됩니다.
+

load, unload, pageshow and pagehide 이벤트의 dispatch 유무에 대해서는 Firefox's caching behaviour의 기사에서 더 자세하게 다룹니다.

+

웹 progress의 listener들

+

웹 로드들의 자세한 내용을 보려면 web progress listener를 사용하면 됩니다. 이들은 웹에서 데이터 로드의 progress 상황에 대한 자세한 내용을 제공합니다. 아래는 browser 와 tabbrowser를 요소들을 지원하는 코드입니다:

+
var progressListener = {
+  // add nsIWebProgressImplementation here
+}
+
+b.addProgressListener(progressListener);
+
+

위에서 b는 여러분이 이벤트들에 대해 litsen하기 원하는 browser 또는 tabbrowser 입니다. using web progress listeners의 링크는 코드 snippet의 더 자세한 사용 가능을 다룹니다.

+

tabbrowser는 오직 현재 이벤트가 발생할 때 표시하는 브라우저부터 이벤트들을 받을 수 있습니다. 모든 브라우저들로부터 이벤트들을 listen하기 위해서는 현재 이벤트에 대해 표시하지않는 코드를 포함하면 됩니다. 아래는 그 예를 설명합니다:

+
var tabsProgressListener = {
+  // add tabs progress listener implementation here
+}
+
+gBrowser.addTabsProgressListener(tabsProgressListener);
+
+

이렇게 하면 여러분은 모든 tab들과 관련된 이벤트들을 받을 수 있습니다. listening to events from all tabs 링크는 더 자세한 사용 가능을 다룹니다.

+

+

Firefox 3.5 note

+

모든 탭들로부터 이벤트들을 listen하는 능력은 Firefox 3.5. 버전에 포함 되었습니다.

+

+

파이어폭스에서는 이벤트들을 어떻게 처리하는가

+

파이어 폭스에서는 이미 어느 정도 progress 이벤트들을 웹 페이지들로 부터 listen합니다. 이 중 대부분은 browser로 가게됩니다.js.

+

DOMLinkHandler

+

DOMLinkHandler 오브젝트는 어떤 RSS 피드들이나 사이트 아이콘들, 또는 웹 사이트에 대한 오픈서치 플러그인을 감지하기 위한 DOMLinkAdded 이벤트라고 할 수 있습니다.

+

pageShowEventHandlers

+

pageShowEventHandlers() 함수는 메뉴에 문자세트를 삽입하거나 피드(feed)들을 감지 또는 웹 사이틀을 위한 오픈서치 플러그인과 관련된 UI 요소들의 업데이트 등의 pageshow 이벤트라고 할 수 있습니다.

+

XULBrowserWindow

+

이 오브젝트는 현재 브라우저에 표시되고 있는 이벤트들의 progress를 얻기 위한 nsIWebProgressListener입니다. 이 오브젝트는 아래와 같은 많은 이유로 UI를 업데이트하기 위해 사용합니다:

+ +

TabsProgressListener

+

이 오브젝트는 탭들의 progress listener 와 윈도우 안의 모든 브라우저에 대한 이벤트들을 받을 수 있습니다.  웹페이지가 새로고침을 시도할 때나 이를 저지하려는 시도를 사용자가 허락 할 때를 감지하는데 사용됩니다.

+

tabbrowser는 이벤트를 어떻게 처리하는가

+

tabbrowser는 두가지 모드 중 한가지로 실행됩니다. 처음에는 non-tabbed 모드로 시작하고 이 모드는 아래와 같은 상황이 발생하기 전까지 유지 됩니다.

+ +

Non-tabbed 모드

+

non-tabbed 모드에서, tabbrowser는 오직 하나의 탭만이 존재 할 수 있습니다. 이 모드에서는 단 하나의 web progress listener만이 브라우저로부터 progress 이벤트의 listen을 추가할 수있습니다. 첫째로 browser-status-filter를 만들고 브라우저에 대한 web progress listener를 추가 합니다. 다음은 브라우저로부터 모든 web progress 이벤트들을 받기 위한 내부 오브젝트를 만듭니다. 이는 mTabProgressListener() 메소드가 처리합니다. 이것은 browser-status-filte로부터 이벤트들을 받습니다. 필터 성능 향상을 위해 진행 상태 및 이벤트의 수를 줄이는 역할을 합니다. 필터들은 mTabListeners가 배열된 내부 listener와 mFilters의 배열로 도움을 받습니다. 내부 listener들은 progress 이벤트들을 addProgressListener() (현재 보이는 브라우저부터 받은 이벤트들)와 addTabsProgressListener() (모든 브라우저로부터 받은 이벤트들)가 지정된 listener들로 내보내게 됩니다.

+

 

+

또 보기

+ diff --git a/files/ko/archive/api/index.html b/files/ko/archive/api/index.html new file mode 100644 index 0000000000..5f78af9636 --- /dev/null +++ b/files/ko/archive/api/index.html @@ -0,0 +1,13 @@ +--- +title: API +slug: Archive/API +tags: + - API + - Archive + - NeedsTranslation + - TopicStub +translation_of: Archive/API +--- +

Archived documentation about obsolete web standards APIs.

+ +

Navigator
Features that used to hang off the Navigator interface, but have since been removed.

diff --git a/files/ko/archive/api/navigator/index.html b/files/ko/archive/api/navigator/index.html new file mode 100644 index 0000000000..1840171fcc --- /dev/null +++ b/files/ko/archive/api/navigator/index.html @@ -0,0 +1,8 @@ +--- +title: Navigator +slug: Archive/API/Navigator +translation_of: Archive/API/Navigator +--- +

In progress. Features that used to hang off the Navigator interface, but have since been removed.

+ +

diff --git a/files/ko/archive/apps/design/planning/index.html b/files/ko/archive/apps/design/planning/index.html new file mode 100644 index 0000000000..3a7e80993d --- /dev/null +++ b/files/ko/archive/apps/design/planning/index.html @@ -0,0 +1,23 @@ +--- +title: Planning +slug: Archive/Apps/Design/Planning +tags: + - Apps + - Design + - NeedsTranslation + - Planning + - TopicStub +translation_of: Archive/Apps/Design/Planning +--- +
+

이 문서들은 성공적인 웹 응용프로그램들을 기획하기 위한 정보들을 제공해줍니다.

+
+ +
+
응용프로그램 계획
+
응용프로그램을 계획하는 것부터 시작하세요.
+
일반 디자인 원칙
+
시작하기 위한 유용한 일반적인 디자인 원칙 목록
+
설치된 응용프로그램 고려
+
높은 수준의 고려사항입니다. 특히 Open Web App UX에서 교려해야 합니다.
+
diff --git a/files/ko/archive/apps/index.html b/files/ko/archive/apps/index.html new file mode 100644 index 0000000000..bd5392bac5 --- /dev/null +++ b/files/ko/archive/apps/index.html @@ -0,0 +1,14 @@ +--- +title: 응용 프로그램들 +slug: Archive/Apps +tags: + - Apps + - Firefox OS + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Apps +--- +

This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.

+ +

열린 웹 응용프로그램들 설계하기
The items under this section apply generally to Web app design.

diff --git a/files/ko/archive/b2g_os/api/camera_api/index.html b/files/ko/archive/b2g_os/api/camera_api/index.html new file mode 100644 index 0000000000..d18716974b --- /dev/null +++ b/files/ko/archive/b2g_os/api/camera_api/index.html @@ -0,0 +1,38 @@ +--- +title: Camera API +slug: Archive/B2G_OS/API/Camera_API +tags: + - API + - Firefox OS + - Graphics + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - WebAPI + - camera +translation_of: Archive/B2G_OS/API/Camera_API +--- +

+ +

+

Non-standard
+ This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.

+

+ +

The Camera API allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.

+ +

This API was initially only available to certified applications, but is available to privileged apps on Firefox 2.0 onwards.

+ +
+

Note: Except if you are implementing a replacement for the default Camera application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the Web Activities API.

+
+ +

See also

+ + diff --git a/files/ko/archive/b2g_os/api/camera_api/introduction/index.html b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html new file mode 100644 index 0000000000..1ea6d25a38 --- /dev/null +++ b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html @@ -0,0 +1,247 @@ +--- +title: Introduction to the Camera API +slug: Archive/B2G_OS/API/Camera_API/Introduction +translation_of: Archive/B2G_OS/API/Camera_API/Introduction +--- +

+ +

Camera API 를 사용하면 디바이스의 카메라를 이용해 사진을 찍어 현재 웹페이지에 업로드하는것이 가능해집니다. This is achieved through an input element with type="file" and an accept attribute to declare that it accepts images. The HTML looks like this:

+ +
<input type="file" id="take-picture" accept="image/*">
+
+ +

When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <input type="file"> element and its onchange event is triggered.

+ +

Get a reference to the taken picture

+ +

With the help of the File API you can then access the taken picture or chosen file:

+ +
var takePicture = document.querySelector("#take-picture");
+takePicture.onchange = function (event) {
+    // Get a reference to the taken picture or chosen file
+    var files = event.target.files,
+        file;
+    if (files && files.length > 0) {
+        file = files[0];
+    }
+};
+
+ +

Presenting the picture in the web page

+ +

Once you have a reference to the taken picture (i.e., file), you can then use window.URL.createObjectURL() to create a URL referencing the picture and setting it as the src of an image:

+ +
// Image reference
+var showPicture = document.querySelector("#show-picture");
+
+// Create ObjectURL
+var imgURL = window.URL.createObjectURL(file);
+
+// Set img src to ObjectURL
+showPicture.src = imgURL;
+
+// For performance reasons, revoke used ObjectURLs
+URL.revokeObjectURL(imgURL);
+
+ +

If createObjectURL() isn't supported, an alternative is to fallback to FileReader:

+ +
// Fallback if createObjectURL is not supported
+var fileReader = new FileReader();
+fileReader.onload = function (event) {
+    showPicture.src = event.target.result;
+};
+fileReader.readAsDataURL(file);
+
+ +

Complete example

+ +

If you want to see it in action, take a look at the complete working Camera API example.

+ +

Here is the code used for that demo:

+ +

HTML page

+ +
<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Camera API</title>
+        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
+    </head>
+
+    <body>
+
+        <div class="container">
+            <h1>Camera API</h1>
+
+            <section class="main-content">
+                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
+
+                <p>
+                    <input type="file" id="take-picture" accept="image/*">
+                </p>
+
+                <h2>Preview:</h2>
+                <p>
+                    <img src="about:blank" alt="" id="show-picture">
+                </p>
+
+                <p id="error"></p>
+
+            </section>
+
+            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
+        </div>
+
+
+        <script src="js/base.js"></script>
+
+
+    </body>
+</html>
+
+ +

JavaScript file

+ +
(function () {
+    var takePicture = document.querySelector("#take-picture"),
+        showPicture = document.querySelector("#show-picture");
+
+    if (takePicture && showPicture) {
+        // Set events
+        takePicture.onchange = function (event) {
+            // Get a reference to the taken picture or chosen file
+            var files = event.target.files,
+                file;
+            if (files && files.length > 0) {
+                file = files[0];
+                try {
+                    // Create ObjectURL
+                    var imgURL = window.URL.createObjectURL(file);
+
+                    // Set img src to ObjectURL
+                    showPicture.src = imgURL;
+
+                    // Revoke ObjectURL
+                    URL.revokeObjectURL(imgURL);
+                }
+                catch (e) {
+                    try {
+                        // Fallback if createObjectURL is not supported
+                        var fileReader = new FileReader();
+                        fileReader.onload = function (event) {
+                            showPicture.src = event.target.result;
+                        };
+                        fileReader.readAsDataURL(file);
+                    }
+                    catch (e) {
+                        //
+                        var error = document.querySelector("#error");
+                        if (error) {
+                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
+                        }
+                    }
+                }
+            }
+        };
+    }
+})();
+
+ +

Browser compatibility

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Camera APINo supportNo supportNo supportNo supportNo support
createObjectURL()168.0 (8.0)10No supportNo support
FileReader163.6 (1.9.2)1011.6No support
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Camera API3.0(Yes)10.0 (10.0)No supportNo supportNo support
createObjectURL()4(Yes)10.0 (10.0)No supportNo supportNo support
FileReader3(Yes)10.0 (10.0)No support11.10No support
+
diff --git a/files/ko/archive/b2g_os/api/index.html b/files/ko/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..9a3c418536 --- /dev/null +++ b/files/ko/archive/b2g_os/api/index.html @@ -0,0 +1,120 @@ +--- +title: B2G OS APIs +slug: Archive/B2G_OS/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/API +--- +

+ +

This page lists all B2G OS-specific APIs.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/files/ko/archive/b2g_os/api/tcpsocket/index.html b/files/ko/archive/b2g_os/api/tcpsocket/index.html new file mode 100644 index 0000000000..a9efe494eb --- /dev/null +++ b/files/ko/archive/b2g_os/api/tcpsocket/index.html @@ -0,0 +1,102 @@ +--- +title: TCPSocket +slug: Archive/B2G_OS/API/TCPSocket +translation_of: Archive/B2G_OS/API/TCPSocket +--- +

+ +

+

This API is available on Firefox OS for privileged or certified applications only.

+

+ +

요약

+ +

The TCPSocket interface provides access to a raw TCP socket.

+ +

The main entry point for this API is the navigator.mozTCPSocket property which is a TCPSocket object.

+ +
+

참고: 인증 된 앱만 1024보다 작은 포트에서 들어오는 연결을 허용 할 수 있습니다.

+
+ +

API 개요

+ +
interface TCPSocket{
+  readonly attribute DOMString host;
+  readonly attribute unsigned short port;
+  readonly attribute boolean ssl;
+  readonly attribute unsigned long bufferedAmount;
+  readonly attribute DOMString binaryType;
+  readonly attribute DOMString readyState;
+
+  TCPSocket open(DOMString host, unsigned short port, [object options]);
+  TCPServerSocket listen(unsigned short port, [object options, [unsigned short backlog]]);
+  void upgradeToSecure();
+  void suspend();
+  void resume();
+  void close();
+  boolean send(in jsval data);
+
+  attribute onopen;
+  attribute ondrain;
+  attribute ondata;
+  attribute onerror;
+  attribute onclose;
+};
+ +

속성

+ +
+
TCPSocket.host Read only
+
A string representing the host name of the server the socket is connected to.
+
TCPSocket.port Read only
+
A number representing the port the socket is connected to.
+
TCPSocket.ssl Read only
+
A boolean indicating whether the socket is encrypted with SSL (true) or not (false).
+
TCPSocket.bufferedAmount Read only
+
The number of bytes of not-yet-sent data in the socket buffered.
+
TCPSocket.binaryType Read only
+
The type of data used. Possible value is arraybuffer or string.
+
TCPSocket.readyState Read only
+
The socket state. Possible value is connecting, open, closing, or closed.
+
+ +

이벤트 핸들러

+ +
+
TCPSocket.onopen
+
A handler for the open event. After this event, the socket is ready to send and receive data.
+
TCPSocket.ondrain
+
A handler for the drain event. This event is triggered each time the buffer of data is flushed.
+
TCPSocket.onerror
+
A handler for the error event.
+
TCPSocket.ondata
+
A handler for the data event. This event is triggered each time data has been received.
+
TCPSocket.onclose
+
A handler for the close event.
+
+ +

메소드

+ +
+
TCPSocket.close()
+
Closes the connection.
+
TCPSocket.open(host, port [, options])
+
Returns a new TCPSocket object connected to the given host at the given port.
+
TCPSocket.resume()
+
Resumes the data events.
+
TCPSocket.send(data)
+
Buffers data to be sent across the network.
+
TCPSocket.suspend()
+
데이터 이벤트를 일시 정지합니다.
+
+ +

Specification

+ +

아직 사양에 포함되어 있지 않습니다. 그러나이 API는 W3C에서 TCP 및 UDP Socket API (이전에는 Raw Sockets API) 제안에 따라 시스템 응용 프로그램 작업 그룹의 일부로 논의되었습니다.

+ +

관련항목

+ + diff --git a/files/ko/archive/b2g_os/application_development/index.html b/files/ko/archive/b2g_os/application_development/index.html new file mode 100644 index 0000000000..2f961c72d6 --- /dev/null +++ b/files/ko/archive/b2g_os/application_development/index.html @@ -0,0 +1,12 @@ +--- +title: Firefox OS 앱 개발 +slug: Archive/B2G_OS/Application_development +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

Firefox OS에서 사용하는 애플리케이션은 오픈 웹 앱을 휴대폰에 설치할 수 있게 해 주는 것입니다. 아래 문서를 참고하세요.

+ +
+ 주의: Firefox OS의 현재 User-Agent 스트링은 Android;만 빠진 모바일 버전과 동일 합니다. 예: Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1.
diff --git a/files/ko/archive/b2g_os/apps/index.html b/files/ko/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..76095d479d --- /dev/null +++ b/files/ko/archive/b2g_os/apps/index.html @@ -0,0 +1,57 @@ +--- +title: Creating Apps for Firefox OS +slug: Archive/B2G_OS/Apps +tags: + - Apps + - B2G + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Web/Apps/Fundamentals +--- +

Applications for Firefox OS devices are simply open Web apps; they consist entirely of open Web technologies such as JavaScript, HTML, and CSS. While our primary documentation for apps covers nearly everything you need to know, there are a few documents specific to developing and testing for Firefox OS that are presented here.

+
+
+

Documentation and tutorials

+
+
+ Writing a web app for Firefox OS
+
+ A tutorial to creating your first web application for Firefox OS.
+
+ Tips and techniques
+
+ An assortment of tips and tricks (as well as workarounds for problems) that our developers have suggested for you!
+
+

View All...

+
+
+

Getting help from the community

+

You need help on an app-related problem and can't find the solution in the documentation?

+ +

Don't forget about the netiquette...

+

Tools

+ +

View All...

+ + +
+
+

 

diff --git a/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html new file mode 100644 index 0000000000..d5d3be42e1 --- /dev/null +++ b/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html @@ -0,0 +1,25 @@ +--- +title: Writing a web app for Firefox OS +slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

B2G 앱은 HTML, CSS, Javascript 로 작성된 웹앱입니다. 다른 일반적인 웹 사이트를 공개하는 것과 같이 웹 상에 배포할 수 있습니다. 웹 사이트를 단말에 웹앱으로 설치 가능하게 하려면, 아래 설명에 따라 매니페스트를 꾸며야하고 설치 버튼과 연결해야 합니다.

+

우선 아래의 기사를 먼저 읽는 것을 추천합니다.

+ +

물론, Open Web Apps 에 대해 보다 깊게 배우기도 좋을 것입니다.

+

Installing the Web app

+

앱과 매니페스트를 웹 상에 배포한 뒤, Gecko 에 인식시킬 필요가 있습니다. 설치 시, Gecko 는 매니페스트의 내용을 읽고 홈 화면에 아이콘을 추가하는 등 필요한 처리를 합니다.

+

앱을 인스톨하려면, navigator.mozApps.install API 를 호출해야합니다. 아래는 앱을 스스로 배포하는 경우 앱에 포함되는 설치 버튼에 대한 예제입니다.

+
<script>
+var manifest_url = "http://my.webapp.com/manifest.json";
+</script>
+
+<button onclick="navigator.mozApps.install(manifest_url); return false;">
+  Install this awesome app on your homescreen!
+</button>
+
+

Note: 설치 버튼은 Firefox Marketplace 와 같은 앱 마켓에서 찾을 수 있습니다. 그러나 사이트의 메인 페이지에 "Install as web app" 버튼이 있다면 아주 편리할 것입니다.

+

이제 B2G 브라우저 앱으로 웹 사이트에 방문하고 인스톨 버튼을 눌러보세요.

diff --git a/files/ko/archive/b2g_os/automated_testing/index.html b/files/ko/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..a03dba9376 --- /dev/null +++ b/files/ko/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,84 @@ +--- +title: Firefox OS 테스트 +slug: Archive/B2G_OS/Automated_testing +tags: + - 테스팅 +translation_of: Archive/B2G_OS/Automated_testing +--- +

+

Firefox OS는 아직 개발중이지만 조만간 새로운 하드웨어도 지원하게 될 것이기에, 테스트를 하는 방법을 아는 게 중요합니다. 이 페이지는 Firefox OS를 테스트 하는 다양한 방법에 대한 정보를 제공하는 문서들로의 링크들을 제공합니다.

+ + + + + + + +
+

유닛 테스트

+ +
+
+

다양한 테스팅 관련 논의

+
+
+ OpenGL 디버깅
+
+ Firefox OS에서 OpenGL 코드를 디버깅 하는 방법.
+
+ 지원 기능 목록
+
+ Firefox OS의 빌드 별로 지원하는 기능들의 목록.
+
+

Firefox OS를 위한 Marionette

+ +

Gaia Tests

+ +

Marionette 튜토리얼

+ +

Marionette용 테스트 작성하기

+ +

모두 표시...

+ 		+

커뮤니티에서 도움 받기

+

Firefox OS로 일을 하거나 Firefox OS가 설치된 기기 위에 올라갈 어플리케이션을 개발 중이라면, 도움을 받을 수 있는 커뮤니티가 많이 있습니다!

+ +
    +
  • Mozilla IRC 채널에 질문을 할 수 있습니다: #b2g
    • +
+

질문 할 땐 예의를 잊지 말아 주세요...

+
+ + +
+

 

diff --git a/files/ko/archive/b2g_os/building/index.html b/files/ko/archive/b2g_os/building/index.html new file mode 100644 index 0000000000..87f6b1fff6 --- /dev/null +++ b/files/ko/archive/b2g_os/building/index.html @@ -0,0 +1,125 @@ +--- +title: Firefox OS 빌드하기 +slug: Archive/B2G_OS/Building +translation_of: Archive/B2G_OS/Building +--- +
+
+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

빌드환경 설정과 코드 복사 및 초기 환경 설정이 완료 되고 나면, Boot to Gecko를 시작 할 수 있습니다.

+

최신 코드로 업데이트

+

B2G빌드가 처음이 아닐 경우, 빌드를 시작하기 전에 최신 코드를 가져 오고 싶다면 아래와 같이 빌드용 툴과 코드를 최신으로 업데이트 하실 수 있습니다.

+
git pull
+./repo sync
+
+

원하는 repository의 이름만 입력 함으로서 부분적으로 업데이트도 가능합니다.

+
./repo sync gaia
+
+

"repo"의 다른 옵션들에 관심이 있다면 "repo help"를 입력 해 보세요.

+

빌드하기

+
+

주의: 빌드 하기 전에, 빌드 환경을 개조 하려면 .userconfig파일을 수정하시면 됩니다.  .userconfig 파일 개조하기를 참고하세요.

+
+

아래와 같이 입력하면 B2G를 빌드 하실 수 있습니다.

+
cd B2G
+./build.sh
+
+

이번 과정 또한 수행 시간이 많이(2시간 이상)걸리므로 잠깐 다른 일을 처리 하셔도 됩니다. As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.

+

특정 모듈 빌드하기

+

Gecko와 같은 특정 모듈만 빌드하려면 아래와 같습니다.

+
./build.sh gecko
+
+

특정 애플리케이션 하나만 빌드하려면, 아래와 같이 환경 변수 BUILD_APP_NAME에 "gaia"를 설정 하여 gaia만 빌드 하실 수 있습니다.

+
BUILD_APP_NAME=calendar ./build.sh gaia
+

빌드 가능한 모듈을 확인 하고 싶으시면 아래와 같이 수행 하십시오.

+
./build.sh modules
+
+

빌드에 사용되는 코어 갯수 변경

+

기본적으로, B2G 빌드 스크립트는 시스템이 가진 코어보다 2개 더 많은 수로 병렬 빌드를 진행 합니다. "build.sh" 수행시 -j 파라미터를 통해 그 갯수를 변경 하실 수 있습니다. 이를 통해 빌드 시스템의 CPU로드를 조정하실 수 있습니다. 빌드에서 에러가 발생하면 병렬 빌드의 경우 에러 가 복잡하게 보이므로 코어 갯수를 줄이거나 하나로 한다면 빌드 에러 추적이 용이합니다.

+

아래는 2개의 코어로 설정하여 빌드하는 예입니다.

+
./build.sh -j2
+
+

빌드 에러가 발생시는 아래처럼 1개의 코어로 할 경우 에러 결과를 읽고 분석하기 용이 합니다.

+
./build.sh -j1
+
+

다국어 빌드하기

+

다국어 지원하도록 한다면:

+

Gaia

+
    +
  1. 먼저 어떤 언어를 지원할 것인지 정하시고. 현재는 locales/languages_dev.json와 locales/languages_all.json가 Gaia의 언어 설정 관련 파일로 사용됩니다.
    2. +
  2. http://hg.mozilla.org/gaia-l10n에서 지원하고자 하는 언어를 가져옵니다. 언어 파일에 리스트 된 각 언어를 가져 오려면 "repo"를 사용해야 합니다.
    3. +
  3. 환경 설정으로, set LOCALE_BASEDIR에 위의 2번에서 가져온 파일 절대 경로를 설정합니다. LOCALES_FILE을 1번 설정의 절대 경로로 설정합니다.
    4. +
+

예를 들면,

+
export LOCALE_BASEDIR=$PWD/gaia-l10n
+export LOCALES_FILE=$PWD/gecko/gaia/shared/resources/languages-dev.json
+
+

Gecko

+
    +
  1. Determine which Gecko languages file to use. We're currently using b2g/locales/all-locales as our Gecko languages file.
    2. +
  2. Clone the appropriate locales into a directory; this can be gecko-l10n/ . + +
    3. +
  3. Clone compare-locales.
    4. +
  4. +

    In your environment, set L10NBASEDIR to the absolute path of the directory in step 2. Set MOZ_CHROME_MULTILOCALE to a string of space-delimited locales from step 1.

    +

    Add the compare-locales/scripts dir to your PATH, and compare-locales/lib to your PYTHONPATH.

    + For instance, + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    Once you have the above set up, you can run build.sh .

    +

    It looks like you can use .userconfig as well.

    +

    These instructions may change as we smooth things out.

    +

    Known errors

    +
      +
    • +

      KeyedVector.h:193:31: error: indexOfKey was not declared in this scope

      +
      • +
    +

    This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions.

    +

    See Customizing with the .userconfig file for more information.

    +
    +

    Community Note: It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.

    +
    +
      +
    • +

      arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)

      +
      • +
    +

    If you see this message, it most likely means that are lacking of free memory. Ensure having enough free memory before running ./build.sh. It should run fine if you system has 4GB of ram.

    +
      +
    • +

      If you get build errors while the build system is running tests

      +
      • +
    +

    Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:

    + 
    Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
    +

    In this situation, try deleting the gaia/xulrunner-sdk directory and re-pulling the code:

    + 
    rm -r gaia/xulrunner-sdk
+
    +

    This deletes the downloaded, precompiled copy of XULRunner that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.

    +

    다음 단계

    +

    빌드가 완료되면 다음 단계로는 에뮬레이터로 넣을 것인지 단말기로 놓을 것인지에 따라 아래와 같은 선택사항이 있습니다. 자세한 사항은 각각을 참고 하세요.

    + +
    5. +
diff --git a/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..a6c5dd7472 --- /dev/null +++ b/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,49 @@ +--- +title: Firefox OS를 빌드 및 설치하기 +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

Firefox OS는 현재 활발히 개발 중이며, 릴리즈되기 전입니다. 최신버전을 설치하려면 여러분이 직접 빌딩하고 설치해야 합니다. 이 페이지에 나와있는 글들은 여러분에게 에뮬레이터나 호환기기에 Firefox OS를 빌딩하고 설치하거나 Firefox 브라우저에 Gaia 유저 인터페이스를 빌딩하고 설치하는 방법을 알려줄 겁니다.

+ + + + + + + + +
+

FIREFOX OS 빌드하기

+ +
+
Firefox OS 빌드 과정 요약
+
Firefox OS를 빌드하고 설치하는데에는 상당량의 시간, 네트워크 데이터 사용, 그리고 컴퓨터 성능 등을 요구한다. 이 글은 사용자의 빌드 과정의 목적과 절차 등을 이해시키고자한다.
+
Firefox OS 빌드 요구사양
+
처음 Firefox OS를 빌드하기 전에 필요하거나 필요해질 것들.
+
Firefox OS 빌드 준비하기
+
Firefox OS를 빌드하기 전에 여러분은 저장소를 복제하고 빌드 환경을 설정해야 한다. 이 글은 그 방법을 설명한다.
+
Firefox OS 빌딩하기
+
Firefox OS 빌드 방법.
+
+ +

전체보기...

+ 		+

FIREFOX OS 설치하기

+ +
+
Gaia나 Firefox OS를 선택하여 실행하기
+
여러분은 Firefox에서 Gaia를 사용하거나 모바일 기기에서 Firefox OS를 실행하거나 데스크톱용 시뮬레이션을 사용할 수 있습니다. 여러분의 필요에 대해 어떤 것을 선택해야 할지 도와줄 것입니다.
+
Firefox 에서 Gaia 사용하기
+
Firefox 데스크톱 버전에서 Gaia 사용하는 방법.
+
Firefox OS 데스크톱 클라이언트(시뮬레이터) 사용하기
+
Firefox OS 데스크톱 클라이언트를 실행하고 사용하는 방법;데스크톱 애플리케이션안 Gaia환경을 만듭니다. Firefox 에서 Gaia를 실행하는 것보다는 더 나은 환경이나 에뮬레이터를 사용하는 것보다는 못합니다.
+
Firefox OS 에뮬레이터 사용하기
+
Firefox OS 에뮬레이터를 빌드하고 사용하고, 언제 어떤 에뮬레이터를 사용해야 하는지에 대한 안내.
+
모바일 기기에 Firefox OS 설치하기
+
모바일 기기에 Firefox OS를 설치하는 방법.
+
SGS2에서 Firefox OS와 Android 듀얼 부팅하기
+
삼성 갤럭시 S2에서 Firefox OS/Android 듀얼 부트환경을 설정하는 방법.
+
+
+ +

 

diff --git a/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html b/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html new file mode 100644 index 0000000000..b7578dff62 --- /dev/null +++ b/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html @@ -0,0 +1,153 @@ +--- +title: GDB 및 관련 Tool을 이용한 B2G 디버깅 +slug: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb +translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb +--- +
+

gdb는 Firefox OS의 애플리케이션 디버깅을 위한 많은 유용한 옵션을 제공하는 command line debugger입니다. B2G상에서 실행 중인 각 프로세스의 app 이름을 보여주는 표준 ps의 wrapper인 b2g-ps와 같은 다른 tool들도 있습니다. 이 문서는 이런 tool들로 Firefox OS 디버깅을 어떻게 수행하는지 보여드립니다.

+
+ +

단일 프로세스 모드에서 디버거 시작하기

+ +

(역자 주: b2g 프로세스에 대한 디버깅을 뜻하는 듯)

+ +
+

Note: 디버거를 실행하기 전에 자신만의 설정을 위해 .userconfig 파일을 셋업할 수 있습니다. 이에 대한 더 자세한 내용은 Customization with the .userconfig file을 참고하시기 바랍니다.

+
+ +

Firefox OS를 재시작한 후 gdb 상에서 실행하기 위해서는 간단히 run-gdb.sh를 사용하시면 됩니다 :

+ +
./run-gdb.sh
+
+ +
+

Note: 만약 에뮬레이터 상에서 디버깅 하길 원한다면, 혹시 연결되어 있는 폰은 없는지 확인해 보시기 바랍니다; 에뮬레이터를 연결하려는 gdb와 충돌이 발생할 수 있습니다.

+
+ +

Firefox OS가 이미 동작 중이고, 재시작없이 Firefox OS를 붙이길 원한다면 아래처럼 할 수 있습니다:

+ +
./run-gdb.sh attach
+
+ +

Out-of-process tasks 디버깅

+ +

(역자 주: b2g 외 다른 프로세스에 대한 디버깅을 뜻하는 듯)

+ +

Firefox OS의 쓰레드 기반 특성(threaded nature) 때문에 종종 B2G task외에 다른 task들을 디버깅 해야할 필요가 있을 수 있습니다. 이를 위해 디버깅 하길 원하는 프로세스의 PID를 확인하는 가장 간단한 방법은 b2g-ps 명령을 사용하는 것입니다:

+ +
$ adb shell b2g-ps
+b2g              root      106   1     189828 56956 ffffffff 40101330 S /system/b2g/b2g
+Browser          app_0     4308  106   52688  16188 ffffffff 400db330 S /system/b2g/plugin-container
+
+ +

위에서 Browser는 browser 애플리케이션을 위한 "content process"로 사용되는 (b2g의) 자식 프로세스입니다. 이 예에서 content process를 디버깅하고 싶다면 아래처럼 하시기 바랍니다:

+ +
$ ./run-gdb.sh attach 4308
+ +

종종 자식 프로세스 생성에 대해 즉시 통보받는게 유용할 때가 있습니다. 이렇게 하기 위해선 MOZ_DEBUG_CHILD_PROCESS 환경변수와 함께 run-gdb.sh를 실행하면 됩니다:

+ +
MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh
+ +

이렇게 하면 Firefox OS에서 out-of-process 애플리케이션이 실행될 때 새로운 task용 plugin-container의 PID를 출력할 것입니다. 그리고 위에서 봤던 attach 명령을 사용하기에 충분한 시간인 30초 동안 sleep 할 것 입니다:

+ +
$ ./run-gdb.sh attach 4308
+ +

만일 부팅 중 발생하는 어떤 부분을 디버깅하려고 한다면, 새로운 애플리케이션에 대한 디버거 인스턴스(debugger instance)를 적절하게 빨리 실행해야 합니다. 일단 새로운 디버거가 실행되면 새로운 task의 동작을 지속하기 위해 즉시 "c"를 눌러야 합니다.

+ +

Core 파일 디버깅

+ +
+

Warning: Core 파일은 프로세스의 전체 메모리 내용을 포함하고 있습니다. 이 파일은 여러분이 Firefox OS에 입력한 개인 정보를 포함하고 있을 수 있습니다. 그러므로 core 파일은 주의깊게 공유되어야 합니다.

+
+ +

기본적으로 Firefox OS는 프로세스가 crash 되었을 때 core 파일을 dump 하지 않습니다. Debug 빌드 버전에서 다음 명령으로 enable 해주어야 합니다:

+ +
$ adb shell setprop persist.debug.coredump all
+$ adb reboot
+
+ +

변경사항을 적용하기 위해서는 리부팅이 필요하며, B2G가 일단 초기화를 시작했으면 crash 발생 시 모든 프로세스가 core dump를 하게 됩니다. 이전 커널(<3.0, hamachi 등)을 사용하는 플랫폼이거나, Gonk 외 B2G의 특정 프로세스(즉 b2g, plugin-container)로부터의 core dump를 원한다면, 다음 명령으로 enable 할 수도 있습니다:

+ +
$ adb shell setprop persist.debug.coredump b2g
+$ adb reboot
+
+ +

Core 파일은 /data/core에 저장됩니다. b2g에 의해 생성된 core 파일은 다음과 같이 열 수 있습니다:

+ +
$ adb pull /data/core .
+$ ./run-gdb.sh core b2g.1286.1412337385.core
+
+ +

Content process의 core 파일은 다음과 같이 열 수 있습니다:

+ +
$ adb pull /data/core .
+$ ./run-gdb.sh core plugin-container Camera.1329.1412617644.core
+
+ +

지원

+ +

기능의 기대 수준

+ +

다음 디버깅 기능들은 적어도 확실히 동작합니다. 만약 동작하지 않는다면 간단한 설정 변경으로 동작할 것입니다:

+ + + +

다음 디버깅 기능은 지원하지 않습니다. 사용하지 마시기 바랍니다.

+ + + +

문제 해결

+ +

위에 언급된 것처럼 GDB가 동작하지 않을 때 해볼 수 있는 몇 가지가 있습니다.

+ +

B2G clone이 최신인지 확인

+ +

B2G clone을 업데이트 하려면 아래 두 개의 명령을 실행해야 한다는 것을 항상 명심하시기 바랍니다:

+ +
git pull
+./repo sync
+ +

위에서 git pull을 잊는 경우가 이전 run-gdb.sh로 남아있거나 최신 개선사항의 잇점을 얻지 못하는 전형적인 요인입니다.

+ +

올바른 프로세스를 attach 하고 있는지 확인

+ +

잘못된 프로세스를 attach 하는 것(예를 들면 B2G 프로세스 대 Browser 프로세스)은 여러분의 breakpoint가 왜 동작하지 않고 있는지를 설명해 줄겁니다.

+ +

Symbol이 올바르게 로드 되었는지 확인

+ +
    +
  1. Symbol이 올바르게 로드 되었는지 확인하려면 gdb에서 info shared를 사용해 보세요: + + 
    (gdb) info shared
+From        To          Syms Read   Shared Object Library
+0xb0001000  0xb0006928  Yes         out/target/product/otoro/symbols/system/bin/linker
+0x40051100  0x4007ed74  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libc.so
+0x401ab934  0x401aba2c  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libstdc++.so
+...
    +
    2. +
  2. Syms Read 컬럼이 모두 Yes이어야 합니다. 어떤 안드로이드 폰에서는 몇몇 시스템 라이브러리와 드라이버가 Yes (*)로 나타날 수 있습니다; 그건 괜찮습니다. No가 보이면 안됩니다.
    3. +
  3. 만약 No가 보인다면, 그게 첫 번째 문제이고 다른 걸 보기전에 그 문제부터 해결해야 합니다.
    4. +
  4. run-gdb.sh 명령을 친 후 바로 나타나는 터미널의 출력에 에러 메시지가 있는지 찾아보시기 바랍니다.
    5. +
  5. 또한 GDB 명령이 올바른지 터미널 출력을 확인해 보시기 바랍니다. 특히 명령줄의 마지막 인자는 b2g 실행파일의 경로가 되어야 합니다. 아래 올바른 예제가 있습니다: + 
    prebuilt/linux-x86/toolchain/arm-linux-androideabi-4.4.x/bin/arm-linux-androideabi-gdb -x /tmp/b2g.gdbinit.bjacob /hack/b2g/B2G/objdir-gecko/dist/bin/b2g
    +
    6. +
  6. 다음 GDB 변수들을 확인해 보시기 바랍니다: solib-search-path 와 solib-absolute-prefix: + 
    (gdb) show solib-search-path
+The search path for loading non-absolute shared library symbol files is /hack/b2g/B2G/objdir-gecko/dist/bin:out/target/product/otoro/symbols/system/lib:out/target/product/otoro/symbols/system/lib/hw:out/target/product/otoro/symbols/system/lib/egl:out/target/product/otoro/symbols/system/bin:out/target/product/otoro/system/lib:out/target/product/otoro/system/lib/egl:out/target/product/otoro/system/lib/hw:out/target/product/otoro/system/vendor/lib:out/target/product/otoro/system/vendor/lib/hw:out/target/product/otoro/system/vendor/lib/egl.
+(gdb) show solib-absolute-prefix
+The current system root is "out/target/product/otoro/symbols".
    +
    7. +
+ +
+

Note: 만일 도움이 더 필요하시면 #b2g IRC 채널로 오시기 바랍니다. 버그를 찾은 것 같다면 B2G issue tracker로 알려주시기 바랍니다.

+
+ +

 

diff --git a/files/ko/archive/b2g_os/debugging/index.html b/files/ko/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..12a896d185 --- /dev/null +++ b/files/ko/archive/b2g_os/debugging/index.html @@ -0,0 +1,84 @@ +--- +title: Debugging on Firefox OS +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Archive/B2G_OS/Debugging +--- +
+

There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system. This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.

+
+

Debugging apps

+

When debugging your web apps, the best tool at your disposal is Mozilla's powerful App Manager, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent developer tools. This should be your first choice, especially for app/Gaia debugging.

+
+
+ Using WebIDE
+
+ The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device. However, it also provides an editing environment for you to create and develop apps.
+
+ Using the App Manager
+
+ The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.
+
+ Debugging out of memory errors on Firefox OS
+
+ This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.
+
+

Debugging Gaia/B2G

+

If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.

+
+
+ Debugging using the desktop B2G client
+
+ You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.
+
+ Firefox OS crash reporting
+
+ This page details how to handle crash reporting on Firefox OS, including retrieving crash reports, and forcing crashes.
+
+ Debugging B2G using gdb
+
+ The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.
+
+ Debugging B2G using Valgrind
+
+ Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.
+
+ Getting NSPR logs in B2G
+
+ You can use NSPR logs to record HTTP and other networking.
+
+ Debugging OpenGL
+
+ How to debug OpenGL code on Firefox OS.
+
+

General setup and information

+

The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.

+
+
+ Developer settings for Firefox OS
+
+ There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.
+
+ Installing and using ADB
+
+ Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.
+
+ On-device console logging
+
+ How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.
+
+ Connecting a Firefox OS device to the desktop
+
+ This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.
+
+ Setting up to debug Firefox OS code
+
+ Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.
+
diff --git a/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html b/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html new file mode 100644 index 0000000000..fa0e0b7ed5 --- /dev/null +++ b/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html @@ -0,0 +1,79 @@ +--- +title: SGS2에서 B2G와 Android로 듀얼 부팅 +slug: Archive/B2G_OS/Dual_boot_of_B2G_and_Android_on_SGS2 +tags: + - 듀얼 부팅 +translation_of: Archive/B2G_OS/Building +--- +

+

+

Warning: 이 문서에서 설명하는 내용은 공식적으로 지원하는 구성은 아닙니다. 본인의 결정 하에 사용하세요.

+

+

삼성 Galaxy S2를 가지고 있고, Android를 주로 사용하는 OS로 유지하면서 가끔 B2G를 테스트 하고 싶은 상황이라면, B2G를 (폰에 이미 존재하는)분리된 파티션에 설치하고 기기를 켤 때 어느 파티션에서 부팅할지 선택할 수 있습니다.

+
+ 참고: 폰은 반드시 Android 4 (Ice Cream Sandwich) 가 설치되어 있어야 합니다. 그렇지 않다면 아래의 내용은 제대로 동작하지 않을 겁니다.
+

선결 조건

+

Android와 B2G로 듀얼 부팅을 하려면 다음의 사항들이 만족되어 있어야 합니다:

+ +

최초 환경 설정

+

듀얼 부팅을 하기 위해선 여러가지 조작을 해야 합니다.
+ 다음 환경 설정은 처음에 한번만 하면 됩니다.

+

heimdall을 루트 권한 없이 사용하려면, android.rules라는 이름(.rules 앞의 내용은 맘대로 정해도 됩니다)의 파일을 만들고 /etc/udev/rules.d 디렉토리에 위치시켜야 합니다. 파일은 다음과 같은 내용을 가져야 합니다:

+
SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"
+

이 규칙을 활성화 시키기 위해서, udev를 재시작 해야 합니다:

+
sudo service udev restart
+

이제 폰을 PC와 다시 연결 합니다. 위의 규칙은 또한 adb가 SGS2를 루트 권한 없이 접근 가능하게 할 겁니다.

+

Siyah 커널 다운로드 하기

+

듀얼 부팅을 위해선 Siyah 커널이 필수적입니다. tar 파일을 받아서 압축을 푸셨다면, zImage 라는 이름의 파일을 얻었을 겁니다. 이걸 폰에 다운로드 하기 위해선 다음의 단계를 따라가면 됩니다:

+
    +
  1. 폰의 전원을 끕니다
    2. +
  2. 다운로드 모드로 리부팅(볼륨 다운, 홈, 파워 버튼을 동시에 눌러 전원을 켜고, 나중에 누르라는 메세지가 뜨면, 볼륨 업 버튼을 누릅니다) 합니다
    3. +
  3. 다음 명령어를 이용해 heimdall로 커널을 다운로드 합니다(폰은 PC에 연결되어 있어야 합니다):
    + 
    heimdall flash --kernel /path/to/zImage
    +
    4. +
+

커널 다운로드가 완료되면 폰이 재부팅 됩니다

+

B2G 롬 환경 준비하기

+

Siyah 커널을 설치하셨다면, Siyah 커널을 이용해 B2G 이미지를 두번째 파티션에 설치하기 위한 환경을 준비해야 합니다:

+
    +
  1. 폰의 전원을 끕니다
    2. +
  2. 리커버리 모드로 리부팅(볼륨 업, 홈, 파워 버튼을 동시에 눌러 폰의 전원을 켭니다) 합니다
    3. +
  3. CWMT 터치 인터페이스에서, dual-boot 옵션으로 이동 -> Wipe 2ndROM data/cache 메뉴 선택 -> Yes - Wipe 메뉴를 선택합니다. 이 명령은 시간을 좀 필요로 할 겁니다
    4. +
+

명령이 성공적으로 끝나면, Go Back 메뉴를 선택하고 폰을 리부팅 하기 위해 reboot system now 메뉴를 선택합니다. 이제 SD 카드 안에 cache.img와 data.img라는 파일이 포함된 .secondrom 이라는 이름의 디렉토리가 있음을 확인할 수 있습니다.

+

B2G 업데이트

+

새로운 버전의 B2G를 빌드 할 때마다 다음의 동작이 필요합니다.

+

명령줄에 입력하는 명령을 간편하게 하기 위해, 필요한 모든 파일을 하나의 폴더에 복사해 두는 것을 추천합니다. 복사해 둬야 할 파일들은 다음과 같습니다:

+ +

파일들을 모두 하나의 디렉토리에 모았으면, 다음 명령들을 따라합니다:

+
    +
  1. userdata.img 파일로부터 data.img를 추출합니다. 다음의 명령으로 이를 행할 수 있습니다: + 
    simg2img userdata.img data.img
    +
    2. +
  2. data.img 파일을 폰의 .secondrom 폴더로 이동시킵니다. 폰의 file storage mode 를 활성화 시키고 PC와 폰을 연결해서 할수도 있고, USB 디버그 기능이 활성화 되어 있다면, 다음과 같이 adb를 이용할 수도 있습니다: + 
    adb push /path/to/data.img /sdcard/.secondrom/data.img
    +
    3. +
  3. 폰의 전원을 끕니다
    4. +
  4. 다운로드 모드로 리부팅(볼륨 다운, 홈, 파워 버튼을 동시에 눌러 전원을 켜고, 요청받으면 볼륨 업 버튼을 누릅니다) 합니다
    5. +
  5. heimdall을 써서 B2G 펌웨어를 두번째 파티션에 다운로드합니다: + 
    heimdall flash --hidden system.img
    +
    6. +
+

다운로드가 끝나면, 폰이 리부팅 될꺼고, 부팅 시에 부트로더가 기다리는 동안 홈 버튼을 누름으로써 두번째 롬(B2G)로 부팅할 수 있습니다. 문제 없이 설치가 잘 되었다면, B2G로 부팅한 직후 까만 화면을 보게 될 것입니다. 이제 Gaia를 설치해야 합니다.

+
+ 참고: B2G를 어떻게 테스트 하고 싶은가에 따라서는, 기존의 것에서 새로운 data.img 파일로의 교체는 기존의 모든 설정, 설치된 어플리케이션들, 그리고 B2G를 사용하면서 행한 모든 것을 날려야 함을 의미하므로, B2G를 업데이트 할 때마다 data.img 파일을 갱신하고 싶지는 않을 수 있을 겁니다.
+

부팅

+

매번 B2G로 부팅할 때마다 다음의 동작을 해줘야 합니다.

+

안타깝게도, Gaia를 system.img B2G image에 간단히 넣는 방법은 없고, 폰을 끌 때마다 Gaia는 사라지므로, 매번 B2G로 부팅할 때마다 Gaia를 다시 설치해 줘야 합니다. Gaia를 설치하기 위해서는, 폰을 B2G로 부팅하고(폰은 검은 화면을 보이고 있을 겁니다) PC와 연결한 후에 다음과 같은 명령을 입력합니다:

+
cd B2G/gaia
+GAIA_DOMAIN=foo.org make install-gaia
+

Gaia의 다운로드가 끝나면, 폰은 B2G 인터페이스가 나타날 겁니다.

diff --git a/files/ko/archive/b2g_os/firefox_os_apps/index.html b/files/ko/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/ko/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

+ +

Building Firefox OS apps

+ +
+
Building apps for Firefox OS
+
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
+
Localization
+
This set of articles provides information for developers wishing to provide localized versions of their apps.
+
Performance
+
This page lists performance-related topics specific to Firefox OS.
+
Firefox Accounts on Firefox OS
+
This article provides an overview of using Firefox Accounts in Firefox OS.
+
Reference apps
+
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
+
Screencast series: App Basics for Firefox OS
+
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
+
+ +

Building blocks

+ +
+
Building Blocks
+
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
+
+ +

Styleguides

+ +
+
Firefox OS Visual styleguide
+
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
+
Firefox OS Copy styleguide
+
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
+
Firefox OS in Arabic
+
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
+
+ +

Assets

+ +
+
Firefox OS design asset library
+
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
+
Firefox OS icon font
+
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
+
Firefox OS transitions
+
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
+
+ +

References

+ +
+
Firefox OS device APIs
+
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
+
Firefox OS app tools
+
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
+
+ +

Other app topics

+ +
+
Porting Chrome apps to Firefox OS Apps
+
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
+
App development FAQ
+
This FAQ is a compilation of answers to common app development questions.
+
+ +

See also

+ + diff --git a/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html b/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html new file mode 100644 index 0000000000..f6e97ebe92 --- /dev/null +++ b/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html @@ -0,0 +1,92 @@ +--- +title: App localization +slug: Archive/B2G_OS/Firefox_OS_apps/Localization +translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization +--- +

+ +
+

이 글 모음은 앱의 지역화 버전을 만들고 싶어하는 개발자들을 위해정보를 제공하기 위하여 작성하였습니다.

+
+ +

지침서

+ +
+
Getting started with app localization(앱 지역화를 시작하기)
+
이 지침서는 앱 지역화를 자세한 가이드를 제공합니다.
+
Connecting developers and translators with Transifex
+
This article explores the use of Transifex for managing translation work, both for app developers and localizers.
+
+ +

Reference

+ +
+
L10n.js reference
+
This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.
+
Internationalization helpers: IntlHelper and mozIntl
+
This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the Internationalization API and Gaia's built in helpers, IntlHelper and mozIntl.
+
App localization code best practices
+
Localization best practices and advanced techniques for experienced Gaia/app developers.
+
Developing Bidi Apps
+
Best coding practices and guidelines for developing bi-directional (left-to-right and right-to-left, RTL) apps.
+
+ +

Tools

+ +
+
Translation tester
+
This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.
+
diff --git a/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html new file mode 100644 index 0000000000..25a7f50191 --- /dev/null +++ b/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html @@ -0,0 +1,267 @@ +--- +title: Firefox OS build prerequisites +slug: Archive/B2G_OS/Firefox_OS_build_prerequisites +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +

 

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+
+

Firefox OF 빌드 코드를 받기 전에, 빌드 환경을 먼저 구축 하셔야 합니다. 현재까지는 리눅스 64비트 버젼 및 맥 OS X에서만 빌드 하실 수 있습니다.

+
+
+
Note: Firefox OS를  올리기 위한 스마트폰을 빌드 시작전에 컴퓨터에 연결하지 마십시오, 언제 연결할지 알려 줄 것입니다.
+
+

지원되는 단말기 및 에뮬레이터

+

몇몇의 단말기가 지원되기도 하지만, 어떤 단말기에서는 다양하게 변경이 가능합니다. 지금까지는 특별한 목적(특징)으로 분류되어 있습니다. 그리고 어떤 기기는 다른 기기들보다 지원이 더 잘되기도 합니다.

+

분류1

+

분류1 에 속하는 기기는 개발의 주요 대상이 되는 기기며 전반적으로 기능의 첫 번째 구현 대상 혹은 최신 버그들이 처음으로 수정되는 대상 기기입니다.

+
+
+ 오토로
+
+ 오토로는 중저가 스마트폰의 플랫폼 개발 혹은 테스트용으로 사용됩니다. 많은 핵심 Firefox OS개발에 사용되는 기기입니다
+
+ 에뮬레이터 (ARM and x86)
+
+ 에뮬레이터는 ARM코어와 X86(PC용)코어 두가지가 있습니다.
+
+ Koen
+
+ Keon은 Geeksphone의 초기의 개발자 폰중에 하나 입니다. Koen은 Geeksphone에서 빌드 방법을 제공합니다.
+
+ 데스크탑
+
+ 데스크탑용 Firefox OF도 있습니다; 이는 XULRunner application에서 Gecko를 실행 하는 것이며, Gaia user experience를 Gecko에서 사용 가능합니다.
+
+
+
+ Flame
+
+ Flame은 Mozilla의 새로운 표준 Firefox OS의 기준 폰입니다. ZTE Open C를 위한 빌드를 할 때 Flame의 설정을 사용해야 합니다. Flame과 Open C는 안드로이드 젤리빈이 기반 시스템 입니다.
+
+

당연히, 데스크탑 클라이언트를 빌드 할 수 있으며 단말기 없이도 에뮬레이터를 사용할 수 있습니다..

+

분류 2

+

분류 2의 단말기들은 기본기능 개발을 위해(특히 어플리케이션 개발자들) 사용 됩니다. 그렇기 때문에 분류 1다음으로 최신 코드들이 반영됩니다.

+
+
+ Samsung Nexus S
+
+ 넥서스 S로 잘알려진 모델로 상세 모델로는 GT-I9020A, GT-I9023이기도 합니다. 그외 넥서스 S모델들도 사용 가능합니다.
+
+ Samsung Nexus S 4G
+
+ 모델명 SPH-D720가 분류 2에 포함 됩니다.
+
+

분류 3

+

Firefox OS가 아래와 같은 단말기 들로 빌드 될 수도 있지만, 코어 개발 및 기본 기능들이 실제로 잘 반영되지 않아 정상적으로 동작 하지 않을 수도 있습니다. 분류 1, 2보다 안정성이 떨어지므로 참고하시기 바랍니다.

+
+
+ Samsung Galaxy S2
+
+ 모델 명 i9100; 다른 모델은 호환되지 않을 수 있습니다. (NFC칩만 추가된 i9100P모델인 경우에는 동작 할 수 있습니다.)
+
+ Samsung Galaxy Nexus
+
+ 최근에는 지원되지 않는 모델입니다.
+
+ Nexus 4
+
+ IRC에 일부 사용자들이 성공적으로 테스트를 했습니다. Android 4.4를 처음으로 실행 하면 Android 4.3을 재 Flash를 요구 할 수 도 있고 그렇지 않을 수 도 있습니다.( 안드로이드 이미지는 구글로 부터 이용할 수 있다.)
+
+ Nexus 5
+
+ IRC에 일부 사용자들이 성공적으로 테스트를 했습니다. 
+
+ Tara
+
+ Tara is another testing device. Manifest of Tara is in master branch only. The script of getting Tara code is "BRANCH=master ./config.sh tara".
+
+ Unagi
+
+ 우나기는 중저가 스마트폰의 플랫폼 개발 혹은 테스트용으로 사용됩니다. 많은 핵심 Firefox OS개발에 사용되는 기기입니다.
+
+ 판다보드
+
+ 판다보드는 모바일용 플랫폼으로 사용되는 OMAP 4 시스템용 보드 개발용으로 사용됩니다.
+
+  
+
+  
+
+  
+
+
+ 중요: 단말기는 최소한 안드로이드 4 (즉 아이스크림 샌드위치)가 지원되어야 합니다. 위에 언급된 단말기중 안드로이드 4보다 낮은 버젼이라면 업데이트 하시기 바랍니다.
+
+

분류 2와 분류 3 단말은 홈 버튼이 없다

+

분류 1의 모든 단말은 하드웨어 홈 버튼이 있어서 사용자가 홈 스크린으로 돌아갈 수 있습니다. 최근 대부분의 ICS 안드로이드 단말은 네비게이션을 위해서 화면상에 소프트웨어 홈 버튼을 사용합니다. 카메라 앱 같이 몇몇 앱에서는 하드웨어 홈버튼 없이 앱을 빠져나올 수 없습니다. 이것은 FireFox OS가 매일매일 사용하는데 부적절할 수 있게 합니다.

+
+

 

+

리눅스 요구사항

+

리눅스에서의 빌드 환경은 아래와 같습니다:

+ +

위의 사항은 단순히 최소사양이며, 가끔은 리소스가 없어서 빌드 실패가 되기도 합니다.

+

다른 리눅스 배포판에서도 빌드가 될수도 있으나, 우분투 12.04 배포판에서는 대부분의 개발자들이 빌드에 성공 했으므로 이를 추천 합니다. 아래 배포판들은 다음과 같은 이유로 빌드 되지 않을 수 있습니다.: 32 비트 디스트로 와 최신 디스트로( 우분투 12.10, 페도라 17/18, 아크 리눅스의 gcc 4.7으로 인해 오류 발생 가능성 있음).

+

그외 아래와 같은 툴들이 설치 되어 있어야 합니다:

+ +

64 비트에서의 설치 예시:

+

우분투 12.04 / 리눅스 민트 13 / 데비안 6

+
$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

64비트 우분투에서 빌드할때는, 32비트 버전의 libX11.so와 libGL.so를 심볼릭 링크로 추가 하셔야 합니다.

+
$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so
+

우분투 12.10

+
$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

위의 단계 외 추가로, 빌드 하기 전에 GCC 4.6를 기본 호스트 컴파일러로 설정 하여야 합니다. 소스를 가저 온 후에는 "여기" 참고 하세요.

+

최신 우분투 12.10을 설치 한후, "unmet dependenceis for ia32-libs"에러가 발생 할 것입니다. 아래와 같이 수행 하여 수정 하시기 바랍니다.

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs
+

Fedora 16:

+
$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip
+

Fedora 17/18:

+
$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip
+

위와 같이 프로젝트는 컴파일 하려면 GCC 4.4가 필요합니다. 여기서 미리 컴파일된 버전을 구할 수 있으니 아래 명령을 따라 다운로드후 /opt에 설치하세요:

+
$ wget http://people.mozilla.org/~gsvelto/gcc-4.4.7-bin.tar.xz
+$ sudo tar -x -a -C /opt -f gcc-4.4.7-bin.tar.xz
+
+

이 컴파일러를 항상 호스트의 기본 컴파일러로 지정한 후에 빌드 작업을 해야합니다. 소스를 얻은 후에  here를 따라 확인해 주세요.

+

Arch Linux (not functional yet):

+
$ sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wireless_tools yasm lib32-mesa lib32-ncurses lib32-readline lib32-zlib
+

기본적으로 Arch 리눅스는 Python3을 사용하는데 이것을 이전 Python2로 사용해야 합니다:

+
$ cd /usr/bin
+
+$ sudo ln -fs python2 python
+

Mac OS X를 위한 요구사항

+

Mac OS X에서 Firefox OS를 빌드하기 위해서 Xcode 명령라인 도구들을 설치해야 합니다.

+

Apple's developer downloads page 에서 OS X의 특정 버전에 적절한 명령라인 도구를 바로 다운로드 해서 사용할 수 있습니다.

+

 

+

그러나 Xcode 전체를 사용하고자 하면 Mac App Store에서 설치할 수 있습니다.

+

XCode 4.3.1 이상 최신버전에서 명령라인 도구 설치하기

+

Xcode 4.3.1(OS X 10.7 "Lion")과 최신 4.4.1+(Mac OS X 10.8 "Mountain Lion")은 명령라인 도구를 포함하고 있지 않습니다. Xcode의 Preferences 메뉴로 가서 Downloads 패널로 갑니다. 이곳에서 'Command Line Tools'를 설치합니다. 설치를 위해서 최소 20 GB 공간의 여유가 있어야 합니다.

+

Screenshot of Xcode Downloads Command Line Tools

+
+ Note: Firefox OS 에뮬레이터는 Core 2 Duo 프러세스 혹은 그 이상을 요구합니다; 즉 Mac OS X 10.7 "Lion"에 호환되야 합니다. 그러나 이전 Mac OS에서도 Firefox OS를 빌드할 수는 있습니다.
+

Firefox OS Mac Bootstrap

+

터미널을 열고 아래 명령을 실행합니다:

+
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+

It will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing. The script will check for and install the following items:

+ +
+

Xcode

+

If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:

+ 
xcode-select -print-path
+ If it still points to /Developer you can update the path with: + 
sudo xcode-select -switch /Applications/Xcode.app
+ Next to that be sure that you have the Mac OS X 10.6 SDK available at: + 
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+

If it cannot be found there you will need to extract and copy it from the Xcode 4.3 DMG file which is available at the Apple Developer portal. You can use the utility Pacifist to extract the 10.6 SDK. Be sure to add a symlink to it to the /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/ directory. (We can drop the 10.6 SDK requirement after bug 784227 has been fixed, and our version of platform_build has been updated.)

+

Mountain Lion

+
+

If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:

+ 
external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)
+ Edit the file: B2G/external/qemu/Makefile.android and add in line 78:
+ 
MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+
+
+ If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:
+
+
+
+ 
clang: error: unable to execute command: Segmentation fault: 11
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example: + 
brew install mpfr --use-gcc
+
+

Samsung Galaxy S2

+

If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See Installing heimdall for details. This is not done for you by the bootstrap script!

+
+ Note: If you have installed the Samsung Kies tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing will not work if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder ~/Library/Application Support/.FUS, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.
+
+ Note: Mac OS X uses a case insensitive filesystem by default, which will prevent you from building Firefox OS down the road (EDITOR'S NOTE: I have never had a problem with this).  You should create a case sensitive sparse disk image work from within that directory.  To buld the case sensitive disk image:
+
hdiutil create -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.dmg
+

Mount the drive with:

+
open ~/firefoxos.dmg
+

Change into the mouted drive with:

+
cd /Volumes/untitled/
+

Fix libmpc dependency if broken

+

gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:

+
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+

Optional: Install HAX

+

Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can download and install it. It's not required, but it can improve emulation performance and stability.

+

adb 설치

+

B2G를 단말기에 설치 하기 전에 기존에 단말기에 설치된 안드로이드를 꺼내 저장 해 두시기 바랍니다. 이 를 위해서는 adb(Android Debug Bridge)를 설치 하셔야 합니다.

+

adb를 설치 하기 위해서는 Android SDK starter package를 데스크 탑에 설치된 OS에 맞는 것을 설치 하셔야 합니다.(ADT Bundle만 설치 하셔도 됩니다). 설치 후, 패키지 메니저를 실행 하여 "Android SDK Platform-tools"를 설치 하세요.

+

adb는 $SDK_HOME/platform-tools에 설치 될 것입니다. 설치 후에는 PATH에 아래 경로를 추가 하세요.

+
PATH=$SDK_HOME/platform-tools:$PATH
+

~/.bashrc파일에 $SDK_HOME가 있으면 그 경로를 자신이 설치한 Android sdk의 경로로 대체 하세요.없을시는 환경 설정을 추가 하세요. 그리고 아래와 같이 실행 하시면 단말기의 Android 전체 system폴더의 내용을 원하는 backup target dir로 가져옵니다:

+
adb pull /system <backup target dir>/system
+
+

이는 나중에 B2G를 제거 하고 Android로 복원할 수 있습니다. 단말기에 따라 /data폴더와 /vendor폴더도 복사 해야 하는 경우도 있습니다.

+
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+

"권한 없음(insufficient permission)"메시지와 함께 복사가 되지 않는 경우, adb server를 제 실행 해 보거나, adb tool에 루트권한(root permissions)이 주어졌는지 확인 하세요. (eg. under CyanogenMod, change 'Settings > System > Developer Options > Root Access' to 'Apps and ADB' or 'ADB only').

+

Install heimdall

+

Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is not needed for any other device. For other devices, we build and use the fastboot utility instead.

+
+ Note: Again, it's important to note that this is only required for installing Firefox OS on the Samsung Galaxy S2.
+

There are two ways to install heimdall:

+ +

ccache 설정 변경

+

기본 ccache 크기는 1GB로 되어 있습니다. B2G 빌드시 이는 부족한 크기이므로 아래와 같이 크기를 변경 해야 합니다.

+
$ ccache --max-size 3GB
+

udev rule에 개발 단말기 환경 추가

+

"lsusb"를 실행하면 현재 연결된 단말기의 USB vendor ID를 보실 수 있습니다.대부분의 구글 단말기는 "18d1"이며, 삼성은 "04e8", ZTE는 "19d2"이므로 /etc/udev/rules.d/51-android.rules파일(해당 파일이 없으면 생성하세요)에 아래 "xxxx"부분에 해당 단말기의 id로 변경하여 추가 하세요.

+
SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"
+

ZTE단말기를 예로 들면, 51-android.rules파일에 아래와 같이 추가하세요.

+
SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"
+

위와 같이 추가 한 후에는 저장, 종료 후에 "읽기 모드"를 아래와 같이 변경해 주세요.

+
$ sudo chmod a+r /etc/udev/rules.d/51-android.rules
+
+

위와 같이 추가 한 후에는 adb명령을 수행 하면 아래와 같이 단말기를 adb에서 인식 할 수 있게 됩니다.

+
$adb devices
+List of devices attached
+123456          device
+
+ 위와 같이 단말기가 나타나지 않는다면, 해당 파일이름이 맞는지, 연결이 잘되었는지, 확인 한 후 컴퓨터를 재시작 하고 위의 명령을 수행 해 보세요.
+

단말기를 개발자 모드로 바꾸기

+

단말기를 USB에 연결하기 전에 아래와 같은 메뉴에서 단말기를 개발자 모드로 변경 하세요. 개발자 모드를 바꾸고 나면 디버깅과 단말기로 다운로드를 하실 수 있습니다. 설정(Settings) -> 단말기 정보(Device information) -> 모드 정보(Mode Information) -> 개발자(Developer) -> 개발자 모드(enable) Developer mode

+

다음 단계로

+

이제 Firefox OS코드를 가져올 단계로 넘어 가겠습니다.

diff --git a/files/ko/archive/b2g_os/firefox_os_faq/index.html b/files/ko/archive/b2g_os/firefox_os_faq/index.html new file mode 100644 index 0000000000..adf78f75aa --- /dev/null +++ b/files/ko/archive/b2g_os/firefox_os_faq/index.html @@ -0,0 +1,39 @@ +--- +title: Firefox OS FAQ +slug: Archive/B2G_OS/Firefox_OS_FAQ +translation_of: Archive/B2G_OS/Introduction +--- +
+
+ 개발자용 테스트폰 구매는 어떻게 하나요?
+
+ Geeksphone 웹 사이트로 부터 바로 구매할 수 있습니다.
+
+ 개발자용 테스트폰이 없이도 개발 가능한가요?
+
+ 물론입니다. Firefox Marketplace를 안드로이드폰에서도 테스트해 보실 수 있으며, PC 데스크톱에서 Firefox OS simulator를 이용하실 수 있습니다.
+
+ 최종 출시폰과 비교하면 어떤가요?
+
+ 일반 소비자 시장에 맞추어 몇몇 파트너들과 함게 개발중인데 좀 더 시간이 지난 후에 공개할 수 있을 것 같습니다. 
+
+ Firefox OS를 저의 폰에 설치해 볼 수 있습니까?
+
+ 다음 문서를 참고 하십시오. https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS
+
+ 제가 만든 앱을 어떻게 Firefox OS에서 테스트할 수 있나요?
+
+ 안드로이드폰의 Marketplace나 Firefox OS simulator를 이용하시면 됩니다.
+
+ Firefox OS란 무엇인가요?
+
+ 새로운 개념의 개방형 모바일 웹 운영 체제로서 웹 표준에 의해 만들어지며 Web API를 통해 HTML5 기술을 사용하여 직접 휴대폰 기능을 제어할 수 있고, 네이티브 수준의 앱 기능을 제공할 수 있습니다. 
+
+  Web API의 목록 및 표준화 정도는?
+
+ 많은 WebAPI가 Firefox OS의 초기 구현에 사용되었으며 아래 목록에서 살펴 보실 수 있습니다.   https://wiki.mozilla.org/WebAPI#APIs. =>표준화 진행 상태.
+
+ Web API는 크로스플랫폼으로 표준화가 되나요?
+
+ 그렇습니다. API는 여러 벤더들과 함께 제작하여 다양한 플랫폼을 지원하게 되며 Web App이 직접 스마트폰을 제어할 수 있도록 크로스플랫폼을 지원할 수 있는 표준 방법을 제공할 것입니다. 
+
diff --git a/files/ko/archive/b2g_os/index.html b/files/ko/archive/b2g_os/index.html new file mode 100644 index 0000000000..230fd0ce6c --- /dev/null +++ b/files/ko/archive/b2g_os/index.html @@ -0,0 +1,181 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - B2G OS + - B2G OS 시작하기 + - Basic + - Beginner + - Firefox OS + - FirefoxOS 시작하기 + - Gaia + - Gonk + - Overview + - Starting FirefoxOS + - web based os from mozilla + - web os gecko + - 기본 + - 모질라 재단이 만든 웹 기반 OS + - 초보자 +translation_of: Archive/B2G_OS +--- +

 

+ +
B2G OS는 오픈 웹을 위한 완전하고 독립적인 운영체제입니다. B2G OS는 Mozilla 커뮤니티가 개발하는 오픈소스 프로젝트이며, Firefox OS 상품의 기반이 되고 있습니다. 2017년부터 더이상 유지보수되지 않습니다.
+ +

B2G는 스마트폰, 태블릿, 스마트 TV, 그 외 커넥티드 디바이스를 위한 오픈소스 운영체제이며, 커뮤니티에 의해 관리되고 있습니다. 이 프로젝트는 2011년에 시작됐습니다. B2G는 리눅스 커널과 Gecko 렌더링 엔진을 바탕으로 하고 있습니다. 사용자 인터페이스 전체가 웹 기술(HTML, CSS, JavsScript)로 만들어져있으며, 이 사용자 인터페이스를 통해 웹 애플리케이션을 실행하고 이용할 수 있습니다. Mozilla가 상용 Firefox OS 스마트폰 개발을 종료하면서 B2G의 스마트폰 부분은 Mozilla의 자발적 커뮤니티가 개발하게 되었습니다. 이와 함께 B2G OS로 브랜드를 바꾸게 되었습니다.

+ +

+ +

페이지 목록

+ +
+
B2G OS 테스트
+
이 페이지는 B2G OS를 테스트하는 데 필요한 정보를 제공합니다. 서로 다른 테스트의 진행, 자동화, 결과 보고 및 추적에 대한 내용이 포함됩니다.
+
B2G OS 부가기능
+
부가기능을 개발하기 위해서는 문서의 내용을 따라 진행해야 합니다.
+
B2G OS APIs
+
B2G OS API의 목록입니다.
+
B2G OS 아키텍처
+
이 글은 B2G OS 플랫폼의 아키텍처에 대한 고수준 개요 글입니다. 주요 특징을 설명하고 각 구성요소가 기초 수준에서 어떻게 상호작용하는 지 설명합니다.
+
B2G OS build prerequisites
+
단순히 Gaia의 빌드를 시도하고 있는 것뿐이라도, B2G OS를 빌드하기 위해 코드를 얻기 전 빌드 시스템을 제대로 설정해야 합니다. — 이 페이지는 그 방법을 설명합니다. 현재 빌드를 지원하는 OS는 64비트 리눅스 및 macOS입니다.
+
B2G OS 단말기 가이드
+
이 글은 B2G OS를 구동하는 단말기에 대한 개발자 정보를 제공합니다. 개발자 단말기 및 소비자용 단말기 모두 포함되어 있습니다.
+
B2G OS의 빌드와 설치
+
이 페이지에 나열된 글은 B2G OS를 에뮬레이터나 호환 기기에서 빌드하고 설치하는 방법, 혹은 Gaia 사용자 인터페이스를 Firefox 브라우저에서 빌드하고 설치하는 방법을 안내할 것입니다.
+
B2G OS 빌드하기
+
빌드 시스템을 설정하고, 코드의 초기 pull 작업 및 설정 작업을 진행하면, Boot to Gecko를 빌드할 수 있게 됩니다. 이 설명서는 어떻게 B2G OS를 빌드하는 지 설명합니다.
+
Building the B2G OS Simulator
+
Just like Firefox Nightlies, the B2G OS simulator desktop client (identified by b2g-) is automatically built every day from the latest source code. The latest build is available from the Mozilla FTP server. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.
+
Choosing how to run Gaia or B2G
+
Depending on your specific needs, you have an assortment of options to consider when experimenting with Firefox OS or the Gaia user interface. You can choose among the following options; each has its advantages and disadvantages to consider, and some are more flexible than others.
+
Crash Reporting Guide for Firefox OS Partners
+
Mozilla has a world-class system for collecting, analyzing, and fixing crashes and other stability issues such as hangs. Firefox OS partners need to work with Mozilla to correctly enable crash reporting and upload symbols.
+
Customization with the .userconfig file
+
The .userconfig file isn't checked into source code control, so your changes won't be overwritten when you update your source tree. It needs to be created in the root of the B2G tree; that is, in the same directory as flash.sh, build.sh, and so forth. You should add this before you run your config and build steps.
+
Debugging on Firefox OS
+
There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.
+
Developer Mode
+
The current Firefox OS permissions model precludes modification and installation of certified/internal apps, which makes some device APIs completely unavailable to Marketplace and web apps. Developer Mode (DM) allows the user to indicate that they would like to relax the permissions model and expose all device APIs to content, as well as setting a group of related preferences. This article provides a high-level overview.
+
Developing Firefox OS
+
This section provides useful documentation covering different ways in which Firefox OS (codename Boot2Gecko, or B2G) can be modified/customized during the build process, and how you can help to develop the low level platform areas such as Gecko and Gonk.
+
Firefox OS apps
+
This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.
+
Firefox OS board guide
+
This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.
+
Firefox OS developer release notes
+
This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.
+
Firefox OS security
+
The following articles cover security-related topics about Firefox OS. This includes overall security features as well as application security and how the install process is kept secure.
+
Firefox OS Simulator
+
The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. This means that in many cases, you don't need a real device to test and debug your app. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.
+
Firefox OS usage tips
+
Explains all of the developer features on the phone and what they do (Settings > Device information > More information > Developer)
+
Gaia
+
Gaia is B2G OS's user interface and suite of default apps: it includes the lock screen, home screen, dialer, and other applications. Essentially, Gaia is a set of complex web apps that runs on top of the B2G OS platform. This set of articles covers all you need to know to contribute to the Gaia project.
+
Installing B2G OS on a mobile device
+
Once you've built Boot to Gecko for a supported mobile device, you can install it. This article will guide you through the process.
+
Introduction to Firefox OS
+
This set of documentation is aimed mainly at web developers and platform developers who want to learn how Firefox OS works, how to contribute to the project, and how to build their own custom versions of the software and install it on devices. For those who want to create and distribute their own web apps, the App Center and Marketplace Zone are good places to go.
+
Mulet
+
Following this guide you're going to run Gaia inside of a special build of Firefox called Firefox Mulet. This gives you the advantages of having a rapid development cycle, as well as standard web development tools and debuggers available to work with. First of all, you need to have the Gaia repo cloned on your machine and build your own profile. Then, you have to install mulet and run it, passing your Gaia profile as the profile to use.
+
Open web apps quickstart
+
Quickstart information on coding Open Web Apps.
+
Pandaboard
+
This is a guide to setting up Firefox OS on a PandaBoard. The PandaBoard is a low-cost OMAP 4 based development board for developing mobile operating systems.
+
PasscodeHelper Internals
+
PasscodeHelper is a Gaia helper library for modifying and checking the Firefox OS lockscreen passcode (i.e., pin) from within Gaia, performing functions such as checking whether an entered passcode is correct, and changing the code. This article documents how PasscodeHelper works.
+
Porting B2G OS
+
This page lists the available resources for porting B2GOS.
+
Preparing for your first B2G build
+
Depending on your internet connection, the configuration steps may take several hours to download everything you need to build B2G OS. Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the B2G OS simulator, begin familiarizing yourself with Documentation for app developers including Designing and Building an App, or familiarize yourself with the information on upcoming steps.
+
Resources
+
Resources for App hackers, as generated from our workshops
+
Running tests on Firefox OS: A guide for developers
+
If you are a Gecko developer, then you should review the Firefox OS-specific documentation for the test automation you are already familar with: mochitest, reftest, and xpcshell.
+
The B2G OS platform
+
The B2G OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on B2G OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.
+
Troubleshooting B2G OS
+
This article provides tips for resolving common problems you may have while using B2G OS.
+
Using the App Manager
+
The App Manager is a tool for Firefox Desktop which provides a number of useful tools to help developers test, deploy and debug HTML5 web apps on Firefox OS phones & Simulator, directly from Firefox browser. This page documents how to use the App Manager.
+
Using the B2G emulators
+
This article provides a brief guide to some key things you should know when using the boot to Gecko emulators. This doesn't appear to be a complete user manual; instead, it simply tells you a few useful things that you might not learn on your own.
+
Web applications
+
This page is intended to be a first, non thorough, attempt to collect web apps.
+
Web Bluetooth API (Firefox OS)
+
The Web Bluetooth API lets an open web app discover, pair with, and connect to Bluetooth devices. As it is a completely experimental and non-standard API, the Bluetooth API is currently available for certified applications only. However, there is some traction to have such an API available for regular Web content; this will be discussed as part of the W3C's System Applications Working Group.
+
Web Telephony API
+
Web Telephony is an API that makes it possible for web content to handle voice phone calls using JavaScript.
+
+ +
+

오래된 페이지 항목

+ +
+
+

주목: 더 많은 사람들을 참여시키기 위해 공헌 요청과 앱 채택 요청 문서가 있습니다. 공유해주세요!

+
+ +

여러분의 도움이 필요한 곳

+ + +
+ +
+

참여하기

+ + +
+ +
+

지원 디바이스

+ +

B2G OS가 구동되는 지원 스마트폰 정보:

+ + + +

더 자세한 사항은 여기에서.
+ B2G installer를 이용하면 쉽게 설치할 수 있습니다.
+ 여러분의 디바이스가 목록에 없나요? 데스크탑에서 Mulet 를 써보세요.

+
+
+ +
+

주목: 오래된 몇몇 페이지는 MDN Archive로 이동되었습니다. 예전 문서는 아카이브에서 확인해주세요. 아카이브에서 되돌려져야할 문서가 있으면 알려주세요.

+
diff --git a/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..3269212b44 --- /dev/null +++ b/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,61 @@ +--- +title: 단말기로 Firefox OS 다운로드 하기 +slug: Archive/B2G_OS/Installing_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/26)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

일단 Boot to Gecko의 빌드가 완료 되고 나면 단말기로 인스톨 할수 있게 됩니다.여기서는 이와 같은 과정에 대해 설명 하도록 하겠습니다.

+
+ Note: 처음 단말기로 Firefox OS를 다운로드 해 넣을 경우 반드시 해당 단말기의 OS가 안드로이드 4 (아이스크림 샌드위치)이어야 합니다. 그렇지 않을 경우 제대로 다운로드가 되지 않을 것입니다. 그러나 한번 B2G를 다운로드 하고 나면 그 다음 부터는 단순하게 맨위 업데이트 부터 진행 하시면 됩니다.
+

폰으로 다운로드 하기

+

폰으로 다운로드 하는 방법은 단순하게 단말기를 연결 한 후 아래와 같이 수행 합니다.

+
./flash.sh
+
+

이게 다입니다. 막 빌드 완료한 당신의 B2G 이미지가 당신의 폰으로 들어갔습니다.

+

udev rule에 단말기 환경 설정

+

리눅스에서 아래와 같은 메시지가 나타난다면,

+
< waiting for device >
+

아마도 udev rule에 단말기 정보 추가 하는 것을 잊어 버린 것이 아닌지 확인 해보세요. "lsusb"를 실행해 보면 단말기의 USB vendor ID를 확인 할 수 있으니 아래와 같이 추가하세요. 대부분의 구글단말기 ID는 18d1입니다. 구글 ID로 추가 하는 아래 예시를 참고하세요.

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+
+ 주의 1: 리눅스에서 'libusb error "-3"'가 발생한다면 루팅 권한이 필요하다는 의미 입니다.  '>sudo ./flash.sh'를 입력 해 보세요.
+
+ 주의 2: 만약 타겟 단말기가 우나기라면, udev rule에 단말기 vendor ID와 구글 ID 두가지를 다 추가 하세요.
+

삼성 Galaxy S2 단말기인 경우 특별한 주의사항들

+

만약 타겟 단말기가 Galaxy S2이고 heimdall 1.3.2 버젼 (가장 최근 버젼임. 버젼 확인은 hiemdall version 명령어 사용) 을 사용한다면, "Heimdall flashing failed" 메시지 이후에 "FACTORYFS upload failed!" 메시지를 포함한 추가적인 정보가 출력되는 것을 보실수도 있습니다. 이 메시지는 uploading이 성공한 경우이니, 해당 경고 메시지는 무시하셔도 됩니다.

+

이 비정상적인 행동을 제거하기 위해서는 heimdall의 1.3.1의 release된 source copy를 얻은 후에 ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06" 명령어 사용), README file의 정의에 따라 컴파일을 하십시요. 컴파일 이후에 install을 하시면 그 에러 메시지는 사라질 것입니다. 하지만, 이 방법은 강력하게 요구되어지는 않습니다.

+

Heimdall 도구의 모든 version에서 100MB 보다 큰 system.img 화일을 update를 할 수는 없습니다. 따라서 굽기 전에 다음 명령어를 실행하여 build된 system.img 화일의 크기를 확인해야 합니다. 만약 크기가 너무 크다면 IRC 내에서 문의하시기 바랍니다. 크기가 큰 경우에는 두 단계로 update를 분리할 수 있는 방법들이 있습니다.

+
ls -l ./out/target/product/galaxys2/system.img
+
+

Samsung Galaxy S2의 추가 작업

+

Galaxy S2로 작업 할 경우, 다음과 같은 추가 작업이 필요합니다. Galaxy S2는 flash.sh script를 통해 Gaia는 다운로드가 되지 않습니다. 따라서 아래와 같이 추가 작업을 실행 해야 합니다.

+
./flash.sh gaia
+
+

특정 영역 다운로드 하기

+

Samsung Galaxy S2를 제외한 다른 모든 단말기에서 특정 영역을 다운로드 하려면 아래와 같이 하세요.

+
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+

특정 모듈 다운로드 하기

+

아래와 같이 특정 모듈이름으로 B2G의 특정 모듈만 다운로드도 가능합니다.

+
./flash.sh gaia
+./flash.sh gecko
+
+

특정 어플리케이션만 업데이트 하려면 환경 설정 변수 BUILD_APP_NAME 를 통해서 가능합니다.

+
BUILD_APP_NAME=calendar ./flash.sh gaia
+

다음 단계

+

이 단계에서, 당신의 타켓은 Boot to Gecko!를 실행시킬 수 있을 것입니다. 이제 실험하고, 코드를 작성하고, 테스트 하고 디버깅을 하실 시간입니다.

+
+ Note: 도움이 되는 사용 팁 : 만약 타켓이 잠겨있어서 타겟의 잠금을 해제할 필요가 있을 때는 default 숫자는 0000 입니다.
+

문제 해결방법

+

B2G를 설치한 후에 타겟이 정상적으로 동작하지 않는 경우에 대비하여 몇 가지 tip을 알려 드립니다.

+

UI가 시작되지 않는다면

+

만약 당신의 타겟이 update되고, UI가 정상적으로 실행되지 않는다면, 오래된 configuration을 초기화 할 수 있습니다. 다음은 그 방법입니다.

+
cd gaia
+make reset-gaia
+
+

./flash.sh 실행 후에 "image is too large" 에러 메시지가 출력되는 경우

+

이 메시지는 이미지를 flash에 writing하기 전에 당신의 타겟이 rooting될 필요가 있음을 뜻할 수 있습니다. b2g는 root partition 영역에 data를 writing 할 필요가 있으므로 당신의 타겟은 b2g image를 정상적으로 설치하기 위해서 rooting 되어져야 합니다.

diff --git a/files/ko/archive/b2g_os/introduction/index.html b/files/ko/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..17dc0720e9 --- /dev/null +++ b/files/ko/archive/b2g_os/introduction/index.html @@ -0,0 +1,83 @@ +--- +title: Firefox OS 소개 +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS ( "Boot to Gecko" 혹은 "B2G" 라는 코드네임)는 Linux와 Mozilla의 Gecko 기술을 기반으로 한 Mozilla의 오픈 소스 모바일 운영체제입니다. 기본적인 생각은 스마트폰 위에서 동작하는 사용자가 접근 가능한 모든 소프트웨어는 웹 기반 앱이며, 진화한 HTML5 기술을 사용하고 JavaScript가 기기 API를 이용해 스마트폰의 하드웨어에 직접 접근 합니다.

+

웹 개발자가 제일 이해해야 할 중요한 것은 표현되는 모든 기능 및 앱을 설치 및 실행에 있어 모든 사용자 인터페이스는 웹 기반이라는 것입니다. 사용자 인터페이스에 어떠한 수정을 넣거나 어떠한 애플리케이션을 만드는 모든 일, 특히 모바일 기기의 하드웨어나 서비스에 접근하는 것도 Firefox OS 로 동작하는 웹 페이지입니다.

+

Firefox OS의 빌드나 설치 방법에 대해서는 빌드 및 설치 가이드로 배울 수 있습니다

+

하드웨어 사양

+

Firefox OS는 최신 ARM기반 모바일 기기에서 동작 되도록 포팅 될 것입니다 . 이번 절에서는 Firefox OS가 동작하는 최소/추천 하드웨어 사양에 대해 기술합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
구성품최소사양추천 사양
CPUARMv6Cortex A5 class or better
+ ARMv7a with NEON
GPU—Adreno 200 class or better
Connectivity—WiFi
+ 3G
Sensors—Accelerometer
+ Proximity
+ Ambient light
+ A-GPS
+

각 단말기들은 통일된 색상 프로파일(그래픽 디바이스 드라이버에서 구현되어 제공된)을 제공 해야 하고, 헤드폰은 일시정지/정지해재 및 정지/재생을 지원해야 합니다. 이와 같은기능은 최근 스마트폰에서는 기본적으로 제공되는 기능입니다.

+

사용법 힌트

+

이 섹션에서는 실제로 Firefox OS를 사용할 때의 힌트를 몇개인가 제공합니다. 이것은 우리가 진짜 사용법의 문서를 작성할 때까지의 플레이스홀더 같은 것입니다.

+

스마트폰의 잠금 해제

+

빌드된 Firefox OS의 시작시에 기기의 잠금을 해제하는 비밀번호가 필요한데, 기본 코드는 0000 입니다. 락 스크린의 개발과 테스트를 실시하고 있는 동안은 일부 빌드에서 필요할 수 있습니다.

+

스크린 캡쳐

+

스크린샷의 캡쳐는 매우 간단해서 전원과 home 버튼을 동시에 누릅니다. 스크린샷의 이미지은 기기상의 /sdcard/screenshots 안에 있습니다.

+

만약, 여러 가지 이유로 동작하지 않을 때는 Firefox OS 빌드 시스템을 설치 한 Linux나 Mac OS X 컴퓨터상의 터미널에서 실행하는 것도 가능합니다.

+
    +
  1. ffmpeg를 반드시 설치 해 주십시오. +
      +
    1. Mac 에서는 MacPorts를 사용할 때는 sudo port install ffmpeg를 실행해 주십시오.homebrew를 사용할 때는 brew install ffmpeg 입니다.
      2. +
    2. Linux (Ubuntu/Debian)에서는 sudo apt-get install ffmpeg를 실행해 주십시오.
      3. +
    +
    2. +
  2. 스마트폰과 컴퓨터는 USB 케이블을 사용해 접속합니다.
    3. +
  3. 스마트폰을, screen shot를 찍고 싶은 상황으로 합니다.
    4. +
  4. cd 해 B2G/gaia 디렉토리로 이동합니다.
    5. +
  5. make screenshot
    6. +
  6. screenshot.png 라는 이름으로, screen shot가 찍히고 있을 것입니다.
    7. +
+

버튼과 컨트롤

+

일반적인 Firefox OS는 물리적인 버튼 몇개를 기본적 필요로 합니다.

+
+
+ 홈버튼
+
+ 이 버튼은 보통 화면의 가운데 아래에 위치합니다. 이 버튼을 선택하면 앱 런처로 갈수 있습니다. 이 버튼을 길게 누르고 있으면 카드 스위칭 뷰를 보여줍니다; 이때 나타나는 앱들을 위로 끌어 올리면 해당 앱은 종료됩니다.
+
+ 볼륨 조정 버튼
+
+ 왼쪽편에 볼륨 버튼이 있습니다; 이 버튼 윗쪽부분은 볼륨을 증가하고, 아래쪽은 볼륨을 낮추게 됩니다.
+
+ 전원 버튼
+
+ 전원 버튼은 단말기의 왼쪽 위에 위치 합니다.
+
diff --git a/files/ko/archive/b2g_os/pandaboard/index.html b/files/ko/archive/b2g_os/pandaboard/index.html new file mode 100644 index 0000000000..af65fd2a0e --- /dev/null +++ b/files/ko/archive/b2g_os/pandaboard/index.html @@ -0,0 +1,36 @@ +--- +title: Pandaboard +slug: Archive/B2G_OS/Pandaboard +translation_of: Archive/B2G_OS/Pandaboard +--- +

이 문서는 PandaBoard에 Firefox OS 올리기 위한 가이드 입니다. PandaBoard는 모바일 운영 체제를 개발하기위한 저가의 OMAP 4 기반의 개발 보드입니다.

+

이 가이드는 SD card가 최소 4 GB의 사용 가능 용량이 있다고 가정합니다.

+

Format the SD card

+

이 OMAPpedia 가이드를 참조하여 SD card를 Format하세요.

+

USB communication

+

usb를 인식하기 위하여 다음 단계를 따르세요. B2G를 위해 file의 mode 부분을 "0666"으로 사용하는 것이 안전합니다.

+

Verify that the pandaboard is accessible by plugging it in to your computer using USB, and running:

+
lsusb
+

If you see something from Texas Instruments, then you found your pandaboard! If not, I found luck by unplugging all the wires, and only connecting the pandaboard to USB.

+

Building and flashing

+

After configuring for the pandaboard, we now pull in Negatus. This is an agent that runs on the device and can help automate/debug it. Negatus will build itself automatically after you run ./build.sh, but you need to install libnspr(apt-get install libnspr4-dev). After building the image, then tricky part is flashing it onto your pandaboard.

+

Try to follow instructions here, up to and including 'Initial setup, part 3'. You can skip 'Initial setup, part 1' which has been done during the build step. After completing 'Initial setup, part 3' return here.

+

Now you're free to run the ./flash.sh command, and hopefully all will be well. If the flash.sh script tries to erase the userdata partition, remove that line. It's a known issue listed in the instructions.

+

After flashing is complete you may need to manually reboot the machine by unplugging the usb and power cords and plugging them back in (power cord should be plugged in first).

+

Here are the work arounds for known issues:

+

"waiting for OMAP4XXX..." when trying to use usbboot

+

If you see this message, then unplug all cables from the pandaboard. Only plug in the pandaboard via USB. Do not connect power. Try now, and run usbboot as sudo.

+

Fastboot errors while flashing

+

If you're having trouble running commands in fastboot, I found success after running them with sudo (ie: sudo <fastboot command...>)

+

Also, if you have trouble getting your pandaboard into fastboot mode (ie: no devices listed if you do a fastboot devices call), then you can:

+
    +
  1. Unplug all the things from the pandaboard
    2. +
  2. Hold down the GPIO button
    3. +
  3. Plug in the power while still holding the button
    4. +
  4. Watch the solid status light, and once the light starts to flash, let go of the GPIO button
    5. +
+

This will put the pandaboard into fastboot mode.

+

Can't connect to adb

+

If you see the device in lsusb, but not in adb/fastboot devices and the lights are off, then remove the power source and plug it back in. If the lights are on, you may need to wait a while (30seconds max) for it to be registered on adb.

+

Sometimes, flashing will claim to be successful, but it isn't. Reflash the pandaboard (ie: run ./flash.sh) and try again. I recommend plugging in power first, and then plugging in the usb cable

+

If you get on adb devices "??????????? no permision", even as root, check the section "Configuring USB Access" on this site and correct or add the right udev rules. Don't forget to restart the udev service after the changes.

diff --git a/files/ko/archive/b2g_os/phone_guide/index.html b/files/ko/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..4ac9688347 --- /dev/null +++ b/files/ko/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,6 @@ +--- +title: Boot to Gecko 개발자 단말기 가이드 +slug: Archive/B2G_OS/Phone_guide +translation_of: Archive/B2G_OS/Phone_guide +--- +

B2G개발용 단말기를 가지고 있거나, B2G가 설치된 단말기를 가지고 있을경우, 이를 사용하기 위한 기본적인 설명은 다음 링크를 참고 하세요: Firefox OS로 동작하는 단말기에 대한 기본적인 안내서. Mozilla에서는 아직 이에 대해 개선작업을 진행 중이며, 곧 좀더 간결한 설명을 MDN사이트를 통해 제공 할 것입니다. Firefox OS를 빌드하고 단말기에 넣고 싶다면, 다음 링크를 참고 하세요; 'Firefox OS를 빌드하여 단말기에 올리기'.

diff --git a/files/ko/archive/b2g_os/platform/architecture/index.html b/files/ko/archive/b2g_os/platform/architecture/index.html new file mode 100644 index 0000000000..0f34ac448b --- /dev/null +++ b/files/ko/archive/b2g_os/platform/architecture/index.html @@ -0,0 +1,532 @@ +--- +title: Firefox OS architecture +slug: Archive/B2G_OS/Platform/Architecture +translation_of: Archive/B2G_OS/Architecture +--- +

 

+ +
+

초안
+ 이 문서는 작성중입니다.

+
+ +

 

+ +

이 (게시)글은 Firefox OS platform의 구조(architecture)에 대한 고차원적인 개요이며, 주요 개념을 소개하고 구성요소들이 기본레벨에서 어떻게 상호동작 하는지를 설명합니다. 기술적인 레벨에서 어떻게 동작하는지의 복잡한 사항을 알려주지는 않습니다; 각각의 See also 섹션으로부터 참조된 글들을 보시기 바랍니다.

+ +
+

Note: Firefox OS는 이직 정식배포 전의 상품임을 유념해 주십시오. 여기에 설명된 구조(architecture)는 반드시 최종이라 할 수 없으며 변경될 수 있습니다.

+
+ +

Firefox OS 용어

+ +

이 문서를 이해하기 전에 알 필요가 있는 몇 가지 용어가 있습니다.

+ +
+
B2G
+
Boot to Gecko의 약어.
+
Boot to Gecko
+
전체적인 Firefox OS 프로젝트에 대한 코드명입니다. 프로젝트가 공식명칭을 갖기 오래 전 부터 사용되었기 때문에, Firefox OS를 나타내는 용어로 이 용어가 사용되는 것을 볼 수 있습니다.
+
Gaia
+
Firefox OS platform의 사용자 인터페이스. Firefox OS가 구동된 후에 화면에 표시되는 것들은 Gaia 층에서 생성된 것 입니다. Gaia는 최신의 스마트폰에서 기대할 수 있는 잠금 화면, 홈 화면, 그리고 모든 표준화된 어플리케이션들을 구현하고 있습니다. Gaia는 전적으로 HTML, CSS와 JavaScript로 구현되었습니다. 내부의 OS와의 유일한 인터페이스는 개방된 Web API들을 통해 이루어 집니다. 이는 Gecko 층(layer)에 구현되어 있습니다. 제 3자가 개발한 어플리케이션들은 Gaia 층에 나란히 설치될 수 있습니다.
+
Gecko
+
Firefox OS 어플리케이션 런타임; 즉, 공개된 표준의 3가지 펙터(HTML, CSS, JavaScript)에 대한 모든 지원을 제공합니다. Gecko가 지원하는 모든 운영체제상에서 관련 API들이 제대로 동작하는 것을 보장합니다. 이는 Gecko가 다른 여러가지 중에서도, 네트워킹 스택, 그래픽 스펙, 배치(layout) 엔진, JavaScript 버추얼 머신과 포팅 레이어들을 포함하고 있다는 것을 의미합니다.
+
Gonk
+
Gonk는 Firefox OS 플랫폼의 더 낮은 레벨의 운영체제로, (안드로이드 오픈 소스 프로젝트, Android Open Source Project (AOSP)를 기반으로 하는)리눅스 커널과 유저공간의 하드웨어 추상 계층(Userspace Hardware adstraction layer:HAL)로 구성되어 있습니다. 커널과 여러개의 라이브러리들은 일반적인 오픈 소스 프로젝트들(리눅스, libusb, bluz 등)입니다. HAL의 또 다른 부분들은 안드로이드 프로젝트(GPS, camera 등)과도 공유됩니다. Gonk는 아주 간단한 리눅스라 할 수 있습니다. Gecko는 Gonk에 포팅됩니다; 마치, Gecko가 Mac OS X, Windows와 Android에 포팅되듯이 Gecko는 Gonk에 포팅됩니다. Firefox OS 프로젝트는 Gonk에 대한 전반적인 통제를 가지고, 다른 운영체제에 대한 노출되지 않는 Gecko에 대한 인터페이스들을 노출시킬 수 있습니다. 예를 들어, Gecko는 전반적인 텔레포니 스택과 Gonk상의 디스플레이 프레임 버퍼에 대한 직접적인 접근이 가능하지만, 다른 운영체제로의 이러한 접근은 가능하지 않습니다.
+
 
+
Firefox OS Architecture
+
+ +

부트스트래핑 프로세스

+ +

맨 처음, Firefox OS를 구동하면, 첫 번째 부트로더부터 실행 하기 시작 합니다. 여기서부터, 일반적인 방법으로 주 운영체제를 불러오는 과정을 진행 합니다. 점진적으로 높은 레벨의 부트로더들을 연속으로 두어서 다음 로더를 연속적으로 부트스트래핑 합니다. 이 단계의 마지막에서, Linux Kernel로 실행이 넘어갑니다.

+ +

부팅 프로세스에 대해 별 의미 없는 몇 가지 사항이 있습니다.

+ + + +

리눅스 커널

+ +

Gonk가 사용하는 리눅스 커널(들)은 리누스 토발즈와 세계의 해커들이 함께 개발하고 있는 업스트림의 리눅스로부터 만들어졌으며, 거의 똑같습니다. 다만 안드로이드 오픈 소스 프로젝트 로부터 만들어지고 아직 업스트림에 들어가지 않은 변경사항들을 가지고 있습니다. 또한, vendor들이 가끔 커널을 수정하며, 이 경우 그들은 그들 자체적 스케쥴로 업스트림에 변경 사항을 올립니다. 그렇지만 일반적으로 말하면 Gonk가 사용하는 리눅스 커널은 오리지날 리눅스와 거의 같다고 이야기 할 수 있습니다.

+ +

리눅스 구동 시작 과정 은 인터넷 상에 잘 문서화 되어 있으므로, 이 글에서는 그것까지 다루지는 않겠습니다. 구동 시작 과정의 마지막에, 대부분의 UNIX류 운영체제가 그러하듯이 userspace의 init 프로세스가 시작됩니다. 이 시점에서 마운트된 "disk"는 RAM disk 뿐입니다. 이 RAM disk는 Firefox OS 빌드 과정에서 만들어 졌으며, init나 시작 과정 스크립트들이나 로드할 수 있는 커널 모듈들과 같은 중요한 유틸리티들을 가지고 있습니다.

+ +

일단 init 프로세스가 시작되면, 리눅스 커널은 userspace 공간으로부터의 시스템 콜, 인터럽트, 하드웨어 기기로부터의 비슷한 요청들을 처리합니다. 많은 하드웨어 기능이 userspace에 sysfs를 통해 노출됩니다. 예를 들어, 다음 코드 조각은 Gecko에서 배터리 상태를 읽기 위해 사용됩니다:

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

init 프로세스

+ +

Gonk의 init 프로세스는 필요한 파일 시스템들을 마운트 하고 시스템 서비스들을 시작하는 일을 처리합니다. 이 일들의 처리 후에는 프로세스 매니저로 역할하게 됩니다. 이것은 다른 UNIX류 운영체제들에서의 init와 매우 비슷합니다. 먼저 다양한 서비스들을 시작시키기 위해서 필요한 명령들을 가지고 있는 스크립트들(init*.rc 파일들)을 수행합니다. Firefox OS의 init.rc 는 오리지날 안드로이드의 init.rc 에서 Firefox OS를 시작하는데 필요한 것들을 좀 추가한 형태이며, 기기에 따라 조금씩 다를 수 있습니다.

+ +

init 프로세스가 하는 가장 중요한 작업 중 하나는 b2g 프로세스를 시작시키는 것입니다; 이게 Firefox OS 운영체제의 중심입니다.

+ +

b2g를 시작시키는 init.rc의 코드는 다음과 같은 식입니다:

+ +
service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media
+ +

안드로이드의 init.rc에서 b2g 프로세스를 시작시키기 위한 코드가 추가된 init.b2g.rc 파일을 보는 것도 좋을 겁니다.

+ +
+

Note: 정확히 init.rc 가 안드로이드 버전과 얼마나 다른가는 실제 기기마다 다릅니다; 어떤 기기의 경우는 단지 init.b2g.rc 가 추가되어 있을 뿐이고, 어떤 기기는 그보다 더 많은 변경이 있을 수 있습니다.

+
+ +

사용자 영역(userspace) 프로세스 구조

+ +

Firefox OS의 많은 구성 요소들이 어떻게 서로 상호 동작하는지 상위 레벨에서 살펴보겠습니다. 이 그림은 Firefox OS의 주요 사용자 프로세스들을 보여줍니다.

+ +

Userspace diagram

+ +
+

Note: Firefox OS는 활발히 개발되고 있기 때문에, 이 그림은 변경 될 수 있습니다. 또한 본 그림이 포함하는 내용 중 일부가 올바르지 않을 수도 있습니다.

+
+ +

b2g 프로세스는 가장 중요한 시스템 프로세스입니다. b2g 프로세스는 높은 권한으로 실행되기 때문에 대부분의 하드웨어 기기에 접근할 수 있습니다. b2g는 modem과의 통신이 가능하며, display framebuffer에 접근할 수 있습니다. 그리고 GPS, camera 및 다른 하드웨어와 통신이 가능합니다. b2g는 내부적으로 Gecko layer (libxul.so으로 구현됨)를 실행합니다. 어떻게 Gecko layer가 동작하며, b2g와 통신하는지 알고 싶다면 Gecko를 참고하세요.

+ +

b2g

+ +

b2g 프로세스는 낮은 권한을 가진 다수의 content process 들을 생성할 수 있습니다. 이 프로세스에 web application과 web content이 적재되며, main Gecko server와 메시지-패싱 시스템인 IPDL을 이용하여 통신합니다.

+ +

rild

+ +

rild 프로세스는 모뎀 프로세서와의 인터페이스 입니다. rild은 Radio Interface Layer (RIL)를 구현한 daemon입니다. 이 코드는 하드웨어 vendor가 해당 vendor의 모뎀 하드웨어와 통신하기 위해 구현한 것입니다. rild은 client code를 unix-domain socket에 연결해 줍니다. rild은 다음 init 스크립트를 통해 시작됩니다.

+ +
service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio
+ +

rilproxy

+ +

Firefox OS에서 rild client는 rilproxy 프로세스입니다. rilproxy 프로세스는 rild와 b2g사이에서 dumb forwarding proxy처럼 동작합니다. 이 proxy는 implementation detail이 필요한 상태 입니다. rilproxy 코드는 GitHub에서 확인할 수 있습니다.

+ +

mediaserver

+ +

mediaserver process 는 오디오와 비디오 재생을 제어합니다. Gecko는 원격 절차 호출(Remote Procedure Call, RPC) 메커니즘을 통해 이와 통신합니다. 미디어들 중 Gecko가 재생할 수 있는 것들(OGG Vorbis audio, OGG Theora video, and WebM video)은 Gecko에 의해서 해독(decode)되며 직접 mediaserver 프로세스로 전달됩니다. 이외의 다른 미디어 파일들은 다른 외부 코덱과 하드웨어 인코더에 접근할 수 있는 libstagefright에 의해 해독됩니다.

+ +
+

Note: mediaserver 프로세는 Firefox OS의 "임시" 구성요소입니다. 이 프로세스는 초기 개발 업무를 위해서 사용되었으며, 최종적으로는 사용하지 않을 예정입니다. 하지만 최소한 Firefox OS 2.0까지는 사용 할 것입니다.

+
+ +

netd

+ +

netd 프로세스는 네트워크 인터페이스의 설정 조정(configure)에 사용합니다.

+ +

wpa_supplicant

+ +

wpa_supplicant 프로세스는 WiFi 액세스 포인트와의 연결을 처리하는 표준 UNIX 스타일 데몬입니다.

+ +

dbus-daemon

+ +

dbus-daemon은 FirefoxOS가 블루투스 통신을 위해 사용하는 메시지 버스 시스템인 D-Bus를 동작시킵니다.

+ +

Gecko

+ +

앞서 언급했듯이, Gecko는 사용자가 Firefox OS에서 볼 수 있는 모든 것을 구현할때 사용하는 웹 표준들(HTML, CSS, JavaScript)의 구현입니다.

+ +

입력 이벤트 처리 (Processing input events)

+ +

대부분의 Gecko 동작은 사용자의 동작에 의해 발생합니다. 이런 사용자의 동작들을 입력 이벤트라고 부릅니다. 이런 입력 이벤트로는 버튼을 누른다던지, 터치 스크린을 가진 기기를 터치 한다던지 하는 동작들을 예로 들 수 있습니다. 이런 이벤트들은 Gecko의 주요 진입점인 nsIAppShell의 Gonk 구현부를 통해서 Gecko로 들어오게 됩니다. 즉, 입력 장치 드라이버는 이벤트를 사용자 인터페이스로 보내기 위해 Gecko의 하위 시스템을 대신하는 nsAppShell 객체의 메소드들을 호출합니다.

+ +

예를 들면:

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

이 이벤트들은 표준 리눅스 input_event 시스템으로부터 전달되는 것입니다. Firefox OS는 이벤트 필터링 기능을 제공하는light abstraction layer를 그 이벤트 위에 사용합니다. widget/gonk/libui/EventHub.cpp 코드를 보면 EventHub::getEvents()메소트 안에서 입력 이벤트를 생성하는 것을 확인할 수 있습니다.

+ +

Gecko가 위 이벤트들을 수신하면, 이벤트들은 아래의 nsAppShell에 의해 DOM으로 보내지게 됩니다.

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+
+ +

그 이후에, 그 이벤트들은 Gecko에 의해 사용되거나 DOM events로서 이후 처리를 위해 웹 어플리케이션들로 전달됩니다.

+ +

 

+ +

그래픽 (Graphics)

+ +

가장 저차원 레벨에서 봤을 때, Gecko는 하드웨어 프레임 버퍼들을 감싸는(wrap) GL 컨텍스트에 접근하기 위해서 OpenGL ES 2.0을 사용합니다. 이러한 동작은 Gonk의 nsWindow의 다음과 비슷한 코드로 구현합니다.

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

FramebufferNativeWindow 클래스는 Android의 것을 그대로 차용하였습니다(FramebufferNativeWindow.cpp를 참고). 이 클래스는 프레임 버퍼 기기의 버퍼들과 메모리를 매핑하기 위해 그래픽스 드라이버에 접근하는데, 이 때 gralloc API를 사용합니다.

+ +

Gecko는 Layers 시스템을 이용하여 그려진 내용을 화면에 합성합니다. 이를 위한 과정은 다음과 같이 요약할 수 있습니다:

+ +
    +
  1. Gecko는 각각의 독립된 영역들을 메모리 버퍼에 그립니다. 때때로 이 버퍼들은 시스템 메모리에 있을 수 있습니다. 또 다른 경우에 이것들은 Gecko의 주소 공간에 맵핑된 텍스처(texture)들 일 수도 있습니다. 다시 말하자면, Gecko가 비디오 메모리에 직접 영역을 그린다는 것을 의미합니다. 이 동작은 일반적으로 BasicThebesLayer::PaintThebes()에 의해서 이루어 집니다.
    2. +
  2. Gecko는 OpenGL 명령들을 이용하여 모든 texture들을 화면에 합성합니다. 이 합성 과정은 ThebesLayerOGL::RenderTo()에서 일어나게 됩니다.
    3. +
+ +

Gecko가 웹 컨텐츠 렌더링을 어떻게 처리하는지에 대한 자세한 내용은 이 문서의 범위 밖의 내용입니다.

+ +

하드웨어 추상화 계층 (Hardware Abstraction Layer, HAL)

+ +

Gecko의 하드웨어 추상화 계층(Hardware Abstraction Layer, HAL)은 Gecko의 이식 계층(porting layer) 중 하나 입니다. 이것은 Gecko의 상위 계층에 접근이 쉬운 C++ API를 이용하여, 다양한 플랫폼에 대한 시스템 인터페이스로의 저수준 접근을 처리합니다. 이 API들은 Gecko HAL 내부에 플랫폼 단위(per-platform basis)로 구현되어 있습니다. 이 하드웨어 추상화 계층은 Gecko 내부의 JavaScript 코드를 통해 직접 접근할 수 없습니다.

+ +

HAL의 동작

+ +

Vibration를 예로 들어 살펴보겠습니다. 이 API를 위한 Gecko의 HAL은 hal/Hal.h에 정의되어 있습니다. 본질적으로 (명확성을 위해서 간략하게 표현하면), 이러한 함수가 있습니다.

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

이 함수는 Gecko code에 의해 명시된 패턴대로 기기의 진동을 켜기 위해 호출되며, 이에 대응되는 함수는 울리고 있는 진동을 끄기 위해 존재합니다. 이 함수의 Gonk 구현은 hal/conk/GonkHal.cpp에 있습니다:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

이 코드는 기기에 진동의 시작을 위한 요청을 다른 쓰레드(VibratorRunnable::Run()에 구현되어 있습니다)에 전송합니다. 해당 쓰레드의 메인 루프는 다음과 같습니다:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+
+ +

vibrator_on() 은 진동기 모터를 켜는 Gonk HAL API 입니다. 내부적으로, 이 메소드는 sysfs를 이용하여 커널 객체에 값을 씀으로써 커널 드라이버에 메시지를 전송하게 됩니다.

+ +

대체 HAL API 구현 (Fallback HAL API implementations)

+ +

Gecko의 HAL API 들은 모든 플랫폼을 지원합니다. Gecko가 진동 모터에 대한 인터페이스를 지원하지 않는 플랫폼(예를 들면 데스크탑 컴퓨터)을 위해 빌드 될 경우, HAL API의 대체 구현(fallback implementation)이 사용됩니다. 진동을 위한 대체 구현은 hal/fallback/FallbackVibration.cpp에서 찾을 수 있습니다.

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

Sandbox 구현 (Sandbox implementations)

+ +

대부분의 web content들이 낮은 권한의 컨텐트 프로세스에서 동작하기 때문에, 이 프로세스들은 진동 모터를 켜고 끄는 것(예를 들면)과 같은 권한을 가지고 있지 않다고 할 수 있습니다. 게다가, 잠재적인 경쟁 상태(race condition)를 처리할 수 있도록, 중앙 처리 위치(a central location을 의역하였습니다)가 필요합니다. Gecko의 HAL에서는 이러한 동작이 "sandbox"를 통해 이루어 집니다. 이 sandbox는 컨텐트 프로세스의 요청들을 대신 처리하고 그 요청들을 "Gecko server" 프로세스로 전송합니다. 이러한 대리 요청들은 IPDL을 이용하여 전송됩니다.

+ +

진동을 위해서는 hal/sandbox/SandboxHal.cpp에 있는 Vibrate() 함수에 의해 처리됩니다:

+ +
void Vibrate(const nsTArray<uint32_t>& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray<uint32_t, 8> p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

이 함수는 hal/sandbox/PHal.ipdl에 서술 된 PHal 인터페이스에 의해 정의되는 메시지를 전송합니다. 이 메소드는 대략 다음과 같이 서술되어 있습니다:

+ +
Vibrate(uint32_t[] pattern);
+ +

이 메시지의 수신단은 hal/sandbox/SandboxHal.cpp에 있는 HalParent::RecvVibrate() 메소드이며 이와 같습니다:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

이것은 현재 주제와 관련이 없는 세부사항을 제거한 상태입니다. 하지만 이를 통해 컨텐트 프로세스에서 발생한 메시지가 Gecko부터 Gonk, Vibrate()의 Gonk HAL 구현부, 그리고 최종적으로 그래픽 드라이버까지 전달되는 과정을 보여줍니다.

+ +

DOM APIs

+ +

DOM 인터페이스는 웹 컨텐트가 Gecko와 통신하는 방법입니다. 만약 더 자세한 내용에 대해 관심이 있다면, 여기를 참고하세요. DOM 인터페이스는 IDL로 정의됩니다. IDL은 자바스크립트와 C++ 사이의 외래 함수 인터페이스(Foreign Function Interface, FFI)와 객체 모델(Object Model, OM)로 구성됩니다.

+ +

vibrartion API는 IDL 인터페이스(nsIDOMNavigator.idl)를 통해 web content에서 접근할 수 있습니다:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

jsval 인자는 mozVibrate()(아직 확정되지 않은 vibration 명세를 Mozilla가 구현한 것)가 자바스크립트 값을 입력으로 받아들일 수 있다는 것을 나타냅니다. IDL 컴파일러(xpidl)는 이후에 Navigator 클래스(Navigator.cpp)에서 구현될 C++인터페이스를 만듭니다.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

원래는 위에서 보시는 것보다 훨씬 더 많은 코드가 있지만, 현재 이 문서의 목적을 벗어나는 부분입니다. 중요한 점은 hal::Vibrate()를 호출하게 되면 control이 DOM으로부터 Gecko HAL로 이동하게 된다는 것입니다. 거기서부터 이전 섹션에서 이야기한 HAL 구현부에 진입하며, 그래픽 드라이버 방향으로 작업이 진행되게 됩니다. 최상위 레벨에서 보면, DOM 구현부는 자신이 어떤 플랫폼(Gecko, Windows, Mac OS X 등)에서 동작하는지 상관하지 않습니다. 또한 DOM은 자신이 컨텐트 프로세스에서 동작하든 Gecko 서버 프로세스에서 동작하는지 고려하지도 않습니다. 위와 같이 상세한 부분들은 시스템의 하위 계층이 관장하게 됩니다.

+ +

vibration API는 예로 쓰기에 좋은 아주 단순한 API입니다. 이에 비해, SMS API는 컨텐트 프로세스들을 서버에 연결할 때 자신이 가진 "remoting" 계층을 이용하는 좀 더 복잡한 API라고 할 수 있습니다.

+ +

Radio Interface Layer (RIL)

+ +

RIL에 대해서는 사용자 영역(userspace) 프로세스 구조 섹션에서 간단하게 설명하였습니다. 이 섹션에서는 RIL을 구성하는 여러 부분들이 어떻게 상호작용하는지 좀 더 자세하게 살펴 보겠습니다.

+ +

RIL과 관련있는 주요 요소(component)들은 다음과 같습니다:

+ +
+
rild
+
모뎀 펌웨어와 통신하는 데몬입니다.
+
rilproxy
+
The daemon that proxies messages between rild and Gecko (which is implemented in the b2g process). This overcomes the permission problem that arises when trying to talk to rild directly, since rild can only be communicated with from within the radio group.
+
b2g
+
This process, also known as the chrome process, implements Gecko. The portions of it that relate to the Radio Interface Layer are dom/system/gonk/ril_worker.js (which implements a worker thread that talks to rild through rilproxy and implements the radio state machine; and the nsIRadioInterfaceLayer interface, which is the main thread's XPCOM service that acts primarily as a message exchange between the ril_worker.js thread and various other Gecko components, including the Gecko content process.
+
Gecko's content process
+
Within Gecko's content process, the nsIRILContentHelper interface provides an XPCOM service that lets code implementing parts of the DOM, such as the Telephony and SMS APIs talk to the radio interface, which is in the chrome process.
+
+ +

Example: Communicating from rild to the DOM

+ +

Let's take a look at an example of how the lower level parts of the system communicate with DOM code. When the modem receives an incoming call, it notifies rild using a proprietary mechanism. rild then prepares a message for its client according to the "open" protocol, which is described in ril.h. In the case of an incoming call, a RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message is generated and sent by rild to rilproxy.

+ +

rilproxy, implemented in rilproxy.c, receives this message in its main loop, which polls its connection to rild using code like this:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Once the message is received from rild, it's then forwarded along to Gecko on the socket that connects rilproxy to Gecko. Gecko receives the forwarded message on its IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

The consumer of these messages is SystemWorkerManager, which repackages the messages and dispatches them to the ril_worker.js thread that implements the RIL state machine; this is done in the RILReceiver::MessageReceived() method:

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

The task posted to that thread in turn calls the onRILMessage() function, which is implemented in JavaScript. This is done using the JavaScript API function JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() is implemented in dom/system/gonk/ril_worker.js, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+
+ +

This code works by getting the request type from the object, making sure it's defined as a function in the JavaScript code, then calling the method. Since ril_worker.js implements each request type in a method given the same name as the request type, this is very simple.

+ +

In our example, RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED, the following handler is called:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

As you see in the code above, when notification is received that the call state has changed, the state machine simply fetches the current call state by calling the getCurrentCall() method:

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

This sends a request back to rild to request the state of all currently active calls. The request flows back along a similar path the RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message followed, but in the opposite direction (that is, from ril_worker.js to SystemWorkerManager to Ril.cpp, then rilproxy and finally to the rild socket). rild then responds in kind, back along the same path, eventually arriving in ril_worker.js's handler for the REQUEST_GET_CURRENT_CALLS message. And thus bidirectional communication occurs.

+ +

The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the nsIRadioInterfaceLayer service on the main thread:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer is implemented in dom/system/gonk/RadioInterfaceLayer.js; the message is received by its onmessage() method:

+ +
 onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+
+ +

All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

In the content process, the message is received by receiveMessage() method in the nsIRILContentHelper service, from the Child Process Message Manager (CPMM):

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

This, in turn, calls the nsIRILTelephonyCallback.callStateChanged() methods on every registered telephony callback object. Every web application that accesses the window.navigator.mozTelephony API has registered one such callback object that dispatches events to the JavaScript code in the web application, either as a state change of an existing call object or a new incoming call event.

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr<TelephonyCall> call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr<CallEvent> event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

Applications can receive these events and update their user interface and so forth:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Take a look at the implementation of handleEvent() in the Dialer application as an extended example.

+ +

3G data

+ +

There is a RIL message that initiates a "data call" to the cellular service; this enables data transfer mode in the modem. This data call ends up creating and activating a Point-to-Point Protocol (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.

+ +
+

Note: This section needs to be written.

+
+ + + +

This section lists DOM APIs that are related to RIL communications.

+ + + +

WiFi

+ +

The WiFi backend for Firefox OS simply uses wpa_supplicant to do most of the work. That means that the backend's primary job is to simply manage the supplicant, and to do some auxiliary tasks such as loading the WiFi driver and enabling or disabling the network interface. In essence, this means that the backend is a state machine, with the states following the state of the supplicant.

+ +
+

Note: Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the wpa_supplicant process.

+
+ +

The implementation of the WiFi component is broken up into two files:

+ +
+
dom/wifi/DOMWifiManager.js
+
Implements the API that's exposed to web content, as defined in nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implements the state machine and the code that drives the supplicant.
+
+ +

These two files communicate with one another using the message manager. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.

+ +

The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.

+ +
+

Note: Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.

+
+ +

WifiWorker.js

+ +

This file implements the main logic behind the WiFi interface. It runs in the chrome process (in multi-process builds) and is instantiated by the SystemWorkerManager. The file is generally broken into two sections: a giant anonymous function and WifiWorker (and its prototype). The anonymous function ends up being the WifiManager by providing a local API, including notifications for events such as connection to the supplicant and scan results being available. In general, it contains little logic and lets its sole consumer control its actions while it simply responds with the requested information and controls the details of the connection with the supplicant.

+ +

The WifiWorker object sits between the WifiManager and the DOM. It reacts to events and forwards them to the DOM; in turn, it receives requests from the DOM and performs the appropriate actions on the supplicant. It also maintains state information about the supplicant and what it needs to do next.

+ +

DOMWifiManager.js

+ +

This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.

+ +
+

Note: In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.

+
+ +

There's a single synchronous message, which is sent at the time the DOM API is instantiated, in order to get the current state of the supplicant.

+ +

DHCP

+ +

DHCP and DNS are handled by dhcpcd, the standard Linux DHCP client. However, it's not able to react when the network connection is lost. Because of this, Firefox OS kills and restarts dhcpcd each time it connects to a given wireless network.

+ +

dhcpcd is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.

+ +

Network Manager

+ +

The Network Manager configures network interfaces opened by the 3G data and WiFi components.

+ +
+

Note: This needs to be written.

+
+ +

 

diff --git a/files/ko/archive/b2g_os/platform/gonk/index.html b/files/ko/archive/b2g_os/platform/gonk/index.html new file mode 100644 index 0000000000..6482db30f1 --- /dev/null +++ b/files/ko/archive/b2g_os/platform/gonk/index.html @@ -0,0 +1,103 @@ +--- +title: Gonk +slug: Archive/B2G_OS/Platform/Gonk +translation_of: Archive/B2G_OS/Platform/Gonk +--- +
+

Gonk는 Firefox OS 플랫폼의 하위 레벨 운영체제이며, 안드로이드 오픈 소스 프로젝트(Android Open Source Project, AOSP) 기반의 리눅스 커널과 사용자영역 하드웨어 추상 계층(userspace hardware abstraction layer, HAL)으로 이루어져 있습니다. 이 문서는 Gonk가 무엇으로 구성되어 있는지 설명하는 것을 목적으로 합니다. 전체적인 Firefox OS의 구조와 그 구조에 Gonk가 어떻게 맞추어져 있는지에 대한 내용은 Firefox OS architecture를 참고하시기 바랍니다.

+
+ +

Gonk 개요

+ +

Gonk는 Firefox OS에서 Gecko와 하드웨어 사이의 인터페이스를 제공하는 커널 레벨의 컴포넌트입니다. Gonk는 하드웨어를 제어하고, 하드웨어의 기능을 Gecko에 구현된 Web API로 노출시킵니다. Gonk는 모바일 기기를 제어하는 동작 뒤에서 하드웨어 수준의 요청을 통해 온갖 복잡하고 세밀한 작업을 하는 "블랙박스"로 볼 수 있습니다.

+ +

Gonk는 안드로이드로부터 가져온 (GPS와 카메라 같은) 컴포넌트들을 포함하고 있는 간단한 리눅스 배포판입니다. 그리고 Firefox OS 구조의 모든 계층과 통합하기 위해 libusb, bluez 등의 일반적인 오픈 소스 프로젝트들을 포함하도록 모질라에 의해 확장되었습니다. 이러한 설계는 Firefox OS 스마트폰의 배포를 위해 OEM이 안드로이드의 소프트웨어 컴포넌트들(디바이스 드라이버, 펌웨어, 서비스-레벨 데몬 등)을 포팅하는 것을 더 쉽게 만들어 줍니다.

+ +

Gonk는 디바이스 포팅 계층(device porting layer)입니다: 즉 하드웨어와 Gecko 사이의 어댑터입니다. Gonk는 Gecko의 포팅 계층들과 짝을 이루는 Gecko 포트로 생각할 수 있는 비교적 간단한 리눅스 배포판입니다. - 그래서 Gonk는 Gecko의 포팅 대상이 됩니다. OS X, Windows, Android에 대한 Gecko의 포트가 있는 것처럼.

+ +
+

Note: 모바일 기기들은 다양한 칩셋과 하드웨어 사양을 갖기 때문에 여러 가지의 Gonk 배포판을 가질 수 있습니다.

+
+ +

Firefox OS 프로젝트는 Gonk를 통해 완전한 제어가 가능하기 때문에 다른 OS에서는 노출될 수 없는 인터페이스를 Gecko에 노출시킬 수 있습니다. 예를 들어 Gecko가 Gonk 상에서 전화(telephony)와 디스플레이 프레임 버퍼(display frame buffer)에 직접적인 접근을 할 수 있습니다.

+ +

Gonk 구조

+ +

각 모바일 폰은 기기를 동작시키는데 필요한 시스템 라이브러리, 디바이스 드라이버, 펌웨어에 기반한 Gonk 컴포넌트들의 특별한 조합을 가집니다. 이러한 컴포넌트들은 OEM이 칩셋 제조사와 ODM과의 협력을 통해 결정합니다. 다음 그림은 Gonk 구현의 한 예를 보여줍니다:

+ +

+ +

이 예는 (Gonk 구현에서 가능한 여러 구성요소들의 부분집합인) 다음의 주요 구성요소들을 보여줍니다:

+ + + +

Gonk는 또한 Firefox OS의 Gecko 계층인 b2g 프로세스를 시작하고 관리하고 종료합니다. b2g 프로세스는 Gonk안에서 서비스-레벨 데몬들의 클라이언트로 동작합니다. 서비스-레벨 데몬들은 하드웨어와 직접 동작하며 폰에 있는 하드웨어 기능을 Gecko에 노출시킵니다. Gecko는 이러한 데몬들과 프로세스간 통신(interprocess communication)을 통해 대화합니다. 이 컴포넌트들은 요청에 대한 명령과 프로토콜을 서로 주고받고, 서비스를 제공합니다.

+ +
+

Note: Gonk 구조에 대한 보다 상세한 설명은 Firefox OS architecture guide를 참고하시기 바랍니다.

+
+ +

Gonk 포팅하기

+ +

Firefox OS가 안드로이드 커널 기반이기 때문에, 기존의 디바이스 드라이버, 펌웨어, 서비스 데몬들과 기타 컴포넌트들은 최소한의 작업으로 Firefox OS와 동작하도록 포팅될 수 있습니다. 만일 커스텀 컴포넌트(예, 커스텀 RIL 또는 새로운 데몬)가 필요하거나 ODM의 레퍼런스 디자인에 수정이 생겼다면 추가적인 통합과 테스팅 작업이 필요할 수는 있습니다.

+ +

b2g에서 클라이언트는 프로세스간 통신(inter-process communication, IPC)을 통해 서비스-레벨 데몬들과 통신합니다. 클라이언트는 서비스 레벨 데몬에 소켓 연결을 시작하고, 그 연결 상에서 (서버의 요청 프로토콜을 사용하여) 요청을 제출하며, 응답을 받고, 연결을 종료합니다. OEM은 클라이언트와 서버 사이의 이러한 프로세스간 통신의 디자인과 구현을 담당합니다.

+ +
+

Note: 포팅 작업에 대한 보다 상세한 정보는 Porting Firefox OS를 참고하시기 바랍니다.

+
+ +

모질라가 OEM 및 폰 제조사와 Gonk 포팅 작업을 하는 방식

+ +

모든 Gonk 구현은 모질라, OEM 및 관련 제조사(ODM, 칩셋 제조사)들 사이의 협력의 결과입니다.

+ +

모질라는 소스 저장소(source repositories)를 제공하고 해당하는 Firefox OS 배포판의 Gonk를 위한 파일들을 지원합니다. 소스 저장소는 (조금 수정된) 기본적인 리눅스 커널과 Gecko 에 대한 연결(hooks into Gecko)을 포함하고 있습니다.

+ +

OEM은 해당 디바이스 모델에 대한 Firefox OS 시스템 이미지의 빌드, 컴파일, 테스팅, 인증 및 배포를 담당합니다. 시스템 이미지의 Gonk 부분에 대해 OEM은 Web API 호출과 폰 하드웨어 기능들 사이의 일관적인 통합을 확보하기 위한 대부분의 작업을 담당합니다. 요구되는 작업의 형태와 범위는 폰에 사용되는 특정 칩셋과 기타 하드웨어 컴포넌트들에 많이 의존하게 됩니다.

+ +

디바이스 컴포넌트 (Device components)

+ +

OEM은 칩셋 제조사 및 ODM과 함께 모바일 디바이스를 구동하기 위해 필요한 모든 디바이스 컴포넌트들을 제공하기 위해 협력합니다. 예를 들어, Wi-Fi 컴포넌트 제조사는 칩셋과 함께 관련 소프트웨어를 제공합니다. 컴포넌트들은 다음을 포함합니다:

+ + + +

Gonk와 Gecko의 통합

+ +

OEM은 모바일 기기의 하드웨어 기능들이 Gecko에 구현된 Web API에 올바르고 온전하게 노출되도록 보장해야 합니다. 이것은 다음을 포함합니다.

+ + + +

Gonk 소스코드

+ +

Github의 메인 B2G 저장소는 Gonk의 저장소로 여겨질 수 있도록 다양한 기기들에 대해 공식적으로 지원되는 Gonk 포트(ports)를 포함하고 있습니다. 지원 기기들에 대한 목록은 B2G/config.sh에 있습니다.

+ +

Gonk에 정의된 b2g 프로세스는 mozilla-b2g/gonk-misc에서 찾을 수 있습니다. b2g 소스코드에 대한 수정은 여기서 이루어집니다.

+ +
+

Note: Gecko 소스안에 Gecko의 Gonk 포트를 포함하는 b2g/ 폴더가 있습니다: 이 폴더는 리눅스 커널, HAL, 기타 OEM 라이브러리들로 구성됩니다.

+
+ +

매일 수행되는 Gonk 작업의 대부분은 시스템을 다른 보드에 포팅하고, 다양한 기기에서 Gecko가 잘 동작하는지 확인하는 것을 포함합니다.

+ +
+
+ +

 

diff --git a/files/ko/archive/b2g_os/platform/index.html b/files/ko/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..ae5425436e --- /dev/null +++ b/files/ko/archive/b2g_os/platform/index.html @@ -0,0 +1,99 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +tags: + - B2G + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform +--- +

The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.

+ + + + + + + +
+

Documentation about the Firefox OS platform

+
+
+ Introduction to Firefox OS
+
+ Introductory information about what Firefox OS is and how it works.
+
+ Building and installing Firefox OS
+
+ A guide to building Firefox OS and installing it on your compatible device. This guide also covers building the Firefox OS emulator, for running Firefox OS on a computer.
+
+ Gaia
+
+ Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.
+
+ Gonk
+
+ Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.
+
+ Gecko
+
+ Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.
+
+ Feature support chart
+
+ A chart of which features are available in which types of Firefox OS builds.
+
+ Firefox OS architecture overview
+
+ An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
+
+ Firefox OS apps architecture
+
+ An overview of the application model on Firefox OS.
+
+ Testing Firefox OS
+
+ A guide to testing Firefox OS, including information about creating automated tests.
+
+ Porting Firefox OS
+
+ Information about how to port Firefox OS to new devices.
+
+ Customization with the .userconfig file
+
+ How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+ +
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +

Resources

+ +
+

 

diff --git a/files/ko/archive/b2g_os/porting/index.html b/files/ko/archive/b2g_os/porting/index.html new file mode 100644 index 0000000000..e850181405 --- /dev/null +++ b/files/ko/archive/b2g_os/porting/index.html @@ -0,0 +1,121 @@ +--- +title: Boot to Gecko를 Porting하는 방법 +slug: Archive/B2G_OS/Porting +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +

Boot to Gecko (Firefox OS)는 Android로부터 파생된 커널을 사용하고, 그 위애 Gecko 기반의 UI가 올라갑니다. 이 페이지는 새로운 타겟에 운영 체제를 어떻게 porting하는지에 대한 기본적인 guide를 제공합니다.

+

이 guide는 이미 Android가 수행되는 새로운 타겟에 porting하는 것을 가정하고 있습니다. 만약 Android 이외에 또 다른 타겟에 porting하려고 하면, 또 다른 업무들이 추가되어야 합니다.

+

Set up your build system

+

The first step is to configure your build system; you can follow the guide in Firefox OS build prerequisites.

+

Create a local backup of the original Android system

+

Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.

+
mkdir my_device_backup
+cd my_device_backup
+adb pull /system system
+

Clone the B2G repositories

+

The first step is to clone the B2G repository as well as the repository with the manifests.

+
git clone https://github.com/mozilla-b2g/B2G.git
+git clone https://github.com/mozilla-b2g/b2g-manifest.git
+

Add a new device to config.sh

+

The next step is to add a new device to config.sh in the B2G repository;  you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.

+

Create a manifest for the new device

+

Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the hamachi manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:

+
git add my-new-device.xml
+git commit
+
+

Next, you will want the config.sh file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the config.sh file to the location of your local repository and desired branch, for example:

+
GITREPO=${GITREPO:-"file:///home/yourname/b2g-manifest"}
+BRANCH=${BRANCH:-master}
+

Create a configuration tree for the new device

+

Create a new configuration tree for the new device. This should be at device/<manufacturer>/<device_id>. This tree should include, at least:

+ +

The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the configuration for the hamachi device. Remember to correctly reference your own configuration tree from the manifest you created for your new device.

+
+

Note: If you can find an existing reference on CyanogenMod for your device, this information will speed up the porting process. the XDA Forum is another good place to discuss and check for resources.

+
+

Rebuilt boot.img

+

Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to init.rc.

+

Changes to init.rc

+

The init.rc you use is not the one provided by B2G; instead, you need to pull it from the device.

+

The main things you'll need to modify are:

+

Import init.b2g.rc

+

Add the following lines to import init.b2g.rc:

+
on early-init
+    start ueventd
+    import /init.b2g.rc
+

Fix permissions

+

Correct the permissions on the files /system/b2g/b2g, /system/b2g/updater, /system/b2g/plugin-container; this should be done after the lines that mount the filesystem read/write:

+
chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container
+

You might want to start by modifying the init.rc from the new device instead of using the init.rc provided by the build system; if so, you need to remember to set TARGET_PROVIDES_INIT_RC in BoardConfig.mk.

+

Prebuilt kernel vs. building the kernel from source

+

You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.

+

The maguro on the old build system is an example that builds the kernel from source.

+

Extracting and modifying an existing boot image

+

It is possible to recover the boot image of a phone by dumping the contents of the /dev/mtd/mtd1 or /dev/mtd/mtd2 devices, the resulting image file can then be easily recovered:

+
adb shell 'cat /dev/mtd/mtd1 > /sdcard/boot.img'
+adb pull /sdcard/boot.img
+
+

Once the boot image file has been obtained it can be unpacked via a helper tool such as unmkbootimg. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:

+
$ unmkbootimg boot.img
+Kernel size 3872576
+Kernel address 0x208000
+Ramdisk size 265102
+Ramdisk address 0x1500000
+Secondary size 0
+Secondary address 0x1100000
+Kernel tags address 0x200100
+Flash page size 2048
+Board name is ""
+Command line "androidboot.hardware=aphone"
+Extracting kernel to file zImage ...
+Extracting root filesystem to file initramfs.cpio.gz ...
+All done.
+---------------
+To recompile this image, use:
+  mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img
+---------------
+
+

To modify the ramdisk file create an output directory and extract it there:

+
mkdir initramfs_dir
+cd initramfs_dir
+gunzip -c ../initramfs.cpio.gz | cpio -i
+
+

Make all the required changes (such as modifying init.rc) and repack the ramdisk using mkbootfs, be sure to use the version that has been built with the B2G host tools:

+
/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip > ../newinitramfs.cpio.gz
+
+

Finally go back to the top-level directory and re-pack the boot image using the mkbootimg, also make sure you're using the version built with the other B2G host tools:

+
/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img
+
+

If you now copy the new boot image under out/target/product/$DEVICE/boot.img (where $DEVICE is your device name) it will be automatically flashed when invoking flash.sh. Alternatively you can flash it by hand with the following commands:

+
adb reboot bootloader
+fastboot flash boot newboot.img
+fastboot reboot
+
+

Add the new device to flash.sh

+

Add the new device to flash.sh; the specifics of how to do this will depend on what tools need to be used to flash the new device.

+

Configure, build, and flash the new device

+

Now you can try building for and flashing to your new device:

+
ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> '../b2g-manifest/default.xml'
+./build.sh
+./flash.sh
+

Test and debug

+

We need some details added here; indeed, this entire article could use some help.

+

FAQ

+

Forthcoming

+

See also

+ diff --git a/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html new file mode 100644 index 0000000000..30286822a1 --- /dev/null +++ b/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html @@ -0,0 +1,148 @@ +--- +title: 처음 B2G 빌드를 위한 준비 +slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build +translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build +--- +

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

여기서는 B2G 빌드를 하기 전에 수행 해야 하는 repository를 가져오고 빌드 환경을 설정에 대해 알아 봅니다.

+ +

B2G repository 가져 오기

+ +

첫번째로, 빌드를 처음으로 시작하기에 앞서, B2G repository를 가져 와야 합니다. 이 단계가 모든 것을 다 가져 오는 것은 아니고, B2G build system을 가져 오고 빌드에 필요한 각종 툴들을 가져 옵니다. 대부분의 B2G code는 아직 main Mozilla Mercurial repository에 존재 합니다.

+ +

Repository를 가져 오기 위해 "git"을 사용합니다.

+ +
git clone git://github.com/mozilla-b2g/B2G.git
+ +

몇분간의 git작업 진행 후 새로 생긴 "B2G"폴더로 이동하세요.

+ +
cd B2G
+
+ +

작업중이던 B2G tree를 새로 구성한 빌드 환경으로 복사하기(작업 중일 경우만 진행, 그외는 다음 단계로)

+ +

If you've gotten a new computer (lucky you!), you'll find your life will be much easier if you simply migrate your entire B2G tree from one computer to another.

+ +

To do that, mount your old computer's drive onto your new computer, then do this:

+ +
rsync -a source/ dest/
+
+ +

Where source is the full path (including the trailing slash) of the source tree, and dest is where you want to put it (the trailing slash is also important!).

+ +
+

Note: If you copy the files from a computer with another platform ensure to run './build.sh clean' before you start the build process. If you don't do this you might encounter compilation issues.

+
+ +

If you do this, you can skip all of the rest of this article and move right on to building.

+ +

단말기용 B2G 환경 설정

+ +
중요: 단말기는 안드로이드 4 (즉 아이스크림 샌드위치(ICS)) 가 설치 되어 있어야 합니다. 단말기에 구동중인 안드로이드 버전을 확인하시고, 그렇지 않으면 대부분 이단계 부터 실패를 할 것입니다. 또한 USB에 연결된 단말기로 다운로드를 할 경우 만약 USB허브로 연결 되어 있을 경우는 문제를 발생할 수 있으므로, 허브가 아닌 직접 PC에 연결된 USB와 연결 하시기 바랍니다.
+ +

Core B2G build system을 다 받고 나면, 설치하고자 하는 단말기에 맞는 환경을 설정 해야 합니다. 지원되는 단말기의 종류를 보려면 아래와 같이 실행 하세요.

+ +
./config.sh
+
+ +

리스트는 아래와 같이 보일 것입니다.

+ +
Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-4-kk
+- nexus-5
+- nexus-5-l
+- nexus-s
+- nexus-s-4g
+- flo (Nexus 7 2013)
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- hamachi
+- helix
+- tarako
+- dolphin
+- dolphin-512
+- pandaboard
+- vixen
+- flatfish
+- flame
+- flame-kk
+- flame-l
+- rpi (Revision B)
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-l
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+- emulator-x86-l
+> Sony Xperia devices
+- aries (Z3 Compact KK)
+- aries-l (Z3 Compact L)
+- leo-kk (Z3 KK)
+- leo-l (Z3 L)
+- scorpion-l (Z3 Tablet Compact L)
+- sirius-l (Z2 L)
+- tianchi-l (T2U L)
+- flamingo-l (E3 L)
+ +

만약 해당 단말기가 리스트에 없다면, 바로 모든 과정을 중단하고 B2G 포팅 도움을 요청하거나 누군가 해당 단말기용 작업을 완료 하기를 기다리세요. Mozilla에서는 당신의 도움을 환영합니다!

+ +
Note: 특정 버전의 Gecko와 상관 없이 빌드를 하고자 한다면, 진행 하기 전에Building against a custom Gecko 를 참고 하세요.
+ +

모바일 단말기 환경 설정

+ +

우선, 환경설정시 단말기와 통신을 하게 되므로, 설정 하고자 하는 단말기를 연결하세요.

+ +

원하는 단말기의 종류가 위에 나와 있다면, 아래와 같이 config.sh + 단말기 이름을 입력 하세요. Samsung Google Nexus S를 예로 들면 아래와 같습니다.

+ +
./config.sh nexus-s
+
+ +

설정 시작하고 바로 아마도 색상 환경 설정을 입력 해야 할 것입니다. 색상 선택이 완료되면 환경 설정은 계속 진행 됩니다. 지금부터는 Boot to Gecko빌드에 필요한 모든 코드를 복하게될 것이며, 이는 상당한 시간이 소요 될 것이니 잠깐 쉬는 시간을 가지도록 하세요.(2시간 이상 소요 예상됨)

+ +

If your phone no longer has Android on and your B2G tree doesn't have the binary blobs in it, and you wisely made a backup of the /system partition like an earlier page told you to, you can use it like this:

+ +
ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target>
+
+ +

에뮬레이터 빌드 환경 설정

+ +

ARM 에뮬레이터는 "emulator", x86 에뮬레이터는 "emulator-x86"로 아래와 같이 수행 하시면 에뮬레이터용 환경 설정도 가능합니다. x86 에뮬레이터가 ARM용 에뮬레이터보다 수행 속도는 빠르지만 실제 단말기와 다르게 동작 할 수도 있습니다.

+ +

아래는 ARM용 에뮬레이터 환경 설정입니다.

+ +
./config.sh emulator
+
+ +
+

주의: ./config.sh수행은 시간이 많이 걸리므로 Ctrl-C로 중단이 가능하며 이후 다시 진행도 가능합니다. 만약 일부 진행이 문제가 있어 보인다면 './repo sync'를 실행 하시면 문제가 수정될지 모릅니다.

+
+ +

Building against a custom Gecko

+ +

There may be times that you want or need to build Boot to Gecko based on a different version of Gecko than the one that's used by default (as specified in the manifest). You can do so by editing the file .userconfig before you pull the repository (before the config.sh step above). For example, if you want to build against mozilla-central:

+ +
GECKO_PATH=/path/to/mozilla-central
+GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+
+ +
+

Note: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.

+
+ +

See Customization with the .userconfig file for additional customizations you can do.

+ +

다음은, 빌드 시작 하기.

diff --git a/files/ko/archive/b2g_os/quickstart/index.html b/files/ko/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/ko/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html new file mode 100644 index 0000000000..437b48c562 --- /dev/null +++ b/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html @@ -0,0 +1,14 @@ +--- +title: Firefox OS에 대하여. +slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +--- +
+

Firefox OS 는 모질라의 Boot to Gecko (B2G) 프로젝트에 의해 개발된 새로운 모바일 운영체제 입니다. 리눅스 커널을 사용하고 Gecko-based runtime 엔진을 통해 구동됩니다. 이로서 사용자들은 JavaScript와 HTML, 그리고 다른 오픈소스 웹 어플리케이션 API를 사용하여 만든 앱들을 사용할 수 있게 되었습니다.

+
+

Firefox OS ("Boot to Gecko" 또는 "B2G"라는 코드명으로도 불립니다) 는 모질라의 오픈소스 모바일 운영체제입니다. 리눅스 커널에 기반했으며, HTML, CSS, JavaScript, 그리고 오픈소스 웹 어플리케이션 API를 구동하는 Gecko-based runtime 엔진으로 구동됩니다. Firefox OS는 또한 독점 기술로부터 자유로운 모바일 운영체제이기도 합니다. 즉, 앱 개발자들에게 그들이 원하는 끝내주는 것들을 만들게 해 주는 기회를 제공하는 강력한 플랫폼이기도 합니다. 게다가, 이것은 최종적으로 사용자에게 행복을 줄 수 있을 만큼 유연하고 포용력 있는 운영체제이기도 합니다.

+

+

Firefox OS는 Gaia라는 기본 설치 앱과 함께 제공됩니다. Gaia는 핸드폰의 기본적인 기능들인 설정, 통화, SMS, 사진촬영 및 편집, 그리고 그 외의 것들을 관리합니다.

+

웹 개발자들에게 이해시켜야 할 가장 중요한 부분은, '모든 사용자 인터페이스(UI)가 웹을 기반한 어플리케이션이라는 것입니다. 다른 웹 기반 어플리케이션을 구동하고, 화면에 표시하는 것이 가능한 웹 어플리케이션이라는 것이죠. 당신이 사용자 인터페이스에 적용하는 모든 수정과, 당신이 Firefox OS에서 구동시키기 위해 만드는 모든 앱들은, 모바일 기기와 서비스에 대한 향상된 접근에도 불구하고. 웹페이지입니다.

+

Firefox OS는 현재 엄청난 개발단계중에 있습니다. 우리는 당신에게 Gaia와 앱 개발을 더 쉽게 만들어주기 위해 끊임없이 노력중입니다.

+

Firefox OS에 대한 더 많은 정보를 원하신다면 Firefox OS content zone으로 와 주십시오.

diff --git a/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html b/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html new file mode 100644 index 0000000000..50f550e7c3 --- /dev/null +++ b/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html @@ -0,0 +1,53 @@ +--- +title: 개방형 웹 앱 소개 +slug: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multi devices

+
+

이 글은 개발자, 프로젝트 매니저, 또는 앱 개발과 배포에 관련이 있는 사람 등 개방형 웹 앱을 배우고자 하는 모든이들에게 좋은 출발점이 되고자 합니다. 이 글에서는 개방형 웹 앱에 대해 대략적인 개요를 가볍게 설명하고 개방형 웹 앱의 철학에 대해 소개합니다.

+
+

개방형 웹 앱은 기본적으로 일반적인 웹 사이트나 웹 페이지와 다르지 않습니다. 개방형 웹 앱은 HTML, CSS, JavaScript 등 개방된 표준 웹 기술을 사용하고 웹 브라우저를 통해 접근할 수 있습니다. 가장 큰 차이는 디바이스에 설치될 수 있는지, 오프라인일 때 작동할 수 있는지, 그리고 카메라, 주소록과 같은 디바이스 기능과 인터렉션할 수 있는 더 발전된 API 에 접근할 수 있는지 등 그 기능들에 있습니다. 또한 개방형 웹 앱은 공개된 기술을 최대한 이용해 만들어집니다. 플랫폼들 사이에 아직 구현되지 않은 기술들이 있을 수 있기 때문에 피쳐 디텍션(feature detection)과 여러 플랫폼에서 작동하는 코드, 그리고 우아한 성능저하(graceful degradation)를 통해 웹 브라우저와 디바이스 모두를 지원하는 노력이 필요합니다.

+

개방형 웹 앱의 장점

+

개방형 웹 앱의 장점에 대해 조금 더 자세히 알아봅시다:

+ +

아래 동영상도 개방형 웹 앱의 일반적인 장점과 Firefox OS 플랫폼에서의 개발에 대해 다루고 있습니다.

+

+

웹이 바로 플랫폼 입니다.

+

개방형 웹 앱은 그 자체로서 Firefox OS 와 같은 플랫폼에 설치된 상태로 존재합니다. 브라우저의 즐겨찾기가 아니라 정당한 시스템의 한 부분으로 존재합니다. 개방형 웹 앱의 미래는 무척 밝습니다. 개방형 웹 앱은 우리가 잡아야하는 기회이지만 놓치게 된다면 웹은 다시 한번 쪼개지게 될 것입니다. 이런 관점에서 보면 개방형 웹 앱(줄여서 OWA)이 표준화되어 “웹”의 일부가 되는 것을 지향하고 있다는 것이 명확해집니다. 만약 성공한다면 OWA 는 향후 모든 브라우저, 운영체제, 디바이스에서 작동하게 될 것입니다.

+

Mozilla 에서 우리는 개방된 웹이 전적으로 지원하는 앱 플랫폼을 만들기 위해 열심히 노력하고 있습니다. “Mozilla 플랫폼” 이라던지 “Firefox 플랫폼”이 되는 것을 원하는 것이 아닙니다. 웹이 바로 플랫폼 입니다. 우리는 공개 API 들을 만들고, 어떻게 포터블 앱이 벤더에 종속적이지 않고도 존재할 수 있는지 보여주는 구현물을 만듭니다. Facebook 이나 Google Chrome 등 다른 그룹들도 웹 앱을 만들고 있습니다. Facebook 앱은 Facebook 서비스에 장착할 수 있도록 하는 고리를 뜻하고, Chrome 앱은 Chrome OS 디바이스와 Google 서버를 위해 설계되었습니다. Chrome 앱은 개방형 웹 앱과 굉장히 비슷합니다. 우리는 Google Chrome 팀과 앱 표준의 발전을 위해 지속적으로 협력합니다. 또한 우리는 매우 많은 비전을 공유합니다. 모든 웹 기반 앱 플랫폼들은 통합 가능성이 매우 크므로 우리는 우리가 올바른 개방형 웹 앱 API 를 만들 수 있게 도와줄 모든 벤더들을 환영합니다.

+

비록 현재로서는 개방형 웹 앱은 Mozilla Firefox 기반의 엔진(“Web 런타임”)에서만 구동되지만, 이것이 절대적인 것은 아닙니다. 개방형 웹 앱 프로젝트의 많은 부분들은 아직도 작업 중이고 한번에 모든 브라우저에서 모든 것을 구현하는 것은 불가능합니다. 개방형 웹 앱의 많은 부분은 이미 표준화 되었지만 다른 많은 부분은 아직 유동적입니다. 우리는 개방형 웹 앱이 모든 주요 브라우저에서 사용가능한 표준이 되는 것을 지향하고 바랍니다.

+

따라서 개방형 웹 앱에 대해 다룬 MDN 페이지를 읽을 때에는, 지금으로선 많은 정보들이 Firefox 에 특화된 정보일지라도, 미래에는 모든 브라우저에서 동작하는 개방형 웹 앱의 개발 정보가 될 수 있음을 명심하시기 바랍니다.

+

웹 표준

+

OWA 기술은 단일 기술로 이루어진 것이 아닙니다. OWA 기술은 많은 기술들의 집단들을 포괄하고 있으며 그 중 일부는 초기 기술들입니다. 지금으로서는 OWA 의 일부가 표준화되어 있습니다(HTML5, CSS, JavaScript, IndexedDb 등등). 그 외 부분들은 아직 표준화되지 않았기 때문에 Mozilla 의 구현은 Firefox 전용 구현이거나 다른 Mozilla 기술에서만 동작하는 구현일 수 있습니다. 모두에게 공유하고 권한을 주자는 Mozilla 의 사명처럼 이 상황은 일시적인 것 입니다. 따라서 우리는 OWA 문서들에 아직 표준화 되지 않은 OWA 기술들을 명확히 알 수 있게 하려고 합니다.

+

Mozilla 에서 사용하고 있지 않은 OWA 관련 제안들과 잠재적인 표준들도 있을 수 있습니다.

+

향후 표준이 되는 기술

+

여기에는 현재 다른 웹 플랫폼에서 아직 표준화되지 않아 Firefox 에서만 동작하는 기술들의 모음입니다:

+ +

Marketplace

+

한번 구매하면 모든 곳에서 사용할 수 있습니다.

+

Mozilla 는 개발 초기부터 사용자가 한번 구입하면 사용자가 가진 모든 HTML5 지원 디바이스에서 실행할 수 있는 앱 시스템을 개발해왔습니다. Mozilla 는 곧 최초의 Firefox OS 폰을 발매 할 예정이고 이 폰에서 구매한 앱들은 다른  디바이스에서도 실행할 수 있게 됩니다. Firefox Marketplace 를 통해 앱을 구매하면 앱 시스템이 디바이스에 영수증을 설치합니다. 영수증은 JSON Web Token 으로 Marketplace 의 공개키와 영수증을 검증하는 서비스 URL 으로 연결하는 메타데이터가 담겨있습니다. 앱이 실행되면서 이 영수증을 검증할 수는 있지만 디바이스 내의 이 영수증이 Firefox Marketplace 에 묶이는 것은 아닙니다. 이 영수증은 구매 증명서가 암호화된 것 뿐입니다. 이 영수증 규격을 따르면 누구나 개방형 웹 앱을 판매할 수 있습니다. 여러분이 앱을 구매하는 것은 곧 개방형 웹 앱 시스템을 지원하는 어느 디바이스에서든지 사용할 수 있게됨을 의미합니다.

+

Mozilla는 개방형 웹 앱을 모든 HTML5 지원 디바이스에서 구동시킬 수 있게 하는 인프라를 구축하고 있습니다. Android용 Firefox에서는 앱을 설치하고 실행할 수 있습니다. (nightly 빌드에서 지금 확인할 수 있습니다). 설치한 앱의 아이콘은 일반 Android 앱과 마찬가지로 홈 화면에 추가됩니다. 이미 Windows, Mac, or Linux 데스크탑 홤경에서 Firefox 를 사용해 웹앱을 설치하고 실행할 수 있습니다. (현재 nightly 빌드에서 작동하고 있습니다). 지금은 몇몇 Firefox 버전에서만 지원하고 있지만, 나중에는 모든 주요 브라우저들이 일련의 표준으로서 개방형 웹 앱 시스템을 지원하도록 만들고자 합니다. Mozilla 는 초기부터 HTML5를 지원하는 모든 주요 브라우저에서 이런 생각을 구현하는 방법에 대해 고려해왔습니다. 이와 관련해 Firefox 외의 브라우저에서 앱 플랫폼을 지원하는 방법을 구상한 이 자바스크립트 shim 을 참고하시기 바랍니다.

+

향후 개방형 웹 시스템에는 설치된 앱을 여러 디바이스로 동기화하는 기능이 추가될 것입니다. 영수증은 디바이스끼리 이동시킬 수 있으므로 원한다면 직접 동기화할 수도 있습니다. 단정할 수는 없지만 개방형 웹 앱은 기존의 웹사이트들과 다르지 않기 때문에 무료로 제공되는 개방형 웹 앱은 어느 브라우저에서나 실행할 수 있을 것입니다. 그러나 일부 플랫폼에서만 구현된 새로운 모바일 전용 웹 API를 사용했을 수도 있습니다.

+

아래 동영상에서 개방형 마켓플레이스의 장점과 개방된  웹이 앱 검색과 가까워지는 과정에 대해 간단히 살펴볼 수 있습니다.

+

+

WebPayment API

+

앱 상거래

+

iOS와 Android 등의 모바일 앱 플랫폼이 성공한 배경 중 하나는 이들이 모바일 결제를 통해 아주 쉽게 새로운 비즈니스 모델들을 창출할 수 있게 했기 때문입니다. 이런 비즈니스 모델들은 아직 발전단계임에도 이미 모바일에서의 상거래가 데스크탑 웹에서보다 더 자연스럽습니다. 특히 어쨌든 이미 휴대폰에서 접근중이라면 휴대전화 요금에 포함시켜 과금하는 것이 매우 편리합니다. 개방형 웹 앱 생태계는 Firefox OS 출시와 함께 WebPayment API를 통해 유료 앱 결제와 앱 내 결제를 지원할 것입니다. 상거래를 지원하는 것은 앱 플랫폼의 성장에 필수적입니다. 제시된 결제 API를 사용할지는 완전한 선택사항입니다. Mozilla 는 모든 앱의 독자적인 앱 내 결제를 허용할 것입니다.

+

더 보기

+ diff --git a/files/ko/archive/b2g_os/security/index.html b/files/ko/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..3441a62463 --- /dev/null +++ b/files/ko/archive/b2g_os/security/index.html @@ -0,0 +1,58 @@ +--- +title: 보안 +slug: Archive/B2G_OS/Security +translation_of: Archive/B2G_OS/Security +--- +

이 문서는 Firefox OS의 보안과 관련된 내용입니다. 이 내용은 어플리케이션 보안 뿐만 아닌 전반적인 보안에 대한 내용과 설치 과정이 어떻게 안전하게 유지되는지를 포함하고 있습니다.

+ + + + + + + +
+

Firefox OS  보안 관련 문서들

+
+
+ Firefox OS 보안 모델
+
+ Firefox OS의 보안 모델에 관한 개요
+
+ Application security in Firefox OS
+
+ An overview of how applications are made secure on Firefox OS.
+
+ Securely installing and updating applications
+
+ How Firefox OS securely installs and updates applications.
+
+ Software permissions in Firefox OS
+
+ A guide to what types of software have permission to perform various tasks on Firefox OS.
+
+

View All...

+ 		+

커뮤니티로부터 도움 받기

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+ +
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +
+

 

diff --git "a/files/ko/archive/b2g_os/security/\353\263\264\354\225\210_\353\252\250\353\215\270/index.html" "b/files/ko/archive/b2g_os/security/\353\263\264\354\225\210_\353\252\250\353\215\270/index.html" new file mode 100644 index 0000000000..75b129cd6f --- /dev/null +++ "b/files/ko/archive/b2g_os/security/\353\263\264\354\225\210_\353\252\250\353\215\270/index.html" @@ -0,0 +1,253 @@ +--- +title: Firefox OS 보안 모델 +slug: Archive/B2G_OS/Security/보안_모델 +tags: + - B2G + - Firefox OS + - IPC + - IPDL + - Korean + - 가이드 + - 모바일 + - 보안 +translation_of: Archive/B2G_OS/Security/Security_model +--- +

이 문서는 모바일 기기의 폴렛폼, 앱이나 데이터들을 지켜주는 Firefox OS 보안 프레임워크의 개요입니다. Mozilla는 Firefox OS에 여러가지 보안 문제들에 관한 최선의 보호를 제공해주는 매우 자세한, 일체화된, 다중 레이어의 보안 모델을 적용하였습니다.

+

폴렛폼 보안

+

Firefox OS 폴렛폼은 모든 단계에서 취약점들을 완화시켜주도록 디자인된 다중 레이어 보안 모델을 사용합니다. Front-line 대응조치들은 위협으로부터 세밀한 보호를 제공하는 심층 방어 전략과 같이 합쳐집니다.

+

보안 아키텍처

+

Firefox OS는 웹 기반 어플리케이션들과 그 아래 존재하는 하드웨어를 연결시켜 줍니다. Firefox OS는 아래 나와있는 여러 단계들로 구성된 일체화된 기술적 스택입니다.

+

+

Mobile device는 FirefoxOS를 돌리고 있는 모바일 기기를 뜻합니다. Gonk는 리눅스 커널, 시스템 라이브러리들, 펌웨어 그리고 디바이스 드라이버들로 이루어저 있습니다. Gecko는 앱 실행을 위한 프레임워크를 제공하며 모바일 기기들이 사용하는 Web API들을 내재하고 있는 어플케이션 런타임 레이어입니다. Gaia는 사용자들의 경험을 제공하는 웹 앱들의 모임체입니다(앱들은 HTML5, CSS, JavaScript, images, media 등등으로 이루워저 있습니다).

+

Gecko is the gatekeeper that enforces security policies designed to protect the mobile device from misuse. The Gecko layer acts as the intermediary between web apps (at the Gaia layer) and the phone. Gonk delivers features of the underlying mobile phone hardware directly to the Gecko layer. Web apps access mobile phone functionality only through the Web APIs, and only if Gecko allows the access request – there is no direct access, no “back door” into the phone. Gecko enforces permissions and prevents access to unauthorized requests.

+

안전한 시스템 개발

+

Firefox OS comes installed on the smart phone. The original system image is created by a known, trusted source – usually the device OEM – that is responsible for assembling, building, testing, and digitally signing the distribution package.

+

Security measures are used throughout the technology stack. File system privileges are enforced by Linux's access control lists (ACLs). System apps are installed on a volume that is read-only (except during updates, when it is temporarily read-write). Only areas containing user content may be read-write. Various components within the device hardware have built-in protections that are implemented by default as standard industry practice. Chipset manufacturers, for example, employ hardening techniques to reduce vulnerabilities. The core platform (Gecko and Gonk) is hardened to strengthen its defense against potential threats, and hardening features of the compiler are used where applicable. For further details see Runtime security.

+

안전한 시스템 업데이트

+

Subsequent upgrades and patches to the Firefox OS platform are deployed using a secure Mozilla process that ensures the ongoing integrity of the system image on the mobile phone. The update is created by a known, trusted source – usually the device OEM – that is responsible for assembling, building, testing, and digitally signing the update package.

+

System updates can involve all or a portion of the Firefox OS stack. If changes to Gonk are included in the update, then FOTA (Firmware Over the Air) is the install process used. FOTA updates can also include any other part of the Firefox OS stack, including device management (FOTA, firmware / drivers), settings management (Firefox OS settings), security updates, Gaia, Gecko, and other patches.

+

Updates that do not involve Gonk can be done using the Mozilla System Update Utility. Firefox OS uses the same update framework, processes, and Mozilla ARchive (MAR) format (used for update packages) as the Firefox Desktop product. For more information, see https://wiki.mozilla.org/Software_Update.

+

A built-in update service – which may be provided by the OEM – on the mobile phone periodically checks for system updates. Once a system package becomes available and is detected by the update service, the user is prompted to confirm installation. Before updates are installed on the mobile device, the device storage is checked for sufficient space to apply the update, and the distribution is verified for:

+ +

The following security measures are used during the update process:

+ +

Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.

+

앱 보안

+

Firefox OS uses a defense-in-depth security strategy to protect the mobile phone from intrusive or malicious applications. This strategy employs a variety of mechanisms, including implicit permission levels based on an app trust model, sandboxed execution at run time, API-only access to the underlying mobile phone hardware, a robust permissions model, and secure installation and update processes. For technical details, refer to: Application security.

+

In Firefox OS, all applications are web apps – programs written using HTML5, JavaScript, CSS, media, and other open Web technologies (pages running within the browser are not referred to as Web apps in this context). Because there are no binary ("native") applications installed by the user, all system access is mediated strictly through the Web APIs. Even access to the file system is only through Web APIs and a back-end SQLite database – there is no direct access from apps to files stored on the SD card.

+

Firefox OS limits and enforces the scope of resources that can be accessed or used by an app, while also supporting a wide range of apps with varying permission levels. Mozilla implemented tight controls over what type of applications can access which APIs. For example, only certified apps (shipped with the phone) can have access to the Telephony API. The Dialer app has privileges to access the Telephony API in order to make phone calls, but not all certified apps can access this API. This prevents a scenario, for example, in which an arbitrary third-party app gets installed, dials a pay-per-use phone number (900 and 910), and racks up a large cell phone bill. However, other OEM apps might be selectively given access to the Telephony API. For example, an Operator might provide a systems management application that allows a customer to manage their account, including the ability to phone the Operator’s billing or support office directly.

+

신뢰되는 앱과 안되는 앱들

+

Firefox OS는 앱들을 다음과 같은 종류들로 나눕니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
종류 +

신뢰 레벨

+ 		설명
인증됨(Certified)매우 신뢰 +

System apps that have been approved by the Operator or OEM (due to risk of device corruption or risk to critical functionality). System apps and services only; not intended for third-party applications.
+ This designation is reserved for just a small number of critical applications. Examples: SMS, Bluetooth, camera, system clock, telephony, and the default dialer (to ensure that emergency services are always accessible).

+
+

권한 받음(Privileged)

+ 		신뢰 +

Third-party apps that have been reviewed, approved, and digitally signed by an authorized Marketplace.

+
+

웹 (나머지 전부)

+ 		+

신뢰 안됨

+ 		+

Regular web content. Includes both installed apps (stored the mobile phone) and hosted apps (stored remotely, with only an app manifest stored on the mobile phone). The manifest for hosted apps can be obtained through a Marketplace.

+
+

An application’s trust level determines, in part, its ability to access mobile phone functionality.

+ +

Some operations, such as network access, are assumed to be an implicit permission for all apps. In general, the more sensitive the operation (for example, dialing a phone number or accessing the Contacts list), the higher the app trust level required to execute it.

+

권한 최소화 원칙

+

For web apps, the Firefox OS security framework follows the principle of least permissions: start with the absolute minimum permissions, then selectively grant additional privileges only when required and reasonable. By default, an app starts with very low permissions, which is comparable to untrusted web content. If the app makes Web API calls that require additional permissions, it must enumerate these additional permissions in its manifest (described later in this document). Gecko will consider granting Web API access to an application only if the applicable privileges are explicitly requested in its manifest. Gecko will grant the requested permission only if the type of the Web App (certified, trusted, or web) is sufficiently qualified for access.

+

권한 받은(Privileged) 앱들의 Marketplace 리뷰 과정

+

In order for an app to become privileged, the app provider must submit it for consideration to an authorized Marketplace. The Marketplace subjects the app to a rigorous code review process: verifying its authenticity and integrity, ensuring that requested permissions are used for the purposes stated (in the permission rationale), verifying that the use of implicit permissions is appropriate, and validating that any interfaces between privileged app content and unprivileged external content have the appropriate mitigations to prevent elevation of privilege attacks. The Marketplace has the responsibility to ensure that the web app will not behave maliciously with the permissions that it is granted.

+

After an app passes this review, it is approved for use, its app manifest is digitally signed by the Marketplace, and it is made available for mobile users to download. The signature ensures that, if the web store were somehow hacked, the hacker could not get away with installing arbitrary content or malicious code on users’ phones. Due to this vetting process, Firefox OS gives privileged apps obtained from a Marketplace a higher degree of trust than everyday (untrusted) web content.

+

패키지화된 앱들과 웹에 호스팅된 앱들

+

Apps for Firefox OS can be either packaged (stored on the mobile phone) or hosted (stored on a remote web server, with just a manifest stored on the mobile phone). There are some differences in the way in which security is managed for each. Nonetheless, packaged and hosted apps are both subject to application sandboxing, which is described later in this document.

+

패키지화된 앱들(Packaged Apps)

+

A packaged app consists of a ZIP file containing application resources (HTML5, CSS, JavaScript, images, media), as well as a manifest that provides an explicit list of assets and their corresponding hashes. Certified and privileged apps must be packaged apps because the app manifest needs to be digitally signed. When a user obtains a packaged app, the ZIP file is downloaded onto the mobile phone, and the manifest is read from a known location inside the ZIP file. During the install process, app assets are verified and remain stored locally in the package. All explicit permissions are requested at runtime, showing the user the app's data usage intentions, and persisted by default.

+

To refer to app resources in a packaged app, the URL begins with app: using the following format:

+

app://identifier/path_within_zipfile/file.html

+

where app:// represents the mount point for the ZIP file, and identifier is a UUID that is generated when the app is installed on the mobile phone. This mechanism ensures that resources referred to with an app: URL are contained in the ZIP file. The path within an app: is relative, so relative links to resources in the ZIP file are allowed.

+

While packaged apps are primarily intended to be used for Certified or Privileged apps, regular web apps can also be packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.

+

웹에 호스트된 앱들(Hosted Apps)

+

Hosted apps are located on a web server and loaded via HTTP. Only the app manifest is stored on the mobile phone. Everything else is stored remotely. Certain APIs are available only to privileged and certified apps, which requires the app to be packaged due to signing requirements. Therefore, a hosted app will not have access to any of the Web API operations that require privileged or certified app status.

+

From a security point of view, hosted apps work very much like normal websites. A hosted app is loaded by invoking a hard-coded, fully-qualified URL that points to the startup page in the root directory of the app on that web server. Once a hosted app is loaded, the mobile phone links to pages using the same URLs that are used when browsing the web site.

+

앱 Manifest(App Manifest)

+

An Open Web App manifest contains information that a Web browser needs in order to interact with an app. A manifest is a JSON file with (at a minimum) a name and description for the app. For further details, refer to FAQs about app manifests.

+

Manifest 예제

+

다음의 예제는 간단한 설정이 되어있는 앱 Manifest(App Manifest)를 보여줍니다.

+
{
+  "name": "My App",
+  "description": "My elevator pitch goes here",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "Your name or organization",
+    "url": "http://your-homepage-here.org"
+  },
+  "default_locale": "en"
+}
+

App Manifest에서의 보안 설정

+

아래 보안 항목들처럼 App Manifest는 여러가지 다른 항목을 포함할수 있습니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

항목

+ 		+

설명

+
+

permissions

+ 		+

Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:

+
    +
  • description - A string specifying the intent behind requesting use of this API. Required.
    • +
  • access - A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: read, readwrite, readcreate, and createonly.
    • +
+
+

installs_allowed_from

+ 		+

Origin of the app. Array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as https://marketplace.firefox.com/).

+
+

csp

+ 		+

Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:
+ https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp

+

Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.

+
+

type

+ 		+

애플리케이션의 종류 (web, privileged, or certified).

+
+

Firefox OS requires that the manifest be served with a specific mime-type ("application/x-web-app-manifest+json") and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.

+

샌드박스화된 실행

+

이 항목은 샌드박스화된 응용프로그램과 실행에 관해서 설명합니다.

+

응용프로그램 샌드박스

+

The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on). For details, see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model.

+

The following figure provides an overview of this security model.

+

+

By isolating each app, its impact is contained within its own worker space. It cannot interfere with anything (such as other apps or their data) outside of that worker space.

+

실행 샌드박스

+

B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At runtime, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges – for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.

+

Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when a listener process detects an event generated by some other process), and is mediated through the B2G process.

+

하드웨어 접근을 Web API만으로 통할수 있게 제약

+

Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.

+

보안 인프라

+

The following figure shows the components of this security framework:

+

+ +

관리(Management)와 시행(Enforcement)를 위한 퍼미션

+

Firefox OS security is designed to verify and enforce the permissions granted to web apps.
+ The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).

+

A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:

+ +

If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.

+

유저에게 권한에 대해서 물어보기

+

In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed. For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This data usage intention informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.

+

보안 앱 업데이트 과정

+

+

For app upgrades and patches to a privileged app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:

+ +

Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.
+ The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.

+

기기 보안(하드웨어)

+

Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact the OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.

+

데이터 보안

+

Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank & credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.

+

비밀번호와 자동으로 꺼지는 화면

+

Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.

+

샌드박스화된 데이터

+

As described earlier, apps are sandboxed at runtime. This prevents apps from accessing data that belongs to other apps unless that data is explicitly shared, and the app has sufficient permissions to access it.

+

시리얼화된 데이터

+

Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.

+

데이터 파기

+

When a user uninstalls an app, all of the data (cookies, localStorage, Indexeddb, and so on) associated with that application is deleted.

+

프라이버시

+

Mozilla is committed to protecting user privacy and user data according to its privacy principles (https://www.mozilla.org/privacy/), which stem from the Mozilla Manifesto (https://www.mozilla.org/about/manifesto.html). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:

+ +

Firefox OS는 이런 원칙들을 어디에 자신의 개인 정보가 갈지 결정하는 유저들에게 제어권을 줌으로서 적용합니다. Firefox OS는 다음과 같은 기능들을 제공합니다:

+ diff --git a/files/ko/archive/b2g_os/simulator/index.html b/files/ko/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..0250696f04 --- /dev/null +++ b/files/ko/archive/b2g_os/simulator/index.html @@ -0,0 +1,280 @@ +--- +title: Firefox OS 시뮬레이터 +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+

Firefox OS 시뮬레이터는 아직 개발 초기 단계입니다. 저희가 원하는만큼의 안정성과 완성도가 없습니다.

+

버그를 발견하셨다면 GitHub에 보고 해주세요. 만약에 물어보실게 있으시다면 개발자 도구 메일링 리스트나 irc.mozilla.org의 #devtools에서 질문해 주세요.

+

도움 받기 항목의 Verbose logging을 활성화 하는 방법과 최신 빌드를 받는 법을 읽어 주세요.

+
+

Firefox OS 시뮬레이터 부가 기능을 이용해 데스크톱 환경에서 Firefox OS 응용 프로그램을 테스트하고 디버깅 할 수 있습니다. 시뮬레이터에서는 실제 장치를 사용하는 것보다도 Code-Test-Debug 주기가 빨라집니다. 또한 당연히 시뮬레이터를 사용하기 위해 실제 디바이스가 필요 없습니다.

+

근본적으로, 시뮬레이터 부가 기능을 구성하는 것은 다음과 같습니다 :

+ +

아래 스크린 샷은 시뮬레이터를 사용한 디버깅 세션을 보여줍니다.

+

Dashboard는 오른쪽 상단의 Firefox 탭 안에서 돌아가고 있습니다. 여기에 "Where am I?"라는 이름의 패키지형 애플리케이션을 추가했습니다. 상좌단의 앱은 시뮬레이터를 돌리고 있습니다. 또한 아래쪽의 패널에서 보시다시피 디버깅 도구와 연결하고 있습니다. 콘솔 창에 앱에 대한 메시지가 표시되는 것을보실 수 있습니다.

+

+

이 가이드는 다음과 같은 주제를 다룹니다:

+ +
+ 실제 Web 응용 프로그램을 디버깅하는데  Simulator를 사용하는 방법을 보여주는 실질적인 자세한 설명은 Simulator Walkthrough 페이지를 참조하십시오.
+

시뮬레이터 설치하기

+

시뮬레이터 는 Firefox 부가 기능 에서 배포 하고 있습니다 . 설치 방법은 다음과 같습니다 :
+  

+
    +
  1. Firefox에서 addons.mozilla.org 에서 시뮬레이터 페이지 를 방문 하십시오.
    2. +
  2. "Firefox 에 추가" 를 클릭 하십시오.
    3. +
  3.  기능을 다운로드 한뒤 확인 메시지가 표시 되면 " 지금 설치 " 를 클릭 하십시오.
    4. +
+


+ 부가 기능의 크기가 큰 관계로 설치 중에 Firefox가 몇 초 동안 정지되거나 "경고 : 응답하지 않는 스크립트" 라는 제목의 대화 상자가 표시 될 수 있습니다. 대화 상자가 표시 되면 설치가 완료 될 때까지 기다리기 위하여 " 처리 를 계속 " 을 클릭 하십시오. 이 문제는 Firefox 27부터 발생하지 않습니다.
+
+ 시뮬레이터 부가 기능 의 설치 가 완료되면 Firefox는 정기적으로 새로운 버전을 확인 하여 최신 상태 를 유지 합니다.
+
+ 시뮬레이터를 설치 하면 대시보드가 자동으로 열리지 만 "Firefox" 메뉴 (OS X 및 Linux에서는 "도구" 메뉴 ) 의 "웹 개발 도구" 에서 " Firefox OS 시뮬레이터 " 를 선택하여 언제든지 대시보드를 열 수 있습니다 :

+


+ 아래 보여지는 대시보드는 애플리케이션 시뮬레이터에 추가하고 실행하는 데 사용하는 도구입니다:

+

앱을 추가하고, 제거하고, 새로고침하기

+

앱 추가하기

+

패키지 형 응용 프로그램을 시뮬레이터 에 추가 하려면 대시보드를 열고 " Add Directory " 를 클릭합니다. 그리고 앱의 매니페스트 파일을 선택 하십시오.
+
+ 호스트 형 응용 프로그램을 추가 하려면 " URL for page or manifest.webapp "라고 표시 되는 텍스트 상자에 URL 을 입력 하고 " Add URL " 을 클릭 하십시오. URL이 매니페스트를 가리키는 경우 해당 매니페스트가 사용 됩니다. 그렇지 않은 경우 는 Dashboard 가 해당 URL 위한 매니페스트를 생성 합니다 : 따라서, URL을 입력 하는 것만으로 모든 Web 사이트를 앱 으로 추가 할 수 있습니다 .
+
+ 앱 을 추가 하면 대시보드가 매니페스트 파일 에 대해 일련 의 테스트 를 수행하여 일반적인 문제를 확인 합니다. 어떤 테스트 를 실시할지 에 대한 자세한 내용 은 매니페스트 검증 섹션을 참조하십시오.
+
+ 매니페스트 유효성 검사 응용 프로그램 오류가 발견 되지 않으면 대시보드는 자동으로 시뮬레이터에서 응용 프로그램을 실행 합니다.

+

앱 관리하기

+

앱을 추가하면 매니저에서 설치된 응용 프로그램 목록에 표시됩니다 :
+
+ 각 항목은 앱에 대한 다음과 같은 정보를 보여줍니다:

+ +

또 다음과 같은 네개의 명령을 제공합니다.

+ +
+

시뮬레이터 창에서 애플리케이션 업데이트 : 애플리케이션을 실행하는 경우 메뉴 바에서 작업 또는 할당 된 바로 가기 키로 시뮬레이터 창에서 직접 응용 프로그램을 업데이트 및 다시로드 할 수 있습니다.

+
+

매니페스트 검증

+

매니페스트를 제출하면 매니저는 매니페스트 여러개의 검증 테스트를 실행 합니다. 검증 테스트는 세 가지 범주 에 대해 문제를 보고합니다 :
+  

+ +

이것은 앱 의 항목에 발생한 문제의 간략적인 정보를 제공합니다 : 요약된 항목을 클릭 하면 세부 정보가 표시 됩니다.

+

매니페스트 에러

+

대시보드 는 다음과 같은 상황을 오류로 보고 합니다. 이 문제를 해결 하지 않으면 해당 응용 프로그램은 시뮬레이터에서 실행되지 않을 것입니다:

+ +

다음은 매니페스트 필수 필드 "name"이 없는 매니페스트를 추가하려고 할 때의 예시입니다.
+

+

매니페스트 경고

+

대시보드는 다음과 같은 매니페스트 이슈들의 대한 경고를 보고할 것입니다:

+ +

시뮬레이터 한정 경고들

+

마지막으로, 매니저는 앱이 사용하는 Firefox OS 기능중 시뮬레이터에서 완벽하게 지원되지 않는 기능들에 관해서 경고를 할 것입니다:

+ +

시뮬레이터 돌리기

+

시뮬레이터를 실행시키는 방법엔 다음과 같은 두가지 방법이 있습니다:

+ +

어떤 방법을 쓰던지와 상관 없이 시뮬레이터가 작동하기 시작되면, "Stopped"라고 써 있던 버튼이 초록색으로 된 "Running"라고 써 있는 버튼이 됩니다. 시뮬레이터를 정지하실려면 이 버튼을 한번 더 클릭해 주세요.
+  

+

시뮬레이터는 320x480 픽셀의 시뮬레이션된 화면과 하단에 툴바와 상단에 메뉴바를 가지는 분리된 새로운 창으로 나타납니다:

+

+

터치 이벤트를 시뮬레이션 하기 위해서는 마우스 버튼 클릭을 유지하면서 드래그 해 주세요. 홈스크린에서 오른쪽으로부터 왼쪽으로 클릭하시고 드래그 하시는걸 통해서 여러분은 여러분이 추가한 앱들과 내장된 앱들을 보실수 있습니다:

+

+

시뮬레이터 툴바

+

하단 툴바에는 왼쪽에서부터 오른쪽으로 홈 버튼, 스크린 회전 버튼, 그리고 Geolocation 버튼이 있습니다.

+ +

+

시뮬레이터 메뉴바

+

상단 메뉴바에서는 여러분은 개발을 더 효율적으로 만들수 있게 해주는 여러 명령들을 쓰실수 있습니다.

+

+ +

"App Refresh"를 실행하는 키보드 단축키는 앱을 웹 페이지처럼 반복적으로 개발하는걸 가능하게 합니다:

+ +
+

"앱을 새로 고침하고 데이터를 제거하기" 숨겨진 지름길: 가끔씩 시뮬레이터가 앱을 위해서 저장한 데이터를 초기화 시키는게 도움이 될 때도 있습니다, 그래서 시뮬레이터는 이와 관련된 숨겨진 단축키를 가지고 있습니다. Shift - Ctrl/Cmd - R를 이용하면 시뮬레이터는 다음과 같은 여러 데이터를 초기화한뒤 앱을 새로 고침할 것입니다:

+ +
+

개발자 도구들과 연결하기

+

여러분의 앱의 디버깅에 도움을 주기 위해 여러가지 개발자 도구들을 시뮬레이터 연결하실수 있습니다. 지금부로는 오직 JavaScript Debugger, Web Console, Style Editor, Profiler 그리고 Network Monitor만 연결할수 있지만, 저희는 더 많은 developer tools을 연결할수 있도록 노력중입니다.

+
+

이 중에 몇몇 툴은 파이어폭스의 베타, Aurora 혹은 Nightly builds 버전에서만 이용하실수 있습니다.

+
+

개발자 도구들을 시뮬레이터와 연결하실려면, "Connect" 버튼을 클릭해 주세요:

+

+

대시보드는 대시보드 하단에 개발자 도구 창을 열고 앱과 연결합니다:

+

+

웹 콘솔

+

앱은 console object(콘솔 객체)를 이용해 log를 남길수 있습니다. 웹 콘솔은 다음과 같은 앱이 작성한 메세지를 표시합니다: 네트워크 요구, CSS 그리고 J S 경고/오류, 보안 오류들. (Learn more about the Web Console.)

+

디버거

+

문제를 더 빨리 발견하고 해결하기 위해 디버거를 사용하면 여러분은 손쉽게 연결된 앱의 자바스크립트의 단계별 실행 , 분기점 관리, 식 보기 등을 할수가 있습니다. (Learn more about the Debugger.)

+

스타일 편집기

+

스타일 편집기를 연결하면 앱에서 참조하는 CSS 파일의 열람이나 편집이 가능합니다. 변경 한 부분은 앱을 업데이트 할 필요없이 실시간으로 앱에 반영됩니다. (Learn more about the Style Editor.)

+

프로파일러

+

앱에 연결된 프로파일러 도구를 사용하여 JavaScript 코드에서 시간이 너무 많이 소요하는 구간을 찾을수 있습니다. 프로파일러는 JavaScript 최근 호출 스택을 샘플하고 컴파일 상태를 주기적으로 샘플링합니다. (Learn more about the Profiler.)

+

네트워크 모니터

+

새로운 네트워크 모니터 덕분에, 앱이 시작한 모든 네트워크 요청 상태 헤더, 콘텐츠 타이밍을 사용자 친화적인 인터페이스를 통해 분석 할 수 있습니다.(Learn more about the Network Monitor.)

+

영수증

+

만약에 여러분이 유료 앱을 개발중이시라면 여러분은 여러분의 앱의 유효한 (cryptographically signed) 영수증(valid receipt)을 가진 영수증 인증 코드 (receipt validation code, 코드는 유저가 이미 앱을 구매했거나 환불을 요구했음을 보여주고 유저에게 앱의 기능을 제한하거나 허락함을 알립니다)를 테스트 하셔야 합니다.

+

시뮬레이터의 대시보드의 각 앱의 항목에있는 "Receipts"메뉴를 이용해 각 앱을 "Valid, "Invalid", "Refunded" 테스트 영수증과 함께 설치할수 있습니다. 테스트하려는 영수증의 종류를 선택하면 대시보드가 Marketplace의 영수증 서비스에서 그 종류의 테스트 영수증을 가져오고 시뮬레이터에서 테스트 영수증과 함께 응용 프로그램을 다시 설치합니다 :

+

+

기기로의 전송

+

만약에 여러분이 별도의 Firefox OS 기기들이 있으시다면, 여러분을 그 기기들을 시뮬레이터에 연결할수 있고, 추가하신 앱들을 대시보드에서 기기들로 바로 전송할수 있습니다.

+

기기에 연결하기

+

기기를 연결하시려면 connecting a Firefox OS device to the desktop에 있는 가이드를 따르십시오.시뮬레이터가 ADB를 미리 포함하고 있기 때문에 따로 설치를 하실 필요가 없다는걸 염두해 두세요.

+

앱을 디바이스로 전송하기

+

일단 데스크탑과 기기를 준비하시고 기기를 데스크탑에 USB로 연결하셨다면, 대시보드에서 디바이스가 연결되었음을 알리는 "Device connected"가 뜨는걸 보실수 있습니다. 그리고 "Push"라고 되어 있는 새로운 명령 버튼이 나타납니다:

+

+

 "Push"버튼을 클릭하시면 선택하신 앱은 자동적으로 Firefox OS 기기에 전송되었을 것입니다.

+
+

수동적 방법:

+ +
+

Firefox OS 기기 연결 확인

+

어느 기기에서 재부팅 할때나 첫번째 "Push"(전송) 요구는 디바이스에서 확인되어야 합니다:

+

+

Linux에서 문제해결

+

udev rules를 생성하신뒤에 기기에 연결이 안 된다면 이 bug를 참조하세요.

+

시뮬레이터의 제약

+

Firefox OS 시뮬레이터가 완벽한 시뮬레이션을 제공하지 않음을 염두해 두세요.

+

하드웨어 제약

+

스크린 사이즈를 제외하고도, Firefox OS 시뮬레이터는 Firefox OS 기기들의 CPU 속도나 메모리같은 하드웨어 제약을 시뮬레이트하지 않습니다.

+

오디오/비디오 코덱

+

다음과 같은 코덱들은 하드웨어 가속에 의존하므로 아직 지원되지 않습니다:

+ +

이것은 위에 리스트 되어있는 코덱을 사용하는 앱이나 유튜브같은 웹사이트들은 작동하는것이 불가능하다는걸 의미합니다.

+

지원되지 않는 API들

+

데스크탑 하드웨어의 제약 때문에, 몇가지의 API들은 시뮬레이터에서 작동을 하지 않습니다. 저희는 geolocation과 같은 몇몇 API들을 위한 시뮬레이션을 넣었습니다. 하지만, 지금으로서는 다음 리스트에 있는 API들은 작동하지 않습니다. 다음과 같은 API를 사용하면 에러가 뜨거나 맞지 않은 결과를 가져다 줄 것입니다:

+ +

도움 받기

+

Firefox OS 시뮬레이터는 아직 개발 초기 단계입니다. 저희가 원하는만큼의 안정성과 완성도가 없습니다.

+

버그를 발견하셨다면 GitHub에 보고 해주세요. 만약에 물어보실게 있으시다면 개발자 도구 메일링 리스트나 irc.mozilla.org의 #devtools에서 질문해 주세요.

+

verbose logging을 활성화하는 방법

+

설정하기 위해 about:config를 사용해 주세요. extensions.r2d2b2g@mozilla.org.sdk.console.logLevel를 정수값 0으로 설정해 주세요, 그리고 부가 기능을 비활성화하고 재활성화를 해주세요. 시뮬레이터 구동에 관련한 추가적 메세지들은 에러 콘솔에서 나타날 것입니다(혹은 최신 버전의 Firefox의 브라우저 콘솔에서)

+

어떻게 시뮬레이터의 가장 최신 프리뷰 빌드를 받을수 있을까요?

+

이 문서의 한 섹션이 설명하는 대로, 여러분은 최신 Firefox OS 빌드 추가기능을 addons.mozilla.org에서 받을수 있습니다.

+

가끔 여러분은 아직 공식적으로 릴리즈 되지 않는 기능들을 사용할수도 있을텐데요. 그렇다면, 여러분들은 최신 프리뷰 빌드들을 다음과 같은 URL들에서 받으실수 있습니다.

+ +

프리뷰 빌드들은 릴리즈된 빌드들보다 덜 안정적이고 테스트 되어야 함을 염두해 두세요.

+ +
    +
  1. Toolbox +
      +
    1. Page Inspector
      2. +
    2. Web Console
      3. +
    3. Style Editor
      4. +
    4. Debugger
      5. +
    5. Profiler
      6. +
    6. Network Monitor
      7. +
    7. Shader Editor
      8. +
    +
    2. +
  2. Mobile +
      +
    1. Remote Debugging
      2. +
    2. Firefox OS 시뮬레이터
      3. +
    3. Responsive Design View
      4. +
    +
    3. +
  3. Standalone tools +
      +
    1. Scratchpad
      2. +
    2. Browser Console
      3. +
    3. Developer Toolbar
      4. +
    4. 3D View
      5. +
    5. Paint Flashing Tool
      6. +
    6. Browser Toolbox
      7. +
    +
    4. +
+

 

+

 

diff --git "a/files/ko/archive/b2g_os/\354\204\261\353\212\245/index.html" "b/files/ko/archive/b2g_os/\354\204\261\353\212\245/index.html" new file mode 100644 index 0000000000..dd7ccb98ee --- /dev/null +++ "b/files/ko/archive/b2g_os/\354\204\261\353\212\245/index.html" @@ -0,0 +1,146 @@ +--- +title: 성능 +slug: Archive/B2G_OS/성능 +translation_of: Web/Performance/Fundamentals +--- +

성능은 광범위한 주제입니다. 본 문서는 Firefox OS가 어떻게 설계 및 최적화되어 있는지의 관해 대략적인 개요를 설명합니다. 그리고 개발자가 자신의 코드 성능을 향상시키는 데 사용할 수있는 도구와 프로세스를 소개합니다.

+

성능이란 무엇인가요?

+

성능은 전적으로 사용자에 의해 인식됩니다. 사용자가 터치, 이동, 대화를 통해 시스템에 입력 정보를 제공할때 그 대가로 사용자는 시각적, 촉각 적, 청각 적 피드백 방식에 의해 출력 정보를 받습니다. 성능은 그 입력에 대한 응답의 출력 품질입니다.

+

유저 인식 성능(이 다음부터는 UPP라 부릅니다) 대신 다른 목적으로 최적화된 코드는 여러가지 타겟을 동등하게 최적화된 코드와 비교해서 떨어질수밖에 없습니다. 사용자는 프로세싱 성능이 떨어져도 응답성이 좋고 부드러운 응용 프로그램들을 선호합니다. 예를 들자면, 사용자들은 응답성이 좋으면서 부드럽지만 초당 1,000개의 데이터베이스 트렌젝션 처리를 하는 앱을 응답성이 좋지 않고 부드럽지 않지만 초당 100,000,000개의 데이터베이스 트렌젝션 처리를 하는 앱보다 선호할 것입니다.

+

당연히 데이터베이스 초당 트렌젝션 수같은 성능을 빠르게 처리하는게 의미가 없다는게 아닙니다; 그런건 당연히 의미가 있죠. 저희가 말하려는건 이런 것에 주를 두지 말고, UPP를 개선하는데 주를 둬야 한다는 것입니다.

+

성능에 관한 주요 지표는 여러 가지가 있습니다. 첫번째로 "응답성 (responsiveness)"입니다. 응답성은 단순히 사용자의 입력에 대한 시스템 출력(복수가 될 수도 있습니다)의 반환 속도입니다. 예를 들어 사용자가 스크린을 누를 때 사용자들은 픽셀에 어떤 변화가 일어난다고 생각합니다. 이 경우에는 "탭"제스처에서 픽셀이 변경 될 때까지 걸린 시간이 응답성의 지표가 됩니다.

+

응답성은 자주 여러 단계의 피드백을  필요로합니다. 응용 프로그램의 시작은 특히 중요한 사례 중 하나이며, 이에 대해서는 나중에 자세히 설명합니다.

+

응답성은 간단히 아무도 무시되는걸 원하지 않는다는 단순한 이유 때문에 중요합니다. 사용자가 입력을 한 후에 시스템이 반응하기까지의 시간은 유저가 무시되는 시간입니다. 무시되는 것은 짜증과 화를 유발합니다.

+

다음으로 중요한 지표는 "프레임 레이트"입니다. 프레임 레이트란 시스템이 사용자에게 표시하는 픽셀을 변경하는 속도입니다. 이것은 흔한 컨셉이고 모두가 좋아합니다. 예를 들어 모든 사람은  초당 60 프레임 레이트를 보여주는 게임은 이유를 설명 할 수 없어도 초당 10 프레임 레이트를 보여주는 게임보다 더 선호할 것입니다.

+

프레임 레이트는 "서비스의 질"의 지표로서 중요합니다. 컴퓨터의 디스플레이는 전자를 움직여서 현실을 모사하여 사용자들의 눈을 속이도록 디자인되어 있습니다. 예를 들자면, 문서 리더의 디스플레이는 실제 종이의 선명한 텍스트에 반사되는 빛과 같은 패턴으로 사용자의 망막에 닿는 빛을 생성하도록 설계된 디스플레이 픽셀을 만들어 텍스트를 표시합니다.

+

현실에서는 동작은 "연속적입니다" (저희 두뇌가 알려주는 바에 따르면요); it's not jerky and discrete, but rather "updates" smoothly. (Strobe lights are fun because they turn that upside down, starving our brains of inputs to create the illusion of discrete reality.) On a computer display, a higher framerate simply allows the display to imitate reality more faithfully.

+

(흥미로운 점은 인간은 보통 60Hz 이상의 프레임 레이트를 구분하지 못한다는 것입니다. 그렇기 때문에 대부분의 현대의 전자식 디스플레이들은 60Hz로 디자인 되어 있습니다. 예를 들자면 TV 스크린은 벌새에게는 비자연스럽고 끊기는 것처럼 보일 것입니다.)

+

Memory usage is another key metric. Unlike responsiveness and framerate, users don't directly perceive memory usage. However, memory usage is a close approximation to "user state". An ideal system would maintain 100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application. (Application state is stored in computer memory, which is why the approximation is close.)

+

An important corollary of this is contrary to popular belief: a well-designed system should not be optimized to maximize the amount of free memory. Memory is a resource, and free memory is a unused resource. Rather, a well-designed system should be optimized to use as much memory as possible in service of maintaining user state, while meeting other UPP goals.

+

Optimizing a system to use memory doesn't mean it should waste memory. Using more memory than is required to maintain some particular user state is wasting a resource that could be used to retain some other user state.

+

In reality, no system can maintain all user state. Intelligently allocating memory to user state is an important concern that's discussed in more detail below.

+

The final metric discussed here is power usage. Like memory usage, users don't directly perceive power usage. Users perceive power usage indirectly by their devices being able to maintain all other UPP goals for a longer duration. In service of meeting UPP goals, the system must use only the minimum amount of power required.

+

The remainder of this document will discuss performance in terms of these metrics.

+

폴랫폼 성능

+

이 부분은 Firefox OS가 응용 프로그램 아래서 보통 어떻게 성능을 향상시키기 위해 공헌하는지에 대한 간략적 요약입니다. 앱 개발자나 유저의 입장에서 "이 폴랫폼이 저를 위해서 뭘 해줄수 있나요?" 라는 질문에 대한 대답입니다.

+

This section assumes the reader is familiar with the basic conceptual design of Firefox OS.

+

Firefox OS is optimized for applications built with web technologies, HTML/CSS/JavaScript and so on. Except for a handful of basic system services, all the code that runs in Firefox OS is web applications and the Gecko engine. Even the operating system window manager is written in HTML/CSS/JS.

+

Because the core operating system is built with the same web technologies that applications are built with, the performance of those technologies is critical. There's no "escape hatch". This greatly benefits developers because all the optimizations that enable a performant OS window manager, for example, are available to third-party applications as well. There's no "magic performance sauce" available only to preinstalled code.

+

The web platform provides many tools, some better suited for particular jobs than others. All application logic is written in JavaScript. For displaying graphics, developers can choose between the high-level declarative languages of HTML/CSS, or use low-level imperative interfaces offered by the canvas element.

+

HTML과 CSS는 생산성을 크게 증가시킵니다, pixel-level control over rendering or a few frames per second. Text and images are reflowed automatically, the system theme is applied to UI elements by default, and "built-in" support is provided for some use cases developers may not think about initially, like different-resolution displays or right-to-left languages.

+

The canvas element offers a pixel buffer directly to developers to draw on. This gives pixel-level control over rendering and precise control of framerate to developers. But it comes at the expense of extra work needed to deal with multiple resolutions and orientations, right-to-left languages, and so forth. Developers draw to canvases using either a familiar 2D drawing API, or WebGL, a "close to the metal" binding that mostly follows OpenGL ES 2.0.

+

(Somewhere "in between" HTML/CSS and canvas is SVG, which is beyond the scope of this document.)

+

The Gecko JavaScript engine supports just-in-time (JIT) compilation. This enables application logic to perform comparably to other virtual machines, such as Java virtual machines, and in some cases close to "native code".

+

The graphics pipeline in Gecko underlying HTML/CSS and canvas is optimized in several ways. The HTML/CSS layout and graphics code in Gecko minimizes invalidation and repainting for common cases likes scrolling; developers get this support "for free". Pixel buffers painted by both Gecko "automatically" and applications to canvas "manually" minimize copies when being drawn to the display framebuffer. This is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. Complex scenes are rendered using the device's GPU for maximum performance. To improve power usage, simple scenes are rendered using special dedicated composition hardware, while the GPU idles or turns off.

+

Fully static content is the exception rather than the rule for rich applications. Rich applications use dynamic content with animations, transitions, and other effects. Transitions and animations are particularly important to applications. Developers can use CSS to declare even complicated transitions and animations with a simple, high-level syntax. In turn, Gecko's graphics pipeline is highly optimized to render common animations efficiently. Common-case animations are "offloaded" to the system compositor, which can render them both performantly and power efficiently.

+

The runtime performance of applications is important, but just as important is their startup performance. Firefox OS improves startup experience in several ways.

+

Gecko is optimized to load a wide variety of content efficiently: the entire Web! Many years of improvements targeting this content, like parallel HTML parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc, translate just as well to improving web applications on Firefox OS. The content is written using the same technologies.

+

Each web application has its own instance of the Gecko rendering engine. Starting up this large, complicated engine is not free, and because of that, Firefox OS keeps around a preallocated copy of the engine in memory. When an app starts up, it takes over this preallocated copy and can immediately begin loading its application resources.

+

Applications "start" most quickly when they're already running. To this end, Firefox OS tries to keep as many applications running in the background as possible, while not regressing the user experience in foreground applications. This is implemented by intelligently prioritizing applications, and discarding background applications according to their priorities when memory is low. For example, it's more disruptive to a user if their currently-playing music player is discarded in the background, while their background calculator application keeps running. So, the music player is prioritized above the calculator automatically by Firefox OS and the calculator is discarded first when memory is low.

+

Firefox OS prevents applications that are running in the background from impacting the user experience of foreground applications through two mechanisms. First, timers created by background apps are "throttled" to run at a low frequency. Second, background applications are given a low CPU priority, so that foreground applications can get CPU time when they need it.

+

In addition to the above, Firefox OS includes several features designed to improve power usage that are common to mobile operating systems. The Firefox OS kernel will eagerly suspend the device for minimal power usage when the device is idle. Relatedly, ICs like the GPU, cellular radio, and Wifi radio are powered down when not being actively used. Firefox OS also takes advantage of hardware support for media decoding.

+

응용 프로그램 성능

+

This section is intended for developers asking the question: "how can I make my app fast"?

+

시작 시간 성능

+

Application startup is punctuated by three user-perceived events, generally speaking. The first is the application "first paint": the point at which sufficient application resources have been loaded to paint an initial frame. Second is when the application becomes interactive; for example, users are able to tap a button and the application responds. The final event is "full load", for example when all the user's albums have been listed in a music player.

+

The key to fast startup is to keep two things in mind: UPP is all that matters, and there's a "critical path" to each user-perceived event above. The critical path is exactly and only the code that must run to produce the event.

+

For example, to paint an application's first frame that comprises visually some HTML and CSS to style that HTML, (i) the HTML must be parsed; (ii) the DOM for that HTML must be constructed; (iii) resources like images in that part of the DOM have to be loaded and decoded; (iv) the CSS styles must be applied to that DOM; (v) the styled document has to be reflowed. Nowhere in that list is "load the JS file needed for an uncommon menu"; "fetch and decode the image for the High Scores list"; etc. Those work items are not on the critical path to painting the first frame.

+

It seems obvious, but to reach a user-perceived startup event more quickly, the main "trick" is to just not run code that's off the critical path. Alternatively, shorten the critical path by simplifying the scene.

+

The web platform is highly dynamic. JavaScript is a dynamically-typed language, and the web platform allows loading code, HTML, CSS, images, and other resources dynamically. These features can be used to defer work at startup that's off the critical path, by loading the unnecessary content "lazily" some time after startup.

+

Another problem that can delay startup is idle time, caused by waiting on responses to requests like database loads. To avoid this problem, applications can "front load" the work by issuing requests as early as possible in startup. Then when the data is needed later, it's hopefully already been fetched and the application doesn't need to wait.

+

Relatedly, it's important to separate network requests for dynamic data from static content that can be cached locally. Locally-cached resources can be loaded much more quickly than they can be fetched over high-latency and lower-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Caching resources locally is also the only way applications can be used when "offline". Firefox OS allows applications to cache resources by either being "packaged" in a compressed ZIP file or "hosted" through HTML5 appcache. How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; appcache is slower.

+

A few other hints are listed below:

+ +

프레임레이트

+

The first important consideration for achieving high framerate is to select the right tool for the job. Mostly static content that's scrolled and infrequently animated is usually best implemented with HTML/CSS. Highly dynamic content like games that need tight control over rendering, and don't need theming, is often best implemented with canvas.

+

For content drawn using canvas, it's up to the developer to hit framerate targets: they have direct control over what's drawn.

+

For HTML/CSS content, the path to high framerate is to use the right primitives. Firefox OS is highly optimized to scroll arbitrary content; this is usually not a concern. But often trading some generality and quality for speed, such as using a static rendering instead of a CSS radial gradient, can push scrolling framerate over a target. CSS media queries allow these compromises to be restricted only to devices that need them.

+

Many applications use transitions or animations through "pages", or "panels". For example, the user taps a "Settings" button to transition into an application configuration screen, or a settings menu "pops up". Firefox OS is highly optimized to transition and animate scenes that

+ +

Transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently.

+

To help diagnose low framerates, see the section below.

+

메모리와 전원 사용량

+

Improving memory and power usage is a similar problem to speeding up startup: don't do unnecessary work; use efficient data structures; lazily load uncommonly-used UI resources; ensure resources like images are optimized well.

+

Modern CPUs can enter a lower-power mode when mostly idle. Applications that constantly fire timers or keep unnecessary animations running prevent CPUs from entering low-power mode. Power-efficient applications don't do that.

+

When applications are sent to the background, a visibilitychange event is fired on their documents. This event is a developer's friend; applications should listen for it. As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes. Applications that drop as many loaded resources as possible when sent to the background will use less memory and be less likely to be discarded. This in turn means they will "start up" faster (by virtue of already being running) and have better UPP.

+

Similarly, applications should prepare for the case when they + + are + discarded. To improve user-perceived memory usage, that is to say, making the user feel that more of their state is being preserved, applications should save the state needed to return the current view if discarded. If the user is editing an entry, for example, the state of the edit should be saved when entering the background.

+

성능을 측정하고 문제를 분석하기

+

성능을 측정하고 문제를 분석하기 전에, 이걸 기억하세요:

+
+
+  
+
+ 절대. 기기. 위에서. 테스트. 하세요.
+
+  
+
+

A great strength of the web platform is that the same code written for "desktop" web browsers runs on Firefox OS on mobile devices. Developers should use this to improve productivity: develop on "desktops", in comfortable and productive environments, as much as possible.

+

But when it comes time to test performance, mobile devices must be used. Modern desktops can be more than 100x more powerful than mobile hardware. The lower-end the mobile hardware tested on, the better.

+

With that caveat, the sections below describe tools and processes for measuring and diagnosing performance issues.

+

성능을 측정하기

+

Firefox OS comes built-in with some convenient and easy-to-use tools that, when used properly, can be used to quickly measure performance. The first tool is the "framerate monitor". This can be enabled in the Firefox OS Settings application.

+

The framerate monitor continuously reports two numbers. The values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, both numbers are "guesses". The left number is the "composition rate": the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.

+

Screenshot of fps counter

+

The rightmost number is the "layer transaction rate", the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.

+

Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time described above. This "time-to-load" tool can be enabled using the Settings application. The value shown by the tool is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.

+

Screenshot of enabling ttl

+

For accurately measuring both startup times and responsiveness, a high-speed camera is indispensable. "High-speed" means that the camera can record 120 frames per second or above. The higher the capture rate, the more accurate the measurements that can be made. This may sound like exotic technology, but consumer models can be purchased for a few hundred US dollars.

+

Link to example video of high-speed capture that I can't upload

+

The measuring process with these cameras is simple: record the action to be studied, and then play back the capture and count the number of frames that elapse between the input (say, a tap gesture) and the desired output (pixels changing in some way). Divide the number of counted frames by the capture rate, and the resulting number is the measured duration.

+

Mozilla built an automated tool called Eideticker which operates on the same principle as described above. The difference is that Eideticker uses synthetic user input events and HDMI capture to measure durations. The code is available and can be used with any device with an HDMI output.

+

Measuring power can be more difficult. It's possible to jury-rig measurement apparatus with a soldering iron, but a good approximation of power usage can be gathered by observing CPU load. Simple command-line tools like |top| allow monitoring CPU usage continuously.

+

In general, when measuring performance, don't be proud! "Primitive technology" like a stopwatch or logging, when used effectively, can provide eminently usable data.

+

성능 문제를 분석하기

+

If performance measurements show an application is below its targets, how can the underlying problem be diagnosed?

+

The first step of any performance work is to create a reproducible workload and reproducible measurement steps. Then gather baseline measurements, before any code changes are made. It seems obvious, but this is required to determine whether code changes actually improve performance! The measurement process selected isn't too important; what's important is that the process be (i) reproducible; (ii) realistic, in that it measures what users will perceive as closely as possible; (iii) precise as possible; (iv) accurate as possible. Even stopwatch timings can fit this spec.

+

Firefox OS includes two built-in tools for quickly diagnosing some performance issues. The first is a render mode called "paint flashing". In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.

+

Enable paint flashing

+

Paint flashing after scrolling down from previous image

+

The second tool is called "animation logging", and can also be enabled in Settings. This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded.

+

Enable animation logging

+

Start of animation not offloaded

+
I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+
+

End of animation not offloaded

+
+

A common pitfall is to animate left/top/right/bottom properties instead of using CSS transforms to achieve the same effect. For a variety of reasons, the semantics of transforms make them easier to offload, but left/top/right/bottom are much more difficult. Animation logging will report this.

+
+

These tools can help quickly assess a performance problem, but they often show only what developers should be "looking for": hints at deeper problems. When more information is required, the Gecko Profiler can be used. A full description of the profiler is beyond the scope of this document; see [here]. Briefly, the profiler shows mixed JavaScript/C++ "samples" of what all Firefox OS processes are doing over a rolling time interval. Developers can use these profiles to see what their code and Gecko itself are doing. Warnings are built into the profiler UI for many common pitfalls like excessive garbage collection (caused by creating too many JS objects), and forcing "synchronous reflows". Sync reflows are bad because Gecko is optimized to do expensive work like reflows in big batches, when needed. Forced reflows throw off this "schedule", and can cause more work to be done than necessary.

+

Similarly, advanced users may wish to use a whole-system profiler like the linux |perf| tool. This is mostly useful for platform engineers, though.

+

As with measuring performance, don't be proud about tools used to diagnose it! A few well-placed Date.now() calls with logging can often provide a quick and accurate answer.

+

Finally, the only way to keep improving performance is to not regress it. The only way to not regress performance is to test it, preferably with automated tests. A full discussion of that topic is beyond the scope of this document, though.

+

파리 Firefox OS 성능 & 최적화 워크샵, 3월 4 - 8일, 2013

+

To illustrate these concepts here are some videos and slides from the Paris Workshop dedicated to performances and optimizations.

+

파트 1: Technical basics and more (Gabriele & Thomas)

+ +

파트 2: Performances in a UX point of view (Josh)

+

파트 3: Performances measurement & automation (Julien & Anthony)

diff --git "a/files/ko/archive/b2g_os/\354\225\261_\352\264\200\353\246\254\354\236\220_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" "b/files/ko/archive/b2g_os/\354\225\261_\352\264\200\353\246\254\354\236\220_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" new file mode 100644 index 0000000000..392a32866e --- /dev/null +++ "b/files/ko/archive/b2g_os/\354\225\261_\352\264\200\353\246\254\354\236\220_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" @@ -0,0 +1,247 @@ +--- +title: 앱 관리자 사용하기 +slug: Archive/B2G_OS/앱_관리자_사용하기 +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

앱 관리자는 Firefox 데스크톱에서 제공하는 새로운 도구로, Firefox OS phone과 Firefox OS 시뮬레이터에서 HTML5 웹앱을 테스트, 배치, 디버그할 수 있도록 돕는 여러 도구들을 브라우저에서 직접 제공합니다.

+
+ +

+ +

앱 관리자는 다음과 같이 구성되어 있습니다:

+ + + +

빠른 설정:

+ +

이 섹션에서는 가능한한 빠르게 준비하는 법을 다룹니다. 보다 자세한 내용은 장치 및 시스템 설정 섹션으로 넘어가십시오. 그리고 문제가 있을 경우 Troubleshooting 섹션을 읽어보세요.

+ +
    +
  1. Firefox 데스크톱 26 이상을 설치했는지 확인하세요.
    2. +
  2. 앱 관리자를 엽니다. (URL바에 about:app-manager을 입력합니다)
    3. +
  3. 실제 장치가 없는 경우: +
      +
    1. Firefox OS 시뮬레이터를 설치합니다.
      2. +
    2. 앱 관리자의 아래쪽 툴바에서 시뮬레이터 시작을 클릭하고 뒤이어 표시되는 설치된 시뮬레이터의 이름을 클릭합니다.
      3. +
    +
    4. +
  4. 실제 장치가 있는 경우: +
      +
    1. 장치가 Firefox OS 1.2 이상을 구동중인지 확인하세요.
      2. +
    2. Windows의 경우, 폰 제조사에서 제공하는 드라이버의 설치를 확인하세요. 
      3. +
    3. 장치의 설정에서 화면 잠금을 비활성화하고 (Settings > Screen Lock) 원격 디버깅을 활성화합니다(Settings > Device information > More information > Developer).
      4. +
    4. Firefox Desktop에 ADB Helper 추가기능을 설치합니다.
      5. +
    5. USB케이블로 장치와 컴퓨터를 연결하세요.
      6. +
    6. 앱 관리자 하단에 장치의 이름이 나타나면 클릭합니다.
      7. +
    +
    5. +
  5. 하단 바에 "xxx에 연결됨"이 표시됩니다.
    6. +
  6. 앱 패널을 클릭해 앱을 추가합니다(패키지 또는 hosted).
    7. +
  7. The Refresh button validates your app and installs it on the Simulator/Device
    8. +
  8. The Debug button connects the developer tools to the running app
    9. +
  9. 문제가 발생한다면 Troubleshooting섹션을 참조하세요.
    10. +
+ +

장치 및 시스템 설정

+ +

앱 관리자를 사용할 때 가장 처음 해야할 일은 여러분의 시스템과 폰이 제대로 설정되었는지 확인하는 것입니다. 이 섹션에서 필요한 단계들을 알아보겠습니다.

+ +

Firefox 1.2 이상 필요

+ +

장치가 Firefox OS 1.2/Boot2Gecko 1.2 또는 그 이상을 구동중인지 확인하세요. 장치의 Firefox OS 버전을 확인하려면 Settings > Device Information > Software로 이동하십시오.

+ +

If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.

+ +

Builds available:

+ +

Geeksphone Keon/Peak builds (to find out more about using these, read Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone)

+ +

More to follow

+ +

To build your own Firefox OS 1.2+ distribution, follow the instructions located at Building and installing Firefox OS, starting with Firefox OS build prerequisites.

+ +

원격 디버깅(Remote debugging)

+ +

Next, you need to enable remote debugging in Firefox OS. To do so, go to Settings > Device information > More information > Developer and check the Remote Debugging checkbox.

+ +

ADB or ADB helper

+ +

The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:

+ +

Let Firefox handle ADB (recommended). Install the ADB Helper add-on, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the adb forward command: everything is handled by the add-on.

+ +

ADB Helper 확장기능 다운로드

+ +

Use ADB manually. You need to have it installed on your computer - download and install adb (see the Get the Android SDK) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal:Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.

+ +
+

Note: ADB Helper 확장기능을 설치했다면 이 명령을 실행할 필요가 없습니다.

+
+ +

Connecting your device to the App Manager

+ +

With all your configuration done, it's now time to plug your device into your computer and start the App Manager:

+ +
    +
  1. Plug the device into your computer via USB.
    2. +
  2. Disable Screen lock on your device by going to Settings > Screen Lock and unchecking the Lock Screen checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.
    3. +
  3. Start the App Manager — In Firefox Desktop select the Tools > Web Developer > App Manager menu option, or type about:app-manager in the URL bar.
    4. +
  4. At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.
    5. +
  5. If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.
    6. +
+ +

+ +
+

Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the Enable port forwarding section, above.

+
+ +

Firefox OS 시뮬레이터 추가기능 사용하기

+ +

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the appropriate simulator for your operating system:

+ +

시뮬레이터 설치하기

+ +
+

앞으로 더 많은 것들이 등장하겠지만, 지금은 Firefox OS 1.2 시뮬레이터만 이용할 수 있습니다.

+
+ +

Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:

+ + + +

앱 패널

+ +

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:

+ + + +

Information about your app should appear on the right hand side of the window, as seen below:

+ +

+ +

Manifest 편집기

+ +

From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:

+ +

+ +

Debugging

+ +

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

+ +

+ +
+

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

+
+ +

Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:

+ +

+ +

Errors

+ +

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

+ +

+ +

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

+ +

Device panel

+ +

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

+ +

+ +
+

Note: Certified Apps are not listed by default. See how to debug certified apps.

+
+ +

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

+ +

+ +

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

+ +

Debugging Certified Apps

+ +

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

+ +
    +
  1. +

    On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    + + 
    adb shell
    + +

    Your prompt should change to root@android.

    +
    2. +
  2. +

    Next, stop B2G running using the following command:

    + + 
    stop b2g
    +
    3. +
  3. +

    Navigate to the following directory:

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Here, update the prefs.js file with the following line:

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    After you've finished editing and saving the file, start B2G again using the following command:

    + + 
    start b2g
    +
    6. +
  6. +

    Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

    +
    7. +
  7. +

    Next, reconnect to the App Manager and you should see certified apps appear for debugging.

    +
    8. +
+ +
+

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

+
+ +

Troubleshooting

+ +

장치가 인식되지 않을 경우:

+ + + +

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

diff --git a/files/ko/archive/css3/index.html b/files/ko/archive/css3/index.html new file mode 100644 index 0000000000..b884c02e7c --- /dev/null +++ b/files/ko/archive/css3/index.html @@ -0,0 +1,582 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +

CSS3는 Cascading Style Sheets(CSS) 언어의 가장 최신 버전이고 CSS2.1을 상속하는 것을 목표로  합니다.  CSS3는 개발자들이 오랫동안 기다려온 새로운 기능들을 지원하게 되었습니다. 다중열(multi-columns), 유동적인 상자(flexible box), 격자 배치(grid layouts) 뿐만 아니라 둥그런 모서리(rounded corners), 그림자( shadows) , 부드러운 색의 변이(gradients) , 변이(transitions), 움직임(animations) 등도 지원합니다. 실험적인 부분(experimental parts)은 브라우저 공급자(vender)의 구현에 따라 다를 수 있고 미래에 문법이나 의미가 변할 수 있습니다. 따라서 환경에 따라 해당 스펙을 사용하는 것을 피하거나, 사용하더라도 매우 신중히 사용해야합니다.  

+ +

모듈과 표준화 과정(Modules and the standardization process)

+ +

2002년 8월부터 2011년 6월까지 CSS Level2가 권장(Recommendation)단계에 이르기 까지 총 9년이 걸렸습니다. 이는 몇몇 부차적인 기능들이 전체 명세(specification)의 진행을 더디게 만들었기 때문입니다. W3C의 CSS Working Group은 문제를 일으키는 몇몇 기능을 제외한 나머지 기능들의 표준화 작업을 보다 빠르게 진행하기 위하여 Beijing doctrine에 따라 CSS를 보다 작은 컴포넌트 단위로 나눴고, 이를 모듈(module)이라 부릅니다. 현재 각각의 모듈은 서로 독립적으로 표준화 과정을 거치고 있습니다. 이미 몇몇 모듈은 W3C Rocommendations 에 이르렀으나, 나머지는 여진히 Working Drafts 단계에 머물러 있습니다. 또한 새로운 요구사항(needs)이 발생할 때 마다 계속해서 새로운 모듈이 추가되고 있습니다.

+ +

CSS Modules and Snapshots as defined since CSS3 공식적으로 CSS3 자체 표준은 존재하지 않습니다. 각각의 모듈이 독립적으로 표준화 되고 있고, 표준 CSS는 모듈을 통해 CSS2.1을 수정하여 상속(extends)하는 것으로 구성되어있서 항상 같은 level number를 갖는 것은 아닙니다. 특정 시점의 CSS2.1과 완성된 모듈들로 구성된 CSS표준 스냅샷을 정의할 수 있습니다. W3C는 주기적으로 이런 스냅샷을 발표하고 있습니다. (2007 / 2010)

+ +

아직까지 lever 3보다 높은 level을 가진 모듈은 없지만 곧 생길 것입니다. Selector 4나 CSSborder 4, Background 4와 같은 몇몇 모듈은 Working Draft가 공개된적은 없지만 이미 Editor's Draft는 작성되어 있습니다.

+ +

 

+ +

CSS 모듈의 상태(CSS modules status)

+ +

안정적인 모듈(Stable modules)

+ +

몇개의 모듈은 이미 상당히 안정적이고, CSSWG의 recommendation 3단계(Candidate Recommendation, Propesed Recommendation, Recommendation) 중 하나에 도달했습니다. 이 모듈들은 별도의 과정없이도 꽤 안정적으로 사용할 수 있습다. 하지만 몇몇 기능은 여전히 Candidate Recommendation 단계에 머물러 있습니다.

+ +

모듈들은 명세(spec)의 핵심이 되는 CSS2.1을 수정, 상속하고 있습니다. 이것을 포함한 모듈들이 CSS3 명세의 스냅샷이 됩니다.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} since June 7th, 2011
+

{{ cssxref("opacity") }} 프로퍼티(property)와 {{cssxref("<color>")}} 밸류를 생성하기 위한 the hsl(), hsla(), rgba(), rgb() 함수를 추가합니다. 또한 the currentColor keyword로 유효한 색상을 얻을 수 있습니다.

+ +

alpha channel의 지원으로 rgba(0,0,0,0.0)의 별칭인 transparent를 사용할 수 있습니다.

+ +

 더이상 사용해선 안되는 system-color 키워드를 deprecates 합니다.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} since September 29th, 2011
+

다음이 추가되었습니다.

+ +
    +
  • attribute와 일치하는 부분문자열 selector : E[attribute^="value"] , E[attribute$="value"] , E[attribute*="value"] .
    • +
  • 새로운 pseudo-class : {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • +
  • Pseudo-elements는 콜론을 하나가 아니라 둘을 사용하도록 함 : :after 가  {{ cssxref("::after") }}로, :before 가 {{ cssxref("::before") }}로, :first-letter 가 {{ cssxref("::first-letter") }}로, :first-line 가 {{ cssxref("::first-line") }}로 바뀌었음.
    • +
  • 새로운 general sibling combinator ( h1~pre ).
    • +
+
+ +

아직 Working Draft로 공개되진 않았지만, 셀렉터 명세의 다음 버전이 이미 진행중입니다.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
+

CSS qualified name의 개념을 정의하여 XML Namespaces에 대한 지원이 추가됩니다.  이를 위해 ' | ' 문법을 사용하고 {{ cssxref("@namespace") }} CSS at-rule을 더합니다.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012
+

이전의 media type ( print, screen, … )을 only screen and (color)와 같이 디바이스의 media capabilities에 대한 질의가 가능한 full language로 확장합니다.

+ +

미디어 쿼리는 CSS 문서에서만 사용되는 것이 아니라 {{ HTMLElement("link") }}의 {{ htmlattrxref("media","link") }}어트리뷰트와 같이 일부 HTML 엘리먼트에서도 사용할 수 있습니다. .

+
+ +

사용자 에이전트의 입력 메소드에 대해 잘 맞는 웹사이트를 제작할 수 있게 해줄  이 명세의 다음 버전이 진행중입니다. hover나 pointerd와 같은 새로운 미디어 기능을 포함하고 있습니다. script media features를 이용해 EcmaScript에서도 감지할 수 있도록 제안되었습니다.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} since November 7th, 2013
HTML style 전역 특성(global attribute)의 내용(contents)에 관한 문법을 공식적으로 정의합니다.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

다음이 추가되었습니다. 

+ +
    +
  • uri() 를 통해 정의된 이미지 뿐 아니라 모든 종류의 {{cssxref("<image>")}}에 backgrounds를 지원.
    • +
  • 다중 background 이미지를 지원.
    • +
  • {{ cssxref("background-repeat") }}의 밸류로 space 와 round가 추가.
    • +
  • The {{ cssxref("background-attachment") }} local value.
    • +
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }},  {{ cssxref("background-clip") }} 프로퍼티
    • +
  • CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }},{{ cssxref("border-bottom-right-radius") }} 프로퍼티를 통해 곡선 형태의 테투리를 지원.
    • +
  •  CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} 프로퍼티를 이용해 {{cssxref("<image>")}}를 테두리로 사용할 수 있음.
    • +
  •  CSS {{ cssxref("box-shadow") }} 프로퍼티를 이용해 엘리먼트에 그림자 효과 부여 가능.
    • +
+
+ +

 아직 Working Draft의 초안이 공개되진 않았지만 CSS4 Backgrounds 와 Borders 명세의 다음 버전이 이미 진행중입니다. 테두리를 잘라내는 기능(CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}와 {{ cssxref("border-clip-left") }} 프로퍼티를 사용)이나 테투리의 모서리 모양을 조절하는 기능 (CSS {{ cssxref("border-corner-shape") }} 프로퍼티를 사용)을 추가할 계획입니다.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }},  {{ cssxref("break-inside") }}를 이용해 쉽게 다중 열 레이아웃을 만들 수 있습니다.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
청각 포맷 모델과 사용자 에이전트의 speech-rendering에 특화된 수많은 프로퍼티를 내용으로 하는 speech 미디어 타입을 정의합니다. 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

{{cssxref("<image>")}} 데이터 타입을 정의합니다.

+ +

미디어 프래그먼트를 이용해 이미지를 자를 수 있도록 url() 을 상속합니다.

+ +

다음이 추가되었습니다 :

+ +
    +
  • {{cssxref("<resolution>")}} 데이터 타입에 대한 단위인 dppx.
    • +
  • url로 부터 이미지를 정의하는 데 있어 url() 보다 더 유연한 image() 함수.
    + 주의  : 브라우저의 불충분한 지원으로  image() 함수의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.
    • +
  • linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()을 지원.
    • +
  • CSS {{ cssxref("object-fit") }} 프로퍼티를 이용해 교체된 엘리먼트가 어떻게 맞춰져야할지 정의할 수 있음.
    + 주의  : 브라우저의 불충분한 지원으로  {{ cssxref("object-fit") }}의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다. 
    • +
  • CSS {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }} 프로퍼티를 이용해 외부 이미지의 방향과 해상도를 오버라이드 할수 있음
    + 주의  : 브라우저의 불충분한 지원으로   {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }}의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다. 
    • +
+
+ +

CSS Image Level 3를 대체할  CSS Image Values 와 Replaced Content Level 4 는 현재 개발중에 있고 {{Spec2("CSS4 Images")}} 입니다.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

initial 키워드와 inherit 키워드를 모든 CSS 프로퍼티에 대해 사용할 수 있습니다.

+ +

문법적 토큰과 원문의 정도(Precision)의해 암묵적으로 정의했던 CSS2.1의 CSS 데이터 타입을 공식적으로  정의합니다. 

+ +

다음이 추가되었습니다 :

+ +
    +
  • 폰트에 상대적인 길이 단위에 대한 정의 : rem , ch .
    • +
  • 뷰포트에 상대적인 길이 단위에 대한 정의: vw, vh, vmax, vmin .
    • +
  • 절대 길이 단위의 실제 사이즈에 대한 정도(Precision). 절대 길이는 실제로는 '절대치'가 아니며 reference pixel에 대하여 상대적으로 정의.
    • +
  • {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}에 대한 정의.
    • +
  •  {{cssxref("<color>")}}, {{cssxref("<image>")}}, {{ cssxref("<position>") }}의 정의에 대한 규범적인 밸류.
    • +
  • {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}에 대한 정의와 toggle()의 표기법
    + 주의 :브라우저의 불충분한 지원으로   calc(), attr(), ooggle() 표기법의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.
    • +
+
+ +

 <ident> ,<custom-ident>같은 몇몇 정의는 CSS Values and Units Module Level 4로 미뤄졌습니다..

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
CSS {{ cssxref("display") }} 프로퍼티에 flexbox layout과 이것을 제어할 몇몇 새 CSS 프로퍼티가 추가되었습니다 : {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
스타일 시트의 몇몇 부분을 특정 조건하에 처리하기 위한 기능이 추가되었습니다. 스타일시트가 적용될 문서나 브라우저의 능력에 따라 작동하게 됩니다{{ cssxref("@media") }}의 하위에 들여쓰기된 앳-룰(at-rule)을 사용할 수 있고, 새로운 CSS 앳-룰인 {{ cssxref("@supports") }}와 새 DOM 메소드인 {{domxref("CSS.supports()")}}가 추가되었습니다.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text-decoration", "", "") }}{{ Spec2("CSS3 Text-decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Precises:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Precises how charsets are determined; minor changes in parsing and tokenization algorithms.
+ +

Modules in the refining phase

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX() ,rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. +

Adds:

+ +
    +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ +

Modules in the revising phase

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ +

Modules in the exploring phase

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}{{ Spec2("CSS3 Exclusions and Shapes") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ +

 

diff --git a/files/ko/archive/index.html b/files/ko/archive/index.html new file mode 100644 index 0000000000..b2d6f1116d --- /dev/null +++ b/files/ko/archive/index.html @@ -0,0 +1,21 @@ +--- +title: 쓸모 없는 구식 문서들 +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.

+ +

There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should not be used for building new Web sites or apps for modern browsers. It's here for historical reference only.

+ +
+

Note to writers: We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are extremely obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the MDN Web Docs chat room before moving content here.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/ko/archive/mdn/index.html b/files/ko/archive/mdn/index.html new file mode 100644 index 0000000000..9e550840e3 --- /dev/null +++ b/files/ko/archive/mdn/index.html @@ -0,0 +1,20 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +

{{MDNSidebar}}

+ +
+

Obsolete
+ This documentation is obsolete.

+
+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

{{LandingPageListSubpages}}

diff --git a/files/ko/archive/meta_docs/index.html b/files/ko/archive/meta_docs/index.html new file mode 100644 index 0000000000..dcca5c09ac --- /dev/null +++ b/files/ko/archive/meta_docs/index.html @@ -0,0 +1,15 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +

Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.

+

+
Article page layout guide
An article is any page that explains or teaches something. These are non-reference pages which are also not landing pages. In general, if a page is primarily prose and/or sample code, it's an article.
Blog posts to integrate into documentation
Often, Mozilla developers and community members write blog posts. And often, those blog posts are really, really awesome. And, often, those blog posts include information that really ought to be included on MDN. Sometimes, it's the entire blog post that could be adapted into a tutorial on MDN (but please check with the author first, unless they're known to have given blanket permission!), and other times, there are just details about changes to Firefox or web technologies that we need to be sure are reflected in the right places in the docs.
Current events
Custom CSS classes for MDN
The following are the custom CSS classes that we have defined for the Devmo wiki. If, for whatever reason, you need a custom class defined in the CSS for this wiki, feel free to contact the documentation team lead.
Design Document
DevEdge
This is a temporary Index of the content that has been migrated from DevEdge to this wiki. The original list and mirror are linked below.
Developer documentation process
In order to improve the quality of our documentation, and our ability to coordinate among the various members of the Mozilla documentation community, we have a process by which documentation is maintained. This article describes how this works and offers useful links to help you ensure that the work you do is as helpful and useful as possible to the community of Web and Mozilla developers.
Disambiguation
Disambiguation in the MDC wiki is the process of resolving ambiguity, referring to the conflicts that occur when articles about two or more different topics have the same "natural" title.
Documentation planning and tracking
We are in the process of trying to use scrumbugs to track documentation from the point at which the bug is filed through prioritization, assignment to a writer, and eventual completion. This page will cover some details of how we use it.
Documentation Wishlist
Is there a specific article or piece of documentation we're missing that you really wish we had? Add it to the list below. Unless you're sure there is no documentation on the topic you're interested in, please ask in the relevant newsgroup and/or on the MDC mailing list first. Also, please make your request easy to understand; add a link to a longer description of the request if needed.
Editing MDN pages
This page describes some common tasks when editing MDN pages.
Examples
Existing Content/DOM in Mozilla
< MDC:Existing Content
External Redirects
The MDC wikis have the ability to redirect to external websites. We have done this so we can have links to external pages within the wiki that will be included in the wiki category pages.
Finding the right place to document bugs
Bugzilla is big. Really really big. MDN is big too. This page helps to put two big things together. It:
Getting started as a new MDN contributor
The Mozilla Developer Network (MDN) is a wiki, where anyone can add and edit content. You don't need to be a programmer or an expert on the latest technology. There is a wide range of tasks that need to be done, ranging from the simple, such as proofreading and correcting typos, to the more complex, like writing API documentation.
Landing page layout guide
A landing page serves as a menu, of sorts, for all of its subpages. It opens with a brief summary of the topic, then presents a structured list of links to subpages, and, optionally, additional material that may be of use.
+
MDN content on WebPlatform.org
Web Platform Docs (WPD) is a site for documentation and education about Web standards, run by W3C and supported by Mozilla, among others. Anyone is welcome to contribute content from MDN to WebPlatform.org, under the terms of MDN's Creative Commons Share-Alike 2.5 (CC-BY-SA) license. Content that originates from MDN must be attributed to MDN, with a link to the source article. The Web Platform Docs site provides support for doing this in a systematic way.
MDN page layout guide
These guides supplement the MDN style guide with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.
MDN subproject list
In order to turn the work of building documentation of All Things Open Web (not to mention All Things Mozilla) into something less daunting, sometimes it's helpful to split it up into subprojects. This page offers a list of links to MDN subproject organizational content.
Needs Redirect
If you have
Page types
Before working on the MDN style guide (and the redesign that goes hand-in-hand with it), we need to figure out what types of pages we have, then what those pages look like. This is a list of the types of pages and key attributes of those pages.
RecRoom documentation plan
RecRoom is the codename of a new MDN area that will provide resources for beginning Web app developers, as well as overall best practices guides for app development.
Remove in-content iframes
Each of the documents listed below has at least one in-place use of the <iframe> element within it. In order to improve performance and allow us to more easily revise and correct layout in the future, we need to quickly update all of these pages to use macros instead.  This is somewhat urgent, as there is work that needs to be done by our development team that cannot begin until all of these are fixed. That's where you come in!
Team status board
This table is a list of MDN contributors and what they're currently working on. Feel free to add yourself and what you're up to to this list, but keep in mind that we will purge out-of-date entries regularly, so if you choose to add yourself, do your best to keep your information current (even if all you do is update the "last updated" so we know you're keeping it current, despite your work taking a long time to finish).
Trello
The MDN community uses a Trello board to organize and keep track of the things that need to be done to improve, update, and add to our content. This guide will help you learn what Trello is and how we use it.
Using the Mozilla Developer Center
Welcome to the Mozilla Developer Center! Here you'll find documentation for not only working on the code and other components of the Mozilla project, but also for developing add-ons for Mozilla-based software, creating new software based on Mozilla code, and web development for the open Web.
Welcome to the Mozilla Developer Network
The Mozilla Developer Network is the most comprehensive and accurate resource for Web development, as written by you, the developers.
Writing chrome code documentation plan
We need a good guide to writing chrome JavaScript code. This plan proposes a project to produce that documentation.
Writing content
There are always things that can be added or updated on MDN. Whether it's all-new documentation for a sparkling new API or a revision to an older API that's changed subtly, you'll find lots of opportunities to help.
+

diff --git a/files/ko/archive/misc_top_level/index.html b/files/ko/archive/misc_top_level/index.html new file mode 100644 index 0000000000..95bf3b61ab --- /dev/null +++ b/files/ko/archive/misc_top_level/index.html @@ -0,0 +1,8 @@ +--- +title: Misc top level +slug: Archive/Misc_top_level +translation_of: Archive/Misc_top_level +--- +

In progress. These pages were moved from the top level of MDN in a spate of furious reorganization.

+ +

diff --git a/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html b/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html new file mode 100644 index 0000000000..1dcaa96557 --- /dev/null +++ b/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html @@ -0,0 +1,18 @@ +--- +title: 'file: URI를 위한 동일 출처 정책' +slug: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs' +translation_of: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs' +--- +

Gecko 1.8 이전 버전에서, 임의의 두 file: URI들은 같은 출처로 간주됩니다. 즉, 로컬 디스크에 있는 HTML 파일은 로컬 디스크에 있는 다른 파일을 읽을 수 있습니다.

+ +

Gecko 1.9 버전부터, 파일은 다른 특정 파일만 읽을 수 있습니다. 특히, 파일은 originating file과 target file의 상위 폴더가 같은 경우에만 다른 파일을 읽을 수 있습니다. 하지만 이 방법으로 폴더를 다운로드할 수는 없습니다.

+ +

예를 들어, bar.html에 접근하는 foo.html가 있고 index.html에서 이 파일로 이동한 경우, bar.html가  index.html와 같은 폴더나 하위 폴더에 있어야만 로드가 성공합니다.

+ +

이 정책은 XMLHttpRequest, XSLT, XBL을 비롯한 모든 동일 출처를 확인하는데 영향을 줍니다.

+ +

다른 window의 DOM에 접근할 경우, 각 파일은 별도의 출처로 처리됩니다. 한 가지 예외적으로 파일을 로드할 수 있는 다른 파일에서 로드된 경우 동일 출처 정책에 따라 동일한 출처로 간주됩니다.  이 로드는 subframe, link, location 설정, window.open() 호출 등을 통해 발생할 수 있습니다.

+ +

예를 들어, /home/user/foo.html이 frameset이고 /home/user/subdir/bar.html이 frame 중 하나라면, frame과 frameset은 동일한 출처로 간주됩니다.  반대로, /home/user/subdir/foo.html이 frameset이고 /home/user/bar.html가 프레임이라면, frame과 frameset은 다른 출처로 간주됩니다.

+ +

기본 값이 true인 새로운 security.fileuri.strict_origin_policy 환경설정은 file: URI에 대해서 출처 정책을 엄격하게 적용하고 싶지 않으면 false로 설정할 수 있습니다.

diff --git a/files/ko/archive/misc_top_level/using_content_preferences/index.html b/files/ko/archive/misc_top_level/using_content_preferences/index.html new file mode 100644 index 0000000000..247939c43a --- /dev/null +++ b/files/ko/archive/misc_top_level/using_content_preferences/index.html @@ -0,0 +1,35 @@ +--- +title: Using content preferences +slug: Archive/Misc_top_level/Using_content_preferences +tags: + - Firefox 3 +translation_of: Archive/Misc_top_level/Using_content_preferences +--- +

Firefox 3는 내용 선택 사항(content preferences)이라는 개념을 도입하고 있습니다. 이는 크롬 안에서 실행하는 코드(달리 이야기하면, 웹 사이트가 아닌 확장과 브라우저 자체)가 사이트 별 선택 사항을 지역적으로 저장할 수 있도록 합니다. 이를 이용하면 사용자가 웹 사이트의 외양을 커스터마이즈할 수 있는(예를 들어, 불편할 만큼 작은 글꼴을 사용하는 웹 사이트에) 확장을 작성하는 것이 가능합니다.

+

내용 선택 사항 서비스는 nsIContentPrefService에 의해 구현되며 특정 사이트에 대한 선택 사항을 지정하고 구하는 기능과 이를 전역 선택 사항 공간에 저장하는 기능을 제공합니다. 전역 선택 사항은 사이트에 특정한 선택 사항을 이용할 수 없을 때 이용합니다.

+

예제: 선택 사항을 지정하고 구하기

+

이 예제는 선택 사항을 저장하고 그 값을 구하는 방법을 보여줍니다.

+
var ioSvc = Components.classes["@mozilla.org/network/io-service;1"]
+            .getService(Components.interfaces.nsIIOService);
+var prefService = Components.classes["@mozilla.org/content-pref/service;1"]
+                  .getService(Components.interfaces.nsIContentPrefService);
+
+// Create a URI object referencing the site to save a preference for
+var uri = ioSvc.newURI("http://developer.mozilla.org/", null, null);
+
+// Set the value of the "devmo.somesetting" preference to "foo".
+
+prefService.setPref(uri, "devmo.somesetting", "foo");
+
+...
+
+// Retrieve the value of the "devmo.somesetting" preference.
+
+var value = prefService.getPref(uri, "devmo.somesetting");
+
+

See also

+

nsIContentPrefService, nsIContentPrefObserver

+

 

+
+  
+

diff --git a/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html b/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html new file mode 100644 index 0000000000..f2755cc4d3 --- /dev/null +++ b/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html @@ -0,0 +1,19 @@ +--- +title: Creating a Skin for SeaMonkey 2.x +slug: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x +tags: + - NeedsTranslation + - SeaMonkey + - TopicStub +translation_of: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x +--- +

Introduction

+ + +

You're going to make a theme for SeaMonkey 2, but don't know how? I hope this manual will help you.

+ + +

Contents

+ diff --git a/files/ko/archive/mozilla/drag_and_drop/index.html b/files/ko/archive/mozilla/drag_and_drop/index.html new file mode 100644 index 0000000000..adc89768c1 --- /dev/null +++ b/files/ko/archive/mozilla/drag_and_drop/index.html @@ -0,0 +1,148 @@ +--- +title: Drag and Drop +slug: Archive/Mozilla/Drag_and_drop +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/Drag_and_drop +--- +

+

다음 »

+

+

+

Deprecated Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

+
+ As of Gecko 1.9.1 (Firefox 3.5), these APIs are officially deprecated the newer, simpler, portable API should be used in their place.
+

This section describes how to implement objects that can be dragged around and dropped onto other objects.

+

The Drag and Drop Interface

+

Many user interfaces allow one to drag particular objects around within the interface. For example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. Mozilla and XUL provide a number of events that can handle when the user attempts to drag objects around.

+

A user can start dragging by holding down the mouse button and moving the mouse. The drag stops when the user releases the mouse. Event handlers are called when the user starts and ends dragging, and at various points in-between.

+

Mozilla implements dragging by using a drag session. When a user requests to drag something that can be dragged, a drag session should be started. The drag session handles updating the mouse cursor and where the object should be dropped. If something cannot be dragged, it should not start a drag session. Because the user generally has only one mouse, only one drag session is in use at a time.

+

Note that drag sessions can be created from within Mozilla itself or from other applications. Mozilla will translate the data being dragged as needed.

+

The list below describes the event handlers that can be called, which may be placed on any element. You only need to put values for the handlers where you need to do something when the event occurs.

+
+
+ ondrag
+
+ Called periodically throughout the drag and drop operation.
+
+ ondraggesture 
+
+ Called when the user starts dragging the element, which normally happens when the user holds down the mouse button and moves the mouse. The script in this handler should set up a drag session.
+
+ ondragstart  
+
+ An alias for ondraggesture; this is the HTML 5 spec name for the event and may be used in HTML or XUL; however, for backward compatibility with older versions of Firefox, you may wish to continue using ondraggesture in XUL.
+
+ ondragover 
+
+ This event handler is called for an element when something is being dragged over top of it. If the object can be dropped on the element, the drag session should be notified.
+
+ ondragenter 
+
+ Called for an element when the mouse pointer first moves over the element while something is being dragged. This might be used to change the appearance of the element to indicate to the user that the object can be dropped on it.
+
+ ondragexit 
+
+ Called for an element when the mouse pointer moves out of an element while something is being dragged. The is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication.
+
+ ondragdrop 
+
+ This event handler is called for an element when something is dropped on the element. At this point, the user has already released the mouse button. The element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself.
+
+ ondragend  
+
+ Called when the drag operation is finished.
+
+

There are two ways that drag and drop events can be handled. This first involves using the drag and drop XPCOM interfaces directly. The second is to use a JavaScript wrapper object that handles some of this for you. The code for this wrapper can be found in a file named toolkit/content/nsDragAndDrop.js nsDragAndDrop.js which is contained in the widget-toolkit (or global) package.

+

XPCOM Drag and Drop interfaces

+

Two interfaces are used to support drag and drop. The first is a drag service, nsIDragService and the second is the drag session, nsIDragSession.

+

The nsIDragService is responsible for creating drag sessions when a drag starts, and removing the drag session when the drag is complete. The function invokeDragSession should be called to start a drag inside an ondraggesture event handler. Once this function is called, a drag has started.

+

The function invokeDragSession takes four parameters, as described below:

+
invokeDragSession(element,transferableArray,region,actions)
+
+
+
+ element 
+
+ A reference to the element that is being dragged. This can be retrieved by getting the property event.target during the event handler.
+
+ transferableArray 
+
+ An array of nsITransferable objects, one for each item being dragged. An array is used because you might want to drag several objects at once, such as a set of files.
+
+ region 
+
+ A region used for feedback indication. This should usually be set to null.
+
+ actions 
+
+ The actions that the drag uses. This should be set to one of the following constants, or several added together. The action can be changed during the drag depending on what is being dragged over.
+
+
+
+ nsIDragService.DRAGDROP_ACTION_NONE 
+
+
+
+ Used to indicate that no drag is valid.
+
+ nsIDragService.DRAGDROP_ACTION_COPY 
+
+ The item being dragged should be copied to its dropped location.
+
+ nsIDragService.DRAGDROP_ACTION_MOVE 
+
+ The item being dragged should be moved to its dropped location.
+
+ nsIDragService.DRAGDROP_ACTION_LINK 
+
+ A link (or shortcut or alias) to the item being dragged should be created in the dropped location.
+
+
+
+

The interface nsIDragService also provides the function getCurrentSession which can be called from within the drag event handlers to get and modify the state of the drag. The function returns an object that implements nsIDragSession.

+

The interface nsIDragSession is used to get and set properties of the drag that is currently occuring. The following properties and methods are available:

+
+
+ canDrop 
+
+ Set this property to true if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to false if it doesn't make sense to drop the object on it. This should be changed in the ondragover and ondragenter event handlers.
+
+ dragAction 
+
+ Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.
+
+ numDropItems 
+
+ The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.
+
+ getData(transfer,index) 
+
+ Get the data being dragged. The first argument should be an nsITransferable object to hold the data. The second argument, index, should be the index of the item to return.
+
+ sourceDocument 
+
+ The document where the drag started.
+
+ sourceNode 
+
+ The DOM node where the drag started.
+
+ isDataFlavorSupported(flavor) 
+
+ Returns true if the data being dragged contains data of the specified flavor.
+
+

+

다음 »

+

+
+

Original Document Information

+ +
diff --git a/files/ko/archive/mozilla/firefox/index.html b/files/ko/archive/mozilla/firefox/index.html new file mode 100644 index 0000000000..9e61c718ff --- /dev/null +++ b/files/ko/archive/mozilla/firefox/index.html @@ -0,0 +1,8 @@ +--- +title: Firefox +slug: Archive/Mozilla/Firefox +translation_of: Archive/Mozilla/Firefox +--- +

In progress. Out-of-date information about the Firefox project.

+ +

diff --git a/files/ko/archive/mozilla/firefox/using_microformats/index.html b/files/ko/archive/mozilla/firefox/using_microformats/index.html new file mode 100644 index 0000000000..b7fcdf224f --- /dev/null +++ b/files/ko/archive/mozilla/firefox/using_microformats/index.html @@ -0,0 +1,144 @@ +--- +title: Using microformats +slug: Archive/Mozilla/Firefox/Using_microformats +tags: + - Firefox 3 + - Microformats +translation_of: Archive/Mozilla/Firefox/Using_microformats +--- +

{{ Fx_minversion_header(3) }} +

마이크로포맷(Microformats)을 이용하면 문서 자체를 분석하는 방법을 알아야 할 필요없이 페이지의 정보에 대한 요약을 표시할 수 있도록 웹 사이트가 의미 데이터(semantic data)를 브라우저에 제공할 수 있습니다. Firefox 3는 마이크로포맷에 대한 접근을 제공하는 전역 Microformats 개체를 구현합니다. 이 개체와 API를 이용하면 마이크로포맷을 쉽게 찾고 읽을 수 있습니다. +

+

마이크로포맷 API 로드하기

+

Microformats 개체는 Firefox 3에 추가된 새로운 자바스크립트 로더를 이용하여 생성합니다. API를 사용하려면 먼저 개체를 로드해야 합니다: +

+
Components.utils.import("resource://gre/modules/Microformats.js");
+
+

마이크로포맷 API를 로드하고 나면 아래에 나열한 메소드를 이용하여 마이크로포맷을 다룰 수 있습니다. 마이크로포맷을 파싱하는 방법에 대한 정보는 Parsing microformats in JavaScript를 참고하십시오. +

+

미리 정의된 마이크로포맷

+

Firefox 3는 몇 가지 일반적인 마이크로포맷을 구현한 정의를 제공합니다. +

+
adr +
주소를 표시합니다. +
geo +
위도와 경도를 이용한 지리적 위치를 표시합니다. +
hCard +
사람에 대한 연락 정보를 표시합니다. +
hCalendar +
달력의 일정 항목을 표시합니다. +
tag +
다른 마이크로포맷에 태그를 추가하는데 사용합니다. +
+

메소드

+

add()

+

마이크로포맷 모듈에 새로운 마이크로포맷을 추가합니다. +

{{ Note("지정한 이름을 가진 마이크로포맷이 이미 존재하면 새로운 것으로 바뀝니다.") }} +

+
add(name, definition);
+
+
매개변수
+
<tt>name</tt> +
마이크로포맷 모듈에 추가하려는 마이크로포맷의 이름. +
<tt>definition</tt> +
마이크로포맷을 기술하는 자바스크립트 구조. 자세한 사항은 Describing microformats in JavaScript를 참고. +
+

count()

+

지정한 조건을 만족하는 문서에 있는 마이크로포맷의 개수를 구합니다. +

+
numMicroformats = Microformats.count(name, rootElement, recurseFrames);
+
+
매개변수
+
<tt>name</tt> +
검색하려는 마이크로포맷의 이름 +
<tt>rootElement</tt> +
검색을 시작할 DOM 요소. 전체 문서에서 검색하려면 content.document를 명시해야 합니다. +
<tt>options</tt> +
선택사항. 아래 플래그를 포함하는 자바스크립트 개체: +
+
+
<tt>recurseExternalFrames</tt> +
true이면 자식 프레임을 검색에 포함. 기본 값은 true. +
<tt>showHidden</tt> +
true이면 숨겨진 마이크로포맷을 추가하고 그렇지 않으면 생략. 기본 값은 false. +
<tt>debug</tt> +
디버그 모드를 사용하려면 true로 지정하고 그렇지 않으면 false로 지정. 기본 값은 false.
반환 값
+

지정한 조건을 만족하는 마이크로포맷 개수를 가리키는 정수 값. +

+

debug()

+

마이크로포맷 개체를 설명하는 문자열을 반환합니다. +

{{ Note("마이크로포맷 개체에 대해 debug()를 호출할 수 있습니다: 이 메소드 대신 microformatObject.debug()를 이용할 수도 있습니다.") }} +

+
dumpString = debug(microformatObject)
+
+
매개변수
+
<tt>microformatObject</tt> +
정보를 표시할 마이크로포맷 개체. +
+
반환 값
+

지정한 마이크로포맷 개체의 내용을 설명하는 문자열. +

+

get()

+

지정한 조건에 따라 검색한 마이크로포맷에 해당하는 마이크로포맷 개체의 배열을 반환합니다. +

+
microformatsArray = Microformats.get(name, rootElement, options, targetArray);
+
+
매개변수
+
<tt>name</tt> +
검색하려는 마이크로포맷의 이름 +
<tt>rootElement</tt> +
검색을 시작할 DOM 요소. 전체 문서에서 검색하려면 content.document를 명시해야 합니다. +
<tt>options</tt> +
선택사항. 아래 플래그를 포함하는 자바스크립트 개체: +
+
+
<tt>recurseExternalFrames</tt> +
true이면 자식 프레임을 검색에 포함. 기본 값은 true. +
<tt>showHidden</tt> +
true이면 숨겨진 마이크로포맷을 추가하고 그렇지 않으면 생략. 기본 값은 false. +
<tt>debug</tt> +
디버그 모드를 사용하려면 true로 지정하고 그렇지 않으면 false로 지정. 기본 값은 false.
<tt>targetArray</tt> +
선택사항. 검색 결과를 추가할 마이크로포맷 개체의 배열. +
반환 값
+

검색 조건을 만족하는 마이크로포맷 개체의 새로운 배열, 혹은 발견한 마이크로포맷 개체를 추가한 <tt>microformats</tt>에서 지정한 배열. +

+

getNamesFromNode()

+

지정한 마이크로포맷 노드에 해당하는 공백으로 구별되는 마이크로포맷 이름의 목록을 반환합니다. +

+
nameList = Microformats.getNamesFromNode(node);
+
+
매개변수
+
<tt>node</tt> +
마이크로포맷 이름 목록을 구할 노드 +
+
Return value
+

지정한 노드가 마이크로포맷인 경우 노드에 해당하는 모든 마이크로포맷의 이름을 공백으로 구별하여 나열하는 문자열. 해당 노드가 마이크로포맷이 아닌 경우에는 아무것도 반환하지 않음. +

+

getParent()

+

지정한 마이크로포맷이나 마이크로포맷 자식의 부모 노드를 반환합니다. +

+
parentNode = Microformats.getParent(node);
+
+
매개변수
+
<tt>node</tt> +
부모 노드를 구할 노드 +
+
반환 값
+

지정한 노드의 부모. 지정한 노드가 마이크로포맷이 아니거나 마이크로포맷의 자식이 아닌 경우에는 아무것도 반환하지 않음. +

+

isMicroformat()

+

지정한 DOM 노드가 마이크로포맷인지 구별합니다. +

+
flag = Microformats.isMicroformat(node);
+
+
매개변수
+
<tt>node</tt> +
마이크로포맷 여부를 확인할 DOM 노드. +
+
반환 값
+

노드가 마이크로포맷이면 true, 그렇지 않으면 false. +

{{ Note("만약 노드가 마이크로포맷의 자식이면 이 메소드는 true를 반환하지 않습니다.") }} +

+
+
+{{ languages( { "en": "en/Using_microformats", "fr": "fr/Utilisation_de_microformats", "ja": "ja/Using_microformats", "pl": "pl/Zastosowanie_mikroformat\u00f3w" } ) }} diff --git a/files/ko/archive/mozilla/index.html b/files/ko/archive/mozilla/index.html new file mode 100644 index 0000000000..c6ccfa68f2 --- /dev/null +++ b/files/ko/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

Drag and Drop
This section describes how to implement objects that can be dragged around and dropped onto other objects.
XPInstall
Categories

diff --git a/files/ko/archive/mozilla/rdf_datasource_how-to/index.html b/files/ko/archive/mozilla/rdf_datasource_how-to/index.html new file mode 100644 index 0000000000..96509ff68a --- /dev/null +++ b/files/ko/archive/mozilla/rdf_datasource_how-to/index.html @@ -0,0 +1,224 @@ +--- +title: RDF Datasource How-To +slug: Archive/Mozilla/RDF_Datasource_How-To +tags: + - RDF +translation_of: Archive/Mozilla/RDF_Datasource_How-To +--- +
+

이 문서는 최신의 정보를 포함하지 않을 수 있습니다. 가능하면 이 문서가 최신 정보로 유지될 수 있도록 도와주시기 바랍니다. XPCOM 등록(registration) 부분과 "As of this writing, it is not currently possible to implement JavaScript XPCOM components" 부분이 최신 정보와 다른 것 같습니다. 전체 문서를 다 체크해 보지는 않았습니다.

+
+

이 문서는 Mozilla 의 RDF 구현과 함께 동작하는 + + 고유한(native), 클라이언트 측 데이터 소스 + 를 생성하는 방법을 설명하는 cookbook 문서입니다. 이 문서는 Robert Churchill 이 작성한 원본 문서를 대체하며 많은 부분은 원본 문서에서 가져온 것입니다.

+

데이터 소스란 무엇인가?

+

"RDF의 세계"는 인터넷 + + 자원 + 들을 설명하는 + + 문장 + (statement)으로 이루어진다. 예를 들어, "내 홈페이지의 최종 변경일은 4월 2일이다" 라던가 "이 뉴스 기사는 밥(Bob)이 보내온 것이다" 등이 있을 것이다. 가장 추상적인 단계에서 볼 때, + + 데이터 소스 + 는 이러한 문장들의 모임(collection)이다.

+

더 자세히 살펴보면, 데이터 소스는 어떤 정보를 RDF 문장의 모임으로 + + 변환 + 하는 역할을 한다. 예를 들어, "파일 시스템 데이터 소스"라면 파일 시스템 정보를 다음과 같은 문장들로 변환할 것이다: "/tmp 는 디렉토리이다", "/tmp/foo 는 /tmp 안에 포함되어 있다". "IMAP 데이터 소스"라면 IMAP 프로토콜을 이용하여 당신의 메일함에 있는 데이터를 다음과 같은 문장으로 변환할 것이다: "126번 메시지의 제목은 '인터넷으로 쉽게 돈벌기'이다", "126번 메시지를 보낸 사람은 'spammer128@hotmail.com'이다". "주소록 데이터 소스"라면 데이터베이스 파일을 다음과 같은 문장으로 변환할 것이다: "spammer128@hotmail.com의 실제 이름은 'Billy Dumple'이다", "spammer128@hotmail.com은 '중요한 친구'이다".

+

한 데이터 소스 내에 존재하는 문장은 + + composite datasource + 를 사용해서 다른 데이터 소스에 있는 문장과 결합(combine)될 수 있다. IMAP 데이터 소스와 주소록 데이터 소스를 결합하면, 위의 예제에서 "126번 메시지"를 보낸 사람은 "중요한 친구"라는 것을 알 수 있다.

+

어휘 선택하기

+

+ + 어휘 + (vocabulary)는 데이터 모델 내에서 원소(자원이나 문자열)들간의 관계를 표현하기 위해 사용하는 속성들의 집합입니다. 제일 먼저 생각해야 할 것은 '기존의 어휘를 사용해야 할지? 아니면 새로운 어휘를 만들어야 할지?'에 대한 것입니다. + + 반드시 + 새로운 어휘를 만들어야 필요가 있는 경우가 아니라면 당연히 기존의 어휘를 쓰는 것이 좋습니다. 그러면 당신이 만든 데이터 소스를 손쉽게 다른 데이터 소스와 통합할 수 있게 됩니다.

+

이미 만들어진 다음과 같은 여러 종류의 어휘들이 있습니다.

+ +

데이터를 노드와 아크(arc)로 매핑하기

+

{{ mediawiki.external('write me!') }}

+

<tt>nsIRDFDataSource</tt> 인터페이스 구현하기

+

가장 먼저 해야할 일은 <tt>nsIRDFDataSource</tt> 인터페이스를 구현하는 일입니다. 이를 위한 두 가지 기본적인 방법이 있습니다:

+
    +
  1. +

    + + 내부 프록시(inner proxy)에 위임(delegate)하기 + . 예를 들면, <tt>nsIRDFDataSource</tt> 인터페이스를 구현한 일반적인 데이터 소스인 + + 메모리 상의 데이터 소스(in-memory datasource) + 에 위임할 수 있습니다.

    +

    일반적으로, 해당 저장 장치(즉, 데이터 파일)를 위한 구문 분석기(parser)를 제공해야 합니다. 구문 분석기는 데이터 파일을 메모리 상의 데이터 소스로 구성하기 위한 일련의 <tt>Assert()</tt> 문으로 변환합니다. <tt>Flush()</tt> 문이 호출되거나, 데이터 소스에 대한 마지막 참조가 해제되는 경우에는 메모리 상의 데이터 소스를 순환하여 그래프(데이터)를 원래의 파일 형식으로 다시 저장합니다(re-serialize). 아래의 예제를 살펴보기 바랍니다. RDF/XML 데이터 소스 혹은 북마크 데이터 소스.

    +

    기존의 데이터들을 "래핑"(wrapping)하기 위한 목적이라면 이 구현 방식을 선택하면 됩니다. 이 구현은 기존의 데이터 저장 공간이 다른 에이전트들에 의해 "동적으로"(on-the-fly) 변경되고 있다면 문제를 일으킬 수도 있습니다.

    +
    2. +
  2. +

    + + 메모리 상의 데이터 소스를 모으기(aggregate) + . 이 방법은 위임의 극단적인 경우로서, XPCOM + + 모음 + (aggregation)을 이용하여 <tt>nsIRDFDataSource</tt> 인터페이스를 구현하는 것입니다. 기술적인 자세한 사항은 메모리 상의 데이터 소스 모으기 문서를 참고하기 바랍니다.

    +

    이 방법은 선택한다면, <tt>nsIRDFDataSource</tt> 인터페이스의 메소드들을 선택적으로 구현할 수 없으며, 대신 + + 모든 + 메소드들은 메모리 상의 데이터 소스로 보내져야 합니다(forwarding). 이것은 당신이 가진 데이터 소스들이 "읽기 전용"인 경우에 유용하며 <tt>Assert()</tt> 등의 메소드를 이용한 데이터의 변경에 대한 걱정이 필요없게 됩니다.

    +
    3. +
  3. +

    + + 직접 인터페이스를 구현하기 + . 이 방법을 선택한다면, <tt>nsIRDFDataStore</tt> 인터페이스의 모든 메소드들을 "직접" 구현해야 합니다. 비록 이 방법에는 더 많은 작업이 요구되지만, 이것은 다른 외부 에이전트들에 의해 변경될 수 있는 "라이브"(live) 데이터 소스를 생성하기 위한 유일한 방법입니다.

    +

    파일 시스템 데이터 소스와 로컬 메일 데이터 소스 는 이 방법을 이용해 구현된 좋은 예제입니다.

    +

    만약 당신의 데이터 소스가 "라이브" 데이터 소스 - 새로운 메일이 도착하는 것과 같이 외부 에이전트에 의해 데이터가 변경될 수 있는 데이터 소스 - 라면 이 방법을 선택해야 합니다. 또한 데이터 소스가 (전체 파일 시스템 구조와 같이) 아주 크고 많은 데이터를 위해 모델링된 경우에도 이 방법을 선택해야 합니다.

    +
    4. +
+

{{ mediawiki.external('각 방법들에 필요한 더 많은 정보가 제공되어야 함') }}

+

RDF 커맨드

+

{{ mediawiki.external('커맨드의 종류와 커맨드를 구현한 이유 등을 설명') }}

+

데이터 소스 컴포넌트 등록하기

+

데이터 소스는 XPCOM 컴포넌트입니다. 따라서 다음과 같은 특징을 가집니다.

+
    +
  1. 데이터 소스 구현체를 구분(identify)하기 위한 XPCOM + + CLSID +
    2. +
  2. DLL 내에 코드가 존재하는 (CLSID에 대응하는) 구현 클래스. DLL은 XPCOM <tt>components</tt> 디렉토리 내에 존재해야 함.
    3. +
  3. 저장소 내에 존재(instantiate)하기 위해 XPCOM + + ProgID + 에 + + 등록 + 할 + + 팩토리 + (factory)
    4. +
+

컴포넌트를 위해 DLL을 구성하는 방법에 대한 것은 이 문서의 범위를 넘어가므로 생략합니다. 이에 대한 내용은 the RDF factory를 참조해 보기 바랍니다.

+

RDF 데이터 소스를 등록하는 것은 꽤 간단합니다. DLL의 <tt>NSRegisterSelf()</tt> 메소드에서 + + 컴포넌트 관리자 + 의 <tt>RegisterComponent()</tt> 메소드를 호출하기만 하면 됩니다.

+
extern "C" PR_IMPLEMENT(nsresult)
+NSRegisterSelf(nsISupports* aServiceManager, const char* aPath)
+{
+   nsresult rv;
+   ...
+   // compMgr 는 컴포넌트 관리자 객체를 참조하고 있다고 가정합니다.
+   rv = compMgr->RegisterComponent(kMyDataSourceCID,
+            "My Data Source",
+            NS_RDF_DATASOURCE_PROGID_PREFIX "my-datasource",
+            aPath, PR_TRUE, PR_TRUE);
+   ...
+}
+
+

<tt>kMyDataSourceCID</tt> 를 당신의 CLSID 로 대체하고 <tt>"My Data Source"</tt> 부분을 저장소에 표시될 데이터 소스에 대한 설명을 포함하는 문장으로 대체합니다. 마지막으로, <tt>"my-datasource"</tt> 를 당신의 데이터 소스에 알맞은 값으로 바꿉니. 이 값은 <tt>"rdf:"</tt> 라는 접두어가 붙은 경우 + + 데이터 소스 ID + 가 되고, <tt>nsIRDFService::GetDataSource()</tt> 메소드를 이용하여 RDF 서비스로부터 당신의 데이터 소스를 얻어오기 위해 사용됩니다. 예를 들어 위의 데이터 소스는 아래와 같은 방법으로 접근할 수 있습니다.

+
nsIRDFService* rdf;
+rv = nsServiceManager::GetService(kRDFServiceCID,
+          kIRDFServiceIID,
+          (nsISupports**) &rdf);
+
+if (NS_SUCCEEDED(rv)) {
+    nsIRDFDataSource* myDataSource;
+    rv = rdf->GetDataSource("rdf:my-datasource",
+                 &myDataSource);
+
+    if (NS_SUCCEEDED(rv)) {
+        // 이 부분에서 myDataSource 를 이용하여 원하는 작업을 수행합니다...
+        NS_RELEASE(myDataSource);
+    }
+    nsServiceManager::ReleaseService(kRDFServiceCID, rdf);
+}
+
+

RDF의 내용을 표시하기

+

지금까지 당신이 가지고 있는 정보를 데이터 소스로 표현하기 위해 험난한 길을 헤져 왔다면, 이제 그 정보를 프로그램 상에 + + 표시 + 하고 싶을 것입니다. XUL을 이용하면, 데이터 소스의 내용을 + + 트리 컨트롤 + 혹은 + + 메뉴 + 또는 + + 툴바 + 에 표시할 수 있습니다. 사실, XUL 템플릿을 이용하면 + + 어떠한 + 형태의 컨텐트 모델에도 RDF 의 내용을 표시할 수 있습니다.

+

다음의 XUL 코드는 데이터 소스가 설명하는 자원(<tt>http://foo.bar.com/</tt>)을 "루트"로 하는 트리 컨트롤을 생성하는 방법을 설명합니다.

+
<window
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns:rdf="http://www.w3.org/TR/WD-rdf-syntax#"
+  xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+
+  <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/">
+    <template>
+      <treechildren>
+        <treeitem uri="...">
+          <treerow>
+            <treecell>
+              <text value="rdf:http://home.netscape.com/NC-rdf#Name" />
+            </treecell>
+            <treecell>
+              <text value="rdf:http://home.netscape.com/NC-rdf#URL" />
+            </treecell>
+          </treerow>
+        </treeitem>
+      </treechildren>
+    </template>
+
+    <treehead>
+      <treeitem>
+        <treecell>Name</treecell>
+        <treecell>URL</treecell>
+      </treeitem>
+    </treehead>
+
+    <!-- treechildren은 여기에 빌드되어 있습니다. -->
+  </tree>
+
+</window>
+
+

위에서 굵은 글씨로 표시된 중요한 "매직 속성"들은 다음과 같습니다:

+ +

RDF에서 어떻게 컨텐츠가 구성되는지에 대한 자세한 설명을 원한다면 XUL 템플릿 가이드 문서를 살펴보기 바랍니다.

+
+


+ 연락처: Chris Waterson (waterson@netscape.com)

+
+

원본 문서 정보

+ +
+

 

diff --git a/files/ko/archive/mozilla/xbl/index.html b/files/ko/archive/mozilla/xbl/index.html new file mode 100644 index 0000000000..1dcff4d284 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/index.html @@ -0,0 +1,32 @@ +--- +title: XBL +slug: Archive/Mozilla/XBL +tags: + - XBL +translation_of: Archive/Mozilla/XBL +--- +

XML Binding Language(XBL, 종종 Extensible Bindings Language로도 불림)는 다른 문서의 요소에 덧붙일 수 있는 바인딩을 기술하는 언어입니다. 바인딩이 덧붙는 요소는 "바운드 요소"라 부르고 바인딩이 지정한 새 behavior를 얻습니다.

+

바인딩은 바운드 요소에 등록되는 이벤트 핸들러, 바운드 요소로부터 접근하게 되는 새 메소드와 특성(property)의 구현, 바운드 요소 아래에 끼워 넣는 익명(anonymous) 컨텐트를 포함할 수 있습니다.

+

대다수의 XUL 위젯이 적어도 일부분은 XBL를 써서 구현됩니다. XBL을 써서 기존 XUL, HTML, SVG, 그 밖의 다른 원시 요소(primitive)에서 재사용 가능한 위젯을 빌드할 수 있습니다.

+

명세

+

XBL 1.0은 XBL 1.0 레퍼런스에 명기되어 있습니다. 불행하게도, Mozilla의 실제 구현은 명세와 다르며 그 차이를 기술한 문서는 아직 알려지지 않았습니다. 레퍼런스가 이 차이를 기술하도록 갱신되기를 희망합니다.

+

XBL 1.0은 Mozilla만의 기술이고 W3C 표준이 아닙니다. 그러나, 적어도 두 개의 표준(sXBL과 XBL 2.0)이 작업 중에 있습니다.

+ + +

sXBL과 XBL2 사이의 차이는 Anne van Kesteren의 글에 나열되어 있습니다.

+

더 보기

+ + +

diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html new file mode 100644 index 0000000000..9f0eab90c9 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html @@ -0,0 +1,387 @@ +--- +title: Elements +slug: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements +translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements +--- +

 

+

bindings

+

This section is tested and adjusted for the current Firefox implementation. Please edit only if an actual behavior differs from the described one. Please do not edit only on the basis of another XBL specification.

+
<!ELEMENT bindings ( binding* ) >
+
+Hierarchy:   root element
+May contain: <binding>
+
+

The bindings element is the root element of any XBL document. It should usually declare XBL as the default namespace (unless an XBL namespace prefix is used) and it may additionally declare other namespace prefixes used in your binding.

+

bindings contains zero or more binding elements as children. Each binding child element defines a unique binding that can be attached to elements in other documents.

+

An element can have only one binding attached (explicitly or inherited) at one moment. From several bindings only the last in the sequence will be used (like with any CSS rule).

+
HelloWorld example:
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+<head>
+<title>Hello world!</title>
+<style type="text/css">
+p {
+ -moz-binding: url(hello.xml#default);
+}
+#p03 {
+ -moz-binding: url(hello.xml#hello2);
+}
+</style>
+</head>
+<body
+
+  <p>Default content</p>
+  <p>Default content</p>
+  <p id="p03">Default content</p>
+
+</body>
+</html>
+
+// hello.xml
+
+<?xml version="1.0"?>
+<bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+  <binding id="default">
+    <content><html:b>Hello world! </html:b><children/></content>
+  </binding>
+  <binding id="hello2">
+    <content><html:b>Hello from my binding! </html:b><children/></content>
+  </binding>
+</bindings>
+
+

View this example

+

Next: <big>bindings > binding</big> element.

+

Notes

+ +
<bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:html = "http://www.w3.org/1999/xhtml"
+ xmlns:xul  = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:svg  = "http://www.w3.org/2000/svg"
+ xmlns:xlink= "http://www.w3.org/1999/xlink">
+
+

바인딩

+
<!ENTITY % binding-content "(resources?,content?,implementation?,handlers?)">
+<!ELEMENT binding %binding-content;>
+<!ATTLIST binding
+   id                     ID             #REQUIRED
+   extends                CDATA          #IMPLIED
+   display                CDATA          #IMPLIED
+   inheritstyle           true           #IMPLIED
+>
+
+

binding 요소는 단일 XBL 바인딩을 기술합니다. XBL 바인딩은 HTML/XML 요소에 + + anonymous content + , + + fields + , + + properties + , + + methods + , + + event handlers + 를 추가할 수 있습니다.

+

단일 XBL 바인딩은 스타일 시트나 스크립팅을 사용하여 요소에 붙일 수 있습니다 (<table>에 특정한 사항은 bug 83830를 참고하십시오).

+

CSS:

+
div {
+ -moz-binding: url(myBinding.xml#default);
+}
+
+

DOM:

+
elementReference.style.MozBinding = "url(myBinding.xml#default}";
+
+

위의 두 가지 경우 모두는 myBinding.xml에 포함된 id="default"를 가진 바인딩을 사용하고 있습니다.

+

Firefox 3부터는 바인딩을 인라인으로 삽입하기 위해 data: URL을 사용할 수 있습니다.

+
div {
+  -moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Cbindings%20id%3D%22xbltestBindings%22%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%0A%20%20%3Cbinding%20id%3D%22xbltest%22%3E%3Ccontent%3EPASS%3C/content%3E%3C/binding%3E%0A%3C/bindings%3E%0A);
+}
+
+

data: URL은 부분 식별자(fragment identifier)를 지원하지 않기 때문에 대신 삽입된 XML에서 발견한 첫 번째 바인딩을 사용합니다. 바인딩은 참조하지 않더라도 아이디가 있어야 한다는 점을 염두해 두십시오.

+

앞선 예제의 삽입된 XML은 다음과 같습니다.

+
<?xml version="1.0"?>
+<bindings id="xbltestBindings" xmlns="http://www.mozilla.org/xbl">
+  <binding id="xbltest"><content>PASS</content></binding>
+</bindings>
+
+

CSS 선언만이 바인딩을 임의의 요소 집합에 붙이는 쉬운 방법을 제공합니다. 이는 또한 스크립팅이 비할성화되어 있을 때 바인딩이 부분적으로 동작하게 만듭니다. 이 경우 모든 메소드와 핸들러는 차단되지만 익명의 내용과 스타일은 계속 사용됩니다. 그러므로 실행 중에 개별 요소에 바인딩을 추가할 필요가 없다면 항상 CSS 선언을 사용해야 합니다.

+

binding 요소는 resources 태그, content 태그, implementation 태그, handlers 태그를 포함할 수 있습니다.

+ +

 

+

content

+
<!ELEMENT content ANY>
+<!ATTLIST content
+   id               ID           #IMPLIED
+>
+
+

A binding can specify new content that is placed inside the bound element. Although you can see this content on screen as if it was directly in the file, this content is anonymous and is hidden from the normal DOM. To access anonymous nodes on an XBL bound element, you can use the getAnonymousElementByAttribute and getAnonymousNodes functions. The only XBL element that can appear inside the content tag is the children tag. Attributes on the <content> element in the binding are set on the bound element.

+ +

children

+
<!ELEMENT children EMPTY>
+<!ATTLIST children
+   id               ID                           #IMPLIED
+   includes         CDATA                        #IMPLIED
+>
+
+

Specifies the location where any child elements of the bound element are placed in the generated content.

+

Normally, if the element bound to has its own content, the anonymous content is not generated. However, with a children element, you can merge the content from the HTML/XML element and the XBL content.

+

If the children tag contains content itself, that content will become the default content. If the element the binding is attached to contains content, the default content will be ignored. If the element does not contain content, the default content will be added.

+ +

implementation

+
<!ENTITY % implementation-content "(method|property)*">
+<!ELEMENT implementation %implementation-content;>
+<!ATTLIST implementation
+   id               ID           #IMPLIED
+   name             CDATA        #IMPLIED
+   implements       CDATA        #IMPLIED
+>
+
+

The implementation element describes the set of methods and properties that are attached to the bound element. Once the binding is attached, these methods and properties can be invoked directly from the bound element.

+ +

constructor

+

The code inside the constructor is called when a binding has just been attached to an element. So full access to anonymous nodes generated by the binding is already possible. The constructor tag must be placed inside the implementation tag.

+ +
+ Note: Prior to Firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to get layout information from within the constructor could return out of date information. In Firefox 3 and later, the constructor is called when reflow can take place, which results in up-to-date information being returned. See bug 398404 for details.
+

destructor

+

The code inside the destructor is called when a binding is being removed from an element. You can use this to unload resources to free memory. However the destructor is often not called when it should, see bug 230086. The destructor tag must be placed inside the implementation tag.

+ +

method

+
<!ENTITY % method-content "(parameter*,body?)">
+<!ELEMENT method %method-content;>
+<!ATTLIST method
+   id               ID           #IMPLIED
+   name             CDATA        #REQUIRED
+   type             CDATA        #IMPLIED
+>
+
+

The method element is used to describe a single method of a binding implementation.

+ +

+ + Example +

+
<method name="scrollTo">
+  <parameter name="index"/>
+  <body>
+    this.setAttribute("scrollpos", index);
+  </body>
+</method>
+
+

parameter

+
<!ELEMENT parameter EMPTY>
+<!ATTLIST parameter
+   id               ID           #IMPLIED
+   name             CDATA        #REQUIRED
+>
+
+

The parameter element is used inside a method element. It represents a single parameter of a method.

+ +

body

+
<!ELEMENT body CDATA>
+<!ATTLIST body
+   id               ID           #IMPLIED
+>
+
+

The body element represents the implementation of its corresponding method. Its contents are the script that is executed when the method is invoked.

+ +

field

+
<!ELEMENT field EMPTY>
+<!ATTLIST field
+   id               ID                  #IMPLIED
+   name             CDATA               #REQUIRED
+   readonly         (true|false)        #IMPLIED
+>
+
+

A field is similar to a property, except that it should not have a getter or setter. It is useful as a simple holder for a value. The field element must have content which is code that determines the initial value of the field. The field tag must be inside the implementation tag.

+ +
+ Note: In Firefox 3, fields are now evaluated the first time they're accessed instead of at binding attachment time. This shouldn't cause any problems in typical use cases, but there are cases in which this will impact the behavior of your code. See bug 372769 for details.
+

Here are some examples of cases in which the behavior of your code may change due to this change in Firefox 3:

+
    +
  1. If you have two fields, one named A and one named B, and field A sets .B, the value of .B will depend on whether or not .A has already been accessed.
    2. +
  2. If a proto is inserted into the proto chain after binding instantiation, doing so may affect field values (this wasn't the case in prior versions of Firefox).
    3. +
  3. At binding attachment time, <field name="parentNode">this.parentNode</field> is undefined instead of the value of parentNode.
    4. +
  4. A field no longer changes the value of a property set on the object itself (rather than a proto) before binding attachment.
    5. +
+

property

+
<!ENTITY % property-content "(getter?,setter?)">
+<!ELEMENT property %property-content;>
+<!ATTLIST property
+   id               ID                  #IMPLIED
+   name             CDATA               #REQUIRED
+   readonly         (true|false)        #IMPLIED
+   onget            CDATA               #IMPLIED
+   onset            CDATA               #IMPLIED
+>
+
+

The property element represents a single property of an implementation. A property consists of a pair of getter/setter functions that can be defined using onget/onset attributes or getter/setter elements underneath the property element. Like methods, once the binding is attached, the property can be obtained directly from the bound element. The property tag must be inside the implementation tag.

+ +

getter

+
<!ELEMENT getter PCDATA>
+<!ATTLIST getter
+   id               ID                  #IMPLIED
+>
+
+

The getter element contains script that gets executed when a specific property gets called. The getter tag must be inside the property tag.

+ +

setter

+
<!ELEMENT setter PCDATA>
+<!ATTLIST setter
+   id               ID                  #IMPLIED
+>
+
+

The setter element contains script that gets executed when a specific property is being set. The setter tag must be inside the property tag.

+ +

handlers

+
<!ENTITY % handlers-content "handler*">
+<!ELEMENT handlers %handlers-content;>
+<!ATTLIST handlers
+   id               ID                  #IMPLIED
+>
+
+

The handlers element contains event handlers that can be attached to elements within the bound document. These handlers are installed when the binding is attached and removed when the binding is detached. The handlers tag must be inside the binding tag.

+ +

handler

+
<!ENTITY % handler-content "PCDATA">
+<!ELEMENT handler %handler-content;>
+<!ATTLIST handler
+   id               ID                                  #IMPLIED
+   event            NMREF                               #REQUIRED
+   action           CDATA                               #IMPLIED
+   phase            (capturing|bubbling|target)         #IMPLIED
+   button           (1|2|3)                             #IMPLIED
+   modifiers        CDATA                               #IMPLIED
+   keycode          CDATA                               #IMPLIED
+   key              CDATA                               #IMPLIED
+   charcode         CDATA                               #IMPLIED
+   clickcount       (1|2|3)                             #IMPLIED
+   command          ID                                  #IMPLIED
+   preventdefault   false|true                          #IMPLIED
+>
+
+

The handler element describes a single event handler. This handler is attached to its target at the time the binding is attached and unhooked when the binding is detached from the bound element. The script inside the handler is executed when the event handler is matched. The handler tag must be inside the handlers tag.

+ +

resources

+
<!ENTITY % resources-content "(image?,stylesheet?)">
+<!ELEMENT resources %resources-content;>
+<!ATTLIST property
+   id               ID                  #IMPLIED
+>
+
+

Used for inclusion of image elements, to cache them for later use, and for inclusion of stylesheet elements. The resources tag must be used directly inside the binding tag.

+ +

stylesheet

+
<!ELEMENT stylesheet EMPTY>
+<!ATTLIST stylesheet
+   id               ID                  #IMPLIED
+   src              URI                 #REQUIRED
+>
+
+

The stylesheet element declares a style sheet used by the binding. The style rules in the style sheet will only be applied to the binding, not to other elements in the document. The stylesheet tag must be inside the resources tag.

+ +

image

+
<!ELEMENT image EMPTY>
+<!ATTLIST image
+   id               ID                  #IMPLIED
+   src              URI                 #REQUIRED
+>
+
+

Declares an image resource used by the binding. The image is loaded as soon as the binding is used. You can use this to preload a number of images for later use. The image tag must be inside the resources tag.

+ diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html new file mode 100644 index 0000000000..044d638e52 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html @@ -0,0 +1,118 @@ +--- +title: XBL 1.0 Reference +slug: Archive/Mozilla/XBL/XBL_1.0_Reference +tags: + - XBL +translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference +--- +

초록

+

This document describes Extensible Binding Language (XBL) 1.0 as implemented in Gecko browsers.

+

Extensible Binding Language is a XML-based markup language to implement reusable components ( + + bindings + ) that can be bound to elements in other documents. The element with a binding specified, called the + + bound element + , acquires the new behavior specified by the binding. Bindings can be bound to elements using Cascading Style Sheets (CSS) or DOM. One element can be be bound to several bindings at once.

+

Functionally bindings should be correlated with Behaviors and Viewlink but being implemented as one integrated XML solution.

+

Bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted around the bound element.

+
+

There are numerous adjustments in the current implementation in comparison of earlier XBL proposals, and not all of them are reflected yet in this document. The documentation process is still in progress: please keep it in your mind while using the provided information.

+
+

XBL 요소

+ +

Binding Attachment and Detachment

+ +

DOM Interfaces

+ +

Anonymous Content

+ +

Binding Implementations

+ +

Event Handlers

+

Example - Sticky Notes

+

Updated and adjusted for the current Firefox implementation.

+
+

This example is targeted to demonstrate the XBL usage rather than to be a practically useful application. For this reason it contains many comments and some blocks could be avoided in a more compact solution yet used here for demonstration purposes.

+
+ +

View this example

+


+ Download all files (.zip archive) need to ask to adjust the server - it gives "Access denied" for zip files (?)

+

References

+

Initial XBL 1.0 proposal submitted as a Note to W3C

+

XBL 2.0 Project

+
+

Original Document Information

+ +
diff --git a/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html new file mode 100644 index 0000000000..33b4f14f44 --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html @@ -0,0 +1,121 @@ +--- +title: Dialogs in XULRunner +slug: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner +--- +

+

« 이전

+

+

이전 기사에서는 창, 메뉴, 도구바를 만드는데 사용되는 간단한 XUL에 대해 알아봤습니다. 이번에는 사용자 정의 대화상자와 표준 운영체제(공통) 대화상자에 대해 알아보겠습니다. 대화상자는 데스크탑 응용 프로그램를 구성하는 기본 요소들입니다. 어떤 종류의 대화상자는 너무 자주 사용되므로 OS에서 기본적인 구현을 제공하기도 합니다. 파일 열기와 저장 대화상자가 대표적인 예입니다. 가능하면 응용 프로그램간의 사용자가 느끼는 일관된 체험(일관성)을 유지하기 위해 제공되는 "기본(native)" 대화상자를 재활용하는 것이 좋습니다.

+

사용자 정의 대화상자

+

XUL로 대화상자를 만드는 것은 윈도우를 만드는 것과 아주 유사합니다. 대화상자는 독립된 XUL 파일에 정의됩니다. XUL에서는 대화상자의 컨테이너로 동작하는 dialog 요소를 제공합니다. 대화상자 XUL 파일은 윈도우와 마찬가지로 DTD, CSS, JavaScript를 포함할 수 있습니다. 아래는 XUL 대화상자의 예제입니다.

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<dialog id="myDialog" title="My Dialog"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        onload="window.sizeToContent();"
+        buttons="accept,cancel"
+        buttonlabelaccept="Set Favorite"
+        buttonaccesskeyaccept="S"
+        ondialogaccept="return doSave();"
+        buttonlabelcancel="Cancel"
+        buttonaccesskeycancel="n"
+        ondialogcancel="return doCancel();">
+
+  <script>
+    function doSave(){
+     //doSomething()
+     return true;
+    }
+
+    function doCancel(){
+      return true;
+    }
+  </script>
+
+  <dialogheader title="My dialog" description="Example dialog"/>
+  <groupbox flex="1">
+    <caption label="Select favorite fruit"/>
+    <radiogroup>
+      <radio id="1" label="Oranges because they are fruity"/>
+      <radio id="2" selected="true" label="Strawberries because of color"/>
+      <radio id="3" label="Bananna because it pre packaged"/>
+    </radiogroup>
+  </groupbox>
+
+</dialog>
+
+

XUL window 요소는 대화상자를 여는데(open) 사용되는 window.openDialog()라는 특별한 메소드를 가지고 있습니다. 다음은 대화상자를 여는데 사용되는 코드입니다.

+
function openDialog() {
+  window.openDialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal");
+}
+
+

Windows 200에서 위 코드로 열린 대화상자는 다음과 같으며, 다른 운영체제도 비슷한 모양세일 것입니다.

+

Image:XULDialogExample.png

+

dialog 요소에서 나의 눈을 사로잡은 첫번째는 버튼과 관련된 속성입니다. 개발자들이 좀 더 쉽게 접근하고 사용자들에게 일관성을 제공하기 위해 XUL은 핵심적인 대화상자 버튼("확인", "취소", "도움말" 등)들을 자동으로 만들고 배치해주는 메커니즘을 제공하고 있습니다.

+

개발자는 필요한 버튼들을 명시하고 각 버튼에 대한 제목과 단축키 그리고 버튼이 눌러졌을 때 호출될 JavaScript 함수를 지정하기만 하면 됩니다. XUL이 대화상자내에서 버튼에 대한 위치와 스타일을 알아서 처리해 줍니다. 이러한 방식은, 운영체제들마다 대화상자 내 버튼의 위치가 고유의 컨벤션을 가지고 있다는 점을 생각해 보면, 크로스 플랫폼(cross-platform) 응용 프로그램을 개발하는데 있어 아주 좋은 환경을 제공해 준다고 할 수 있습니다.

+

아래는 dialog에서 버튼과 관련된 속성들 중 일부 입니다. 도 참조해 보세요.

+
+
+ buttons
+
+ 대화상자에 표시할 버튼들의 쉼표로 분리된 목록(accept, cancel, help, extra1, and extra2).
+
+ buttonlabelaccept
+
+ 확인 버튼을 위한 라벨, 다른 버튼에도 비슷한 속성이 존재합니다.
+
+ buttonaccesskeyaccept
+
+ 확인 버튼에 사용되는 단축키, 다른 버튼에도 비슷한 속성이 존재합니다.
+
+ ondialogaccept
+
+ 확인 버튼이 눌러졌을때 실행될 JavaScript, 다른 버튼에도 비슷한 속성이 존재합니다.
+
+

XUL에는 다양한 종류의 입력 컨트롤들이 존재하며, 대화상자에도 사용할 수 있습니다. 이 후 기사에서는 현재 사용되고 있는, 그리고 앞으로 계획된 XUL 입력 컨트롤에 대해 좀 더 자세히 알아보려고 합니다. 제가 <dialogheader>를 사용하게 될지 확실하지 않지만, 이 하나의 요소만으로 간단하게 헤더를 만드는데 시간을 줄여줍니다.

+

공통 대화상자

+

가장 자주 사용되는 공통 대화상자는 파일 열기와 저장하기 입니다. 예를 들어 윈도우즈에서는 예전부터 내장된 파일 열기와 저장하기 대화상자를 제공하고 있고 Mac 또한 마찬가지 있습니다. 이러한 것들은 응용 프로그램 개발자들을 편하게 해 줄 뿐만 아니라 사용자들에게도 일관성 있는 인터페이스를 제공하여 사용하기 쉽게 해 줍니다. XUL에서도 filepicker(Mozilla에서는 파일 열기와 저장하기 대화상자를 이렇게 부릅니다)의 네이티브 구현을 지원하고 있습니다. 향후 릴리즈에서는 사용자가 원한다면 설정을 통해 XUL filepicker로 전환할 수 있는 기능을 제공할 것입니다. XUL filepicker는 XPCOM 컴포넌트로, 사용 전에 다음과 같이 초기화되어야 합니다.

+
function doFileOpen() {
+  /* See: http://developer.mozilla.org/en/docs/XUL_Tutorial:Open_and_Save_Dialogs */
+
+  var nsIFilePicker = Components.interfaces.nsIFilePicker;
+  var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
+
+  fp.init(window, "Open File", nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
+
+  var res = fp.show();
+  if (res == nsIFilePicker.returnOK) {
+    var thefile = fp.file;
+    alert(thefile.leafName);
+    // --- do something with the file here ---
+  }
+}
+
+

XUL에서 현재는 다른 공통 대화상자를 제공하고 있지는 못합니다. 향후 버전에서는 수정될 것입니다. Firefox와 Thunderbird는 모두 페이지 설정과 인쇄 공통 대화상자를 지원하고 있습니다. 또한 XUL에서는 마법사를 만드는 요소를 지원합니다.

+

본 시리즈의 향후 기사들에서는 입력 컨트롤, 인쇄, 클립보드, XPCOM에 대해서 알아볼 것입니다.

+

참고 문서

+ +

+

« 이전

+

+
+

원본 문서

+ +
+
+  
diff --git a/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html new file mode 100644 index 0000000000..2207ae7ae0 --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html @@ -0,0 +1,98 @@ +--- +title: Getting started with XULRunner +slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +--- +

+

다음 »

+

+

본 기사에서는 XULRunner를 이용하여 기본적인 데스크탑 응용프로그램을 개발해봄으로써 Mozilla 플랫폼에 대해 알아보겠습니다. Firefox, Thunderbird, 기타 다양한 응용프로그램들이 이 플랫폼을 이용하여 작성되었으며, 기본적인 응용 프로그램을 개발하기에 사용될 수 있을 만큼 충분히 안정적입니다.

+

여러분이 XUL 기반의 데스크탑 응용 프로그램을 개발려고자 한다면, XULRunner를 설치해야 할 것입니다. 먼저 XULRunner를 설치한 후, 골격만 있는 프로그램을 실행해서 제대로 동작하는지 확인해 보겠습니다.

+

1단계: XULRunner 다운로드

+

여러분은 MDC의 메인 XULRunner 페이지에서 다운로드 링크를 찾을 수 있습니다.

+

Windows 버전의 XULRunner는 인스톨러가 아니고 zip 파일로 제공됩니다. 개발자 입장에서는 내 장비에 압축을 해제하기만 하면 된다는 아이디어가 마음에 듭니다. Windwos 시스템을 건드릴 필요가 없을 것 같아서 좋습니다.

+

Mac 버전의 경우는 표준 Mac OS X 인스톨러로 배포됩니다.

+

2단계: XULRunner 설치하기

+

Windows에서는 적당한 위치에 압축을 해제하세요. 나는 C:\program files\xulrunner 폴더를 새로 만들고 이곳에 압축을 풀었습니다. 지금까지는 꽤 간단합니다. Mac의 경우에는 그냥 인스톨러를 실행하면 /Library/Frameworks 디렉토리에 XUL.Framework로 설치되게 됩니다.

+

이제 간단한 뼈대만 있는 간단한 응용 프로그램 껍데기를 만들 시간입니다. 괜찮다면 이 프로그램을 XUL 버전의 "Hello World"라고 하겠습니다. Google 검색을 해보면 괜찮은 자습서를 발견할 수 있습니다. 읽어볼만 합니다. 자습서를 읽고서 나는 간단한 시작 응용 프로그램을 만들었습니다. 아래에 있는 내용들은 모두 Ryans의 자습서과 이곳 MDC에 있는 XULRunner에서도 볼 수 있는 내용들입니다.

+

3단계: 응용 프로그램 폴더 구조 생성

+

윈도우에서, 내 경우 루트 폴더를 c:\program files\myapp로 생성했지만, 아무곳이나 괜찮습니다. 다음은 하위 폴더 구조입니다.

+
/myapp
+  /chrome
+    /content
+      main.xul
+    chrome.manifest
+  /defaults
+    /preferences
+      prefs.js
+  application.ini
+
+

위의 폴더 구조에 4개의 파일 - application.ini, chrome.manifest, prefs.js, main.xul - 이 있다는 것을 명심하세요.

+

4단계: application.ini 설정

+

application.ini 파일은 여러분이 작성하는 응용 프로그램에 대한 XULRunner의 시작점입니다. 이 파일에서는 여러분이 작성한 응용 프로그램이 XULRunner 플랫폼을 어떤 의도로 사용할 것인가를 제시하며, XULRunner가 응용 프로그램을 실행하는데 필요한 정보들에 대한 설정을 포함합니다. 제가 작성한 것은 다음과 같습니다.

+
[App]
+Vendor=Finkle
+Name=Test App
+Version=1.0
+BuildID=20060101
+Copyright=Copyright (c) 2006 Mark Finkle
+ID=xulapp@starkravingfinkle.org
+
+[Gecko]
+MinVersion=1.8
+MaxVersion=1.8
+
+

not really... You can find more information about the <tt>application.ini</tt> file in the article XULRunner:Deploying XULRunner 1.8.

+

주의: 2007 nightly trunk XULRunner build에서 본 예제 프로그램을 실행시키기려면 MaxVersion을 1.9로 수정하세요.

+

5단계: Chrome 선언 설정

+

Chrome 선언 파일은 응용 프로그램에 포함된 자원(resource)의 위치를 나타내기 위해 XULRunner가 사용하는 URI들을 정의합니다. 이는 "chrome://" URI가 사용되는 방법을 보면 잘 알 수 있습니다. 응용 프로그램 chrome은 하나 혹은 몇개의 JAR 파일로 구성되거나 또는 압축되지 않은 폴더와 파일로 구성될 수 있습니다. 여기서는 압축되지 않은 방법을 사용할 것입니다. 내가 작성한 선언 파일은 다음과 같습니다.

+
 content myapp file:content/
+
+
주의: 응용 프로그램 이름은 소문자이고 3자 이상이어야 합니다.
+

6단계: 환경 설정 구성

+

prefs.js 파일에는 XULRunner가 메인 윈도우로 사용할 XUL 파일명에 대한 정보가 포함되어 있습니다. 내 것은 다음과 같습니다.

+
 pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
+
+

XULRunner 환경 설정에는 다음과 같은 것들이 포함됩니다.

+
toolkit.defaultChromeURI
응용 프로그램이 실행될 때 열릴 기본 윈도우를 지정합니다.
toolkit.defaultChromeFeatures
메인 윈도우가 열릴 때 window.open() 코드에 포함될 기능(feature)들을 지정합니다.
toolkit.singletonWindowType
응용 프로그램이 한번에 하나의 인스터스만을 가지도록 설정합니다.
+
+

이 내용들은 XULRunner:Specifying Startup Chrome Window에 좀 더 자세히 설명되어 있습니다.

+

7단계: XUL 만들기

+

마지막으로 간단한 XUL 윈도우를 만들어야 하는데, 이는 main.xul 파일에 잘 나와 있습니다. 여기 있는 내용은 특별한 건 없고 창을 만들기 위해 필요한 최소한의 것들만 포함되어 있습니다.

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="main" title="My App" width="300" height="300"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <caption label="Hello World"/>
+</window>
+
+
주의: XML/XUL 파일의 맨 처음에 공백이 있으면 안됩니다.
+

8단계: 응용 프로그램 실행하기

+

결정적 순간입니다. 응용 프로그램을 실행하기 위해 XULRunner가 필요합니다. Windows의 명령창을 열고 C:\program files\myapp 폴더로 이동한 후 다음의 명령어를 실행하세요.

+
 xulrunner.exe application.ini
+
+

물론, xulrunner.exe는 PATH에 포함되어 있어야 합니다. xulrunner.exe가 경로에 포함되어 있지 않다면 다음과 같이 실행할 수 있습니다.

+
 ..\xulrunner\xulrunner.exe application.ini
+
+

Mac에서는 터미널 창을 열고 myapp 디렉토리로 이동한 후 다음과 같이 입력하시면 됩니다.

+
 /Library/Frameworks/XUL.framework/xulrunner-bin application.ini
+
+

여러분은 다음과 같이 생긴 창을 볼 수 있을 것입니다. 다음 화면은 Ubuntu에서의 화면입니다.

+

Image:XULSampleMyapp.png

+

다른 방법: Firefox3 -app를 이용해 XUL 응용 프로그램을 실행시키기

+

Firefox 3에서는 커맨드 라인을 통해 브라우저 대신 XUL 응용 프로그램이 실행되도록 할 수 있습니다. 이는 XULRunner를 이용하여 XUL 응용 프로그램을 실행하는 것과 비슷합니다. Firefox 3를 이용한 XULRunner 응용 프로그램 실행하기를 참조하세요.

+

예제 프로젝트 다운받기.

+

+

다음 »

+

+
+

원본 정보

+ +
+ +

 

diff --git a/files/ko/archive/mozilla/xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..8e736dc6f8 --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/index.html @@ -0,0 +1,26 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +

 

+
XULRunner 입문서
+XULRunner에 대한 간단한 소개.
+
+

XULRunner는 Mozilla 실행시 동작하는(runtime) 패키지로서 Firefox와 Thunderbird의 기능을 풍부하게 하는 XUL과 XPCOM을 불러오게(bootstrap)할 수 있습니다. XULRunner는 XUL 혹은 XPCOM 프로그램을 설치, 업그레이드 그리고 삭제할 수 있는 기능을 제공합니다. XULRunner는 또한 libxul을 지원하는데 이는 다른 프로젝트 혹은 프로그램에 Mozilla를 내장시킬 수 있게 하는 것입니다.

+
+ +

제품 소개

XULRunner trunk (XULRunner 1.9)의 nightly builds는 Mozilla FTP 사이트에서 다운로드 받을 수 있습니다. 설치, 제거, 그 외 정보들은 1.8 제품 소개서를 읽어보세요.

Firefox 3 beta에는 전용 XULRunner 패키지가 포함되어 있으며, 이를 이용해 다른 XULRunner 응용 프로그램을 실행할 수 있습니다.

이전 빌드들도 사용 가능합니다.

개요

문서

모두 보기...
XULRunner 입문서
XULRunner로 데스크탑 응용프로그램을 개발하는 간단한 자습서.
XULRunner 가이드
A fairly complete introduction and tutorial for XULRunner which collates much of the documentation found here.
XULRunner 배우기
XULRunner에 관한 간단한 소개.
XULRunner tips
XULRunner를 사용하는 데 있어서의 팁 모음
XULRunner 1.8 배포하기
XULRunner 1.8는 현재 stable developer preview release 입니다. 이 문서는 단일형식(standalone)의 XUL 응용프로그램을 개발환경에서 배포하는데 XULRunner가 어떻게 사용되는가에 관한 내용입니다.
XULRunner 명예의 전당
XULRunner을 기반으로한 모든 응용프로그램들을 찾아보실 수 있습니다.
Build Documentation
소스를 가져와서 빌드하는 방법을 배울 수 있습니다.
Debug Documentation
여러분의 응용 프로그램을 디버그하기 위해 Venkman을 설정하는 방법

커뮤니티

  • Mozilla 포럼 보기...

관련 주제

XUL
+

Categories

+

Interwiki Language Links

+

 

+

diff --git a/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html b/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html new file mode 100644 index 0000000000..c4b6c5ed6f --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html @@ -0,0 +1,64 @@ +--- +title: What XULRunner Provides +slug: Archive/Mozilla/XULRunner/What_XULRunner_Provides +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner/What_XULRunner_Provides +--- +

 

+

XULRunner의 목적은 XUL 어플리케이션(주요하게 파이어폭스와 썬더버드)을 구축하기 위한 방안 뿐만 아니라 내장 기법을 제공하는 것입니다. 다음 특징이 이미 구현되어 있거나 계획되어 있습니다.

+

 

+

Gecko Features

+ +

사용자 인터페이스 Features

+

XULRunner는 다음과 같은 사용자 인터페이스를 제공하며, 특정 조건하에 XULRunner기반 어플리케이션에서 사용하게 됩니다.

+ +

Embedding APIs

+

XULRunner는 다음과 같은 임베딩 API를 제공합니다.

+ +

The "Maybe" List

+

다음 기능은 이미 논의되어왔고 향후 추가될 예정입니다.

+ +

What's out

+

다음과 같은 기능은 제공하지 않습니다.

+ diff --git a/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html b/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html new file mode 100644 index 0000000000..498bee239e --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html @@ -0,0 +1,107 @@ +--- +title: XUL Application Packaging +slug: Archive/Mozilla/XULRunner/XUL_Application_Packaging +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner/XUL_Application_Packaging +--- +

XULRunner 응용프로그램 꾸러미(package)는 (Firefox 확장 기능처럼) 표준 toolkit 묶음인데, 응용프로그램 기술을 돕는 추가 manifest 파일(<tt>application.ini</tt>)을 하나 갖습니다. XUL 응용프로그램 꾸러미는 대체로 ZIP으로 압축되며 확장자는 .xulapp나 .xpi입니다. XULRunner 명령줄 flag "-install-app"로 설치할 수 있습니다(XULRunner 1.8.0.4 출시 노트 참조).

+

application.ini

+

<tt>application.ini</tt> manifest는 확장기능의 루트에 위치하고 XULRunner가 바르게 응용프로그램을 띄우게 하는 메타데이터(metadata)를 제공합니다. 파일은 <tt>[Headings]</tt>와 <tt>Key=Value</tt> 쌍을 갖는 Windows 방식 INI 파일로 분석됩니다. <tt>;</tt>이나 <tt>#</tt>으로 시작하는 줄은 주석으로 여깁니다.

+

본보기 application.ini 파일은 mozilla source tree에 있습니다.

+

[App] 절

+

<tt>App</tt> 절(section)은 응용프로그램에 관한 메타데이터를 지정합니다.

+

 

+
+
+ Name
+
+ 응용프로그램 이름을 지정합니다.
+ 필수.
+ 보기: <tt>Name=TestApplication</tt> +

 

+
+
+ Version
+
+ 응용프로그램 판 번호를 지정합니다.
+ 필수.
+ 판 번호 매김 세부 사항은 Toolkit 판 구성 참조.
+ 보기: <tt>Version=0.1</tt> +

 

+
+
+ BuildID
+
+ 유일한 build 식별자(identifier)를 지정합니다. 이는 대체로 날짜 식별자이고 매 응용프로그램 출시 때마다 달라야 합니다.
+ 필수.
+ 보기: <tt>BuildID=20060201</tt> +

 

+
+
+ ID
+
+ 유일한 응용프로그램 ID를 지정합니다.
+ 필수.
+ 응용프로그램 ID는, 확장 기능 ID와 같이, email <tt>ApplicationName@vendor.tld</tt>이나 UUID <tt>{12345678-1234-1234-1234-123456789abc}</tt> 형식 중 하나처럼 구성할 수 있습니다. 새로 개발된 응용프로그램은 email 형식을 권장합니다.
+ 보기: <tt>ID=TestApplication@example.tld</tt> +

 

+
+
+ Vendor
+
+ 응용프로그램 vendor를 지정합니다.
+ 선택.
+ 보기: <tt>Vendor=Grinch Productions</tt> +

 

+
+
+

[Gecko] 절

+

<tt>Gecko</tt> 절은 응용프로그램에 필요한 XULRunner 판을 지정합니다.

+

 

+

 

+
+
+ MinVersion
+
+ 이 응용프로그램에 필요한 XULRunner 최소판을 지정합니다.
+ 필수.
+ 보기: <tt>MinVersion=1.8</tt> +

 

+
+
+ MaxVersion
+
+ 이 응용프로그램에 필요한 XULRunner 최대판을 지정합니다.
+ 선택 - 기본값은 XULRunner 2판보다 작은 판입니다.
+ 보기: <tt>MaxVersion=1.8.0.*</tt> +

 

+
+
+

[XRE] 절

+

<tt>XRE</tt> 절은 사용할 수 있는 다양한 XULRunner 시동 기능들을 지정합니다.

+

 

+

 

+
+
+ EnableExtensionManager
+
+ 확장 기능과 확장 기능 관리를 사용 여부를 지정합니다. 맞는 값은 1과 0입니다.
+ 선택 - 기본값은 0입니다.
+ 주의: 이 옵션은 확장 기능/테마 관리자를 UI에서 이용할 수 있게 하는 메뉴 항목을 추가하지 않습니다; 그 일은 응용프로그램 제작자 몫입니다.
+ 보기: <tt>EnableExtensionManager=1</tt> +

 

+
+
+ EnableProfileMigrator</dt>
+
+ 응용프로그램을 처음으로 띄우고 프로파일이 없을 때, nsIProfileMigrator 인터페이스를 통해 프로파일 이전 코드 사용 여부를 지정합니다. 맞는 값은 1과 0입니다.
+ 선택 - 기본값은 0입니다.
+ 주의: 응용프로그램 제작자에게 nsIProfileMigrator 인터페이스를 구현할 책임이 있습니다; 만약 구현이 없으면 이전이 수행되지 않습니다.
+ 보기: <tt>EnableProfileMigrator=1</tt> +

 

+
+
+

Interwiki Language Links

+

diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html new file mode 100644 index 0000000000..35b81ee4da --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html @@ -0,0 +1,64 @@ +--- +title: XULRunner FAQ (자주 하는 질문) +slug: Archive/Mozilla/XULRunner/XULRunner_FAQ +tags: + - FAQ + - XUL + - XULRunner + - 도움말 + - 주요문의 + - 질문과 답변 +translation_of: Archive/Mozilla/XULRunner/FAQ +--- +

 

+

이 페이지는 XULRunner에 관한 많은 분들의 질문들에 대한 답변과 공통적으로 오해하는 내용들을 바로잡기 위해 작성되었습니다.

+

 

+
+
+ XULRunner는 브라우저인가요?
+
+ 아니오. 브라우저(제가 만든 브라우저 예제 또는  Firefox)를 만들기 위해 XULRunner를 사용하실 수는 있습니다. 하지만 "XULRunner browser" 같은 건 없습니다.
+
+ XULRunner는 개발 도구인가요?
+
+ 딱히 그렇다고 볼 순 없습니다. XULRunner는 인터넷 기술 실행도구(Runtime)입니다. XULRunner는 (예를 들면 AJAX Toolkit Framework 같은) 개발 도구의 제작에 활용될 수 있습니다. 훗날에는 다양한 개발 도구들을 포함하는 XULRunner 개발 키트(Developer Kit)가 나올 수도 있겠지요.
+
+ XULRunner를 Java, .NET(또는 Python) 등의 다른 실행도구(Runtime)들과 비교하면 어떻게 다른가요?
+
+ XULRunner의 목적은 인터넷 응용프로그램의 개발과 배포를 더욱 빠르게 해주기 위한 것입니다. 그렇기 때문에 모든 기능을 포함하는 실행도구가 될 필요가 없는 것이지요. 이러한 이유로 다른 여타의 방대한 기능을 제공하는 실행도구들에 비해, XULRunner는 아주 약간의 변화와 더욱 간소화된 배포 전략을 취할 수 있었습니다.
+
+ XULRunner를 사용한다면 저의 응용 프로그램을 XUL로 작성해야만 하나요?
+
+ 아닙니다! 여러분은 Mozilla 웹 플랫폼(HTML, XHTML, SVG 또는 XUL이 포함됨)에 의해 지원되는 어떠한 언어로도 응용 프로그램을 만드실 수 있습니다.
+
+ 그렇다면 왜 XULRunner이라고 불러야 하죠? HTMLRunner나 다른 이름으로도 불러도 될텐데?
+
+ XUL은 mozilla의 응용 프로그램의 UI에 항상 선택되어 왔던 기본 언어였습니다. 그리고  메인 라이브러리의 명칭이 libXUL이였습니다. 이런 이유들로 불리워진 이름이 고착화 되어서 지금에 이르게 된 것이지요.
+
+ 언제쯤이면 Firefox가 XULRunner 기반으로 제작될 예정이지요?
+
+ FireFox의 공식 배포 버전을 그렇게 변경하지는 않을 것입니다. 이미 XULRunner 기반으로 FireFox를 실행하는 것은 지금도 가능하고, 일부 Linux 배포판에서도 이미 이런 식으로 구동이 되고 있습니다.
+
+ XULRunner의 설치는 왜 그리 어려운가요? 쉽고 편리한 설치 도구는 없나요?
+
+ 왜나하면 아직 아무도 그런 코드를 만들지 않아서입니다! 다음은 개발자 프리뷰 배포 내용입니다.
+
+ XULRunner 및 XULRunner 기반 응용 프로그램의 설치와 배포를 위한 추가 기능들은 차후의 릴리즈에 반영될 것입니다.
+
+ XUL 응용 프로그램을 제작 중인데요, 저의 사용자들에게 어떻게 응용 프로그램을 배포할 수 있나요?
+
+ 지금 현재로써 Mozilla는 각각의 응용 프로그램별로 XULRunner를 따로 포함시켜 배포하시기를 권해 드립니다. 더 자세한 정보는 XULRunner 1.8 배포하기를 확인하세요.
+
+ 소스 코드는 어디에서 찾을 수 있나요?
+
+ 여기에서 확인하세요.
+
+ 제가 버그를 발견한 것 같은데요, 어떻게 알려드릴 수 있나요?
+
+ bugzilla.mozilla.org 사이트는 모든 Mozilla 제품들의 버그를 추적하기 위해 이용됩니다. 미리 검색을 해서 여러분의 버그가 아직 보고되지 않은 것임을 확인해 주세요.
+
+ 어떻게 도움을 줄 수 있나요?
+
+ XULRunner에 도움을 주고 싶지만 어디에서부터 시작해야 할지를 모르신다면, XULRunner:커뮤니티 페이지를 방문해서 뉴스그룹이나 IRC 채널에서 질문해 보세요.
+
+

diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html new file mode 100644 index 0000000000..ed5384c6b1 --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html @@ -0,0 +1,178 @@ +--- +title: XULRunner Hall of Fame +slug: Archive/Mozilla/XULRunner/XULRunner_Hall_of_Fame +tags: + - XUL + - XULRunner + - enterprise +translation_of: Archive/Mozilla/XULRunner/Hall_of_Fame +--- +

 

+

XULRunner 기반 프로그램

+ +

유틸리티/프로토타입

+ +

diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html new file mode 100644 index 0000000000..44d681cd22 --- /dev/null +++ b/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html @@ -0,0 +1,168 @@ +--- +title: XULRunner tips +slug: Archive/Mozilla/XULRunner/XULRunner_tips +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner/Tips +--- +

XULRunner Frequently Asked Questions. Work in progress.

+

Extension Manager

+

To be able to install any extensions, you first need to enable the Extension Manager in application.ini. XULRunner 1.8.0 does not load extensions from the application directory; only the XULRunner directory and the user profile directory are checked. The following prefs must also be set to make the XPInstall dialog, extension manager, and theme manager work:

+
pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/x...allConfirm.xul");
+pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/...ul?type=themes");
+pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/...ype=extensions");
+pref("xpinstall.dialog.progress.type.skin", "Extension:Manager-themes");
+pref("xpinstall.dialog.progress.type.chrome", "Extension:Manager-extensions");
+pref("extensions.update.enabled", true);
+pref("extensions.update.interval", 86400);
+pref("extensions.dss.enabled", false);
+pref("extensions.dss.switchPending", false);
+pref("extensions.ignoreMTimeChanges", false);
+pref("extensions.logging.enabled", false);
+pref("general.skins.selectedSkin", "classic/1.0");
+// NB these point at AMO
+pref("extensions.update.url", "chrome://mozapps/locale/extensions/e...ons.properties");
+pref("extensions.getMoreExtensionsURL", "chrome://mozapps/locale/extensions/e...ons.properties");
+pref("extensions.getMoreThemesURL", "chrome://mozapps/locale/extensions/e...ons.properties");
+
+

Useful Chrome URLs

+

Most of these require branding.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowURLWindow Type
Extension Managerchrome://mozapps/content/extensions/...ype=extensionsExtension:Manager-extensions
Theme Managerchrome://mozapps/content/extensions/...ul?type=themesExtension:Manager-themes
JavaScript Consolechrome://global/content/console.xulglobal:console
about:configchrome://global/content/config.xul 
+

Developer Extensions

+

--Tlaurenzo 17:34, 17 March 2006 (PST)There is another way to go about this. See my blog post for a working method to get Venkman and the Extension Developer's Extension working in XULRunner apps.

+

Venkman

+ +
in your chrome manifest add a "skin" line:
+
+skin communicator classic/1.0 skin/communicator/
+
+add a skin folder named "communicator" and add a single CSS file named "communicator.css" with this content:
+
+@import url("chrome://global/skin/");
+
+

DOM Inspector

+

Same as venkman

+

Component Viewer

+

Need custom build, first of all. What else?

+

Extension Developer's Extension

+

Extension Developer's Extension is a useful tool, featuring Live XUL Editor and JavaScript Shell.

+

To install the extension into your application you'll need to hack its install.rdf (see above). You'll probably also want to create menuitems that let you open the JS Shell and other tools provided by the extension.

+

Branding

+

Branding is a chrome package containing product-specific information (e.g. the product name, vendor, and logo).

+

Some XULRunner components (in particular, the Extension Manager) depend on branding, in the sense that they expect to find certain strings in <tt>chrome://branding/locale/brand.dtd</tt> and <tt>chrome://branding/locale/brand.properties</tt>.

+

In order to satisfy these dependencies, you can save Firefox's <tt>brand.dtd</tt>/<tt>brand.properties</tt> to <tt>chrome/locale/branding</tt> folder, modify them appropriately, and register a locale provider for <tt>branding</tt> by adding the following line to your chrome manifest:

+
locale branding en-US chrome/locale/branding/
+
+

The location you put the branding files in doesn't matter, as long as you register it appropriately in the manifest.

+

In addition, a branding content package must be registered to include the application logo:

+
content branding chrome/branding
+
+

2 icon files must provided in this folder : + + icon48.png + and + + icon64.png + . See Firefox for example.

+

In ''~.mozconfig'': ac_add_options --enable-branding=« branding location »

+

Making Windows display correct application name and icon when buttons are grouped

+

By default, the task bar on Windows might group windows belonging to the same process into one button to save space. This button is usually called "xulrunner.exe" and has XULRunner's icon. There are two approaches to display the branding of your application instead:

+ +

Reading command line arguments

+

See Chrome: Command Line. Command line arguments are handled via nsICommandLineHandler as usual.

+

= Can i have JavaScript errors / warnings directed to stdout instead of the jsconsole? = See #306263 This doesn't do anything (1.8.0.1): xulrunner -app application.ini -console This neither (1.8.0.1) in ''defaults/preferences/«application name».js'': pref("javascript.options.strict", true); pref("javascript.options.showInConsole", true); pref("browser.dom.window.dump.enabled", true);

+

 

+

Preferences needed for file download dialogs

+

To use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs:

+
pref("browser.download.useDownloadDir", true);
+pref("browser.download.folderList", 0);
+pref("browser.download.manager.showAlertOnComplete", true);
+pref("browser.download.manager.showAlertInterval", 2000);
+pref("browser.download.manager.retention", 2);
+pref("browser.download.manager.showWhenStarting", true);
+pref("browser.download.manager.useWindow", true);
+pref("browser.download.manager.closeWhenDone", true);
+pref("browser.download.manager.openDelay", 0);
+pref("browser.download.manager.focusWhenStarting", false);
+pref("browser.download.manager.flashCount", 2);
+//
+pref("alerts.slideIncrement", 1);
+pref("alerts.slideIncrementTime", 10);
+pref("alerts.totalOpenTime", 4000);
+pref("alerts.height", 50);
+
+

If you are missing preferences that a dialog requires, you will get the following errors:

+
Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPrefBranch.getBoolPref]
+
+Error: dialog has no properties
+Source File: chrome://mozapps/content/downloads/u...ontentType.xul
+Line: 1
+
+

 

+

Enabling Password Manager

+

These preferences seem to be the default in Firefox, however, they are missing in XULRunner. Without these settings Password Manager will not store login details.

+
pref("signon.rememberSignons", true);
+pref("signon.expireMasterPassword", false);
+pref("signon.SignonFileName", "signons.txt");
+
+

You also need to get an instance of the login manager service, which internally initializes the system:

+
Components.classes["@mozilla.org/login-manager;1"].getService(Components.interfaces.nsILoginManager);
+
+

Firefox 3를 이용한 XULRunner 응용 프로그램 실행하기

+

Firefox 3에는 XULRunner 런타임(runtime)이 포함되어 있습니다. 브라우저 대신 XUL 응용 프로그램을 실행하려면 명령창에서 <tt>-app</tt> 옵션으로 실행하면 됩니다. 예를 들어 Windows에서는 다음과 같습니다.

+
  firefox.exe -apppath\to\application.ini
+
+

Mac에서는 다음과 같습니다.

+
  /Applications/Firefox.app/Contents/MacOS/firefox-bin -app/path/to/application.ini
+
+

Mac의 경우에는 전체 경로(full path)를 모두 입력해야 한다는 점에 주의하세요. 상대 경로를 사용하면 동작하지 않는거 같습니다.

+

Troubleshooting

+

Window title missing

+

If the title of your XUL <window> is blank, even though you specified a title attribute, make sure the extension on your XUL file is <tt>.xul</tt> rather than <tt>.xml</tt>.

+
+  
+

diff --git a/files/ko/archive/rss/getting_started/index.html b/files/ko/archive/rss/getting_started/index.html new file mode 100644 index 0000000000..a446858ece --- /dev/null +++ b/files/ko/archive/rss/getting_started/index.html @@ -0,0 +1,56 @@ +--- +title: Getting Started +slug: Archive/RSS/Getting_Started +tags: + - MDC Project + - NeedsEditorialReview + - RSS + - 'RSS:Getting_Started' +translation_of: Archive/RSS/Getting_Started +--- +

개요

+

이 입문서는 Really Simple Syndication (RSS)에 대한 것입니다.

+

여기서는 단계별로 RSS의 기본을 따라가면서 실제로 동작하는 예를 보여줄 것입니다. 그리고 + + 무언가를 배우는 가장 좋은 방법은 직접 해보는 것이다 + 라는 경구를 따라, 당신 스스로 RSS 파일을 직접 만들게 될 것입니다.

+

 

+

누가 읽어야 하는가?

+

이 입문서는 주로 RSS 초보자, 즉 거의 혹은 전혀 RSS를 경험해보지 못한 사람들을 대상으로 하고 있습니다. 하지만, RSS에 경험이 있는 사람에게도 모르고 있던 정보를 알게 되거나 알고 있던 것을 새롭게 환기하는 용도로 사용될 수 있습니다.

+

이 입문서는 독자가 HTML (혹은 XML)에 어느 정도 경험이 있으며, 기본적인 + + 마크업 + 을 다룰 수 있다고 가정합니다. 다시 말해, 이런 코드를 어렵지 않게 읽을 수 있어야 합니다.

+
   이 마크업은 <b>굵은 글자를</b> 표시합니다.
+
+

이 정도라면 RSS를 배우는데 지장이 없습니다.

+
+

NOTE: 웹 개발자나 웹 개발자가 되려고 하지 않는 사람에게는 이 입문서가 해당되지 않습니다. 입문서를 잘 사용하려면 + + 마크업 + 을 쓸 주 있어야 합니다.

+
+

시작하기 전에 필요한 것

+

이 입문서를 잘 활용하기 위해서는, 텍스트 편집기와 RSS 리더가 필요합니다. 그리고 그 편집기와 RSS 리더의 사용법을 알고 있어야 합니다.

+
+

NOTE: 워드 프로세서는 텍스트 편집기가 아닙니다. 워드 프로세서를 사용하는 경우, RSS 파일을 저장할 때 반드시 단순한 text 형식으로 저장해야 합니다.

+
+

이 입문서의 RSS 파일들을 반드시 만들어야 하는 것은 아니고 그냥 읽기만 해도 되지만, 그것은 배우는 데 있어 좋은 방법은 아닙니다. RSS 파일을 스스로 만들 때 더 많은 것을 잘 배우게 될 것입니다.

+

이 입문서의 사용법

+

입문서의 각 장은 그것만으로도 + + 독자적인 + 입문선가 될 수 있도록 쓰여졌지만, 각 장은 이전 장의 내용을 독자가 모두 알고 있다고 가정하고 있습니다. 원하는 장부터 시작해도 되지만, RSS 초보자는 순서대로 읽기를 권합니다.

+

Tutorial

+
    +
  1. What is RSS
    2. +
  2. Why use RSS
    3. +
  3. How RSS Works
    4. +
  4. Hello World (article not yet written) link removed because too many people put their hello world there
    5. +
  5. Syndicating
    6. +
  6. Blogs
    7. +
  7. Broadcatching
    8. +
  8. Microformats
    9. +
  9. Advanced Broadcatching
    10. +
+

diff --git a/files/ko/archive/rss/getting_started/what_is_rss/index.html b/files/ko/archive/rss/getting_started/what_is_rss/index.html new file mode 100644 index 0000000000..0ec7281c2a --- /dev/null +++ b/files/ko/archive/rss/getting_started/what_is_rss/index.html @@ -0,0 +1,230 @@ +--- +title: What is RSS +slug: Archive/RSS/Getting_Started/What_is_RSS +tags: + - 'RSS:Getting_Started' +translation_of: Archive/RSS/Getting_Started/What_is_RSS +--- +

이 문서는 RSS가 무엇인지 설명하기 위해 만들어졌습니다. 여러분은 아직 RSS를 만들어 본 적이 없으실 겁니다. 그렇지만 RSS를 어떻게 사용하는 지 아시기도 하고, 간단한 샘플 파일을 보신적이 있으실 겁니다. RSS가 무엇이고 어떻게 만들어진 것인지 한번 알아보겠습니다.

+

RSS란 무엇인가?

+

가장 많이 이용하는 RSS 2.0 버전은 데이터 연결을 위해 사용하는 XML기반 마크업 언어 입니다. -based markup languages used for syndication. (RDF를 기반하는 RSS 형식도 존재합니다. 이미 사라진 RSS 0.90과 RSS 1.0 처럼 말이죠.) RSS를 주로 사용하는 곳은 웹 사이트 최신 소식이나 블로그, 인터넷 라디오나 TV 등의 뉴스를 전달하는 역할을 합니다.

+

이 문서는 RSS 2.0을 다룹니다. 물론 다른 RSS 버전에 대한 주의 사항도 함께 다루게 됩니다..

+

RSS는 손으로 만들지는 않습니다. 거의 서버쪽 프로그램에 의해 자동으로 만들어 집니다(PHP나 Java, C# 및 Python 같은 언어로 만들어진 것이죠.) 그러나 RSS를 배우려면 손으로 한번 RSS 스크립트를 만들 필요가 있습니다.

+

RSS에 대한 간단한 역사

+

In March of 1999 Netscape released RSS 0.90. It was much much different than today's RSS. It wasn't really a format for syndication, but was a format for providing a summary of a website. In fact, back then, RSS did not stand for Really Simple Syndication but stood for Rich Site Summary.

+

In July of 1999 Netscape's RSS 0.91 was released. Like RSS 0.90, Netscape's RSS 0.91 was also a format for providing a summary of a website, and not really a syndication format (as it is today). Netscape's RSS 0.91 was created to simplify things. RSS 0.90 was RDF-based. (Which many found to be overly complex.) Netscape's RSS 0.91 was only XML-based and added a DTD to allow several entities (commonly found in HTML).

+

So at this point Netscape deprecated the RDF-based RSS 0.90 and told everyone to use Netscape's RSS 0.91, which was XML-based.

+

In June of 2000 Userland's RSS 0.91 was released. (And yes, that means that there are 2 different version of RSS 0.91.) The difference between the 2 different versions of RSS 0.91 -- Netscape's RSS 0.91 and Userland's RSS 0.91 -- is that Userland's RSS 0.91 does not have the DTD that Netscape's RSS 0.91 has; and thus doesn't have the extra entities that Netscape's RSS 0.91 has (commonly found in HTML). Other than that though, they are the same. Technically speaking, Userland's RSS 0.91 is a subset of Netscape's RSS 0.91.

+

In December of 2000 the RSS-DEV working group released RSS 1.0. This version of RSS was no longer purely XML-based, but was RDF-based (like the original and now deprecated RSS 0.90). The RSS-DEV working group changed what RSS stood for, and made it stand for RDF Site Summary. (At least, this is what it stood for in their version of RSS.)

+

So at this point we had Netscape's RSS 0.91, Userland's RSS 0.91, and the RSS-DEV working group's RSS 1.0.

+

Later that same December Userland released RSS 0.92. RSS 0.92 was meant to replace Userland's RSS 0.91. (If you notice though, the RSS versioning number got all messed up at this point. RSS 0.92 is newer than RSS 1.0.)

+

So at this point we had Netscape's RSS 0.91, the RSS-DEV working group's RSS 1.0, and Userland's RSS 0.92.

+

In April 2001 Userland released a draft for RSS 0.93. This version of RSS was never made "final" and was only ever a draft, and never became a replacement for Userland's RSS 0.92.

+

In August 2002 Userland released a draft for RSS 0.94. Like RSS 0.93, this version of RSS was never made "final" and was only ever a draft, and never became a replacement for Userland's RSS 0.92.

+

So at this point we still had Netscape's RSS 0.91, the RSS-DEV working group's RSS 1.0, and Userland's RSS 0.92. (Although some were using RSS 0.93 and RSS 0.94 even though they weren't suppose to.)

+

In September 2002 Userland released RSS 2.0. RSS 2.0 was meant to be a replacement for RSS 0.92 (and the RSS 0.93 and RSS 0.94 drafts that no one was suppose to use). Userland bumped up the version number all the way up to 2.0 because the RSS-DEV working group already used 1.0 with their RDF-based RSS 1.0.

+

So at this point we had Netscape's RSS 0.91, the RSS-DEV working group's RSS 1.0, and Userland's RSS 2.0.

+

Now, the story does not quite end there. Once in November 2002 and another time in January 2003, RSS 2.0 was changed from its original specification, by Userland. And although these are each are different, they all label themselves as RSS 2.0 on the <rss> element.

+

So now, at this point, we still have Netscape's RSS 0.91 (since Netscape never deprecated it) although most people don't use it anymore. Most people use either the RDF-based RSS 1.0 or the XML-based RSS 2.0. With the XML-based RSS 2.0 seeming to be the most popular. (This tutorial uses RSS 2.0.)

+

How RSS is Used Today

+

Today, RSS is mostly used for syndication. Syndication is the process of telling others that you have content for them to consume. In other words, when you syndicate, you are telling everyone something like: "Hey everyone, I've got articles that I want everyone to come and read. Just subscribe to my RSS feed and you will be able to get the latest ones all the time.".

+
+

NOTE: If you provide a non-password-protected RSS feed, you are implicitly giving everyone permission to use the contents in you RSS feed in almost any way they see fit. They can read it. The can make local copies of it. They can share that local copy. They can put it on their web site. They can even re-syndicated it. And more.

+

If you don't want any of that done, then don't put it in a non-password-protected RSS feed. (And don't make the password public of course.)

+
+

News web sites use RSS to provide everyone with a list of their newest articles. For example:

+
   
+    <?xml version="1.0"?>
+
+    <rss version="2.0">
+
+        <channel>
+            <title>Example News Site</title>
+            <description>This is an Example News Site.</description>
+            <lastBuildDate>Wed, 27 Jul 2005 00:30:30 -0700</lastBuildDate>
+            <link>http://news.example.com/</link>
+
+            <item>
+                <title>News Flash: I Like Bread</title>
+                <guid isPermaLink="false">4d4a0a12-f188-4c97-908b-eea27213c2fe</guid>
+                <pubDate>Wed, 27 Jul 2005 00:30:30 -0700</pubDate>
+                <link>http://news.example.com/artcle/554</link>
+            </item>
+            <item>
+                <title>Big News Today: Birds Fly</title>
+                <guid isPermaLink="false">c4a63f09-b45b-466b-8773-6ff264001ab7</guid>
+                <pubDate>Tue, 19 Jul 2005 04:32:51 -0700</pubDate>
+                <link>http://news.example.com/artcle/553</link>
+            </item>
+            <item>
+                <title>Fire is Hot</title>
+                <guid isPermaLink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid>
+                <pubDate>Sun, 15 May 2005 13:02:08 -0700</pubDate>
+                <link>http://news.example.com/artcle/552</link>
+            </item>
+        </channel>
+
+    </rss>
+    
+
+

Bloggers use RSS to provide everyone with a list of their newest blog posts. For example:

+
   
+    <?xml version="1.0"?>
+
+    <rss version="2.0">
+
+        <channel>
+            <title>Joe Blow's Blog</title>
+            <description>This is the Weblog of Joe Blow</description>
+            <lastBuildDate>Sun, 15 May 2005 13:02:08 -0500</lastBuildDate>
+            <link>http://joe-blow.example.net/</link>
+
+            <item>
+                <title>I Be Blogging...</title>
+                <guid>http://joe-blow.example.net/log/21</guid>
+                <pubDate>Sun, 15 May 2005 13:02:08 -0500</pubDate>
+                <link>http://joe-blow.example.net/log/21</link>
+            </item>
+            <item>
+                <title>I am so SMRT</title>
+                <guid>http://joe-blow.example.net/log/20</guid>
+                <pubDate>Sat, 14 May 2005 22:19:18 -0500</pubDate>
+                <link>http://joe-blow.example.net/log/20</link>
+            </item>
+            <item>
+                <title>Huh?</title>
+                <guid>http://joe-blow.example.net/log/19</guid>
+                <pubDate>Sat, 14 May 2005 09:55:59 -0500</pubDate>
+                <link>http://joe-blow.example.net/log/19</link>
+            </item>
+            <item>
+                <title>Black Cat Spotted</title>
+                <guid>http://joe-blow.example.net/log/18</guid>
+                <pubDate>Fri, 13 May 2005 13:13:13 -0500</pubDate>
+                <link>http://joe-blow.example.net/log/18</link>
+            </item>
+        </channel>
+
+    </rss>
+    
+
+

Those who create Internet Radio use RSS to allow users to broadcatch their shows. For example:

+
   
+    <?xml version="1.0"?>
+
+    <rss version="2.0">
+
+        <channel>
+            <title>Joe's IPradio Show</title>
+            <description>The best IPradio Show on the Internet, staring Joe!</description>
+            <lastBuildDate>Mon, 15 Aug 2005 16:12:37 -0400</lastBuildDate>
+            <link>http://joe.ipradio.example.net/</link>
+
+            <item>
+                <title>I C UR Tan Line</title>
+                <guid>http://joe.ipradio.example.net/show/55</guid>
+                <pubDate>Mon, 15 Aug 2005 16:11:57 -0400</pubDate>
+                <enclosure url="http://joe.ipradio.example.net/show/55"
+                           length="4487216"
+                           type="application/ogg"
+                />
+            </item>
+            <item>
+                <title>Car Care for Car Fanatics</title>
+                <guid>http://joe.ipradio.example.net/show/54</guid>
+                <pubDate>Mon, 8 Aug 2005 13:12:12 -0400</pubDate>
+                <enclosure url="http://joe.ipradio.example.net/show/54"
+                           length="4892178"
+                           type="audio/x-mp3"
+                />
+            </item>
+            <item>
+                <title>Best Beaches in BC</title>
+                <guid>http://joe.ipradio.example.net/show/53</guid>
+                <pubDate>Mon, 1 Aug 2005 18:22:14 -0400</pubDate>
+                <enclosure url="http://joe.ipradio.example.net/show/53"
+                           length="3984215"
+                           type="application/ogg"
+                />
+            </item>
+        </channel>
+
+    </rss>
+    
+
+
+

NOTE: Broadcatching of Internet Radio is sometimes call Podcasting, IPradio, and Audio Blogging.

+
+

Those who create Internet Television use RSS to allow users to broadcatch their shows. For example:

+
   
+    <?xml version="1.0"?>
+
+    <rss version="2.0">
+
+        <channel>
+            <title>Kate's IPTV Show</title>
+            <description>Watch it or else!  You know you want to.</description>
+            <lastBuildDate>Tue, 23 Aug 2005 21:02:05 -0800</lastBuildDate>
+            <link>http://katetv.example.com/</link>
+
+            <item>
+                <title>This is Fun</title>
+                <guid>http://katetv.example.com/show/4</guid>
+                <pubDate>Tue, 23 Aug 2005 21:02:05 -0800</pubDate>
+                <enclosure url="http://katetv.example.com/show/4"
+                           length="1911146"
+                           type="application/ogg"
+                />
+            </item>
+            <item>
+                <title>Watch This</title>
+                <guid>http://katetv.example.com/show/3</guid>
+                <pubDate>Tue, 16 Aug 2005 16:11:57 -0400</pubDate>
+                <enclosure url="http://katetv.example.com/show/3"
+                           length="1387442"
+                           type="application/ogg"
+                />
+            </item>
+            <item>
+                <title>It is me again</title>
+                <guid>http://katetv.example.com/show/2</guid>
+                <pubDate>Tue, 9 Aug 2005 13:12:12 -0400</pubDate>
+                <enclosure url="http://katetv.example.com/show/2"
+                           length="1894877"
+                           type="video/mpeg"
+                />
+            </item>
+            <item>
+                <title>Hello</title>
+                <guid>http://katetv.example.com/show/1</guid>
+                <pubDate>Tue, 2 Aug 2005 18:22:14 -0400</pubDate>
+                <enclosure url="http://katetv.example.com/show/1"
+                           length="17442215"
+                           type="application/ogg"
+                />
+            </item>
+        </channel>
+
+    </rss>
+    
+
+

The observant reader may have noticed that the + + news web site + and + + blogger + examples were the same type of RSS. And also that the + + Internet Radio + and + + Internet Television + examples were the same type of RSS. In fact, the only real difference between the news/blogger RSS and the Internet Radio/Internet Television RSS is that the news/blogger RSS uses the <link> element and the Internet Radio/Internet Television RSS uses the <enclosure> element.

+
+

NOTE: These RSS examples are very very simple. And were designed to give you an idea about what RSS basically looks like. All these RSS examples are very minimal. When you create your own RSS feeds, you will likely want to make them more complex than these and include additional RSS elements and make use of the various RSS Modules.

+
+

+

다음 »

+

+

diff --git a/files/ko/archive/rss/index.html b/files/ko/archive/rss/index.html new file mode 100644 index 0000000000..e5a2a6cd60 --- /dev/null +++ b/files/ko/archive/rss/index.html @@ -0,0 +1,48 @@ +--- +title: RSS +slug: Archive/RSS +tags: + - RSS +translation_of: Archive/RSS +--- +
시작하기
+RSS를 시작하는데 도움이 되는 안내 입문서
+
Really Simple Syndication (RSS)는 HTML과 비슷한 XML에 기반을 둔 발행(syndication)에 쓰는 대중적인 데이터 포맷입니다. RSS는 어두운 역사와 호환성이 없는 수많은 RSS 버전이 있습니다. (몇몇은 RDF를 기반으로 하고 있지만 대부분은 XML만 기반으로 하고 있습니다.) 이러함에도 불구하고, RSS는 엄청난 활동성(momentum)으로 뉴스, 블로그 포스트, IP라디오, IPTV 발행하는데(syndicate) 사용되는 매우 대중적인 포맷입니다.
+ + +
+

문서

+
Why RSS Slash is Popular - Counting Your Comments +
Charles Iliya Krempeaux가 여러 모듈 가운데 왜 인기가 있고 댓글(comment) "count"를 주는데 어떻게 쓰는지 RSS Slash 모듈에 관해 이야기합니다. +
+
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments +
Charles Iliya Krempeaux가 여러 모듈 가운데 왜 인기가 있고 댓글에 링크하는데 어떻게 쓰는지 적격(Well-Formed) 웹 RSS 모듈에 관해 이야기합니다. +
+
The Myth of RSS Compatibility +
Mark Pilgrim이 여러분에게 RSS의 지저분한 역사와 관해 말해주고 각 버전 사이의 비호환성을 자세히 설명합니다. +
+
Atomic RSS +
Tim Bray가 micro 포맷과 RSS 2.0용 확장 모듈(발행 포맷으로 RSS 2.0 따르지만 선택한 Atom 1.0 요소를 가져오고 쓰는)로서 Atom 1.0 사용에 관해 이야기합니다. +
+

모두 보기... +

+		 +

커뮤니티

+
  • 모질라 XML 포럼 보기... +
+

+

+

관련 주제

+
RDF, XML +
+
+

Categories +

Interwiki Language Links +


+

diff --git a/files/ko/archive/rss/module/index.html b/files/ko/archive/rss/module/index.html new file mode 100644 index 0000000000..bdffb41ec6 --- /dev/null +++ b/files/ko/archive/rss/module/index.html @@ -0,0 +1,70 @@ +--- +title: Module +slug: Archive/RSS/Module +tags: + - RSS +translation_of: Archive/RSS/Module +--- +

RSS 모듈 목록

+

RSS 모듈은 XML 이름공간을 써서 RSS 문서에 집어넣는 microformat입니다. 모듈은 RSS를 확장하는 방법입니다. 아래는 인기 있는 RSS 모듈 목록입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이름공통 접두사상태출시 일제작자
Atomic RSSatom 2005년 07월 27일Tim Bray
blogChannel  2002년 09월 17일Dave Winer
Contentcontent   
creativeCommonscc 2002년 12월 16일Dave Winer
Dublin Coredc   
Slashslash   
Well-Formed Webwfw  Joe Gregorio and Chris Sells
+

diff --git a/files/ko/archive/rss/version/index.html b/files/ko/archive/rss/version/index.html new file mode 100644 index 0000000000..5b6a3c7c87 --- /dev/null +++ b/files/ko/archive/rss/version/index.html @@ -0,0 +1,109 @@ +--- +title: Version +slug: Archive/RSS/Version +tags: + - RSS +translation_of: Archive/RSS/Version +--- +

RSS Versions

+

RSS 는 복잡한 역사가 있습니다. 서로 다른 사람들이 스스로 RSS라고 부르는 명세를 일방적으로 만들어왔기 때문입니다. 어떤 RSS는 XML형식으로 되어 있습니다. 또 어떤 RSS는 RDF형식으로 되어 있습니다.

+

아래의 목록은, 발표된 시간 순으로 나열된 이제까지 알려진 RSS 버전들입니다.

+
+

NOTE: 아래 목록에서, RSS 1.0의 위치가 잘못된 것처럼 보이지만, 사실 시간순으로 맞는 위치에 있습니다.

+
+
+

NOTE: RSS 0.91에는 세 가지 다른 버전이 있습니다. Netscape의 RSS 0.91 (Revision 1), Netscape의 RSS 0.91 Revision 3 과 Userland의 RSS 0.91이 그것입니다. 엄밀히 말해서, Userland의 RSS 0.91 은 Netscape의 RSS 0.91의 부분집합입니다.

+
+
+

NOTE: RSS 0.93 과 RSS 0.94 은 "drafts"만 나오고, "final"상태가 되지 못해서 실제로 사용된 적이 없습니다.

+
+

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusRelease DateBased OnAuthor
RSS 0.90 March 1999RDFNetscape
Netscape's RSS 0.91 (Revision 1) ?XMLNetscape
Netscape's RSS 0.91 Revision 3 July 10, 1999XMLNetscape
Userland's RSS 0.91 June 4, 2000XMLUserland
RSS 1.0StandardDecember 9, 2000RDFRSS-DEV Working Group
RSS 0.92 December 25, 2000XMLUserland
RSS 0.93 April 20, 2001XMLUserland
RSS 0.94 August 19, 2002XMLUserland
RSS 2.0 September 2002XMLUserland
RSS 2.0 (post 2002-11-11) November 11, 2002XMLUserland
RSS 2.0 (post 2003-01-21)StandardJanuary 21, 2003XMLUserland
+

diff --git a/files/ko/archive/security/index.html b/files/ko/archive/security/index.html new file mode 100644 index 0000000000..74823c8f52 --- /dev/null +++ b/files/ko/archive/security/index.html @@ -0,0 +1,14 @@ +--- +title: Security +slug: Archive/Security +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Security +--- +

Relying on these obsolete security articles is highly discouraged. Doing so may put your systems at risk.

+ +
+
Digital Signatures
Encryption and decryption address the problem of eavesdropping, one of the three Internet security issues mentioned at the beginning of this document. But encryption and decryption, by themselves, do not address another problem: tampering.
Encryption and Decryption
Encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. Decryption is the process of transforming encrypted information so that it is intelligible again.
Introduction to Public-Key Cryptography
Public-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and Secure Sockets Layer (SSL) communications. This document introduces the basic concepts of public-key cryptography. For an overview of SSL, see "Introduction to SSL." For an overview of encryption and decryption, see "Encryption and Decryption." Information on digital signatures is available from "Digital Signatures."
+
Introduction to SSL
This document introduces the Secure Sockets Layer (SSL) protocol. SSL has been universally accepted on the World Wide Web for authenticated and encrypted communication between clients and servers.
NSPR Release Engineering Guide
This paper is for engineers performing formal release for the NetScape Portable Runtime (NSPR) across all platforms.
SSL and TLS
The Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. Both client and server authentication occur over SSL/TLS.
+
diff --git a/files/ko/archive/security/tcp_ip/index.html b/files/ko/archive/security/tcp_ip/index.html new file mode 100644 index 0000000000..983b83b308 --- /dev/null +++ b/files/ko/archive/security/tcp_ip/index.html @@ -0,0 +1,50 @@ +--- +title: TCP/IP 보안 +slug: Archive/Security/TCP_IP +translation_of: Archive/Security/TCP_IP +--- +

{{draft}}

+ +

TCP/IP 는 네트워크 통신을 위해 전세계적으로 사용되고 있다.  TCP/IP 통신에서는 네 개의 계층이 관여한다. 유저가 네트워크를 통해 데이터를 보내고 싶은 경우, 데이터는 높은 계층에서 중간 계층을 거쳐 하위 계층으로 전달되며, 전달되는 과정에서 추가적인 정보들이 추가된다.  각 계층에서 logical unit은 header와 payload로 구성되어 있다. Payload는 이전의 계층에서 받은 정보들을 담고 있으며, header는 주소와 같이 계층의 상세정보를 담고있다. 응용계층에서 payload는 실제 application 데이터다. 가장 낮은 계층은 축적된 모든 정보를 물리적인 네트워크를 통해 데이터를 전달한다. 전달된 데이터는 다시 하위 계층에서 상위 계층으로 전달되어 목적지에 도달한다. 한 계층에서 캡슐화된 데이터는 하위 계층에 있는 더 큰 컨테이너에 캡슐화된다. 아래는 네 개의 TCP/IP 계층을 높은 계층 순으로 나열한 것이다.

+ + + +
+
TCP/IP 모델에서 각 계층마다 네트워크 통신을 위한 보안 제어(security control)가 존재한다. 이전에 언급되었듯이, 데이터를 상위계층에서 하위계층으로 전달되며, 각 계층을 통과할 때마다 정보가 추가된다. 이러한 이유로, 상위 계층에서의 보안 제어(security control)는 하위 계층의 보안을 제공할 수 없다. 또한, 하위 계층에서는 상위 계층이 모르게 작동하는 부분들을 상위 계층이 커버해줄 수 없다. 각 계층에서 담당하는 보안 제어 방법들:
+
+ + + +

Because they can provide protection for many applications at once without modifying them, network layer security controls have been used frequently for securing communications, particularly over shared networks such as the Internet.  Network layer security controls provide a single solution for protecting data from all applications, as well as protecting IP information.  Nevertheless, in many cases, controls at another layer are better suited to providing protection than network layer controls.  For example, if only one or two applications need protection, a network layer control may be excessive.  Transport layer protocols such as SSL are most commonly used to provide security for communications with individual HTTP-based applications, although they are also used to provide protection for communication sessions of other types of applications such as SMTP, Point of Presence (POP), Internet Message Access Protocol (IMAP), and File Transfer Protocol (FTP).  Because all major Web browsers include support for TLS, users who wish to use Web-based applications that are protected by TLS normally do not need to install any client software or reconfigure their systems.  Newer applications of transport layer security protocols protect both HTTP and non-HTTP application communications, including client/server applications and other network traffic.  Controls at each layer offer advantages and features that controls at other layers do not.

+ +

SSL is the most commonly used transport layer security control.  Depending on how SSL is implemented and configured, it can provide any combination of the following types of protection:

+ + + +
+

Original Document Information

+ + +
+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git a/files/ko/archive/web/index.html b/files/ko/archive/web/index.html new file mode 100644 index 0000000000..fe223d9b2a --- /dev/null +++ b/files/ko/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

E4X
ECMAScript for XML (E4X)는 JavaScript에 native XML 지원을 더하는 프로그래밍 언어 확장기능입니다. E4X는 ECMAScript 프로그래머에게 자연스러운 형식으로 XML 문서 접근 방법을 제공하여 이를 수행합니다. 목표는 DOM 인터페이스를 통하기보다는 XML 문서에 접근하기 더 간단한 대체 구문 제공입니다.
XForms
Categories

diff --git a/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html b/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html new file mode 100644 index 0000000000..da862c184a --- /dev/null +++ b/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html @@ -0,0 +1,98 @@ +--- +title: ECMAScript Next support in Mozilla +slug: Archive/Web/JavaScript/ECMAScript_7_support_in_Mozilla +translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla +--- +
{{jsSidebar("New_in_JS")}}
+ +

ECMAScript 2016 는 (흔히 JavaScript로 알려져 있는) ECMA-262 표준의 차세대 버전 입니다. ECMAScript 2015이 2015년 6월 17일에 확정되었음에도 불구하고 새로운 특징들이 이미 제안되고 있습니다. 기능 제안에 대한 최신 후보들은 tc39/ecma262 GitHub 저장소에서 보실 수 있습니다.

+ +

현재 규격 개발에 관한 사항들은 각 기능들에 대한 stages와 champions를 안내하면서 해결할 예정입니다. 또한, 2년마다 표준을 배포하는 것이 제안되어 있습니다. post-ES2015 규격 처리방안에 대해 더 알고싶으시다면, Rafael Weinstein의 발표자료를 참고하세요.

+ +

ECMAScript 표준에 대한 피드백을 위한 채널은 es-discuss 입니다.

+ +

ECMAScript 2016

+ +

 

+ +

다음 ES2016기능들이 구현되었습니다.

+ + + +

ECMAScript 2017

+ +

다음 ES2017기능들이 구현되었습니다.

+ +

 

+ + + +

 

+ +

 

+ +

실험 단계(특성)

+ +

다음 기능은 이미 구현되어 있지만,  Firefox Nightly channel에서만 이용 가능합니다.:

+ +

Additions to the ArrayBuffer object

+ + + +

New TypedObject objects

+ + + + + +

New SIMD objects

+ + + +

 

+ +

New Shared Memory objects

+ + + +

 

+ +

참조

+ + diff --git a/files/ko/archive/web/javascript/index.html b/files/ko/archive/web/javascript/index.html new file mode 100644 index 0000000000..4687b7bf23 --- /dev/null +++ b/files/ko/archive/web/javascript/index.html @@ -0,0 +1,12 @@ +--- +title: JavaScript +slug: Archive/Web/JavaScript +translation_of: Archive/Web/JavaScript +--- + + +

{{Obsolete_Header}}

+ +

Obsolete JavaScript features and unmaintained docs

+ +

{{SubpagesWithSummaries}}

diff --git a/files/ko/archive/web/javascript/legacy_generator_function/index.html b/files/ko/archive/web/javascript/legacy_generator_function/index.html new file mode 100644 index 0000000000..2d532f7cd9 --- /dev/null +++ b/files/ko/archive/web/javascript/legacy_generator_function/index.html @@ -0,0 +1,58 @@ +--- +title: 구형 생성기 함수 표현식 +slug: Archive/Web/JavaScript/Legacy_generator_function +tags: + - JavaScript + - Non-standard + - Obsolete + - Operator + - Reference +translation_of: Archive/Web/JavaScript/Legacy_generator_function +--- +
{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}} +
The legacy generator function expression was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using the {{JSxRef("Operators/function*", "function* expression")}}.
+
+ +

The function keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contain at least one {{JSxRef("Operators/yield", "yield")}} expression.

+ +

Syntax

+ +
function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Parameters

+ +
+
name
+
The function name. Can be omitted, in which case the function is anonymous. The name is only local to the function body.
+
paramN
+
The name of an argument to be passed to the function. A function can have up to 255 arguments.
+
statements
+
The statements which comprise the body of the function. This should contain at least one {{JSxRef("Operators/yield", "yield")}} expression.
+
+ +

Description

+ +

An overview of the usage is available on the Iterators and Generators page.

+ +

Browser compatibility

+ +

Supported nowhere.

+ +

See also

+ + diff --git a/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html b/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html new file mode 100644 index 0000000000..d4eeadb0f0 --- /dev/null +++ b/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html @@ -0,0 +1,59 @@ +--- +title: Legacy generator function +slug: Archive/Web/JavaScript/Legacy_generator_function_statement +translation_of: Archive/Web/JavaScript/Legacy_generator_function_statement +--- +
The legacy generator function was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using {{jsxref("Statements/function*", "function*")}}.
+ +
{{jsSidebar("Statements")}}
+ +

레거시 생성 함수(legacy generator function statement)는 레거시 생성 함수를 지정된 매개 변수로 선언한다.

+ +

functionBody 와 함께 {{jsxref("Operators/yield", "yield")}}나 {{jsxref("Operators/Legacy_generator_function", "레거시 생성 함수 식", "", 1)}} 중 적어도 하나의  표현식을 사용하여 {{jsxref("Function")}} 생성자를 사용하여 함수를 정의할 수도 있다. 

+ +

Syntax

+ +
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
함수의 이름.
+
+ +
+
param
+
함수에 전달할 인수의 이름. 함수는 최대 255개의 인수를 가질 수 있다.
+
+ +
+
statements
+
함수의 본문을 구성하는 문장. 적어도 하나의 {{jsxref("Operators/yield", "yield")}} 표현식을 포함해야 한다.
+
+ +

Description

+ +

사용법에 대한 개요는  반복기 및 생성기(Iterators and Generators) 페이지에서 볼 수 있다.

+ +

Browser compatibility(브라우저 호환성)

+ +

Supported nowhere.

+ +

See also

+ + diff --git a/files/ko/archive/web_standards/index.html b/files/ko/archive/web_standards/index.html new file mode 100644 index 0000000000..1ef58a9097 --- /dev/null +++ b/files/ko/archive/web_standards/index.html @@ -0,0 +1,64 @@ +--- +title: Web Standards +slug: Archive/Web_Standards +tags: + - Web Standards +translation_of: Archive/Web_Standards +--- +
웹 표준은 웹 상에 출판된 어떤 문서의 수명(viability)을 장시간 보장하는 동시에 웹 사용자 최대 다수에게 최대 이익을 전달하도록 주의해서 설계되었습니다. 이 표준으로 설계하고 제작함은 더 많은 사람과 더 많은 종류의 인터넷 장치에 접근 가능한 사이트를 만드는 동시에 생산을 쉽게 하고 생산 비용을 줄이게 됩니다. 이 지침에 따라 개발한 사이트는 기존 데스크탑 브라우저가 진화하고 새 인터넷 장치가 시장에 나오더라도 계속 정확히 작동할 것입니다. [1]
+ + +
+

문서

+
Migrate apps from Internet Explorer to Mozilla
+
IE에 종속된 웹 응용프로그램을 Mozilla로 작업하기 위해 어려움을 겪은 적이 있으세요? 이 글에서는 웹 응용프로그램을 오픈 소스 Mozilla에 기반을 둔 브라우저로의 이관(Migration)과 관련 있는 공통 쟁점을 다룹니다. +
+
Using Web Standards in your Web Pages +
이 페이지에서는 W3C 웹 표준을 따르는 웹 페이지의 컨텐츠를 업그레이드하는 과정의 개요를 제공합니다. +
+
Choosing Standards Compliance Over Proprietary Practices +
개발하다 보면, 어플리케이션을 다양한 개발 그룹에 걸쳐 설계하기 때문에 표준이 필요합니다. +
+
The Business Benefits of Web Standards +
이 기사는 웹 표준에 충실하고 회사의 사업 목표에 기여할 수 있는 독점(proprietary) 마크업과 기술을 뒤에 남기는 법에 관해 의견을 나눕니다. +
+

모두 보기... +

+		 +

커뮤니티

+
국내
+ +
국외
+
  • Mozilla 포럼 보기... +
+

+

+ +

개발 도구

+ +

모두 보기... +

+

관련 주제

+
CSS, DHTML, HTML, Web Development, XHTML, XML +
+
+
+

주의: 1
- The Web Standards Project +

Categories +

Interwiki Language Links +


+

diff --git a/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html b/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html new file mode 100644 index 0000000000..3d08aa525e --- /dev/null +++ b/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html @@ -0,0 +1,66 @@ +--- +title: Issues Arising From Arbitrary-Element hover +slug: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover +tags: + - CSS +translation_of: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover +--- +

Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.

+

많은 저자들이 링크의 스타일을 위해서 CSS 슈도(pseudo)-클래스 :hover를 사용하고 있습니다. 처음 마이크로소프트 인터넷 익스플로러로 소개되고, 이후 CSS규약으로 받아들여진 이 혁신적인 클래스는 텍스트 링크를 스타일화 하는데, 특히, 자바스크립트로 구현되는 "롤오버(rollovers)"같은 모습과 작동을 하도록 하는 곳에 인기있게 사용되고 있습니다. 그러나 브라우저들에서 CSS지원의 이러한 향상은 몇몇 페이지에서 예기치않게 심한 호버링 현상(또는, 호버링시 반응, hovering behavior)을 야기해 왔습니다.

+

Hover 그리고 비-링크 엘리먼트들

+

Section 5.11.3 of CSS2는 세개의 동적 슈도-클래스들(:hover, :active, 그리고 :focus)을 정의하고 다음과 같이 언급하고 있습니다:

+
+ CSS 는 어떤 엘리먼트들에게 위의 상태들(states)이 허용될 수 있을 지 또 어떻게 각 상태에 진입하고 빠져나갈 수 있는지 정의하지 않는다. 스크립팅으로 엘리먼트들이 사용자 이벤트들에 반응할지, 안 할지를 변경할 수 있으며, 각각의 장치와 UA들은 각기 다른 방식으로 엘리먼트들을 가리키거나 또는 작동시킬 수 있다.
+

따라서, 저자들이 보통 이들 상태들이 배타적으로 하이퍼링크에만 적용되는 것으로 생각하지만, CSS2는 그렇게 한정지어 놓고 있지 않습니다. 어떤 엘리먼트도, 이론상, 위의 3 상태중의 하나가 될 수 있으며, 따라서 이 상태들에 근거해거 스타일 지워질 수 있습니다. 과거에는 이렇지 않았습니다.

+

순(bare) 슈도(Pseudo)-클래스

+

두번째 문제는 선별자내의 "순" 슈도-클래스의 효과를 고려할 때 생기게 됩니다. 예를 들면:

+
:hover {color: red;}
+

이것은 다음의 CSS2 규칙과 동등합니다:

+
*:hover {color: red;}
+

..이들은 "위에 마우스 포인터가 놓이게 되는(being hovered) 어떤 엘리먼트든 표면색(foreground color)으로 붉은색을 가져야만 한다"라고 옮길 수 있습니다. 따라서 문서내의 단락, 표, 표제어 그리고 다른 어떤 엘리먼트위로 (포인터가) 떠 있게 되면 텍스트가 붉은색이 되게 할 것입니다.

+

흔한 변형예는 순 클래스와 hover 슈도-클래스를 다음과 같이 함께 사용하는 것입니다.

+
.nav:hover {color: red;}
+

class값 nav의 인스턴스만이 하이퍼링크들에 적용되는 상황에선 아무 문제가 없을 것입니다. 그러나, 이 유형의 규칙들은 보통 아래와 같은 마크업(markup)과 결부되어 나타납니다.

+
<td class="nav">
+<a href="one.html" class="nav">one</a> |
+<a href="two.html" class="nav">two</a> |
+<a href="thr.html" class="nav">three</a> |
+<a href="fou.html" class="nav">four</a>
+</td>
+

둘러싸고 있는 표의 셀이 nave class를 가지고 있기때문에 사용자가 마우스 포인터를 표의 셀안의 어느 곳으로든 움직이게 되면 수직-바 문자들은 붉은 색이 될것이며, 링크들도 그들 위로 (포인터가) 떠다니게 되면 붉은 색으로 바뀔 것입니다.

+

Gecko 작동방식

+

20020410 이후의 넷스케이프 Gecko 빌드(넷스케이프 6.1+)에 기반을 둔 브라우저들에선, :hover 스타일이 문서안의 어느 엘리먼트에든 적용될 수 있습니다. 따라서, 순 슈도-클래스들을, 또는 순 클래스와 슈도-클래스의 조합을 사용해온 저자들은 hover 스타일이 링크들 이상으로 적용되어 보여질 위험이 있습니다. 가장 믿을 만한 수정안은 다음과 같이 선별자들에 앵커 엘리먼트를 더하는 것입니다.

+
a:hover {color: red;}
+a.nav:hover {color: red;}
+

레거시(legacy) 문서들에의 문제야기를 피하기 위해서, 모질라 1.0 과 그 이후 버전(넷스케이프 7+)에 기반한 브라우저들은 문서를 "특별(quirks)"모드로 렌더링할 경우 순 슈도-클래스들이 링크에만 한정되도록 하는 코드를 포함하고 있습니다. 모질라 1.3b와 그 이후 버전에서 발견되는 엔진에 기반을 둔 브라우저들에선, 이 특별 모드를 확장해서 순 클래스 선별자와 :hover 슈도-클래스를 조합하는 선별자들을 커버하도록 하고 있습니다.

+

이름이 주어진 앵커 문제들

+

위에 기술한 효과들에 더해서, 저자들이 예상치 못할 수 있는 두개의 다른 상대적으로 흔한 현상들이 있습니다. 하나는 validation으로 쉽게 고칠 수 있으나, 다른 문제는 좀더 까다롭습니다.

+

첫번째로, 이름이 주어진 앵커를 열고서는 닫지 않는 저자로부터 문제가 생깁니다. 예를 들면:

+
<a name="pagetop">
+<h2>My Page</h2>
+

</a>없이 이 이름은 문서의 나머지 부분들 모두에 영향을 끼칠 것입니다. 더 일반적으로 말하자면, 문서의 나머지 부분들이 hover 스타일을 가지게 될 것이라는 것입니다. 다음 규칙의 효과를 생각해 보세요:

+
a:hover {color: red;}
+

닫히지 않은 이름이 주어진 앵커가 있는 문서에서, 앵커의 열린 택이후에 나오는 모든 텍스트는 (다른 CSS 규칙이 끼워들지 않는 한) 붉은 색이 될것입니다.

+

이는 두번째 흔한 문제를 불러오는 데, 그것은 이름이 주어진 앵커들이 hover스타일을 허용할 수 있다는 것입니다. 비록 저자가 선별자 a:hover가 하이퍼링크에만 적용되도록 의도한다 해도,선별자는 이름이 주어진 앵커에도 적용될 것입니다. 왜냐하면 선별자가 단순히 hover 상태에 있는 모든 a 엘리먼트들을 스타일화 할 것을 선언하고 있기 때문입니다. 이 문제를 피하기 위해서, CSS2가 기술하고 있는 조합된 슈도-클래스 문법(the combined pseudo-class syntax)을 사용해야 합니다:

+
a:link:hover {color: red;}
+a:visited:hover {color: maroon;}
+

이 구문에서 링크들에 마우스가 놓여졌을 때 방문된 그리고 아직 방문하지 않은 링크들이 다르게 스타일화 될 수 있다는 점을 볼 수가 있습니다. 이것은 단순한 a:hover로는 불가능 했습니다. 물론, 선별자 a:link:hover는 오직 아직 방문하지 않은 링크에만 적용될 것입니다. 따라서, 같은 hover스타일이 방문된 그리고 아직 방문하지 않은 링크 모두에 적용되기를 원한다면, 두 선별자를 하나의 규칙으로 그룹지어 놓아야 합니다.

+

권고 사항

+

예상치 못한 문제들을 피하기 위해서 하이퍼링크에 적용될 동적-상태(dynamic-state) 슈도-클래스(pseudo-class) 내에 엘리먼트 이름을 포함시킬 것을 + + 강력하게 + 권합니다. 더나아가, 슈도-클래스들을 조합하는 것은 호버(hover) 스타일이 비-하이퍼링크 앵커에 적용되는 것을 막아줍니다. 따라서, 단지 :hover 대신 항상 a:hover이 사용되어야 하며, a:link:hover (그리고 a:visited:hover)이 보다 단순한 a:hover보다 선호됩니다.

+

관련 링크들

+ +
+

Original Document Information

+ +
+

 

diff --git a/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html b/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html new file mode 100644 index 0000000000..a4d28b14ad --- /dev/null +++ b/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html @@ -0,0 +1,141 @@ +--- +title: Mozilla's DOCTYPE sniffing +slug: Archive/Web_Standards/Mozilla_s_DOCTYPE_sniffing +tags: + - Web Development +translation_of: Archive/Web_Standards/Mozilla_s_DOCTYPE_sniffing +--- +

이 문서는 Mozilla가 strict 모드 대 호환(quirks) 모드를 결정하기 위해 DOCTYPE 선언을 쓰는 법을 기술합니다. 이를 결정하는 코드는 현재 nsParser.cpp의 DetermineParseMode()에 있습니다. 모드 결정의 역사 일부는 bug 1312와 bug 55264를 참조하세요. Mozilla 1.0 쯤에 새로 생긴 거의 표준(Almost-Standards) 모드는 bug 153032를 참조하세요. 다음이 이 행동(behavior)을 고르게 했던 목적들입니다:

+ +

바꿔 말하면, 이 알고리즘이 Mozilla가 웹에서 알려진 중요 사용자 에이전트가 된 뒤로 작성되었던 페이지를 결정하는 경우에 우리가 찾을 수 있는 가장 좋은 접근법입니다.

+

완전 표준 모드

+

다음이 완전 표준(full standards) 모드를 일으킵니다:

+ +

거의 표준 모드

+

다음은 거의 표준 모드를 일으킵니다. 거의 표준 모드는 1.0과 1.1 알파 뒤지만, 1.0.1과 1.1 베타 앞에 만들었습니다. 거의 표준 모드가 생기기 전에 이 doctype은 완전 표준 모드를 일으켰습니다.

+ +

호환 모드

+

다음은 호환 모드를 일으킵니다 (이 목록은 웹 상에 이미 존재하는 페이지가 호환 모드를 일으키게 하도록 포괄할 필요가 있습니다):

+

이 목록 준비에 다음 사이트가 유용했습니다: W3C HTML Validator, HTMLHelp HTML Validator.

+ +

부정확한 대/소문자로 공용 식별자를 쓰는 상당수 페이지 때문에 모든 공용 식별자 비교는 대/소문자를 구별하지 않음을 주의하세요. (이는 엄밀히 말하면 틀린데, 문자열이 대/소문자를 구별하기 때문입니다.)

+

같이 보기

+ +
+

원본 문서 정보

+ +
+

 

diff --git a/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html b/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html new file mode 100644 index 0000000000..e0f739e688 --- /dev/null +++ b/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html @@ -0,0 +1,87 @@ +--- +title: RDF in Fifty Words or Less +slug: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +tags: + - RDF +translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +--- +

어쩌면 이 문서는 50 단어 이상이 될 수도 있겠습니다, 하지만 핵심 사항들은 꽤 간단합니다 (핵심적인 것들만 빨리 익히고 싶어하는 관리자들을 위해 이러한 것들은 굵은 글씨체로 표기하였습니다). Resource Description Framework, 혹은 "RDF" 라고 하는 것은 실제로는 2 가지를 말합니다. +

+
+첫째로, RDF 는 (웹 페이지나 email 주소와 같은) 인터넷 상의 자원들을 설명하고 이들이 어떻게 서로 연관되어 있는지를 나타내는 그래프 기반의 모델입니다. +
+

하지만 실제로는 이라는 말이 어떤 의미일까요? +Mozilla 개발자에게는 RDF 데이터 모델(그래프)이 인터넷 자원들을 통합하고 구조화하기 위한 메카니즘으로 사용될 수 있다는 것을 말합니다. +

예제를 하나 보겠습니다: 북마크 (bookmark). 지금 대부분의 브라우저들은 당신이 북마크를 체계적으로 관리하도록 폴더 를 지정하고 있습니다. 각 북마크는 URI (Uniform Resource Identifier) 라고 하는 웹페이지를 가리키는 포인터 입니다. +

하지만 웹 페이지는 단지 인터넷 자원 중의 하나일 뿐 입니다. +이 밖에도 다른 많은 자원들 - 몇가지 예를 들자면 이메일 메시지, 유즈넷 뉴스 기사 (혹은 전체 유즈넷 뉴스 그룹), 당신이 잘 사용하는 웹 검색 엔진의 검색 결과 - 이 있습니다. +그리고 기본적으로 이들을 "북마크"로 다루거나 이들을 그룹지어 원하는 폴더 안에 저장하지 못할 이유가 없으며, +심지어는 당신이 특정 폴더를 열 때 마다 미리 정의된 검색을 수행하여 동적으로 컨텐츠를 생성해내는 "스마트" 폴더를 생성하는 것도 가능합니다. +

그리고 "북마크"는 실제로 임의의 특성(arbitrary properties associated with it)을 가지고 있습니다: +당신은 북마크를 분류하기 위한 (매킨토시의 "hot", "warm", "cool" 컬러 코딩 방식처럼) 당신만의 기준을 만들고 싶을 수도 있을 것입니다. 또는 한 북마크를 다른 북마크와 연관시키거나 한 북마크를 여러 폴더에 같이 저장시키고 싶을 수도 있습니다. +

RDF 그래프는 위의 예제에서 언급한 "유니버설" 북마크 서비스를 구성할 수 있는 완전한 데이터 모델을 제공합니다: +그래프는 임의의 자원을 지정할 수 있는 포인터를 포함하며, 당신이 생각할 수 있는 어떠한 방식으로도 그들을 그룹으로 묶을 수 있습니다. +

하지만 그전에.. +

+
+ +둘째로, RDF 는 직렬화 문법(serialization syntax)입니다. 이 문법은 "에이전트" 간에 통신할 수 있는 그래프 방식의 모델을 제공합니다. +
+

이게 무슨 소리일까요? 기본적으로 RDF 데이터 모델의 일부분은 네트워크 간에 +통신할 수 있으며 그래프의 내용은 원격지의 서비스에서 도착한 정보로 동적으로 변경될 수 있다는 것을 의미합니다. +

위의 예제를 다시 보기로 합시다. 당신의 북마크 "폴더" 중의 하나는 실제로 당신의 메일함의 받은 편지함을 가리키는 포인터라고 합시다: 당신이 그 폴더를 열었다면, 자! 밤 사이 받았던 모든 메시지들을 볼 수 있습니다. +

하지만 어떻게 이런 일이 가능할까요? +그 "폴더"는 사실 그래프를 확장한 RDF 를 저장하고 있는 인터넷 자원을 가리키는 포인터 였습니다. +"인터넷 자원"은 CGI 스크립트를 가리키는 URI 였습니다. +(즉, <tt>http://www.mozilla.org/smart-mail/ge...n&folder=inbox</tt>). +이 CGI 스크립트가 실제 직렬화된(serialized) RDF 를 생성합니다. 이것은 기본적으로 XML 을 이용한 그래프의 표현 방식입니다: +

+
<rdf:RDF
+    xmlns:rdf="http://www.w3.org/TR/WD-rdf-syntax#"
+    xmlns:sm="http://www.mozilla.org/smart-mail/schema#">
+  <rdf:Description
+    about="http://www.mozilla.org/smart-mail/ge...n&folder=inbox">
+    <sm:message id="4025293">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Aunt Helga "helga@netcenter.net"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>Great recipe for Yam Soup!</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025293
+       </sm:body>
+    </sm:message>
+    <sm:message id="4025294">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Sarah Waterson "waterson.2@postbox.acs.ohio-state.edu"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>We won our ultimate game</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025294
+       </sm:body>
+    </sm:message>
+  </rdf:Description>
+</rdf:RDF>
+
+

위와 같은 복잡한 데이터(monstrosity)를 받으면, RDF 엔진은 RDF 데이터를 그래프 상의 적절한 위치에 배치(fold)하며 +실제로 북마크 UI 를 구현하는 트리 컨트롤에 통지하여 (Aunt Helga 에게서 받은 Yam Soup 에 대한) 최근의 메시지에 대해 특정 아이콘을 표시하도록 합니다. +

이것은 SmartMail이 동작하는 원리와 정확히 동일합니다. +

연락처: +Chris Waterson (waterson@netscape.com) +

+
+

원본 문서 정보

+ +
+

Interwiki Language Links +

diff --git a/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html b/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html new file mode 100644 index 0000000000..f59bcb7e2d --- /dev/null +++ b/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html @@ -0,0 +1,292 @@ +--- +title: RDF in Mozilla FAQ +slug: Archive/Web_Standards/RDF_in_Mozilla_FAQ +tags: + - RDF +translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ +--- +

일반

+

어디에서부터 시작해야 하나요?

+

RDF 는 Mozilla 에서 크게 두가지 기능을 제공합니다. 첫번째가, 단순히 작은 데이터 저장 공간을 위한 크로스 플랫폼의 데이터베이스 (cross-platform database for small data stores) 역할이며 두번째가 더 중요한데 RDF 모델이 XUL 템플릿과 함께 사용되어 정보 표현을 위한 추상적인 "API" 를 제공하는 것입니다. RDF in Fifty Words or Less 문서는 Mozilla 에서 RDF 가 어떤 작업을 수행하는지를 손쉽게, 고 수준에서 살펴볼 수 있게 해 줍니다. RDF 백엔드 구조 문서는 Mozilla 의 RDF 구현이 동작하는 방식을 더욱 자세히 설명하며, 거기에 포함된 인터페이스들에 대한 간략한 개요를 살펴볼 수 있습니다.

+

Open Directory ("dmoz") 상의 어디에서 정보를 찾아야 하나요?

+

불행히도, 여기는 아닙니다! 음, 여기는 그저.. Open Directory 에 대한 정보는 http://www.dmoz.org/ 를 방문해 보기 바랍니다. Open Directory 의 데이터 셋은 (거대한) RDF/XML 덤프로 이용 가능합니다. 이것은 수천개의 웹 사이트를 더블린 코어(Dublin Core)의 메타데이터 어휘와 DMoz 분류법을 혼합하여 분류해 놓은 것 입니다. 더 자세한 정보는 DMoz 의 RDF 페이지를 살펴보시고, 거기에 사용된 데이터 형식에 관련된 업데이트 사항은 odp-rdf-announce 페이지를 살펴보기 바랍니다. ChefMoz 사이트(공동(collaborative) 음식점 가이드) 도 역시 RDF 페이지를 제공합니다.

+

만약 DMoz 나 ChefMoz 데이터와 관련된 문제점이 발생한다면 해당 프로젝트에 직접 연락하는 것이 좋습니다. 하지만 당신이 그 컨텐츠를 사용하여 어떤 작업을 하고 있다면 (즉, 원격 사이트에서 XUL UI 로 해당 컨텐츠를 로드하는 것처럼) mozilla-rdf 와 RDF Interest Group 메일링 리스트에 알리는 것을 잊지 마십시오. 이들은 DMoz 데이터를 삭제하고 재처리하고 저장하는 툴에 대해서도 관심을 가지고 있을 것 입니다. ODP RDF 덤프를 사용하는 사이트에 대한 정보는ODP 데이터를 사용하는 사이트들 페이지를 보십시오.

+

데이터 소스(datasource)가 뭐죠?

+

RDF 는 일반적으로 2가지 관점으로 볼 수 있습니다: 하나는 노드와 호(arc)로 이루어진 그래프로 보는 관점이며 다른 하나는 논리적인 구문들(logical statements)로 이루어진 "수프"(soup) 로 보는 관점이다. 데이터 소스는 특정한 기준으로 그룹지어진 하위 그래프(subgraph) (혹은 다른 관점에서 본다면 구문들의 집합) 입니다. 예를 들면, "브라우저 북마크", "브라우저 전역 방문 기록 (global history)", "IMAP 메일 계정", "NNTP 뉴스 서버", "RDF/XML 파일" 등이 있습니다.

+

Mozilla 에서는 데이터 소스들은 복합 (composite) 데이터 소스 기능을 사용하여 통합(compose) 될 수 있습니다. 이것은 그래프를 오버레이(overlay) 시키는 것이나 구문의 집합들을 병합(merge)하는 것("microtheories")과 비슷합니다. 동일한 RDF 자원에 대한 구문은 혼용(intermingle)될 수 있습니다: 예를 들어 특정 웹사이트의 "최근 방문 시간"은 "브라우저 전역 방문 기록" 데이터 소스에서 얻을 수 있고, 해당 웹사이트로 가기 위한 "단축 키워드(shortcut keyword)"는 "브라우저 북마크" 데이터 소스에서 얻을 수 있습니다. 두 데이터 소스는 URL 을 통해 "웹사이트" 를 가리킵니다: 이것이 데이터 소스들이 효율적으로 "병합"될 수 있는 "핵심"(key)이 됩니다.

+

데이터 소스를 작성하는 방법에 대한 자세한 사항은 RDF 데이터 소스 How-To 문서를 참조하기 바랍니다.

+

Mozilla 는 어떻게 데이터 소스를 관리하나요?

+

RDF 서비스는 로드된 모든 데이터 소스의 테이블을 관리합니다. 이 테이블은 데이터 소스의 "URI" -RDF/XML 파일의 URL 이거나 내장된 데이터 소스를 가리키는 rdf: 로 시작하는 "특별한" URI - 를 키로 사용합니다.

+

데이터 소스는 RDF 서비스의 GetDataSource() 메소드를 통해 로드됩니다. URI 인수(argument)가 XML/RDF 파일의 URL 을 가리키는 경우에는 RDF 서비스는 RDF/XML 데이터 소스 를 생성하고 비동기적으로 이를 구문 분석(parse)합니다. 이 데이터 소스는 자신을 가리키는 마지막 참조가 해제(release)될 때까지 메모리 상에 "캐시"(cache) 됩니다.

+

만약 URI 인수가 내장 데이터 소스를 가리키는 경우에는, RDF 서비스는 XPCOM 컴포넌트 관리자 를 사용하여 "특별한" URI 와 잘 알려진(well-known) 접두어 @mozilla.org/rdf/datasource;1?name=</code> 를 이용해 ContractID 를 생성한 컴포넌트를 로드합니다.

+

예를 들어,

+
rdf:foo
+
+

인 경우에는 아래와 같은 컴포넌트가 로드됩니다:

+
@mozilla.org/rdf/datasource;1?name=foo
+
+

RDF/XML 데이터 소스와 마찬가지로 이러한 방식으로 생성된 데이터 소스도 RDF 서비스에 의해 마지막 참조가 해제될 때까지 메모리 상에 "캐시" 됩니다.

+

RDF/XML 파일에서 어떻게 데이터 소스를 생성하나요?

+

RDF 서비스의 GetDataSource() 메소드를 사용하여 RDF/XML 데이터 소스를 생성할 수 있습니다:

+
// RDF 서비스를 얻습니다.
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// ...그리고 여기에서 데이터 소스를 얻습니다. 당신의 웹 브라우저가
+// 이 데이터 소스를 text/xml (추천) 혹은 text/rdf로 다루는지 확인하십시오!
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// ds 는 비동기적으로 로드되므로, 여기에 바로 assert 를 실행한다면
+// 올바르게 동작하지 않을 것 입니다.
+
+

또다른 방법으로는, 아래와 같이 XPCOM 컴포넌트 관리자를 사용하여 직접 생성하는 방법이 있습니다:

+
// XPCOM 컴포넌트 관리자를 사용하여 RDF/XML 데이터 소스 생성하기
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+// nsIRDFRemoteDataSource 인터페이스는 데이터 소스를 설정하기 위한 인터페이스들을 가지고 있습니다.
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+// 당신의 웹 서버가 이것을 text/xml (추천) 혹은 text/rdf로 전송하는지 확인하십시오!
+remote.Init("http://www.mozilla.org/some-rdf-file.rdf");
+// 로드합니다! 이것은 비동기적으로 실행된다는 것을 명심하십시오.
+// aBlocking 인수를 true 로 설정하면, 동기적으로 실행되게 설정할 수 있습니다.
+// 하지만 이렇게 되면 UI 가 멈춰버리기 때문에 일반적으로는 좋지 않은 아이디어입니다!
+remote.Refresh(false);
+//  ds 는 비동기적으로 로드되므로, 여기에 바로 assert 를 실행한다면
+// 올바르게 동작하지 않을 것 입니다.
+
+

만약 당신이 RDF/XML 파일을 강제로 동기적으로 로드하고 싶다면 "직접"(manually) 생성할 필요가 있습니다.

+

RDF/XML 데이터 소스를 어떻게 갱신(reload)하나요?

+

RDF/XML 데이터 소스 (혹은 nsIRDFRemoteDataSource 를 지원하는 어떠한 데이터 소스일지라도) 는 nsIRDFRemoteDataSource 의 Refresh() 메소드를 사용하여 강제로 갱신할 수 있습니다. Refresh() 메소드는 수행이 동기적("blocking)으로 이루어질지 비동기적("non-blocking")으로 이루어 질지를 나타내는 하나의 인수를 가집니다. 당신은 정말로 그렇게 해야만 할 필요가 없다면 절대 동기적인 수행을 선택하지 않아야 합니다: 동기적으로 수행하도록 한다면 로드가 끝날때까지 모든 UI 가 동작하지 않을 것입니다!

+

RDF/XML 데이터 소스가 로드되었는지 어떻게 알 수 있나요?

+

nsIRDFRemoteDataSource 인터페이스를 사용하면, loaded 속성의 값으로 데이터 소스가 로드되었는지 즉시 알아볼 수 있습니다:

+
// RDF 서비스를 얻습니다
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// 데이터 소스를 얻습니다..
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// 이제 로드되었는지 살펴봅니다..
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+}
+
+

만약 아직 데이터 소스가 로드되지 않았다고 가정합시다. (비동기적으로 로드됩니다). 위의 API 와 자바스크립트의 setTimeout() 함수를 사용하면, 주기적으로 loaded 속성을 체크하는 폴링 루프 를 만들 수 있을 것입니다. 하지만 여기는 문제가 있으며, 더 큰 문제는 로드가 실패 하는 경우를 인식하지 못한다는 것입니다! 예를 들어, 해당 URL 에 아무 데이터도 없는 경우에는 문제가 생길 것 입니다.

+

이를 위해 데이터 소스의 상태를 감시하기 위한 감시자(observer) 인터페이스 라는 것이 있습니다. 아래의 코드는 감시자 인터페이스의 사용법을 보여줍니다:

+
// RDF/XML 데이터 소스의 로드 과정을 감시할 객체입니다.
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    { alert("done!"); },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+// RDF 서비스를 얻습니다.
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// 데이터 소스를 얻습니다.
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// 이제 로드되었는지 살펴봅니다..
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+  // RDF/XML 데이터 소스는 모두 nsIRDFXMLSink 입니다 (Is-a).
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  // 데이터 소스(= 싱크)에 감시자 인터페이스를 지정합니다.
+  sink.addXMLSinkObserver(Observer);
+  // 이제 데이터 소스의 로드 상태에 따라
+  // 감시자의 메소드들이 호출(call-back)됩니다.
+}
+
+

감시자 객체는 removeXMLSinkObserver 메소드가 호출되기 전까지는 계속 RDF/XML 데이터 소스와 연결(attach)되어 있을 것입니다.

+

데이터 소스 내의 정보는 어떻게 접근할 수 있나요?

+

nsIRDFDataSource 인터페이스는 데이터 소스 내의 정보에 접근하거나 검사할 수 있는 방법을 제공합니다.

+ +

RDF 컨테이너 내에 포함된 정보에 접근하기 위해서는 RDF 컨테이너 인터페이스를 사용할 수 있습니다.

+

데이터 소스 내의 정보를 어떻게 변경하나요?

+

데이터 소스의 변경 사항을 RDF/XML 자원에 다시 저장하려면 어떻게 하죠?

+

RDF/XML 데이터 소스는 QueryInterface() 메소드를 통해 nsIRDFRemoteDataSource 인터페이스를 얻을 수 있습니다. 이 인터페이스는 Flush() 메소드를 가지고 있는데, 이 메소드는 데이터 소스가 로드될 때 사용된 URL 이 가리키는 데이터 소스에 변경 사항을 다시 기록하려고 시도할 것입니다. 이것은 사용된 프로토콜에 따라 각기 다른 메커니즘을 사용합니다. (즉, file: 로 시작하는 URL 이라면 그저 파일에 기록하고, http: 로 시작하는 URL 이라면 HTTP-POST 요청을 보낼 것입니다.) Flush() 메소드는 오직 데이터 소스의 내용이 변경된 경우에만 기록합니다.

+

여러 개의 데이터 소스를 하나로 합쳐서 보려면 어떻게 해야 하나요?

+

내장(built-in) 데이터 소스에 접근하려면 어떻게 하나요?

+

내장 데이터 소스 은 nsIRDFDataSource 인터페이스를 구현한 로컬에 인스톨 된 컴포넌트를 말합니다. 예를 들면 북마크 서비스와 같은 것이 있습니다. 먼저, 여기를 보고 당신이 내장 데이터 소스에 접근하도록 허용 되었는지를 체크해 보십시오. "인증되지 않은"(untrusted) XUL 와 JS 로 부터 내장 데이터 소스에 접근에 접근하는 것을 차단하는 여러가지 보안 사항이 있습니다.

+

내장 데이터 소스는 단지 XPCOM 컴포넌트 이기 때문에, 당신은 XPConnect 컴포넌트 관리자를 사용하여 직접 객체를 생성(instantiate)할 수 있습니다.

+
// 북마크 서비스를 얻기 위해 컴포넌트 관리자를 사용합니다.
+var bookmarks =
+  Components.
+  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].
+  getService(Components.interfaces.nsIRDFDataSource);
+
+// 이제 관련된 작업을 수행합니다..
+if (bookmarks.HasAssertion(
+     RDF.GetResource("http://home.netscape.com/NC-rdf#BookmarksRoot"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#child"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#PersonalToolbarFolder"),
+     true) {
+  // ...
+}
+
+

또다른 방법으로는, 특정 데이터 소스는 "특별한" RDF 와 관련된 ContractID 를 가지므로 nsIRDFSerivce 의 GetDataSource() 메소드를 이용하거나 XUL 템플릿의 datasources 속성을 이용하여 손쉽게 데이터 소스 객체를 생성할 수 있습니다. 이러한 ContractID 는 다음과 같은 형식으로 표현됩니다:

+
@mozilla.org/rdf/datasource;1?name=name
+
+

ContractID 는 GetDataSource() 메소드나 rdf:name 형식의 약어를 사용하여 datasources 속성에 접근할 수 있습니다. 예를 들어, 다음의 XUL 코드는 XUL 템플릿에 북마크 서비스를 데이터 소스로 추가하는 방법을 보여 줍니다.

+
<tree datasources="rdf:bookmarks">
+  ...
+</tree>
+
+

RDF "컨테이너"를 어떻게 사용하나요?

+

RDF "컨테이너"(예를 들어, <rdf:Seq>)를 사용하기 위해서는 아래의 ContractID 를 이용하여 nsIRDFContainerUtils 객체를 서비스로 생성해야 합니다:

+
@mozilla.org/rdf/container-utils;1
+
+

이 서비스를 이용하면, IsSeq(), IsBag(), IsAlt() 등의 메소드를 사용하여 특정 객체가 RDF 컨테이너인지 검사할 수 있습니다. 특정 자원이 RDF 컨테이너가 아니라면 MakeSeq(), MakeBag(), MakeAlt() 등의 메소드를 사용하여 해당 자원을 RDF 컨테이너로 만들 수 있습니다. 이 메소드들은 이미 작성된 컨테이너용 연산들을 가지고 있는 nsIRDFContainer 객체를 반환합니다.

+

또다른 방법으로는, 당신이 사용하는 데이터 소스가 이미 RDF 컨테이너 객체를 가지고 있는 경우, 다음의 ContractID 를 통해 nsIRDFContainer 객체를 생성할 수 있습니다:

+
@mozilla.org/rdf/container;1
+
+

그리고 데이터 소스를 인수로 Init() 메소드를 호출해야 합니다. 이 메소드는 해당 자원이 컨테이너 객체가 아닌 경우에는 실패할 수 있다는 것을 주의하십시오.

+

XUL 템플릿

+

XUL 문서의 원소(element) 상에 datsources 속성을 지정함으로써 XUL 템플릿을 생성할 수 있습니다.

+

XUL 템플릿은 두가지 형식("form")으로 작성할 수 있습니다. 첫번째는 단순 형식("simple form")으로 현재 Mozilla 코드베이스 상에서 가장 일반적으로 쓰이는 형식입니다. 또 하나는 확장 형식("extended form")으로 RDF 그래프에 대해 복잡한 패턴 매칭을 수행할 수 있습니다. XUL:템플릿 가이드 문서를 참조하십시오. (이 문서는 궁극적으로 확장 형식의 템플릿을 설명하려는 목적으로 작성되었기 때문에 매우 복잡하게 구성되어 있습니다. -- 따라서 많은 정보를 표현하기 위해 복잡하게 보일지라도 개념적으로는 더 이해하기 쉬운 방법으로 구성하였습니다 -- 그리고 단순 형식은 확장 형식을 단축해서 사용하는 형태로 설명합니다.)

+

XUL 템플릿을 사용해서 무엇을 빌드할 수 있나요?

+

당신은 XUL 템플릿을 사용해서 어떠한 종류의 컨텐츠도 빌드할 수 있습니다. 이를 위해 <rule> 내의 <action> 에 속한 태그(HTML 태그나 임의의 XML 태그도 가능)들을 사용할 수 있습니다.

+

언제 XUL 템플릿을 사용해야 하나요?

+

RDF 와 XUL 템플릿을 사용하는 또다른 방법으로는 W3C DOM API 를 이용하여 XUL (혹은 HTML) 컨텐츠 모델을 구성하고 조작하는 방법이 있습니다. 하지만 그렇게 하는 것은 불편할 때가 많습니다:

+
    +
  1. 데이터에 대한 "뷰"가 여러 개인 경우. 예를 들면, Mozilla mail/news 는 툴바나, 여러 메뉴 내의 "폴더 팬(pane)", 혹은 몇몇 다이얼로그 창에서 폴더 구조를 표시합니다. 이 경우 이러한 <메뉴 버튼>, <메뉴>, <트리> 컨텐츠 모델을 위한 DOM 트리를 JS (혹은 C++) 로 작성하는 것 보다, 각 컨텐츠 모델을 위한 (세가지의) 간략한 룰셋으로 작성할 수 있습니다.
    2. +
  2. 데이터가 변화하는 경우. 예를 들어 메일이나 뉴스의 사용자는 IMAP 폴더를 추가하거나 삭제할 수 있습니다. (이로 인해 컨텐츠 모델을 작성하는 작업은 매우 복잡해 집니다!) XUL 템플릿 빌더는 룰을 사용하여 사용자에 의한 모든 컨텐츠 모델들의 변화를 자동적으로 유지합니다.
    3. +
+

이 기능을 사용하기 위해서는 당신이 필요로 하는 모든 정보는 RDF 데이터 소스 API 를 이용하여 표현되거나, 내장 메모리 데이터 소스를 사용하거나, RDF/XML 을 사용하여 저장하거나, nsIRDFDataSource 를 (아마도 JavaScript 를 이용하여) 직접 구현하여야 합니다.

+

"datasources=" 이라고 명시한 경우에는 무엇이 로드되나요?

+

템플릿의 "루트" 원소의 datasources 속성은 로드할 (공백 문자로 구분된) 데이터 소스 URI 들의 목록을 나타냅니다. 여기서 "데이터 소스 URI" 라는 것은 다음의 둘 중 하나가 됩니다:

+ +

두 경우 모두, 데이터 소스는 nsIRDFService 의 GetDataSource() 메소드를 사용하여 로드되며, 이들은 같은 방법으로 로드된 다른 데이터 소스와 마찬가지로 관리됩니다.

+

XUL의 RDF/XML을 위한 보안 모델은 무엇인가요?

+

"인증된" URL(현재는 chrome:로 시작하는 모든 URL)로 부터 로드된 XUL은 XUL 템플릿의 datasources 속성에 지정된 어떠한 데이터 소스 URI라도 지정할 수 있습니다.

+

"인증되지 않은" URL로 부터 로드된 XUL은 XUL 문서가 있던 동일한 (Java에서 말하는 의미의) 코드베이스 에 있는 RDF/XML 문서만을 지정할 수 있습니다. 인증되지 않은 XUL에서 "특별한" (즉, rdf: 로 시작하는) 데이터 소스를 로드할 수는 없습니다.

+

XUL 템플릿에 어떻게 데이터 소스를 추가하나요?

+

XUL 템플릿을 생성할 때 datasources 속성을 통해 "암시적으로" 데이터 소스를 명시하는 방법이 가능하지만, XUL이 로드될 때 까지 어떤 데이터 소스를 로드해야 할지 결정할 수 없는 경우도 있을 것입니다. 예를 들어, 당신의 XUL이 onload 핸들러에서 표시할 데이터 소스를 결정하는 경우나 특정한 사용자의 액션에 반응하여 데이터 소스를 추가해야 하는 경우 등이 있습니다.

+

다음은 이러한 동작을 하는 간단한 예제입니다. 아래와 같은 XUL이 있다고 해 봅시다.

+
<window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+  ...
+  <tree id="my-tree" datasources="rdf:null">
+    ...
+  </tree>
+  ...
+</window>
+
+

이제 어떤 식으로든 (즉, 이러한 방식 중의 하나로) 데이터 소스를 얻었다고 가정할 때, 다음의 코드는 이 데이터 소스를 템플릿에 추가 하는 방법을 보여줍니다. 템플릿은 새로 추가된 데이터 소스의 컨텐츠를 기반으로 자신을 재생성(rebuild)해야 합니다.

+
var ds = /* 어떤 식으로든 얻었다고 가정합니다! */;
+// 'my-tree'에 대한 DOM 원소를 얻습니다.
+var tree = document.getElementById('my-tree');
+// 거기에 데이터 소스를 추가합니다.
+tree.database.AddDataSource(ds);
+// 강제 재생성하도록 직접 rebuild() 메소드를 호출합니다.
+tree.builder.rebuild();
+
+

datasources 속성을 가진 XUL 원소는 자동으로 database 속성과 builder 속성을 가지게 됩니다. database 속성은 템플릿에서 생성된 데이터 소스를 포함하는 nsIRDFCompositeDataSource 객체를 참조합니다.

+

builder 속성은 템플릿 컨텐츠의 상태를 유지하는 "builder" 인 nsIXULTemplateBuilder 객체를 참조합니다.

+

참고! rdf:null 데이터 소스: 이것은 특별한 데이터 소스로서 아직은 데이터 소스가 없지만 나중에 추가할 것임을 알려주는 역할을 합니다. 이 데이터 소스를 지정하면 database 속성과 builder 속성이 생기게 되지만 database 속성은 아무 것도 없는 채로 남아있습니다.

+

DOM API를 이용하여 XUL 템플릿 문서를 다룰 수 있나요?

+

네, 가능합니다. 당신은 룰을 추가 및 삭제하거나 룰의 컨디션이나 컨텐츠를 변경할 수 있습니다. 사실, W3C DOM API를 이용하여 템플릿에 대한 모든 것들을 변경할 수 있습니다.

+

한가지 주의할 사항은, 이렇게 변경한 내용이 적용되도록 (XUL 템플릿에 데이터 소스를 추가할 때와 마찬가지로) rebuild() 메소드를 반드시 호출해야 한다는 것입니다.

+

템플릿에 일반 텍스트를 어떻게 삽입하나요?

+

템플릿 내에 일반 텍스트(plaintext)를 삽입하기 위해서는 <text> 원소를 이용합니다.

+
<template>
+  <rule>
+    <conditions>...</condition>
+    <bindings>...</bindings>
+    <action>
+      <text value="?some-variable" />
+    </action>
+  </rule>
+</template>
+
+

위의 템플릿은 여러 개의 텍스트 노드를 가지는(runs?) 컨텐츠 모델을 생성할 것 입니다.

+

트러블슈팅

+

필드에서 얻은 트릭과 팁들을 소개합니다.

+

RDF/XML 파일이 로드되지 않아요

+

웹 서버로부터 RDF/XML 파일이 로드되지 않는 대부분의 이유는 MIME 타입이 잘못 설정되어 있는 경우입니다. 당신이 사용하는 서버가 RDF/XML 파일을 text/xml(추천) 이나 text/rdf(bogus) 형식으로 전달하는지 확인하십시오.

+

W3C의 RDF 코어 워킹 그룹은 application/rdf+xml 형식을 등록하였지만 아직 Mozilla 코드는 이를 인식하지 못한다는 것을 명심하십시오. (이에 대한 버그가 보고되어 있나요? -- danbri)

+

원격지에서 로드되는 XUL과 RDF에 대한 또다른 잠재적인 문제점은 Mozilla의 보안 규칙을 변경해야 한다는 것입니다(아래의 예제를 참조하세요). 만약 MIME 타입이 정확한데도, XUL이 RDF를 로드하지 않는다면 이 문제를 고려해 보아야 합니다.

+

RDF/XML 파일이 올바른지 검사하기 위해 rdfcat와 rdfpoll 유틸리티를 사용할 수 있습니다. 이 프로그램들은 Windows에서는 기본으로 설치되어 있으며, Linux에서는 configure --enable-tests 옵션을 주어 설치할 수 있습니다.

+ +

이 두 프로그램은 로드와 실행 과정이 느립니다(하지만 결국은 실행됩니다). 이 프로그램들은 Mozilla 와 동일하게 XPCOM을 초기화하고 URL을 로드하고 처리하도록 Necko를 실행시킵니다.

+

AddDataSource 메소드를 호출해도 아무 것도 바뀌지 않아요.

+

템플릿 빌더는 자신의 database 속성에 대해 AddDataSource 혹은 RemoveDataSource 메소드를 호출해도 자동적으로 내용을 갱신하지 않습니다. 템플릿의 내용을 갱신하기 위해서는 반드시 elt.builder.rebuild() 메소드를 직접 호출해야 합니다.

+

그 이유는, database 내에 여러 개의 데이터 소스가 추가되는 경우 매번 갱신이 일어나지 않도록 하기 위함입니다.

+

예제

+

(실제로 동작하는) 예제를 어디서 찾을 수 있나요?

+

여기에서 몇가지 예제들을 찾아볼 수 있습니다. 이 중 몇가지는 사인된(signed) 스크립트를 포함하고 있고 HTTP에서 직접 실행시킬 수 있습니다.

+

(Mozilla의 라이브 RDF 피드(feed) 를 담당하는)duplicates.rdf 와 duplicates.xul 도 살펴보기 바랍니다. 이것들을 실행시키기 위해서는 Mozilla의 보안 모델을 완화시켜야 합니다. 이를 위해 당신의 환경 설정(preference) 파일에 다음의 줄을 추가하십시오. (먼저 Mozilla를 종료시켜야 합니다. 그렇지 않으면 Mozilla가 종료될 때 당신의 환경 설정 파일을 덮어쓰게 될 것입니다.)

+
user_pref("signed.applets.codebase_principal_support", true);
+
+

Mozilla는 duplicates.xul 내의 스크립트에 XPConnect에 접근할 권한을 줄 것인지 물어볼 것입니다. '예'를 선택하십시오.

+

현재, Mozilla는 권한없이 RDF 인터페이스와 서비스에 접근하는 것을 허용하지 않습니다. 자세한 내용은 122846번 버그를 참조하십시오.

+

더 추가하고 싶은 예제가 있다면 그 링크를 danbri, mozilla-rdf 혹은 waterson에게 이메일로 보내기 바랍니다!

+

참고

+
    +
  1. RDF 와 그에 관련된 기술들에 대해서는 W3C RDF 페이지와 Semantic Web 페이지를 살펴보기 바랍니다.
    2. +
+

공헌

+ +

저자: Chris Waterson

+
+

원본 문서 정보

+ +
diff --git a/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html b/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html new file mode 100644 index 0000000000..d7539a262f --- /dev/null +++ b/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html @@ -0,0 +1,263 @@ +--- +title: Using the Right Markup to Invoke Plugins +slug: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins +tags: + - HTML + - Plugins +translation_of: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins +--- +

이 글은 올바른 HTML을 사용하여 플러그인을 불러오는 방법에 대한 글입니다. 여기서 object 요소(element)와 embed 요소에 대해 살펴볼 것이고, 웹 페이지에서 Java를 불러오는 가장 적당한 HTML 사용법에 대해서도 자세히 다룰 것입니다.

+ +

object 요소: W3C 표준과 크로스 브라우저 이슈

+ +

object 요소는 HTML 4.01 스펙의 일부이며 플러그인을 불러오는 방법으로 권장되는 방식입니다. object 요소의 사용법은 이 절에서 간단히 이야기할 경고 몇 가지에 영향을 받습니다.

+ +

전통적으로 object 요소는 Microsoft Internet Explorer와 Netscape 7 같은 Mozilla 기반 브라우저에서 서로 다르게 사용되었습니다. IE에서는 ActiveX 기술로 만든 플러그인을 불러오는데 object 요소를 사용했습니다. 여기 그러한 예제가 있습니다.

+ +
<!-- IE ONLY CODE -->
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+</object>
+
+ +

위의 예제에서 object 요소의 classid 속성은 "clsid:"라는 URN을 지정하고 있는데, 이것은 ActiveX 컨트롤의 유일한 식별자("D27..."로 시작하는 문자열)입니다. 사실 이 식별자는 Macromedia Flash 플러그인의 식별자입니다. 이런 방식으로 플러그인을 불러오려면 사용하려는 플러그인의 식별자를 알아야 합니다. codebase 속성은 ActiveX 컨트롤을 포함하는 CAB 파일을 얻을 수 있는 위치를 가리킵니다. codebase 속성은 획득 메커니즘 즉, 컨트롤이 존재하지 않을 경우 이를 얻을 수 있는 방법을 알려주기 위해 사용되었습니다. Flash ActiveX 컨트롤이 설치되지 않았다면 IE는 codebase 속성에 지정된 URL로 가서 ActiveX 컨트롤을 받을 것입니다. object 요소의 자식으로 추가된 param 요소들은 Flash 플러그인의 설정 매개변수를 지정하고 있습니다. 예를 들어, the param name="movie"는 Flash 플러그인이 재생할 SWF 파일의 위치를 지정합니다.

+ +

Netscape 7.1은 Microsoft® Windows Media Player의 경우 object 요소로 ActiveX를 불러오는 이런 방식을 지원합니다. Netscape 7.1에서 지원하는 유일한 ActiveX 컨트롤이 Windows Media Player입니다. 자세한 내용은 다른 글에서 다루고 있습니다.

+ +

Netscape 7같은 브라우저는 위와 같은 방법으로 마크업을 사용해서는 Flash 플러그인을 불러올 수 없습니다. Netscape7은 ActiveX과 ActiveX 기반 컴포넌트 호출을 지원하지 않기 때문입니다. Netscape 7.1이 예외적으로 Windows Media Player를 지원하는 것입니다. Mozilla 기반 브라우저는 Netscape 플러그인 아키텍처를 지원합니다. 이 아키텍처는 ActiveX 같은 COM 기반이 아니므로 유일한 식별자를 이용해서 불러내는 것이 아니라 MIME 형식을 기반으로 플러그인을 불러옵니다. Mozilla 기반 브라우저는 MIME 형식을 이용한 object 요소를 지원합니다. Macromedia Flash 플러그인을 불러오는 예제가 아래에 있습니다.

+ +
<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+    <p>You need Flash -- get the latest version from
+    <a href= "http://www.macromedia.com/downloads/">here.</a></p>
+</object>
+
+ +

위 예제에서 application/x-shockwave-flash는 Flash의 MIME 형식입니다. 이것은 Mozilla 기반 브라우저에서 Netscape의 Flash 아키텍처를 불러옵니다. data 속성은 재생할 SWF 파일을 지정하고 있습니다. 설정 매개변수(param 요소들)는 IE와 Mozilla 기반 브라우저에서 동일하게 사용됩니다. 사실 위의 사용 방법은 IE에서도 잘 동작합니다. IE는 ActiveX 스타일의 classid 호출 뿐만 아니라 Flash 같은 특정 MIME 형식을 이용한 호출도 이해하기 때문입니다.

+ +

MIME 형식을 이용해서 Flash 플러그인을 불러오는 방식은 IE와 Netscape 7에서 모두 잘 동작하기 때문에 위의 방법을 두 브라우저에서 동일하게 사용해도 됩니다. 그러나 object 요소를 Mozilla 기반 브라우저와 IE에서 사용할 때 우리가 반드시 명심해야할 몇 가지 주의 사항들이 있습니다.

+ +

주의 사항

+ + + + + +
<!-- 의도한 대로 동작하지 않는 사용법입니다 -->
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+
+	<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+	 width="366" height="142" id="myFlashNSCP">
+		<param name="movie" value="javascript-to-flash.swf" />
+    		<param name="quality" value="high" />
+    		<param name="swliveconnect" value="true" />
+		<p>You need Flash -- get the latest version from
+		 <a href="http://www.macromedia.com/downloads/">
+		here.</a></p>
+	</object>
+
+</object>
+
+ + + + + +

권장 사항

+ +

우리가 IE에서는 object 요소를 중첩해서 쓰지 못한다는 단점과 모든 브라우저에서 문제없이 동작하도록 하는 단순한 object 요소의 사용법은 없다는 단점을 극복하기 위한 가장 좋은 방법은 아키텍처에 따라 동적으로 object 요소를 동적으로 생성하도록 하는 것입니다. 예를 들어, IE 같이 ActiveX를 지원하는 브라우저에서는 classid 속성을 이용해서 object 요소를 만들고, Netscape 플러그인 아키텍처를 지원하는 브라우저에서는 MIME 형식을 사용하는 것입니다. 여기에 예제 JavaScript가 있습니다.

+ +
if (window.ActiveXObject)
+{
+
+// ActiveX를 지원하는 브라우저
+// IE용 OCX 다운로드 URL을 포함한
+// object 요소를 만듬
+
+document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
+document.write(' codebase="http://download.macromedia.com');
+document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
+document.write(' width="366" height="142" id="myFlash">');
+document.write(' <param name="movie" value="javascript-to-flash.swf" />');
+document.write(' <param name="quality" value="high" />');
+document.write(' <param name="swliveconnect" value="true" />');
+document.write('<\/object>');
+
+}
+
+else
+{
+
+// Netscape 플러그인 API를 지원하는 브라우저
+
+document.write('<object id="myFlash" data="javascript-to-flash.swf"');
+document.write(' type="application/x-shockwave-flash"');
+document.write(' width="366" height="142">');
+document.write('<param name="movie" value="javascript-to-flash.swf" />');
+document.write('<param name="quality" value="high" />');
+document.write('<param name="swliveconnect" value="true" />');
+document.write('<p>You need Flash for this.');
+document.write(' Get the latest version from');
+document.write(' <a href="http://www.macromedia.com/downloads">here<\/a>.');
+document.write('<\/p>');
+document.write('<\/object>');
+
+}
+
+ +

Flash Satay도 살펴 보시기 바랍니다.

+ +

object 요소와 Java

+ +

Netscape 6.x, Netscape 7, CompuServe 7 같은 Mozilla 기반 브라우저는 Sun에서 제공하는 Java 플러그인을 포함하고 있습니다. Netscape 6.x이나 Netscape 7을 설치하는 사용자는 Java를 설치할지 말지 선택할 수 있습니다. Netscape Communicator 4.x와는 달리 Netscape 6.x와 7은 기본 Java 가상 머신을 가지고 있지 않으며 Sun의 플러그인에 의존합니다. Netscape Communicator 4.x가 사용되던 시절에는 Netscape Communications가 Java 1.5.0과 그 하위 버전을 지원하는 Java 가상 머신을 개발했습니다. 이제 Netscape 6과 7에서 Java 가상 머신은 Sun의 플러그인입니다. Netscape는 Netscape Java 가상 머신을 더이상 개발하지 않으며, 브라우저와 함께 제공하지도 않습니다.

+ +

Sun의 Java 플러그인은 다른 플러그인들처럼 object 요소로 불러올 수 있습니다. 다시 한 번 말하자면, IE에서는 일반적으로 object 요소에 ActiveX의 유일한 식별자를 지정하는 classid 속성을 같이 씁니다. 플러그인의 각 메이저 버전은 유일한 식별자를 갖고 있습니다. 예를 들어, 다음 예제는 JRE 1.4.1의 유일한 식별자를 가지고 IE에서 JRE 1.4.1을 불러오는 마크업입니다.

+ +
<!-- IE ONLY CODE -->
+<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
+     width="460" height="160"
+codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1">
+     <param...>
+     <param...>
+</object>
+
+ +

위 예제는 이전에 설명했던 것과 같은 이유로 Netscape 7 같은 Mozilla 기반 브라우저에서는 동작하지 않을 것입니다. 즉, ActiveX 아키텍처를 참조하는 유일한 식별자와 함께 쓰인 classid를 Mozilla 코드에서는 지원하지 않기 때문입니다. Netscape 7과 그외 Mozilla 기반 브라우저에서는 적절한 MIME 형식으로 Java 플러그인을 호출할 수 있습니다.

+ +
<object type="application/x-java-applet;jpi-version=1.4.1_01"
+width="460" height="160">
+	<param name="code" value="Animator.class" />
+	<param name="imagesource" value="images/Beans" />
+	<param name="backgroundcolor" value="0xc0c0c0" />
+	<param name="endimage" value="10" />
+	<param name="soundsource" value="audio">
+	<param name="soundtrack" value="spacemusic.au" />
+	<param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" />
+	<param name="pause" value="200" />
+	<p>Java 플러그인이 필요합니다.
+         <a href="http://java.sun.com/products/plugin/index.html">이곳에서</a> 플러그인을 받으십시오.</p>
+</object>
+
+ +

위의 코드는 특정 버전을 가리키는 MIME 형식을 사용합니다. Mozilla 기반 브라우저에 JRE 1.4.1_01이 설치되어있지 않다면 대체 텍스트가 표시됩니다. MIME 형식에 항상 버전을 명시해야 하는 것은 아닙니다. 특정 버전에만 포함된 기능을 사용할 필요가 없다면 application/x-java-vm이라고 좀 더 일반적인 MIME 형식을 지정해도 잘 동작할 것입니다. 초기 진입 지점(initial entry point, "code" param 요소로 지정된 Animator.class)을 포함하여 애플릿을 위한 설정 매개변수들은 여러 개의 param 요소를 이용해 설정되었습니다.

+ +

Netscape 7같은 Mozilla 기반 브라우저는 또한 특별한 classid 속성을 지원합니다. 그것은 "java:" classid 입니다. 이 방법을 사용하여 Java를 불러오는 예제를 보십시오.

+ +
<object classid="java:NervousText.class" width="534" height="50">
+	<param name="text" value="Java 2 SDK, Standard Edition v1.4" />
+	<p>Java 플러그인이 필요합니다.
+	   <a href="http://java.sun.com/products/plugin/index.html">이곳에서
+	   </a>
+      플러그인을 받으십시오.
+	</p>
+</object>
+
+ +

"java:" classid를 이용하면 주요(primary) 진입 지점을 지정할 수 있습니다. 나머지 설정 매개변수들은 param 요소를 통해서 지정합니다.

+ +

apple -- 대중적인 선택

+ +

applet 요소는 Java 애플릿을 호출하는데 있어 여전히 많은 지원을 받고 있고 가장 인기있는 방법입니다. Netscape 7과 CompuServer 7에서, applet 요소는 직접적으로 Java 플러그인을 호출합니다. 예제를 보십시오.

+ +
<applet code="NervousText.class" width="534" height="50">
+	<param name="text" value="Java(TM) 2 SDK, Standard Edition v1.4" />
+</applet>
+
+ +

applet 요소는 HTML 4.01 스펙에서 권장되지 않는 요소가 되었습니다. 그러나 Netscape 7 같은 Mozilla 기반 브라우저에서 그 요소를 사용한다면 플러그인이 존재하지 않을 때 자동으로 받는 기능을 사용할 수 있다는 장점이 있습니다. 브라우저가 Netscape 플러그인 검색 서비스를 이용해서 Java 플러그인을 내려받을 것입니다. 참고자료절에 applet 요소를 사용하는데 대한 관련 자료가 있습니다.

+ +

embed 요소

+ +

embed 요소는 Netscape 브라우저 초창기부터 플러그인을 불러오기 위한 방법으로 사용되었습니다. 일반적으로 embed 요소는 object 요소 안에 중첩되는 식으로 사용됩니다. 바깥쪽 object 요소는 IE를 위한 ActiveX 컨트롤을 호출하고, 안쪽의 embed 요소는 Netscape 플러그인을 호출하는 것입니다. 예제를 보십시오.

+ +
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width=366 height=142 id="myFlash">
+	<param name="movie" value="javascript_to_flash.swf" />
+	<param name="quality" value="high" />
+	<param name="swliveconnect" value="true" />
+		<embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
+    		type="application/x-shockwave-flash"
+    		pluginspage="http://www.macromedia.com/downloads/"
+    		name="myFlash" swliveconnect="true">
+    		</embed>
+</object>
+
+ +

참고자료절에서 embed 요소를 사용하는 방법에 대한 링크를 찾을 수 있을 것입니다. Netscape 브라우저에서 플러그인을 불러오기 위해서 가장 널리 쓰이고 있는 것이 embed 요소입니다. 그러나 embed 요소는 HTML 4.01 스펙에 포함되지 않았고, 따라서 W3C 표준이 아니라는 것을 알아둘 필요가 있습니다. embed 요소를 사용할 때 몇 가지 주의 사항이 있습니다.

+ + + +

embed 요소의 획득 메커니즘 -- 설치되지 않은 플러그인을 받아오는 방법 -- 은 pluginspage 속성을 통해 동작한다는 것을 알아두십시오. 이 속성은 브라우저가 인식하지 못한 플러그인을 받을 수 있는 페이지를 가리킵니다. pluginurl 속성을 사용할 수도 있는데, 이 속성은 좀더 능률적인 다운로드를 위해서 XPInstall 파일을 직접 가리키는데 사용하 수 있습니다. embed 요소의 이 속성들에 대해서, Netscape 7과 Mozilla에서는 플러그인 검색 서비스 설정에서 설정할 수 있습니다. 편집(Edit) | 설정(Preference) | Navigator | Help Applications 에서 Netscape 플러그인 검색 서비스에 대한 설정을 할 수 있습니다. 사용자가플러그인을 받을 때 항상 Netscape 플러그인 검색 서비스를 사용함(Always Use the Netscape Plugin Finder Service to get Plugins) 옵션을 체크해두면, 앞의 두 속성을 지정하거나 하지 않거나 차이가 없습니다. 브라우저는항상 플러그인 검색 서비스를 사용하여 MIME 형식에 맞는 플러그인을 찾을 것입니다. 사용자가 옵션을 체크해두지 않았다면, 웹 페이지 작성자가속성을 지정하지 않았을 때에만 플러그인 검색 서비스를 사용핫 것입니다.

+ +

원문 정보

+ + + +

참고자료

+ +
일반적 -- 스펙들
+ + + +
object 요소
+ + + +
embed 요소
+ + + +
Java
+ + + +
Netscape와 Mozilla의 버그와 앞으로의 방향
+ + -- cgit v1.2.3-54-g00ecf