Bsidesoft co.

[초보자들] S69 스터디 후기 두번째, “데이터 타입”

2017년 3월 30일 Education 초보자들

S69 두번째 스터디가 진행되었습니다. 첫번째 스터디(내용은 >>여기)에 이어 두번째 시간에는 Data Types 즉, 자바스크립트의 데이터 타입을 살펴보았습니다.

어떤 프로그래밍 언어를 배우든 보통 가장 먼저 나오는 것 중에 하나가 바로 ‘데이터 타입’입니다. 저도 처음에 자바스크립트 맨 처음에 나와있는 자료형을 배울 땐 “아 그런가보다~ 이 언어에는 이런 이런 데이터 타입이 있구나~”정도로만 봤습니다. 그리고 자료형을 나눠둔 이유도 사람들이 편하라고 인간중심적인 카테고리로 묶어놓은 것 정도라고만 생각했습니다.

하지만 이번 스터디를 통해 데이터 타입이 진짜 의미하는 것이 무엇인지 새로운 관점으로 볼 수 있었습니다.

그럼 그 새로운 관점을 함께 알아보실까요?

데이터를 기억해두자! 메모리에~

컴퓨터는 간단히 말하자면 데이터를 다루는 기계입니다. 즉, 컴퓨터에 어떤 데이터를 입력하면 컴퓨터는 특정한 처리(계산)를 한 후 그 결과를 알려주는 기계인 것입니다.

그렇다면 컴퓨터가 데이터를 입력받았을 때 그 입력받은 데이터는 어디에다가 저장해둘까요?

바로 컴퓨터에는 있는 “메모리”라는 장치를 이용해 데이터를 기억해둘 수 있습니다.

그럼 메모리가 무엇이냐? 많은 책들에서는 메모리를 “어떤 값을 넣어둘 수 있는 주소가 붙여진 박스”로 비유하곤 합니다.

하지만 실제로 메모리는 아래처럼 생겼으니….
ㅎㄷㄷ 좀 다르죠?

 

그런데, 아시다시피 컴퓨터는 0, 1 밖에 인식하지 못합니다. (그래서 사실 위 그림에서처럼 저렇게 생긴 애들은 메모리에 못들어가는 것이죠)

그렇다면 도대체 우리가 쓰는 3, abcd , 하이?등과 같은 다양한 형식의 데이터는 어떻게 인식할까요?

어떻게 인식할 것인가? 0과 1

우선 3, abcd, 하이를 알기 전에, 컴퓨터가 쓴다는 0과 1을 생각해 봅시다.

컴퓨터는 그 0과 1은 어떻게 인식할 수 있을까요?

컴퓨터의 메모리에는 작은 전구같은게 나열되어 있어 있습니다. 그리고 컴퓨터는 이 전구에 전기가 들어왔나, 안들어왔나로 상태를 인식할 수 있습니다. on / off로 쓰면 힘드니까 on은 1로, off는 0으로 나타낸다고 약속을 해두어서 지금 우리가 아는 “컴퓨터는 0과 1만 인식할 수 있다.”라는게 된거죠. (그런 의미에서 컴퓨터는 정확하게 0 또는 1을 인식한다기보단 on/off를 인식한다는게 맞겠죠..?)

전구가 1개면 on/off 2개의 상태밖에 표현하지 못하지만, 전구가 2개면 4가지의 상태, 3개면 8가지 상태… n개면 2의 n승만큼 다양한 상태를 구별할 수 있습니다.

이 전구 1개처럼 데이터를 표현할 수 있는 최소의 단위를 ‘비트(bit)’라고 합니다. 1비트는 전구 1개니까 2가지의 상태를, 2비트는 전구 2개니까 4가지의 상태, n비트는 2의 n승만큼 상태 표현을 할 수 있습니다.

1비트를 8개 모아서 1바이트라고 하는데요, 1바이트는 2의 8승 즉 256가지의 상태를 표현할 수 있습니다.

그리고 1바이트는 1024개를 모아 1KB,
1KB가 1024를 모아 1MB,
1MB가 1024를 모아 1GB,
1GB가 1024를 모아 1TB가 됩니다.
(여기서 1000배가 아니라 1024배로 증가하는 이유는 위에서 보았다시피 2의 n승씩 상태 표현이 증가되어서 그런것!)

상태가 많아지면 각각 조합마다 특별한 뜻을 매칭할 수 있는 경우의 수가 늘어납니다. 컴퓨터는 0과 1밖에 인식하지 못하지만, 만약 “100001이라는 조합은 A라고 해놓자!”라고 약속을 해두면 숫자도 문자로 인식할 수 있는 방법이 생기게 되는 것입니다.

이렇게 컴퓨터는 데이터를 0과 1로 변경한 후, 메모리 상의 수많은 스위치의 on/off의 조합으로 그 데이터의 상태(값)을 기억할 수 있습니다.

어디에 저장할 것인가? 주소와 변수

잠깐 짐 보관하는 과정을 생각해봅시다.

짐 보관칸에 짐을 맡기려면 우선 보관할 물건을 담을 수 있는 적절한 크기의 사물함을 찾습니다. 그리고 그 사물함을 선택해서 돈을 내고 물건을 담죠. 그리고 가장 중요한 것! 사물함의 번호가 적혀있는 키를 받거나 또는 번호가 적힌 영수증을 가지고 있어야 합니다. 왜냐하면 어디에다가 보관을 했는지 모르면 안되니까요.

메모리에 데이터를 저장하는 것도 비슷합니다. 데이터가 다 들어갈 수 있는 메모리 영역을 선별한 후, 메모리에 값을 담고, 몇번째 메모리부터 어떤 값을 얼마만큼 저장했는지 기억을 해둬야 합니다.

C언어는 메모리와 관련된 여러가지 조작을 직접적으로 할 수 있다고 합니다. 직접 메모리 주소를 지정해서 값을 할당하거나 메모리 주소를 찾아 불러오는 곳을 다르게 하는 등… (하지만 이 부분이 많이 어렵다고 하네요. 공포의포인터…ㅂㄷㅂㄷ)

(다행히도) 우리가 배우는 자바스크립트를 비롯해 대부분 많은 현대 프로그래밍 언어는 이런 과정을 알아서 처리해줍니다. 따라서 우린 어떤 값을 쓰겠다!라고 자바스크립트로 말하면 알아서 처리가 된다고 하네요.

그렇기 때문에 우리는 어떤 변수를 선언하고 값을 지정해두면 그냥 그 값이 들어가나보다~ 했지만, 그 이면에는 메모리상에 공간을 찾고, 데이터를 저장해 둘 메모리상의 공간을 찾고, 데이터를 할당한 후, 그 데이터에 관한 정보(주소, 타입 등..)을 정리해두는 과정들이 있는 것이었습니다.

다음과 같은 표(V-Table)도 존재하구요.

한편, 이런 메모리 주소를 사람이 기억하기 힘들어서, 주소에 일종의 별명을 붙여놓았는데 이것을 바로 “변수(Variable)”라고 합니다. 많은 책에서 변수를 “값을 담을 수 있는 그릇과 같은 것”이라고 했는데 바로 그 말이 이 말이었습니다!

즉.. 직접 사물함 번호(=메모리 주소)로 짐을 찾을 수도 있지만,

사물함에 붙여둔 별명(=변수)로도 데이터를 쉽게 찾을 수 있다는 말씀!

메모리 주소를 기억하는 것보다, 변수를 써서 훨씬 더 쉽고 보기좋게 프로그래밍을 할 수 있게 되었습니다.

얼마만큼 저장할 것인가? 데이터 타입

그렇다면 어디에 저장할 지만큼 중요한 것이 얼만큼 저장할 지 입니다. 짐을 맡길 때 짐을 담을 수 있는 공간을 가진 사물함을 탐색했던 것 처럼 메모리에 데이터를 담을 때에도 값을 모두 담을 수 있을 만큼의 충분한 메모리 공간을 확보해야 합니다.

예를 들어 2라는 숫자를 메모리에 저장한다고 생각해봅시다. 우선 컴퓨터는 0 또는 1의 상태만 표현할 수 있으니 먼저 2라는 숫자를 2진수로 바꿔야 합니다. 2를 2진수로 바꾸면 10이 됩니다.

자, 그럼 이제 10이라는 값을 메모리에 넣어야 하는데요, 메모리 1개 박스는 1비트 즉, 2개의 상태만 저장이 가능하므로 2를 저장하려면 적어도 2개의 메모리 박스가 필요합니다. 두개의 박스에서 첫번째 박스에는 1, 두번째 박스에서는 0이 들어가면 되겠네요!

하지만, 조금 사치를 부려서 박스 8개를 다 써서 2를 표현할 수도 있습니다. 값이 없는 앞자리 부분에 0을 넣으면 되니까요. 하지만 이렇게 하면 비효율적이겠죠.

그래서 프로그래밍 언어에서는 저장하고자 하는 데이터를 일정한 기준으로 나눴습니다. 그리고 각 타입마다 쓰고자 하는 메모리의 크기를 정해서 메모리 공간을 효율적으로 쓸 수 있도록 해놓았죠. 그리고 이게 바로 데이터 타입이라는 것!

데이터 타입(과 연산)

메모리와 데이터 타입의 관계를 배우고 난 후에는 책을 보며 자바스크립트의 데이터 타입을 살펴보았습니다. 책에서는 Boolean, Number, String 데이터 타입만 다뤘지만, ECMA 공식 문서에 따르면 자바스크립트에는 7가지 데이터 타입이 있습니다.

  • Boolean
  • Number
  • String
  • Null
  • Undefined
  • Symbol (ECMAScript 6에 추가됨)
  • Object

데이터의 타입은 typeof라는 연산자로 확인해볼 수 있습니다. 조금 특이한 점은 null은 typeof 결과로 object를, 함수는 function를 결과로 반환한다는 것입니다.

typeof 1; //"number"
typeof 'abc'; //"string"
typeof undefined; //"undefined"
typeof true; //"boolean"
typeof []; //"object"
typeof Symbol(); //"symbol"
//특이한 애들
typeof null; //"object"
typeof alert; //"function"

후기에 다 언급하지는 못했지만, 스터디에서는 각각의 타입마다 어떻게 값을 만드는지, 특징은 어떤 것이 있는지, 어떤 연산들을 할 수 있는지 등의 내용을 배웠습니다. 작은 따옴표와 큰 따옴표의 차이 등과 같은 내용도 함께 다루고 있으니 아래 동영상 강의로 꼭 확인해보세요~!

결론…

데이터 타입이 무엇인지, 자바스크립트에는 어떤 타입이 있는지 큰 그림은 잘 았습니다. 하지만 이제 더 세부적인 것들이 궁금해지기 시작했으니ㅡ 예를 들면…

-불린은 참/거짓 0, 1의 상태니까 불린 타입의 데이터는 메모리에 1비트만 쓰나?
-자바스크립트에서는 숫자를 64비트 부동소수점 형식으로 나타낸다고 하는데 그럼 값 1을 써도 8바이트를 다 쓰는 것인가? (나머지 아까워서 어떡함!?)
-자바스크립트에선 문자들을 표현하기 위해 하나의 16-bit 코드 단위를 쓴다든데… 맹대표님이 말씀하신 ‘문자열은 2G 크기까지 넣을 수 있다’와의 관계는 어떻게 되는거지?
-자바스크립트는 형변환이 자유로운데 그럼 문자열이었던 변수에 불린 타입의 값을 넣으면 기존에 쓰던 메모리 크기가 줄어드는건가? 등등등…

궁금해지는게 퐁퐁퐁 더 많아졌네요! 오늘의 배운 기초 내용을 다시한번 탄탄하게 공부하고, 그 다음 자바스크립트에서 데이터를 다루는 방법에 대해 심화된 내용을 체계성 있게 공부해야겠죠..?

‘데이터 타입’

보기엔 참 간단한 5자의 단어지만, 이것이 의미하는 바는 생각보다 깊었습니다. 그리고 알면 알수록 더 궁금해지는 것이 많아지는 두번째 스터디었습니다.

(결국 공부공부공부! 이것이 개발자의 길!)

 

동영상 강의 보기

*이번주에는 교재가 없어요 >_<

summer| bsidesoft 신입사원
디자인을 공부했던 섬머는 개발까지 해버리겠다는 욕심으로 개발자의 세계에 입문하게 되었습니다. 개발왕이 되어 멋진 제품을 만들어내는 꿈을 꾸고 있습니다. 코드, 디자인을 포함한 세상의 모든 아름다운 것들과 미드, 그리고 달리기를 좋아합니다.

Share