데이터 타입이란 무엇인가?
이 세상엔 다양한 데이터들이 존재합니다. 사람, 자동차, 집, 음식, 옷 등등 이러한 모든 것들이 데이터라고 할 수 있죠.
사람은 자동차를 봤을 때 자동차라고 인식하고 집을 봤을 때 집이라고 인식합니다. 사람의 머릿속에서 이 데이터들이 무엇인지 인식하는 거죠.
그렇다면 컴퓨터도 사람처럼 데이터를 인식할 수 있을까요?
다들 아시다시피 컴퓨터에게 집을 보여줬을 때 집이라고 인식할 수 없습니다. 왜냐하면 컴퓨터는 사람처럼 인공지능을 가지지 못하였기 때문에 어떤 것을 보았을 때 그것을 어떤 것인지 인식할 수 있는 방법이 없기 때문입니다.
컴퓨터는 이 세상을 1과 0으로 인식하기 때문이죠.
여기서 1과 0으로 인식하는 이유는 무엇일까요?
초기 컴퓨터는 전기가 들어오면 1, 전기가 들어오지 않으면 0으로 인식해 참과 거짓을 구분하는 것부터 시작했습니다. 그것이 오늘날에도 이어져 온 것이죠.
따라서, 컴퓨터에게 집을 보여줬을 때 이것이 집이라는 것을 어떻게든 알려줘야 합니다. 그래야 집이라고 인식하겠죠?
더 자세히 들어가보죠.
1과 1
이것의 차이점은 무엇일까요?
사람이 이것을 봤을 때는 둘 다 1이라는 숫자 입니다.
하지만, 컴퓨터는 숫라고 인식할 수도 있고 문자라고 인식할 수도 있습니다.
즉, 컴퓨터가 바라보는 관점에서 1과 1은
1과 "1"인 것입니다.
이렇게 컴퓨터가 데이터를 인식할 수 있는 종류를 정의한 것을 데이터 타입이라고 합니다.
자세히 설명하면 첫 번째 1은 숫자 1이고 두 번째 1은 "가나다라마바사" 와 같은 문자 1로 인식하는 것이죠.
사람은 이 모두를 알아서 상황에 맞게 인식할 수 있지만, 컴퓨터는 그렇게 하질 못합니다. 따라서, 숫자인지 문자인지 정확하게 구별해줘야 하죠.
숫자와 문자를 구별해줌으로써 컴퓨터는 숫자 1에 대해서 다른 숫자와 비교하는 대소 구분 및 연산(더하기, 빼기, 나누기, 곱하기)를 할 수 있게 됩니다.
만약에 문자 1로 데이터를 준다면 대소 구분 및 연산을 할 수 없게 되겠죠?
자바스크립트에서 데이터 타입(종류)은 무엇이 있을까?
그렇다면 자바스크립트에서 다루는 데이터 타입에 대해서 알아봅시다.
1) 숫자 타입(Numerical Data)
숫자 타입은 우리가 생각하는 1 2 3 4 5 등 실제 숫자들을 인식하는 데이터 입니다.
2) 글자 타입(Text Data)
"안녕하세요", "반갑습니다.", "ㄱ" 등 글자 혹은 문자가 있는 데이터를 글자 타입 데이터라고 합니다.
만약에 "1 2 3 4 5"라고 표현했다면 이는 숫자가 아닌 글자로 표현한 데이터 입니다. 비록 숫자를 사용했지만요.
3) boolean 타입(참과 거짓)
앞서 컴퓨터는 1과 0으로 데이터를 인식한다고 했었습니다. 그래서 1이 들어오면 참, 0이 들어오면 거짓이 되는 타입을 정해준 것이 boolean 타입입니다.
자바스크립트에서는 true와 false로 값을 반환하거나 표현합니다.
4) Null 과 Undefined
Null은 데이터 타입 중에 아무것도 존재하지 않을 때 null이라고 표현합니다. 숫자, 문자 등 아무것도 없는 상태를 말이죠.
Undefined도 null과 비슷한 개념입니다. 아무것도 없죠.
근데 왜 이 2가지를 따로 분류 해놓았나요??
이것들을 구별하는 이유는 나중에 설명 드리겠습니다. 여기서 설명하기엔 너무나도 긴 설명이 필요하기 때문입니다.
이것들 외에도 객체(Obect)와 같은 타입도 있으나 이것도 추후에 자세하게 다루어 보겠습니다.
그러면 데이터 타입을 실제 자바스크립트 화면을 통해 알아보도록 합시다.
먼저 웹스톰을 실행합니다.
처음 사용하는 것이라 Create New Project를 눌러 새로운 프로젝트를 생성해 줍니다.
프로젝트 폴더 생성해주기
C 드라이브에 프로젝트를 위한 별도의 폴더를 만들도록 하겠습니다.
물론 만들지 않아도 무방합니다.
저는 소스코드를 관리하기 위해 C드라이브에 다음과 같이 폴더를 만들었습니다.
폴더명 : JavaScript Project
Empty Project를 선택 그리고 Location 변경
우리는 처음 시작이므로 빈 프로젝트로 시작하겠습니다.
프로젝트가 저장될 위치(Location)을 C드라이브에 자바스크립트 프로젝트 폴더로 변경해줍니다.
이렇게 바꿔주시면 됩니다.
웹스톰의 전체 화면
전반적으로 아주 깔끔한 WebStorm의 화면이 이제 나타났습니다.
새로운 파일을 추가 해서 자바스크립트의 데이터 타입에 대해서 알아보도록 하죠.
새 Html 파일 추가하기
왼쪽 프로젝트 폴더에서 마우스 오른쪽 버튼을 클릭 하면 위와 같이 펼침메뉴가 나오게 됩니다.
위와 같이 Html 파일을 추가 해주세요.
이름은 index.html
여기서 .html은 안 붙이셔도 자동으로 붙습니다.
Html 기본 파일 생성
그러면 위와 같이 Html 파일이 생성될 것입니다.
근데 에디터에 있는 글자 크기나 글자체가 마음에 안드는 군요. 조금 바꾸도록 하겠습니다.
바꾸는 방법은 추후 포스팅에서 알려드릴께요.
글자체 : Consolas, 글자크기 : 14
이제 소스코드 보기가 괜찮아졌네요. 계속 진행해봅시다.
자바스크립트 영역 선언
Html에서 자바스크립트를 선언하는 방법은 다양합니다.
저는 여기서 <body> </body> 태그 안에 선언해서 사용해보겠습니다.
WebStorm에는 JSHint 라는 기능이 있습니다.
아주 아주 강력한 기능이죠.
요즘 IDE에 이런거 없으면 프로그래밍 하기에 너무 불편하다고 할 만큼
개발자의 편의성을 제공하는 기능입니다.
저 위화면에서 Sc라는 글자만 입력해도 위 사진 처럼 선택 항목이 나오게 됩니다.
이 때는 간단하게 Tab 키를 눌러 주시면 자동으로 ...
짠! 이렇게 자동으로 스크립트 영역을 표현해줍니다.
정말 편리하죠? ㅎㅎㅎㅎ
이건 약과니 앞으로 더 좋은 기능들을 보여드리겠습니다.
변수 선언과 그 변수의 데이터 타입을 알아보자
변수를 선언할 때는
var 변수명 = 변수값;
이런 식으로 표현합니다.
그래서 이 화면에서는 one이라는 변수를 선언하고 그 안에 숫자 1을 넣도록 하겠습니다.
그리고 typeof는 변수의 데이터 타입을 알아보도록 도와주는 것이라고 생각하시면 됩니다.
그리고 alert는 그 결과값을 웹 브라우저에서 알림 박스로 알려주는 함수라고 생각하시면 되죠.
그럼 숫자 1은 무슨 타입인지 알아볼까요?
웹 브라우저로 실행해보자
Html에 있는 JavaScript를 테스트 해보기 위해 WebStorm 오른쪽에 있는 웹 브라우저 선택 버튼 중 하나를 클릭하세요.
웹 개발자의 경우 Chrome, Safari, IE, Opera, Firefox 등 메이저 웹 브라우저를 다 설치하는 것이 좋습니다.
왜냐하면 웹은 모든 브라우저에서 잘 작동해야하기 때문에 모든 브라우저 테스트를 위해 모두 설치하는 것이 좋겠죠? ㅎㅎ
숫자 1의 데이터 타입은 number
즉, 숫자라는 이야기 입니다.
one이라는 변수에 담겨진 숫자 1은 number 숫자 데이터죠.
다른 데이터 타입도 한번 볼까요?
위와 같이 hello 변수에 "안녕하세요" 라는 문자열을 넣어봅시다
어떻게 나올까요?
이번에는 단축키를 이용해서 브라우저를 실행합시다
Alt + F2를 누르시면 위와 같이 스냅 메뉴가 나오게 됩니다.
원하는 브라우저를 선택해 테스트 해봅시다.
안녕하세요 라는 문자열은 string 타입이네요
string은 사전적 의미로 문자열이라는 뜻입니다.
즉, 문자열 데이터 타입이라는 거죠.
논외로 string은 밧줄이라는 뜻도 있습니다.
그렇다면 null을 대입해주면 어떻게 나올까요?
그러면 null 타입이라고 나오겠죠?
헛! Object라니 이게 무슨소리요. 브라우저 양반
나는 null을 넣었는데 너는 나에게 object를 주었어.
그러면 이번엔 아무것도 넣지 않은 것(unknown)을 알아보죠
과연 null이라고 나올가요?
undefined 라니!!
아무것도 넣지 않는다면 undefined라고 나오는 군요.
아주 참으로 오묘한 자바스크립트 원리입니다.
더이상 너무 깊게 들어가지 않겠습니다.
어짜피 나중에 논하고 싶지 않아도 논해야하 하는 문제거든요. ㅎㅎㅎㅎ
오늘은 무엇을 넣으면 어떤 타입을 가지게 되는 지 정도만 눈으로 익히시는 것만으로 충분합니다.
아마 이정도도 이해하시기 어려운 분들이 있으실 겁니다.
그러나 걱정하지마세요. 원래 모르는 상태에서 쭉 가는 거죠. ㅎㅎㅎㅎ
하다가 보면 어느 순간 이해가 되는 때가 올 것입니다.
중요한 건 매일 매일 공부하는 습관이 중요하죠.
저도 되도록 매일매일 포스트를 작성하도록 하겠습니다.
이 글을 보시는 분들도 자주 들어오셔 그냥 제가 적어놓은 글을 쭉 읽으시는 것만으로도
도움이 될 수 있도록 하겠습니다.
긴글 읽어주셔서 감사합니다.
내일은 더 좋은 내용을 찾아뵐께요. ㅎㅎㅎㅎㅎ
'IT Story > about JS' 카테고리의 다른 글
| [JavaScript] 연산을 해보자 - 1편 (2) | 2015.11.24 |
|---|---|
| [JavaScript] 문자열을 다루어 보자 (2) | 2015.11.13 |
| [JavaScript] 자바스크립트 소개 (0) | 2015.11.12 |
| [JavaScript] WebStorm 설치하기 (4) | 2015.11.12 |
| [JavaScript] WebStorm과 함께 공부하기 (4) | 2015.11.11 |