Devy | Feed

Galaxy Watch 앱 만들기 #4 - Button

Thu, 05 Nov 2020 00:00:00 GMT

TAU Button 생성

App 개발시 많이 사용되는 Component 중 하나로 말 그대로 Button 이다.

TAU에서 Button을 추가할 수 있는 방법은 아래와 같이 3가지 방법이 있다.

<div class="ui-page">
  <div class="ui-content">
    <!-- 3가지 버튼 생성 방법 이 중 하나 선택 -->
    <button type="button" class="ui-btn">Button</button>
    <a href="#" class="ui-btn">Button</a>
    <input type="button" class="ui-btn" value="Button"/>
  </div>
</div>

Button 속성

기본적으로 Button을 표현하는 방법 외에도 아래 속성들을 넣어주면 추가 속성을 부여할 수 있다.

class	Description
ui-btn	Button Component를 만들기 위해 기본으로 추가되어야 하는 class
ui-btn-icon	icon 스타일 button 생성
ui-inline	inline 스타일 button 생성
ui-multiline	multiline 스타일 button 생성

Icon 버튼

텍스트를 가진 Button 외에도 아이콘 형식의 버튼을 만들기 위해서는 아래와 같은 형태로 입력해주면 된다. 기본 버튼 생성 class인 ui-btn에 ui-btn-icon을 추가해주면 된다. 사용할 아이콘 이미지의 위치는 background-image style의 url()안에 입력하면 된다.

  <button type="button" class="ui-btn ui-btn-icon ui-btn-icon-middle"
    style="background-image: url(icon.png);">
  </button>

Inline 버튼

일반 Button의 경우 한 줄 전체 크기로 생성이 되지만 inline 버튼의 경우 Text 크기만큼의 영역이 할당되는 버튼이다. 기본 버튼 생성 class인 ui-btn에 ui-inline을 추가해주면 된다.

  <button type="button" class="ui-btn">Button</button>
  <button type="button" class="ui-btn ui-inline">Inline</button>
  <button type="button" class="ui-btn ui-inline">Inline</button>

다중 line 버튼

다중 line 버튼의 경우 텍스트를 여러 줄 가진 형식의 버튼을 만들고 싶을 경우 사용한다. 기본 버튼 생성 class인 ui-btn에 ui-multiline을 추가해주면 된다.

  <button type="button" class="ui-btn ui-multiline">Multiline<br/> Button</button>

버튼 클릭시 색상 변경

버튼 클릭시 표시되는 기본 생상을 다른 색으로 변경하고 싶다면 아래 표를 참고하여 변경하여주면 된다. ui-btn에 원하는 색상 class를 추가해주면 된다.

class	Default color	Pressed color	Disable color
ui-color-red	#ce2302	#dd654e	#3d0a0a
ui-color-orange	#ed8600	#f0aa56	#462805
ui-color-green	#64a323	#92be5e	#1e3108

  <a href="#" class="ui-btn ui-color-red">Red Button</a>
  <a href="#" class="ui-btn ui-color-orange">Orange Button</a>
  <a href="#" class="ui-btn ui-color-green">Green Button</a>

버튼 크기 설정

버튼 크기를 원하는 크기의 비율로 배치하고 싶을 경우는 아래와 같이 ui-grid-col-x를 사용하여 크기를 정할 수 있다.

class	Description
ui-grid-col-1	버튼 가로 크기를 100%로 설정한다
ui-grid-col-2	버튼 가로 크기를 50%로 설정한다
ui-grid-col-3	버튼 가로 크기를 33%로 설정한다
ui-grid-row	버튼을 가로 한줄 씩 사용하도록 정의한다

  <div class="ui-grid-col-1">
    <button type="button" class="ui-btn">100%</button>
  </div>
  <div class="ui-grid-col-2">
    <button type="button" class="ui-btn">50%</button>
    <button type="button" class="ui-btn">50%</button>
  </div>
  <div class="ui-grid-col-3">
    <button type="button" class="ui-btn">33%</button>
    <button type="button" class="ui-btn">33%</button>
    <button type="button" class="ui-btn">33%</button>
  </div>

Galaxy Watch 앱 만들기 #3 - TAU Component 종류

Wed, 04 Nov 2020 00:00:00 GMT

TAU Component 리스트

앞서 #2에서 TAU를 어떻게 사용하면 되는지를 배웠다면, 이제 해야할 일은 TAU에서 제공하는 Component 들 중에 내가 개발할 App에 필요한 Component를 찾아야 하는 일이다. TAU에서 제공하는 Component들의 리스트는 이곳에서 확인할 수 있다.

현재 공식 Document 상에는 총 23가지의 기본 Component들을 제공하고 있다. 이 Component들의 사용법에 대해서 하나 하나씩 다루어 보도록 하겠다.

Wearable UI Components
- Button
- Checkbox and radio button
- Circle ProgressBar
- Circular Index scroll bar
- Date picker
- Drawer
- Index scroll bar
- List
- Marquee
- Number picker
- Page Indicator
- Popup
- Processing
- Progress
- Section changer
- Selector
- Slider
- SnapListview
- Swipe list
- Timer picker
- Toggle switch
- View Switcher
- Virtual list

Galaxy Watch 앱 만들기 #2 - TAU (Tizen Advanced UI) 사용하기

Tue, 03 Nov 2020 00:00:00 GMT

TAU 란?

일반적으로 Web Application은 html, css, js를 조합해서 개발을 하는데 Web 개발을 많이 경험해 본 개발자라면 손 쉽게 원하는 화면을 구성할 수 있겠지만, 초보자라면 쉽지 않기 때문에 원하는 화면을 쉽고 빠르게 구성하기 위해 bootstrap이나 Semantic UI 같은 UI Framework를 사용해서 개발을 한다.

하지만, 이런 UI Framwork들은 모바일이나 태블릿 화면을 기준으로 만들어져 있기 떄문에 Watch에 맞는 구성을 지원하지 않는다. 이런 문제를 해결할 수 있는게 바로 TAU(Tizen Advanced UI) 이다.

TAU는 Tizen Application을 쉽게 개발할 수 있도록 도와주는 UI Framework로 모바일 뿐만 아니라 Galaxy Watch와 같은 시계 화면을 위한 Wearable을 지원하고 있다. 즉, TAU를 사용하면 아래와 같은 화면을 가진 앱을 쉽게 개발 할 수 있다 :D

TAU 설치하기

TAU는 오픈소스 프로젝트로 현재 github를 통해 release가 되고 있다. TAU를 사용하기 위해 먼저 소스를 다운 받아보자. 다운로드 페이지에는 다양한 버전이 릴리즈 되고 있지만 각 버전에 대한 차이점에 대해서는 다른 글을 통해 설명하도록 하겠다. 이 중에서 테스트를 위해 일단 1.0.27 버전을 다운 받아보자.

다운 받은 파일을 #1번째 글에서 생성한 BasicTest 폴더에 압축을 풀고 아래와 같이 TAU를 사용하기 위한 tau.css, tau.circle.css, tau.js를 header 부분에 포함시켜 주자.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>

    <!-- 아래 3줄을 여기에 넣어주세요 -->
    <link rel="stylesheet" type="text/css" media="all and (-tizen-geometric-shape: circle)" href="dist/wearable/theme/changeable/tau.css"/>
    <link rel="stylesheet" type="text/css" media="all and (-tizen-geometric-shape: circle)" href="dist/wearable/theme/changeable/tau.circle.css"/>
    <script src="dist/wearable/js/tau.js"></script>
</head>

TAU를 포함 시켰다면 이제 TAU를 이용한 간단한 리스트를 만들어보도록 하자. 이번에는 아래 코드를 body 부분에 포함시켜 보도록 하자.

<body>  
	<div class="ui-page">
		<div class="ui-content">
			<ul class="ui-listview">
				<li>List 01</li>
				<li>List 02</li>
				<li>List 03</li>
				<li>List 04</li>
				<li>List 05</li>
			</ul>
		</div>
	</div>
	<script>
		var list = document.querySelector(".ui-listview");
		tau.widget.Listview(list);
	</script>
</body>

코드를 전부 입력했다면 완성된 코드를 #1에서 진행한대로 "Tizen Web: Build Tizen App"를 한 뒤 "Tizen Web: Install Tizen App"를 통해 Emulator에서 실행해보면 아래 화면과 같이 Wearable 화면에 어울리는 List를 가진 앱 화면을 볼 수 있다.

이제 TAU를 사용할 준비는 마쳤다. 이제 본격적으로 TAU를 활용해서 만들 수 있는 Component들을 살펴 보도록 하자.

Galaxy Watch 앱 만들기 #1 - 개발환경 설정

Mon, 02 Nov 2020 00:00:00 GMT

개발툴(IDE) 설치하기

Galaxy Watch 앱을 개발하기 위해서는 개발툴(IDE) 설치가 먼저 필요한데, Galaxy Watch의 경우 Tizen OS를 사용하고 있으므로 Tizen에서 제공하는 Tizen Studio를 사용해도 되지만 개인적으로 VSCode를 주 개발툴로 사용하고 있기 때문에 VSCode Extension으로도 제공되는 Tizen Web Exetnsion을 사용하려고 한다. VSCode를 설치한 뒤 Extensions: 마켓플레이스에 tizen web을 검색해 첫번째로 검색되는 Tizen Web을 Install 해주면 된다.

Tizen Web Extension을 설치 한 후 관련 명령어를 검색하려면 명령 팔레트(Ctrl + Shift + P)를 띄운 후 tizen을 검색하면 된다.

제일 먼저 해줘야할 작업은 Baseline SDK를 설치해줘야 한다. "Tizen Web: Install Tizen Baseline SDK"를 실행해서 Baseline SDK를 설치해주도록 하자.

프로젝트 생성

먼저 개발환경이 제대로 설정 되었는 지를 확인해보기 위해 기본 프로젝트를 만들어보자. "명령 팔레트 - Tizen Web: Create Wizard Project"을 실행 주면 프로젝트 생성 Wizard가 실행이 되는데 Template과 Sample 중 일단 Template을 선택해보자.

그 다음으로 Wearable 용 앱을 만들거니 Wearable을 선택해주고 일단 Version 3.0을 선택해주다. Version과 관련된 설명도 다음에 추가하도록 하겠다.

선택된 버전의 Platform이 설치가 되어 있지 않을 경우 아래와 같이 우측 하단에 Popup이 뜨게 되는데 Yes를 눌러 Package Manager를 실행하여 Wearable 3.0 SDK를 설치해주도록 하자.

혹시 설치되어 있는 Tizen SDK의 경로가 기본 경로에 설치되어 있지 않으면 아래와 같은 Popup이 나올 수 있는데 이럴 경우는 "Tizen Web: Change Tizen SDK Path"를 실행한 뒤 Change Path를 선택하여 설치된 경로를 바꿔주도록 하자.

위 과정까지 문제 없이 마쳤다면 이제 거의 준비가 된 것 이다. 이제 Template 항목 중 기본 앱인 Basic UI앱을 만들어 선택해보자.

드디어 마지막 생성할 앱의 이름을 정해주도록 하자. Basic UI 앱이니 BasicTest라는 이름을 적어 준 뒤 프로젝트 생성을 완료하면 된다.

아래와 같이 생성된 프로젝트 파일들이 보인다면 생성이 제대로 완료 되었다는 것이다.

Emulator로 실행해보기

Emulator를 실행하는 방법은 여러가지가 있지만 처음 시작할 경우에는 생성된 Emulator Image가 없기 때문에 Emulator Manager를 실행하여 테스트할 Image를 만들어 주도록 하자. Emulator Manager를 실행하기 위해서는 "Tizen Web: Run Emulator-Manager"를 실행하도록 하자.

"Create"를 눌러 원하는 버전의 Emulator Image를 생성해야줘야 하는데 우리가 기본적으로 시작할 할 이미지는 wearable 3.0 버전의 이미지 이므로 선택 후 생성하도록 하자.

생성 과정 중 중요한 부분 중 하나인 Emualtor의 경우 가상화 기술(VT)과 GPU가 켜져 있지 않을 경우 매우 느리게 실행이 된다. CPU VT의 경우 바이오스에서 VT 기능을 켜준 뒤 Intel HAXM을 설치해줘야 하고 GPU의 경우 그래픽카드가 제대로 설치되어 있다면 문제없이 ON할 수 있을 것 이다. 문제가 없다면 바로 이미지를 생성을 완료하도록 하자.

이제 Emaulator 설정이 끝났다. 생성한 Emualtor Image을 Launch 해주도록 하자. 아래와 같이 시계화면이 나온다면 제대로 실행한 것이다.

App 실행 해보기

테스트할 앱을 설치하기 위해서는 먼저 프로젝트를 빌드해줘야한다. VSCode 화면으로 돌아와 "Tizen Web: Build Tizen App"을 실행한 뒤 설치할 프로젝트를 선택해주도록 하자. 다음으로 빌드한 앱을 설치해보도록 하자. "Tizen Web: Install Tizen App"을 실행하면 앱이 설치가 되면서 자동으로 실행이 되게 된다. 아래와 같은 화면이 나오면 성공이다!

자 이제 앱 개발을 시작해볼 수 있는 기본 환경은 갖추었다! 다음 글을 통해 어떻게 Wearable App들을 예쁘게 만들 수 있는지 배워보도록 하자!

Node.js에서 스크립트가 실행될 때 어떤 일들이 일어날까요?

Sun, 16 Feb 2020 00:00:00 GMT

혹시 Node.js 스크립트를 실행하면 어떤 방식으로 동작을 하는지 궁금하지 않았나요?

이 글은 이런 궁금증을 가지고 있는 분들에게 조금이나마 도움이 되고자 하는 글이니, 관심이 없으시다면 스킵하셔도 됩니다 :D

먼저, Node.js를 분석하기 위해서 코드를 다운 받아봅시다.

$ git clone https://github.com/nodejs/node.git && cd node

Node.js의 파일 구조는 아래와 같은 모습을 가지고 있습니다.

$ tree -L 1
.
├── AUTHORS
├── BSDmakefile
├── BUILDING.md
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── COLLABORATOR_GUIDE.md
├── CONTRIBUTING.md
├── CPP_STYLE_GUIDE.md
├── GOVERNANCE.md
├── LICENSE
├── Makefile
├── README.md
├── SECURITY.md
├── android-configure
├── benchmark
├── common.gypi
├── configure
├── configure.py
├── deps
├── doc
├── lib           # JS sources
├── node.gyp
├── node.gypi
├── src           # C++ sources
├── test
├── tools
└── vcbuild.bat

7 directories, 20 files

노드는 크게 2종류의 언어로 이루어져 있는데 lib/ 폴더 안에 있는 JavaScript 파일 들과 src/ 폴더 밑에 존재하는 많은 양의 C++ 파일 들이 있습니다.

Node.js의 모든 시작 과정은 C++에서 완료되며, main 시작 지점은 src/node_main.cc 입니다.

이 안에서 제일 중요한 부분은 다음과 같습니다.

return node::Start(argc, argv);

이 것은 src/node.cc의 Start을 호출하고 command line의 parameter들을 argc와 argv로 넘겨줍니다.

첫 번째 단계로 Start()안에서 런타임 초기화 작업들이 수행되는데 InitializeOncePerProcess는 환경변수(예.NODE_OPTIONS)나 CLI parameters(예.--abort-on-uncaught-exception)를 통해 주어지는 설정 값들을 처리하고 V8을 초기화 해준다. 한 번 이작업이 완료가 되면, 새로운 node 인스턴스들은 libuv default loop를 사용해 초기화 된 후 마침내 아래와 같이 실행되게 됩니다.

NodeMainInstance main_instance(&params,
                               uv_default_loop(),
                               per_process::v8_platform.Platform(),
                               result.args,
                               result.exec_args,
                               indexes);
result.exit_code = main_instance.Run()

NodeMainInstance::Run()을 통해 Node를 실행 시 어떤 일들이 수행되는 지를 알 수 있는 길에 좀 더 가까워졌습니다. 새로운 메인 쓰레드 수행 환경이 src/node_main_instance.cc에서 만들어지는데:

std::unique_ptr<Environment> env = CreateMainEnvironment(&exit_code);

이 Environment 인스턴스가 libuv와 V8을 접근 할 수 있는 Handle들을 가지고 있는 노드 프로세스의 중심 객체입니다.

이 객체를 LoadEnvironment에 넘기면

LoadEnvironment(env.get());

main thread 수행이 시작된다:

void LoadEnvironment(Environment* env) {
  CHECK(env->is_main_thread());
  USE(StartMainThreadExecution(env));
}

이 부분에서 C++에서 JavaScript 수행으로 변경이 됩니다.

MaybeLocal<Value> StartMainThreadExecution(Environment* env) {
  if (NativeModuleEnv::Exists("_third_party_main")) {
    return StartExecution(env, "internal/main/run_third_party_main");
  }

  std::string first_argv;
  if (env->argv().size() > 1) {
    first_argv = env->argv()[1];
  }

  if (first_argv == "inspect" || first_argv == "debug") {
    return StartExecution(env, "internal/main/inspect");
  }

  if (per_process::cli_options->print_help) {
    return StartExecution(env, "internal/main/print_help");
  }


  if (env->options()->prof_process) {
    return StartExecution(env, "internal/main/prof_process");
  }

  // -e/--eval without -i/--interactive
  if (env->options()->has_eval_string && !env->options()->force_repl) {
    return StartExecution(env, "internal/main/eval_string");
  }

  if (env->options()->syntax_check_only) {
    return StartExecution(env, "internal/main/check_syntax");
  }

  if (!first_argv.empty() && first_argv != "-") {
    return StartExecution(env, "internal/main/run_main_module");
  }

  if (env->options()->force_repl || uv_guess_handle(STDIN_FILENO) == UV_TTY) {
    return StartExecution(env, "internal/main/repl");
  }

  return StartExecution(env, "internal/main/eval_stdin");
}

StartExecution의 경우 두번째 인자로 넘겨지는 JS파일들을 읽고, 컴파일하고, 실행하는데 모든 파일은 lib/ 폴더 밑에 있는데, 이중 관심있게 봐야하는 곳은 두 곳 입니다.

if (!first_argv.empty() && first_argv != "-") {
  return StartExecution(env, "internal/main/run_main_module");
}

if (env->options()->force_repl || uv_guess_handle(STDIN_FILENO) == UV_TTY) {
  return StartExecution(env, "internal/main/repl");
}

lib/internal/main/repl.js와 lib/internal/main/run_main_module.js 두 스크립트 모두 중요한 시작 메소드인 lib/internal/bootstrap/pre_execution.js안의 prepareMainThreadExecution을 실행하는데, 이것은 여러 setup 작업들을 수행하는데 이 중 CommonJS와 ES module loader 초기화 역시 수행됩니다.

lib/internal/modules/cjs/loader.js안의 Module 객체는 CommonJS loaders core이며 initializeCJSLoader는 runMain를 통해 lib/internal/modules/run_main.js안의 executeUserEntryPoint을 실행해줍니다.

CommonJS module의 경우 Module._load로 새로운 Module 인스턴스를 생성하고 load를 호출 해주고 적절한 extension function이 module을 읽어오는데 사용됩니다.

Module._extensions[extension](this, filename);

*.js extension이 실제 파일을 읽고 컴파일 해줍니다.

const content = fs.readFileSync(filename, 'utf8');
module._compile(content, filename)

module._compile은 V8의 ScriptCompiler:CompileFunctionInContext를 호출하고 node module wrapper에 맞는 exports, require, module, __filename, __dirname을 넘겨줍니다.

이렇게 불려진 function은 실행이 되고 결과를 리턴해줍니다:

result = compiledWrapper.call(thisValue, exports, require, module,
                              filename, dirname);

다음으로 확인 해봐야할 부분은 libuv eventloop입니다.

JavaScript를 컴파일하고 실행한 후, node 인스턴스는 event loop를 시작해줍니다.

do {
    uv_run(env->event_loop(), UV_RUN_DEFAULT);

    per_process::v8_platform.DrainVMTasks(isolate_);

    more = uv_loop_alive(env->event_loop());
    if (more && !env->is_stopping()) continue;

    if (!uv_loop_alive(env->event_loop())) {
        EmitBeforeExit(env.get());
    }

    // Emit `beforeExit` if the loop became alive either after emitting
    // event, or after running some callbacks.
    more = uv_loop_alive(env->event_loop());
} while (more == true && !env->is_stopping());

uvrunmode UV_RUN_DEFAULT는 더이상 동작하거나 참조되는 곳이 없을때 까지 event loop를 수행합니다.

libuv는 lifetime에 따라 handle과 request로 구분이 되는데, 오랫동안 수행되는 객체의 경우 handle이라고 할 수 있고 짧은 시간동안 수행되는 operation들을 request라고 할 수 있습니다.

const http = require('http');

const requestHandler = (req, res) => {
  res.write('Hello World!');
  res.end();
};

const server = http.createServer(requestHandler);

server.listen(8080);

위 예제의 경우 requestHandler를 libuv request로 볼 수 있습니다. 반면, server 객체의 listen은 handle이라고 할 수 있습니다.

HTTP server를 멈추지 않는 이상, libuv는 계속해서 실행되고 입력되는 연결들을 처리할 것 입니다.

위 과정들이 Node.js에서 스크립트가 어떻게 수행되는 지를 설명한 내용입니다. 물론, 전체 과정을 상세히 다루는게 아니기 때문에 설명이 부족한 부분이 있을 수 있겠지만, 스크립트가 수행되는 과정에서의 중요한 부분들을 설명해주고 있습니다.

혹시 기회가 된다면 다음 포스트를 통해 추가적인 내용들을 다루어 보겠습니다.

Reference

Inside node: What happens when we execute a script?