변수, 데이터 타입, 리터럴(JavaScript)

프로그래밍/HTML&JavaScript 2016. 12. 15. 22:01

# 변수, 데이터 타입, 리터럴

# <script> 태그와 자바스크립트 - 자바스크립트 코드의 실행

# 자바스크립트 출력하기 - HTML 페이지에서의 자바스크립트 기술 방식

인라인 스크립트 방식

- <script> 태그 아래 자바스크립트 코드를 직접 작성

외부 스크립트 방식

- 자바스크립트 코드를 외부 파일(확장자는 js)에 작성하고 이 파일의 이름을 <script> 태그의 src 속성 값으로 지정

외부 스크립트와 인라인 스크립트는 동시에 작성 불가(인라인스크립트의 내용은 무시됨)

# 자바스크립트 출력하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-01</title>
  </head>
  <body>
    <script type="text/javascript">
      document.writeln('&lt;script&gt; 태그 아래의 인라인 스크립트에 의한 출력입니다.<br/>');
    </script>
 
//인라인과 외부 스크립트 방식 동시 사용
    <script type="text/javascript" src="02-01.js">    //02-01.js 파일이 같은 폴더 내에 있어야 한다.
          document.writeln('외부 스크립트를 사용할 때는 &lt;script&gt; 태그 아래 내용이 무시됩니다.<br/>');    //동시사용시 무시되는 라인
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 문장규칙

(1) 문장의 끝에 세미콜론(;)을 붙인다.

(2) 대소문자를 구별한다.

(3) 문장에서의 화이트 스페이스 문자(공백문자, 줄바꿈, tab..)는 무시된다.

# 주석

// 행의 끝까지를 주석으로 처리하는 단일 행 주석

여러 라인에 걸쳐 주석 블록을 구성할 수 있는 복수 행 주석

# 변수 선언과 var

- 변수 : 프로그램이 어떤 값을 메모리에 저장해 두고 다시 사용하기 위한 공간

# var 키워드 : 자바스크립트는 값을 저장하기 위한 공간을 확보하기위해 var 키워드를 이용해 변수를 선언

var변수명 [=초기값];

변수 선언 시 초기값을 지정하지 않을 경우, 값을 저장할 때까지 그 변수는 undefined 상태임

1
2
3
4
5
6
var a;    // undefined 상태
var b,c;  // undefined 상태
var d=0;
var e=2, f=4;
var g=6, h;   // 변수 h = undefined 상태 
var i, j=8;    // 변수 j = undefined 상태
cs

변수 선언 시 var 키워드 생략이 가능하지만, 변수 스코프 문제가 발생할 수 있으므로 var 키워드는 생략하지 않는 것이 좋다.

값에 의한 데이터 타입 결정(동적이면서 약한 타입(dynamic and weak typing) 언어), 저장되는 값에 따라 변수의 데이터 타입이 바뀐다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-02</title>
  </head>
  <body>
    <script type="text/javascript">
      // 변수 선언
      var a;
      var b, c;
      var d = 0;
      var e = 2, f = 4;
      var g = 6, h;
      var i, j = 8;
      document.writeln('a: ' + a + '<br/>');   // a: undefined
      document.writeln('b: ' + b + '<br/>');  // b: undefined
      document.writeln('c: ' + c + '<br/>');   // c: undefined
      document.writeln('d: ' + d + '<br/>');  // d: 0
      document.writeln('e: ' + e + '<br/>');  // e: 2
      document.writeln('f: ' + f + '<br/>');    // f: 4
      document.writeln('g: ' + g + '<br/>');  // g: 6
      document.writeln('h: ' + h + '<br/>');  // h: undefined
      document.writeln('i: ' + i + '<br/>');    // i: undefined
      document.writeln('j: ' + j + '<br/>');    // j: 8
      var k = 10;
      var l = '문자열';
      document.writeln('k: ' + k + '<br/>');  // k: 10
      document.writeln('l: ' + l + '<br/>');    // l: 문자열
      l = 12;
      document.writeln('l: ' + l + '<br/>');    // l: 12    //문자열 type이었는 변수 I가 정수형으로 변환됨
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 값을 저장하는 기본형 데이터 타입

# 참조값을 저장하는 참조형 데이터 타입

# 기본형 데이터 타입과 참조형 데이터 타입의 변수 선언과 메모리 할당

1
2
3
4
5
6
7
//기본형 데이터 타입
var num = 10;
var str = '자바스크립트';
 
//참조형 데이터 타입
var point = { x : 300, y : 400 };
var arr = { 10, 20, 30, 40 };
cs

# 기본형 데이터 타입과 참조형 데이터 타입의 변수 선언과 메모리 할당

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-03</title>
  </head>
  <body>
    <script type="text/javascript">
      // 데이터 타입
      var num = 10;              // 숫자형
      var str = '자바스크립트';   // 문자열형
      var point = { x : 300, y : 400 }; // 객체
      var arr = [ 10, 20, 30, 40 ];     // 배열
      
      // 함수
      var add = function(op1, op2) {
        return op1 + op2;
      };
      
      document.writeln('num: ' + num + '<br/>');  // num: 10
      document.writeln('str: ' + str + '<br/>');  // str: 자바스크립트
 
      document.writeln('point.x: ' + point.x + '<br/>');        // point.x: 300
      document.writeln('point["y"]: ' + point["y"] + '<br/>');  // point["y"]: 400 
      document.writeln('arr[0]: ' + arr[0] + '<br/>');             // arr[0]: 10
      document.writeln('arr[3]: ' + arr[3] + '<br/>');             // arr[3]: 40
      document.writeln('add: ' + add + '<br/>');                  // add: function (op1, op2) { return op1 + op2; }
      document.writeln('add(2, 3): ' + add(2, 3) + '<br/>');    // add(2, 3): 5
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 리터럴

- 리터럴(Literal) : 프로그램의 코드 상에 데이터의 값을 표현하는 방식

자바스크립트의 리터럴

- 숫자 리터럴, 문자열 리터럴, 배열 리터럴, 객체 리터럴, 함수 리터럴, 불리언 리터럴, 그리고 undefined와 null 리터럴

숫자 리터럴

자바스크립트에서 숫자 리터럴 중 정수 리터를은 10진수, 16진수로 표현(8진수 리터럴도 있음)

Infinity, NaN를 포함한 모든 숫자 데이터는 typeof 연산의 결과 "number"를 반환

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-04</title>
  </head>
  <body>
    <script type="text/javascript">
      
      var a = 10;
      document.writeln('a: ' + a + '<br/>');                              // a: 10
      document.writeln('typeof a: ' + typeof a + '<br/>');        // typeof a: number
      document.writeln('isFinite(a): ' + isFinite(a) + '<br/>');    // isFinite(a): true
      document.writeln('isNaN(a): ' + isNaN(a) + '<br/>');        // isNaN(a): false
      document.writeln('<br/>');
      
      var b = 1 / 0;
      document.writeln('b: ' + b + '<br/>');                             // b: Infinity
      document.writeln('typeof b: ' + typeof b + '<br/>');        // typeof b: number
      document.writeln('isFinite(b): ' + isFinite(b) + '<br/>');   // isFinite(b): false
      document.writeln('isNaN(b): ' + isNaN(b) + '<br/>');        // isNaN(b): false    
      document.writeln('<br/>');
      
      var c = 5 * "4times";
      document.writeln('c: ' + c + '<br/>');                              // c: NaN
      document.writeln('type of c: ' + typeof c + '<br/>');       // typeof c: number
      document.writeln('isFinite(c): ' + isFinite(c) + '<br/>');    // isFinite(c): false
      document.writeln('isNaN(c): ' + isNaN(c) + '<br/>');        // isNaN(c): true
      document.writeln('<br/>');
 
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 문자열 리터럴

문자열 리터럴은 유니코드 문자들을 작은따옴표(') 또는 큰따옴표(")로 둘러싸서 표현

작은따옴표로 만든 문자열내에서는 큰따옴표를 포함할 수 있고, 큰따옴표로 만든 문자열에서는 작은 따옴표를 포함할 수 있음

문자열 리터럴은 한 줄을 넘을 수 없으며, 만일 문자열 리터럴 내에서 줄바꿈을 표현하고자 한담녀 이스케이프 시퀀스 '\n'를 사용

1
2
''    // 빈 문자열
""    // 빈 문자열
cs

'문자열 리터럴'

'작은따옴표로 만든 문자열에서는 큰따옴표(")를 포함할 수 있다.'

"큰따옴표로 만든 문자열에서는 작은따옴표('')를 포함할 수 있다."

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>02-05</title>
  </head>
  <body>
    <script type="text/javascript">
      // 문자열 리터럴
      var str1 = '문자열 리터럴';
      var str2 = '작은따옴표로 만든 문자열에는 큰따옴표(")를 포함할 수 있습니다.';
      var str3 = "큰따옴표로 만든 문자열에는 작은따옴표(')를 포함할 수 있습니다.";
      
      document.writeln(str1 + '<br/>');
      document.writeln('<br/>');
      document.writeln(str2 + '<br/>');
      document.writeln(str3 + '<br/>');
      document.writeln('<br/>');
      
      var str4 = '작은따옴표로 만든 문자열에 \\\'를 통해 작은따옴표(\')를 포함할 수 있습니다.';
      var str5 = "큰따옴표로 만든 문자열에 \\\"를 통해 큰따옴표(\")를 포함할 수 있습니다.";
  //\n : 웹페이지 상에서는 동작하지 않는다
      var str6 = '이 문자열은 줄바꿈을 통해 첫번째 행을 출력하고,\n이어 두번째 행을 출력합니다.';
      var str7 = '원주율 \u03c0는 원의 둘레와 지름의 비율입니다.';
      
      document.writeln(str4 + '<br/>');
      document.writeln(str5 + '<br/>');
      document.writeln(str6 + '<br/>');
      document.writeln(str7 + '<br/>');
      document.writeln('<br/>');
      
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 배열 리터럴

- 배열 : 데이터 값들의 모음

배열의 원소인 데이터 값은 배열명 다음에 대괄호([])로 둘러싼 인덱스를 써서 그 값을 가져오거나 변경할 수 있음

자바스크립트에서 배열의 원소는 어떠한 데이터 타입이라도 사용할 수 있음

1
2
3
4
[]    // 빈 배열
[ 95, 91, 199, 286, 95, 33 ]    // 숫자를 원소로 갖는 배열
[ '홍길동', '이순신', '강감찬' ]    //문자열을 원소로 갖는 배열
[ ['을지문덕', '연개소문'], ['광개토대왕', '세종대왕'], ['김유신', '계백'] ]  //배열을 원소로 갖는 배열
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-06</title>
  </head>
  <body>
    <script type="text/javascript">
      // 배열 리터럴
      // 빈 배열
      var arr1 = [];
      
      document.writeln('arr1[0]: ' + arr1[0] + '<br/>');            // arr1[0]: undefined
      document.writeln('arr1[1]: ' + arr1[1] + '<br/>');            // arr1[1]: undefined
      document.writeln('arr1[2]: ' + arr1[2] + '<br/>');            // arr1[2]: undefined
      document.writeln('arr1[3]: ' + arr1[3] + '<br/>');            // arr1[3]: undefined
      document.writeln('arr1.length: ' + arr1.length + '<br/>');    // arr1.length: 0
      document.writeln('<br/>');
      
      arr1[0] = 95;
      arr1[2] = 100;
      document.writeln('arr1[0]: ' + arr1[0] + '<br/>');            // arr1[0]: 95
      document.writeln('arr1[1]: ' + arr1[1] + '<br/>');            // arr1[1]: undefined
      document.writeln('arr1[2]: ' + arr1[2] + '<br/>');            // arr1[2]: 100
      document.writeln('arr1[3]: ' + arr1[3] + '<br/>');            // arr1[3]: undefined
      document.writeln('arr1.length: ' + arr1.length + '<br/>');    // arr1.length: 3 
      document.writeln('<br/>');
      
      // 1차원 배열
      var arr2 = [ '홍길동', '이순신', '강감찬' ];
      
      document.writeln('arr2[0]: ' + arr2[0] + '<br/>');            // arr2[0]: 홍길동
      document.writeln('arr2[1]: ' + arr2[1] + '<br/>');            // arr2[1]: 이순신
      document.writeln('arr2[2]: ' + arr2[2] + '<br/>');            // arr2[2]: 강감찬
      document.writeln('arr2[3]: ' + arr2[3] + '<br/>');            // arr2[3]: undefined
      document.writeln('arr2.length: ' + arr2.length + '<br/>');    // arr2.length: 3
      document.writeln('<br/>');
      
      // 배열을 원소로 하는 배열(2차원 배열)
      var arr2d = [ 
        ['을지문덕', '연개소문'], 
        ['광개토대왕', '세종대왕'], 
        ['김유신', '계백'] 
      ];
      
      document.writeln('arr2d[0]: ' + arr2d[0] + '<br/>');          // arr2d[0]: 을지문덕, 연개소문
      document.writeln('arr2d[1]: ' + arr2d[1] + '<br/>');          // arr2d[1]: 광개토대왕, 세종대왕
      document.writeln('arr2d[2]: ' + arr2d[2] + '<br/>');          // arr2d[2]: 김유신, 계백
      document.writeln('arr2d[3]: ' + arr2d[3] + '<br/>');          // arr2d[3]: undefined
      document.writeln('arr2d.length: ' + arr2d.length + '<br/>');  // arr2d.length: 3
      document.writeln('<br/>');
      
      document.writeln('arr2d[0][0]: ' + arr2d[0][0] + '<br/>');          // arr2d[0][0]: 을지문덕
      document.writeln('arr2d[0][1]: ' + arr2d[0][1] + '<br/>');          // arr2d[0][1]: 연개소문
      document.writeln('arr2d[0].length: ' + arr2d[0].length + '<br/>');  // arr2d[0].length: 2
      document.writeln('arr2d[1][0]: ' + arr2d[1][0] + '<br/>');          // arr2d[1][0]: 광개토대왕
      document.writeln('arr2d[1][1]: ' + arr2d[1][1] + '<br/>');          // arr2d[1][1]: 세종대왕
      document.writeln('arr2d[1].length: ' + arr2d[1].length + '<br/>');  // arr2d[1].length: 2
      document.writeln('arr2d[2][0]: ' + arr2d[2][0] + '<br/>');          // arr2d[2][0]: 김유신
      document.writeln('arr2d[2][1]: ' + arr2d[2][1] + '<br/>');          // arr2d[2][1]: 계백
      document.writeln('arr2d[2].length: ' + arr2d[2].length + '<br/>');  // arr2d[2].length: 2
      document.writeln('arr2d[3][0]: ' + arr2d[3][0] + '<br/>');          // arr2d[3]이 undefined이므로 에러 발생    
      document.writeln('<br/>');
    
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 객체 리터럴

- 객체 : 이름이 붙어 있는 데이터 값들의 모음

- 프로퍼티 :

-> 이름이 붙어 있는 값

-> 객체의 프로퍼티는 객체명 다음에 점(.)과 프로퍼티명을 붙이거나,
객체명 다음에 대괄호([])로 둘러싼 프로퍼티명의 문자열을 써서 접근

-> 프로퍼티에는 배열, 함수, 객체를 포함한 어떠한 값이라도 담을 수 있음

- 메소드 :

-> 함수가 프로퍼티에 저장될 경우 프로퍼티명이 메소드명이 됨

-> 객체가 소유한 메소드를 호출하기 위해서는 객체명 다음에 점(.)을 붙이고 함수를 호출하기 위해 메소드명과 ()를 사용함

-> 중괄호 ({})로 전체를 감싸고, 프로퍼티명과 프로퍼티값을 콜론(:)으로 구분하며, 각각의 프로퍼티들을 콤마(,)로 분리해 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-07</title>
  </head>
  <body>
    <script type="text/javascript">
      // 객체 리터럴
      var p1 = { x : 300, y : 200 };  // (x, y)좌표가 (300, 200)인 객체 생성
      var p2 = { x : 350, y : 280 };  // (x, y)좌표가 (350, 280)인 객체 생성
      
      var rect = { 
        topLeft : p1,             // 사각형의 좌측상단 좌표 정보 => 초기값으로 p1 객체 참조
        bottomRight : p2,         // 사각형의 우측하단 좌표 정보 => 초기값으로 p2 객체 참조
        size : function() {       // 사각형의 면적 계산 메소드
          return (this.bottomRight.x - this.topLeft.x) * (this.bottomRight.y - this.topLeft.y); 
        }
      };
      
      document.writeln('위치 변경 전 사각형의 넓이: ' + rect.size() + '<br/>');
      document.writeln('<br/>');
      
      p1 = { x : 200, y : 300 };
      p2 = { x : 300, y : 400 };
      rect.topLeft = p1;          // 사각형의 좌측상단 좌표 정보 => 좌표가 변경된 p1 객체 참조
      rect.bottomRight = p2;      // 사각형의 우측하단 좌표 정보 => 좌표가 변경된 p2 객체 참조
      
      document.writeln('위치 변경 후 사각형의 넓이: ' + rect.size() + '<br/>');
      document.writeln('<br/>');     
      
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 함수 리터럴

- 함수

어떤 입력 값을 이용해 미리 정의된 로직을 처리하여 결과를 반환하는 구조

- 자바스크립트에서 함수

-> 객체 프로퍼티에도 할당될 수 있는 실행가능한 코드 값

-> 객체 프로퍼티에 저장된 함수를 객체의 메소드라고 부름

-> 함수도 데이터 타입의 하나로 다룰 수 있기 때문에 변수, 배열, 객체 프로퍼티에 저장할 수 있으며,

다른 함수의 전달인자로 넘겨줄 수도 있음

-> function 키워드에 이어 소괄호(()) 안에 함수 호출 시 전달하는 인수들(arguments)에 의해 초기화되는 매개변수(parameters) 목록,

마지막으로 함수의 몸체 중괄호({}) 안에 함수가 수행해야 할 실행코드와 결과 값을 반환하는 return문으로 구성됨

-> 만일 반환 값이 없는 return문을 기술하거나, return문 자체가 없으면 undefined 값을 반환함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-08</title>
  </head>
  <body>
    <script type="text/javascript">
      // 함수 리터럴
      var add = function(op1, op2) {
        return op1 + op2;
      };
      
      document.writeln('add(5, 3): ' + add(5, 3) + '<br/>');        // add(5, 3): 8
      document.writeln('<br/>');
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# 불리언 리터럴

- 불리언 리터럴 : 참/거짓의 진리 값 두 가지를 표현

불리언 값은 산술연산에서 ture는 숫자 1로, false는 숫자 0으로 변환되며, 문자열 연산에서 true는 문자열 " true"로, false는 문자열 "false"로 변환되고, 논리연산에서 0, undefined, null, NaN, "" 값은 false로 변환되어 평가됨

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-09</title>
  </head>
  <body>
    <script type="text/javascript">
      // 불리언 리터럴
      var score = 88;
      var message = '불합격';
      
      // score 값이 70이상일 경우 비교의 결과로 true를 반환하고,
      // message 변수에 '합격' 문자열 값을 저장합니다.
      if (score >= 70) {  
        message = '합격';
      }
      
      document.writeln(score + '점은 ' + message + '입니다.<br/>');
      document.writeln('<br/>');
      
      // 0, undefined, null, NaN, "" 은 논리연산에서 false로 변환되어 평가됩니다.
      var a = 0;
      var b = undefined;
      var c = null;
      var d = NaN;
      var e = "";
      
      document.writeln('!0 => ' + !a + '<br/>'); // true
      document.writeln('!undefined => ' + !b + '<br/>'); // true
      document.writeln('!null => ' + !c + '<br/>'); // true
      document.writeln('!NaN => ' + !d + '<br/>'); // true
      document.writeln('!"" => ' + !e + '<br/>'); // true
      document.writeln('<br/>');
    </script>
  </body>
</html>
Colored by Color Scripter
cs

# undefined와 null

1
2
3
4
var a;            // 변수 선언 시 명시적인 초기화 할당 값이 없을 때 undefined 값이 할당
var obj = {};    
obj.;prop;      // obj객체 내에 prop 프로퍼티는 존재하지 않으므로 undefined를 반환
obj = null;     // null값을 이용해 객체 참조를 제거
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>02-10</title>
  </head>
  <body>
    <script type="text/javascript">
      // undefined와 null
      var a;        // 변수 초기값 미지정 시 undefined 값이 할당됩니다.
      var obj = {}; // 프로퍼티가 없는 빈 객체를 생성합니다.
            
      document.writeln('a: ' + a + '<br/>');                // a: undefined
      document.writeln('obj: ' + obj + '<br/>');            // obj: [object Object]
      document.writeln('obj.prop: ' + obj.prop + '<br/>');  // obj.prop: undefined
 
      obj = null;   // 객체 참조를 제거합니다.
      document.writeln('obj: ' + obj + '<br/>');            // obj: null
      document.writeln('<br/>');
      
      if (!a)   // !undefined (undefined는 논리연산에서 false로 평가를 받고 거기에 not을 하니까 값이 ture로 변환되어 if문 실행)
        document.writeln('변수 a는 초기화가 필요합니다.<br/>');
        
      if (!obj) // !null (null은 논리연산에서 false로 평가를 받고 거기에 not을 하니까 값이 ture로 변환되어 if문 실행)
        document.writeln('변수 obj는 참조하는 객체가 없습니다.<br/>');   
    </script>
  </body>
</html>
Colored by Color Scripter
cs

- 출처 : SK Planet 상생혁신센터 javascript 교육과정

저작자표시

작성자

Posted by South Korea Shuan

South Korea Shuan

본문

변수, 데이터 타입, 리터럴(JavaScript)

작성자

댓글

티스토리툴바

본문

작성자

공유

관련 글

댓글

티스토리툴바