[TIZEN 2.2.1] 타이젠 개발자 사이트 가입

IT/TIZEN 2014. 5. 24. 23:18

1. 타이젠 공식 사이트(https://www.tizen.org/ko?langredirect=1)에 접속해서 등록을 눌러주세요.



2. 순서대로 입력 사항들을 입력하시고 REGISTER 버튼을 눌러주세요.

(*는 필수 입력 사항)


3. REGISTER이 완료가 되면 '이후의 안내를 당신의 이메일 주소로 보냈습니다.' 라는 메세지가 뜹니다. 이제 가입할 때 입력했던 이메일에 들어가서 이메일을 확인해봅니다.


4. 이메일을 확인해보고 나와있는 링크를 눌러주세요.


5. 그러면 밑에 사진처럼 이메일 주소가 인증이되고 비밀번호를 설정할 수 있는 로그인 버튼이 만들어집니다.


6. 들어가시면 아까 처음에 가입할때와는 다르게 비밀번호를 설정할 수 있는 칸이 생겨있습니다. 이를 작성하고  밑에 새로운 체크사항도 확인하고 확인을 눌러주세요.


7. '변경사항이 저장되었습니다.'라는 메세지가 뜨면 모든 가입 절차가 완료되었습니다.


저작자표시

'IT > TIZEN' 카테고리의 다른 글

[TIZEN 2.2.1] Tizen 설치 시 에러. Cannot execute Java even...  (0) 2014.07.05
[Wearable 1.0.0b2] 기기 Porting 방법  (0) 2014.07.05
[Wearable 1.0.0b2] Gear 개발자 Certificate 등록  (1) 2014.07.05
[TIZEN 2.2.1] Tizen Security Profiles 만들기  (0) 2014.07.03
[TIZEN 2.2.1] 타이젠 개요  (0) 2014.05.24
Posted by 밍쫑
,

[JS] 전문가교육 1일차 - 오후

IT 2014. 5. 24. 13:55

WebOS와 JavaScript

Webkit : 렌더링엔진(HTML을 파싱. 파싱하면 DOM 트리(비가시성 요소 포함) 만들어진다. - 렌더트리)

   (CSS - 파싱 - CSS룰 - 렌더트리)

XML

- DOM : Tree메모리

- SAX

v8 : Javascript 해석기


1. Open webOS Architecture Diagram


01


* Java 개발자가 꼭 알아야 할 프레임워크!

Spring, jQuery


2. Enyo

  • 모듈화와 캡슐화를 강조한 객체지향 자바스크립트 애플리케이션 프레임워크(기반, 자주사용하는 것들을 미리 만들어놓은 것.)
3. 자바스크립트 프레임워크
• Jindo Framework
– NHN에서 개발한 JavaScript Framework
– http://www.naver.com 에서 사용
– http://jindo.dev.naver.com/jindo_home/
– License : LGPL v2
• Jigu Framework
– Daum에서 개발한 JavaScript Framework
– http://www.daum.net 에서 사용
– Sizzle CSS Selector Engine을 사용함
– License : Daum Common License
• jQuery Framework
– 호환성을 갖춘 JavaScript Framework(write once, do more)
– http://www.jquery.com
– Sizzle CSS Selector Engine을 사용함
– License : MIT License
• Enyo Framework
– WebOS의 Web UI Framework
– http://enyojs.com
– License : Apache License, Version 2.0.
• Sencha Touch Framework
– http://sencha.com
– License : GPL v3



자바스크립트


1.자바스크립트 개요

  • ECMAScript 표준을 준수
  • 프로토타입 기반 객체지향 언어
  • html문서에 삽입되어, 브라우저의 해석기에 의해 인터프리터 방식으로 해석되어 실행이된다.
    *컴파일러와 인터프리터의 차이?
    - 컴파일러 : 컴파일하며 바이너리 파일이 생성된다. 바이너리 파일은 그 플랫폼에 의존하는 경향이 있다. ex) C, C++
    - 인터프리터 : 인터프리터만 있으면 어느 플랫폼에서든 실행이 가능하다. 단점은 그때그때 한줄씩 구문 검사를 하고, 속도가 느리다. ex) 자바스크립트
2. 자바스크립트 특징과 기능
  • 클래스를 정의할 수 없다.
  • 그러나 함수를 정의하고 함수로 객체를 생성할 수 있다.

3. 자바스크립트의 장점과 단점
  • 장점

- 작업속도가 빠르다

- 플랫폼 독립적

  • 단점

- 소스코드가 노출된다.

- 객체와 객체 함수가 적다.


4. 자바스크립트의 기본 구조

- <script>태그를 사용하여 HTML 문서에 코드 작성

HTML5인 경우 소스코드의 제일 상단에 <!DOCTYPE html>이 붙어있다.

HTML5인 경우 type없이 <script> ... </script>만 써도된다.


> document.write("<h2>안녕하세요</h2>"); 


document는 문서 하나를 말한다.

document.write는 브라우저 화면에 그리는 것이 아니라 브라우저 화면에 무엇인가를 나타내기 위한 출력이다.

alert("Hello")는 알림창을 띄우는 건데, 이 alert앞에는 window가 생략되있는 것이다. 

window는 최상위 객체이기때문에 생략 가능하다.

그래서 window.alert("Hello")이지만 alert("Hello")라고 쓸 수 있는 것이다.


5. 자바스크립트의 실행 위치

  1. <head> 태그 영역에 배치
  2. <body> 태그 영역에 배치
  3. 자바스크립트를 외부 파일로 사용되는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>문서의 제목을 입력합니다.</title>
</head>
 
<body>
    <!-- 브라우저 화면에 보여지는 내용입니다. -->
    <div>안녕하세요</div>
    <script>
        var myDiv = document.querySelector("div"); <!-- div라는 태그를 찾아서 DOM객체 반환 -->
        myDiv.innerHTML = "반갑습니다";
    </script>
</body>
</html>
<test1.html>

* var를 쓰지않으면 전역변수가 된다.
* <script>가 <head>부분에 있었으면 결과화면은 반갑습니다가 아닌 안녕하세요가 나왔을 것이다.
    왜냐하면 div가 DOM태그에 입력되기 이전에 script가 전부 실행 되게 되기때문에 myDiv가 null이 된다.
    따라서 <script>를 <body>의 마지막에 넣어준다.

* 다른 방식
<test2.html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title>문서의 제목을 입력합니다.</title>
    <script>
    function init() {
        var myDiv = document.querySelector("div");
        myDiv.innerHTML = "반갑습니다";
    }
    </script>
</head>
 
<body onload="init();">
    <!-- 브라우저 화면에 보여지는 내용입니다. -->
    <div>안녕하세요</div>
</body>
</html>



*중요한 또 다른 방식

<test3.html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>문서의 제목을 입력합니다.</title>
    <script src="default.js" defer> 
    
    </script>
</head>
 
<body>
    <!-- 브라우저 화면에 보여지는 내용입니다. -->
    <div>안녕하세요</div>
</body>
</html>


<default.js>

1
2
3
4
5
function init() {
    var myDiv = document.querySelector("div"); <!-- div라는 태그를 찾아서 DOM객체 반환 -->
    myDiv.innerHTML = "반갑습니다";
}
init();

* <!-- defer : HTML문서를 다 실행한 후에 <script>실행 -->

* <!-- HTML5의 경우. <async>의 경우 <script>다 다운받으면 바로 worker(백그라운드에서 돌아간다)를 실행시킨다. -->


6. 자바스크립트의 기본 문법

- 자바스크립트 구문

- 문장 끝에 세미콜론(;)을 입력한다.

- 자바스크립트 파일은 공백과 엔터를 지우고, 변수 이름도 a, b로 바꾸는 packing을 해서 암호화한다.

- 자바스크립트 주석

- // : 한 줄 주석 처리

- /* ~ */ : 한 줄 이상의 주석 처리

- 변수 선언

- var 키워드 이용

- var 없이 변수 사용 가능하지만 그러면 전역변수(최상위 객체의 멤버)가 됨

- 변수의 스코프(scope)는 함수 단위임


7. 데이터 타입

  • Primitive data type : 숫자(isFinite(), isNaN()), 문자열, 불린 타입(비교 결과가 0, null, "", false, undefined, NaN으로 판단되면 false,나머진 true), undefined, null
  • Reference data type : 객체, 배열, 함수, 기타
  • 객체
    - 자바스크립트에서 객체는 모든것을 의미한다. (문자열, 숫자, 배열, 함수 등)
    - 자바스크립트는 내장 객체와 사용자 정의 객체가 있다.

8. 연산자

> a=8;
   b=20;
   c=0;
   d=a&&b&&c;
   console.log(d);

0


> a=8;
   b=20;
   c=0;
   d=a||b||c;
   console.log(d);

8


9. 제어문

  • for/in 문
    - 사용법
        for (변수 in 객체) {
            //실행 코드 블록
        }
    - 객체의 멤버에 접근하기 위해[]사용 가능
    - 사용자가 정의한 속성에만 접근 가능하지만, Object 객체에 원래 정의된 속성에는 접근할 수 없다.
  • 반복문 안에서 변수 선언시 var 변수로 선언하지 않으면 전역변수가된다. (함수 밖에서 참조 가능)
prompt 창으로 두 수를 입력받은 후, 그 두 수를 더한 값을 출력하시오.
> var first = prompt("첫 번째 수를 입력하세요");
   var second = prompt("두 번째 수를 입력하세요");
   console.log(parseInt(first) + parseInt(second));
   console.log(first + second);


수를 입력받아 해당하는 구구단을 출력하세요.

> var dan = prompt("단을 입력하세요");

   dan = parseInt(dan);

   if(!isNaN(dan)) {

for(var i=1; i<=9; i++) {

console.log(i + "*" + dan + "=" + (i*dan));

}

    }else {

console.log("잘못된 입력입니다");

    }


10. 예외 처리
  • try/catch/finally
    -사용법
        try {
            //실행 코드를 포함
        } catch(error) {
            //예외가 발생했을 경우 처리할 코드
        } finally {
            //항상 실행되는 코드 포함
        }
  • throw

원인이 있는 곳에 try catch

원인이 발생하는 곳에서 throw

입력값 : 0 / 출력값 : Infinity


예제)

삼촌(caller)이 조카(callee)에게 500원을 주고 케이크를 사오라고 한다면 케이크를 못 사온 조카의 잘못일까? 삼촌의 잘못일까? 당연히 500원을 준 삼촌이 잘못이다! 고로 삼촌을 예외처리해주자!

* el이 null값이 들어있다는 error를 잡아준다.

* 밑에 경우가 올바른 경우


*위의 경우보다 오류 메세지를 더 알아보기 쉽게 한 코드(최종 코드)


11. 함수

  • 기본 개념
    • 함수의 정의
      - 예약어 'function'으로 시작
      - 익명함수 : 자기가 자기의 함수를 바로 호출해서 사용하는 것 (제일 밑에 소스코드)
  • 함수의 역할
    - 호출 가능한 루틴으로서의 함수 (method)
    - 값으로서의 함수 (method)
    - 다른 인스턴스를 생성할 수 있는 요소. 객체 타입으로서의 함수 (생성자함수)
  • 함수와 변수 스코프
    렉시컬(lexical, 구문) 특성 : 코드 그대로의 환경을 기준으로 정의한 변수 스코프에서 변수의 검색이 일어난다.
        함수 밖에서 선언된 전역변수를 함수 안에서 초기화 하지 않고 참조하면 undefined

    전역변수를 지역변수로 다시 선언할 때에는 반드시 초기화를 해줘야한다. 그렇지 않으면 undefined!
  • 메모리구조(★★★)
    실행코드블록에서는 변수 스코프를 참조할수 있기때문에 붙여놓았다.
    변수 스코프에서는 prototype이라는 속성을 제공하는데, 이 것을 이용하면 프로토타입의 객체를 반환받을 수 있다.
    프로토타입 객체의 constructor을 이용하면 원래 함수 객체로 돌아갈 수 있다.
    변수가 저장되는 곳은 : 변수 스코프, 프로토타입 객체, 공개변수영역
  • 함수 정의 방법
    - 기본 방법
    function add(x, y) {
        return x+y;
    }
    - 함수 리터럴 사용 (가장 많이 사용)
    var add = function(x, y) {
        return x+y;
    }
    - function 생성자 사용(맨 마지막 인자가 실행코드이고, 나머지는 함수의 인자이다.)
    var add = Function("x", "y", "return x+y");
  • 함수 호출과 함수 인자
    - 함수 호출시에 인자의 수는 정의시 매개변수의 수와 일치하지 않아도 됨
    인자보다 부족하면 undefined(or NaN), 인자보다 많으면 버려진다.
  • arguments
    - 함수 인자로 전달되는 데이터를 가진 객체, Object 타입
    - arguments.callee : 익명함수(anonymous function)로 재귀함수를 만들때
    - arguments.length : 전달되는 인자의 개수를 알 수 있다.
  • 자바스크립트 클로저
    - 내부 함수를 반환값으로 사용하는 특수한 함수
    - 클로저를 이용하면 독립된 변수 공간을 가진 인스턴스를 반환한다.
    function outer() {
        var x=0;
        return function() {
            return ++x;
        }
    }
    var f = outer();
    var g = outer();
    f(); //1
    f(); //2
    g(); //1
    g(); //2
    outer()(); //1
    outer()(); //1
    -> 지역변수값이 정적(static)변수가 되게 만들어준다.


숙제!!

17개의 숫자 더하는 프로그램을 짜보세요.

* for문 조건식에서 n=arguments.length라고 준 이유는 메모리 공간을 하나 더 차지하기는 하지만 for문을 돌면서 항상 계산(i<arguments.length)할 필요가 없기 때문이다.


저작자표시

'IT' 카테고리의 다른 글

[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)  (1) 2014.06.18
[JS] 전문가교육 2일차 - 오후  (0) 2014.05.25
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,

[JS] 전문가교육 1일차 - 오전

IT 2014. 5. 24. 11:03

오늘부터 2일동안 자바스크립트 전문가 교육을 듣게 되었습니다.



자바와 자바스크립트의 차이?

햄과 햄스터의 차이라고 볼 수 있다! 비슷할 것 같지만 전혀 다르다.

자바는 객체 지향 언어지만..

엄밀히 프로그래머 입장에서 자바스크립트 언어는 객체 지향 언어가 아니라 객체 기반 언어다. 근데 객체 기반 언어는 없는 말이다. 객체 기반 언어는 그냥 만든 말이다. 정확히 말하면 프로토타입(모형, 시제품) 언어라고 볼 수 있다.


객체 지향 언어 : 모든 것을 객체로 관리한다. 재사용성과 유지보수성을 생각해서 만들어야 된다. Java, C++ 등

  • 객체(object) : 클래스의 인스턴스
    • 명사적 특징 : 그 객체가 가지고 있는 데이터(data) ex) 펜의 경우 - 색깔
    • 동사적 특징 : 그 객체로 할 수 있는 행위(behavior) ex) 펜의 경우 - 쓰다
    • 상태는 행위에 영향을 준다.

    •  

      C 

      Java 

      분석/설계 

       명사적 특징(data)

      변수 

      Field 

      attribute 

       동사적 특징(behavior)

      함수 

      Method 

      operation
      (behavior)

  • 클래스(class) : 객체를 만들기 위한 틀
  • 객체(object) 와 인스턴스(instance)의 차이 : 객체는 unique하고, 인스턴스는 infinite하다. 
        예를 들어 책상에 여러 개의 펜이 있을 때 책상 위의 펜들을 인스턴스라고 말하고, 그 중 필기를 위해 한 개를 들었을 때 그것을 객체라고 말한다. (    객체는 총칭해서 부르는 말이다.)



* 오라클이 다음에 JDK 업데이트 할 때에는 자바가 자바스크립트를 지원하도록 하겠다고 했다고 한다.


자바스크립트 왜 배울까?

가장 많이 사용되는 곳은 Web. (웹의 내용(html), 표현(css), 동작(javascript))

자바스크립트에서는 Ajax(비동기식 요청)와 DOM제어로 많이 사용한다.


자바스크립트의 특징

형(type)을 지정하는 키워드가 없다. 그래서 a=10, a=3.5, a=func() 모두 사용 가능.

즉, 메모리를 효율적으로 관리할 수는 없다. (개발자의 몫)




ECMAScript

javascript는 ECMAScript 표준을 따르고 있다.

그럼 개발자는 EMCAScript 표준을 따르면 어떤 해석기에서도 해석 가능하다는 뜻이다.

ECMAScript 객체는 속성들의 모음

- 객체들은 0개 이상 속성을 가질 수 있다.

- 속성들은 다른 객체, 원시 값(primitive values), 함수(functions)를 포함할 수 있다.

▷ 변수와 method 구분 없이 모두 속성이라고 얘기한다.

▷ 자바스크립트에서 method라고 부를 때가 있고 함수라고 부를 때가 있다.

그럼 언제 함수라고 부르지?

▶ 자바스크립트에서는 클래스가 없기 때문에 함수를 가지고 객체를 만들 경우.

그럼 언제 method라고 부르지?

▶ 동작을 실행하는 경우.


내장 오브젝트

이 객체들은 모두 함수로 구현되어 있는 생성자라고 생각하면 된다. ECMAScript에서는 JSON도 지원한다.

JSON은 데이터 표현 형식들 중의 하나이다. (http://json.org)

– global object,

– Object object,

– Function object,

– Array object,

– String object,

– Boolean object,

– Number object,

– Math object,

– Date object,

– RegExp object,

– JSON object,

– Error objects

• Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError and URIError.


Objects

  • EMCAScript는 클래스를 사용하지 않는다. - Javascript 역시 클래스 x
  • 대신에 객체를 만들기 위해서 함수를 이용한다. (생성자함수)
    첫글자가 대문자이면 '아~생성자함수구나!' 라고 생각하면된다. - 메소드와 구분하기 위해서
    • literal notation
    • Constructors

ECMAScript 연산자 : 단항, 다항, 사칙, 비트이동, 관계, 동등비교, 비트, 비트논리, 할당, 콤마 연산자 등

자바스크립트의 독특한 연산자!! - 타입까지 비교해주는 연산자 ( ===, !== )가 있다.

short circuit - &&, || : 이것들의 결과는 T/F가 아니다. 왼쪽 항 또는 오른쪽 항의 결과가 대입된다.
    true && true = true(모두 참일 경우 마지막 항이 결과값), false && ? = false(앞이 F면 비교할 필요도없이 결과가 F)



자바스크립트 디버깅 (크롬 기준 설명)


크롬 - [F12]를 누르면 개발자도구가 나옵니다.

거기서 [Console] 탭을 눌러봅니다.

이곳에서 간단한 명령(자바스크립트) 실행가능합니다.

* 깨알 Tip!

간단한 명령 실행을 할 때 주소창에

about:blank

에 들어가서 실행하는 것을 추천합니다!

깨~끗해요


간단한 명령(자바스크립트)를 실행해보겠습니다.


> console.log("Hello")

Hello

>alert("Hello")

>a=10;
  b=20;
  c=a+b;

  console.log(c);

30

* 참고로 3번째 명령문의 경우 enter가 아닌 shift + enter로 바로 다음줄에 입력가능합니다.



* Tip!
 위의 사진을 보시다시피, 어느정도 입력하다보면 희미하게 회색으로 자동완성이 되면서 밑에 입력가능한 명령어들이 나옵니다. 이때 희미한 회색이 본인이 사용하려는 명령어인경우 [Tab]을 누르시면 자동완성이 됩니다.



* Java는 인터프리터 언어이다. 그것을 확인하는 명령.


> console.log("log");

   console.error("error");
   console.info("info");

   console.debug("debug");
   console.warn("warning");


console.log("헉! %s가 %d층짜리 건물을 뛰어넘습니다.", animal, count);

console.log('%c배경은 green, 글자색은 red로 표시됩니다.', 'color:red; background-color:green');

자바스크립트는 형식 문자열(%s, %d(10진문자), %c(style을 나타낼수있는데, 안될 수도 있으므로 잘 사용 x))을 가질 수 있다.



웹 아키텍처와 웹 어플리케이션 아키텍처

1. HTTP Client-Server Architecture

  • 브라우저가 서버의 페이지를 요청하면 서버는 해당 파일을 찾은 다음 HTTP응답을 통해 클라이언트에 전송
  • 브라우저는 응답된 페이지를 해석하여 화면에 보여준다.
  • request 정보는 사용자가 원하는 파일 또는 리소스의 위치와 브라우저에 관한 정보를 포함
  • reponse 정보는 요청한 자원에 관한 정보를 가지고 있으며, 일반적으로 텍스트 형태이며, 그래픽 등을 바이너리 정보를 포함할 수도 있다.

요청은 2가지가 있다.

  • 내가 클릭하거나 주소를 입력하면 동기 방식
  • 트위터나 페이스북은 화면 전체가 refresh가 안되는데 이것이 비동기 방식(자바스크립트의 역할)


2. HTTP Message

  • Request 메세지 본문에 들어가는 것은 서버에 보내야 할 파라미터들, 업로드할 때는 업로드할 파일들
  • Response 메세지 본문에 있는 것이 html 본문에 나온다.


3. HTTP Request

  • GET : 받는 용도
  • POST : 주는 용도


4. HTTP Response

  • HTTP 응답에는 응답상태와 헤더, 그리고 메시지 바디를 포함한다.
  • 응답 헤더에 간혹 쿠키 정보가 들어있을 수도 있다.


5. 웹사이트 구조와 접근 URL

  • protocol://host:port/path/file


6. 웹 어플리케이션 아키텍처

JSP는 결과를 보여주는 페이지인데, 즉 웹 개발자보다 web publisher 직군이 다루는 것이 낫다.

 - 웹 문서 시대(1990년대) : html + css + jsp가 모두 한 파일에...

 - 웹 표준 시대(2000년대 초반) : 서버단에 돌아가는 페이지에 MVC 패턴을 적용.

 - Ajax 시대(2000년대 후반) : 비동기 호출 사용

 - HTML5 시대(2010년대 초반) : HTML5 + CSS3 + HTML5 API(Javascript)

저작자표시

'IT' 카테고리의 다른 글

[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)  (1) 2014.06.18
[JS] 전문가교육 2일차 - 오후  (0) 2014.05.25
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
Posted by 밍쫑
,

티스토리툴바