Openning

Openning










©2011 Bsidesoft. 
비사이드소프트


E : hika00@gmail.com
T : +82 2 719 1464
F : +82 2 712 1464

본 사이트의 컨텐츠에 대한 무단 복제 및 도용을 금하며 이를 어길 시 법적조치를 받을 수 있습니다.
.

.


.

.

저기 하네카와, 질문이 있어. 



JS군이 방과 후까지 남아서 질문이라니 왠지 감동!
내가 알 수 있는 거라면 얼마든지 질문해 줘!











아, 원래 해시 브라운 포테이토.
익힌 감자를 으깨서 베이컨 기름에 구워서 먹는다는 발상은 정말. .
튀김 좋아하는 영국인이 아니면  어려운 발상같아. 
 
요즘 자주 얘기해줬던 해시 브라운은 뭐야? 


.

.



.

.


  하지만 아마 JS군이 물어보는 건 해시맵일거라 생각하는데?   




 해시맵이었군,
어쩐지 이상하다고 생각햇어.
그런데 하네카와의 설명 때문에 몹시 해시 브라운이 먹고 싶어! 

   해시는 작은 것도 160kcal니까
너무 많이 먹으면 살찔지도 몰라.
 




 어이, 해시로 줄어버린거냐. 
어느쪽 해시인지 알 수가 없잖아!

    그럼
해시브와
해시맵이란걸로
어때?




 좋아, 아니 좋지않아!
하지만 내가 궁금한건 
일단 해시맵이니까.. 




해시맵이네. 해시맵은 일종의 암기카드라고 생각하면 알기 쉬워. 
영어공부할 때 사용하는 링에 끼워 사용하는 암기카드 말야.

.

.



.

.


어, 영어공부할 때
사용하던거 말이지.
알고 있지 무, 물론!




 보통 암기카드 
앞 면에는 영어 단어를 
적고 뒷 면에는 뜻을 적어두잖아. 

무, 물론이지!




 으응. 왠지 JS군에게 점점 말하기 어려워지는 기분이 드네.

아, 전혀 신경쓰지마,
난 전혀 괜찮다고!




응, 머 JS군이 그렇다면,
그런거겠지. .



해시맵은 그 암기카드의 앞 면에는 이름을 적고 뒤에는 그 이름에 해당되는 정보를 적어둔거라 할 수 있어.
먼저 앞 면을 보면서 자기가 찾고 싶은 이름을 찾고 나서 
그 뒷 면을 보면 그 이름에 맞춰 기록해둔 정보를 볼 수 있는 거지.



하네카와, 약간 혼란스러운데,
영어 단어가 아니라면,
앞 면엔 무슨 이름을 적는거야?




그거야 아무거나 상관없지만, 
구지 말하라고 하면. .
음, 필요한 것 이라고 해야할까?
예를들어 JS군이라면
 '중요한 동영상' 
같은 게 아닐까?



오, 그것 참!! 아..아니 흠. 그렇군. 
그럼 뒷 면에는 그 이름에 해당되는 정보를 적으면 된다는 것이군. 
확실히 이해가 되었다!




. . . 방금 그 카드 뒷 면에 JS군이 뭘 적으려 했는지 궁금해지는걸?





하 핫 신경쓰지마, 신경쓰지마. 아무 생각도 안했어. 
그저 하네카와가 말한 이름과 정보를 적는 암기 카드를 이해하게 되었을 뿐이야!





으응. 근데 조건이 한 가지 있어.
암기 카드에 이름을 적을 때 똑같은 이름은 안된다는 거야.
정확하게는 같은 이름이 있으면 먼저 적은 카드는 버린다는 규칙.
그래서 이름을 정할 때 신중하게 정해야 중복되지 않게 할 수 있어.




호, 함부로 비디.. 아니 이름을 쓰면 안되는 거였군..





. . . .




근데 하네카와, 
자바스크립트에서 이 암기 카드 같은 해시맵이 대체 어디에 쓰인다는거야? 




자바스크립트에서라면,
아마 모든 곳이라고 해야할 거야. 
자바스크립트에게 뭔가 해달라고 부탁하려면 반드시 
코드
라는 걸 작성해야 해.



코드? 코드라면 암호같은 건가. 아, 바이블 코드라는 영화도 있었잖아!




응, 확실히 코드에는 암호라는 뜻이 있어. 
하지만 자바스크립트에게 넘겨줄 코드라는건,
그런 암호가 아니라 그저 평범한 명.령.문 들이야.



하네카와 면목 없어서 대단히 미안하지만,
아니 면목이 없다는 나 자신에게도 미안하지만,
평범한 명령문이라는 그 말이 나에겐 암호처럼 들리는 걸.




확실히, 아직 자바스크립트에 익숙해지지 않은 JS군에게는 모든게 암호처럼 보일지도 몰라. 
하지만 여기서 중요한 건 명령문이 아니라 코드에 대한 거야. 
코드는 작성해도 그 자체로는 단순한 글씨들의 나열일뿐 아무것도 할 수 없어.




아무것도 할 수 없다면 어째서 고생스럽게 그 암호..아니 코드를 작성하는거야?




그건 말야, 
코드를 자바스크립트에게 주면,
한자 한자 분석하고 난 후에
사용할 수 있게 되기 때문이야.

에?
무엇을 사용할 수 있게 되는데?




그거야 작성한 코드에 있는 내용을 사용할 수 있게 되는 거야. 
반대로 말하면 사용하고 싶은 내용을 코드로 작성하면 되는 거랄까.



뭔가 머리가 어질어질 돌고 있는 느낌이다. 
참, 그래서 해시맵은 대체 언제 등장하는거지?



JS군은 역시 어지러운 일이 생기면 급해지는 경향이 있는거 같아. 
급한 성격은 교감 신경이 잘 활성화되어 호르몬의 변화가 크게 일어나니 조심해야 해.
 탈모의 원인이 되기도 하니 대머리가 되버려도 몰라.



난 AB형이니까 굉장히 느긋한 사람이라고. 
오히려 내가 급한일을 하고 있으면 남들은 느긋하게 볼 지경이야.


B형이나 O형이나 성격이 급하다고 알려져있지만,
혈액형은 사람별로 차이가 크니까 JS군은 급한 AB형이 아닐까?



혈액형은 어찌되도 좋아! 
언제 해시맵은 등장하는거야?




사실은 이미 등장해 있어. 
자바스크립트에게 코드를 주면,
그걸 분석 결과는 전부 해시맵으로 되어있거든.



으응? 너무 굉장해서 오히려 이해가 안된다.




코드라는건 사실 암호라기보다 오히려 그 반대에 가까워. 
사람이 읽고 쓰고 생각하기 쉽도록 사람의 말과 비슷하게 되어있거든. 
그래서 코드로 하고 싶은 것을 작성하면 자바스크립트에게는 너무 어렵게 되. 
어쨌든 사람은 매우 복잡하고 어려운 언어를 사용하거든. 
그에 비해 자바스크립트는 단순한 기계니까 좀 더 단순하게 코드를 정리하지 않으면 처리할 수 없어.




해시맵이 단순하다는 건가?





단순한 것만은 아니야. 오히려 복잡하다고 해야할 거야.
물론 더 단순한 형태로 정리할 수도 있지만,
그렇게 되면 이번엔 사람이 자유롭게 생각을 표현하는데 제약을 받게 되.
그 중간 지점이 해시맵 쯤이란 느낌일까?
사람이 자유롭게 작성한 코드를 정성스럽게 해시맵으로 정리하고 나면,
그제서야 자바스크립트가 작동할 수 있어.


.
.


해시맵이 생각보다 굉장하구나.

.
.


해시맵(Hashmap)

해시맵은 먼저 어떤 값을 검색하거나 식별하기 위한 키(key)를 정한 뒤 그 키에 맞는 값(Value)를 넣는 형태로 되어있습니다.
예를 들어 age라는 키에 16이란 값을 넣는 식입니다. 보통 키는 그 값이 무엇을 의미하는지 힌트가 되기도 합니다.

해시맵의 장점은 자유로움입니다. 처음엔 완전히 비어있는 상태에서 유저가 원하는 키와 값을 자유롭게 채워가면 어느 새 각 목적에 맞는 특수한 형태로 변신하게 됩니다. 
예를 들어 다음과 같은 키와 값을 넣는다면 한 명의 학생을 나타낼 수 있습니다.

grade = 2
class = 1
number = 47
name = 홍길동
gender = male

반대로 아래의 예처럼 채운다면 전화번호가 됩니다.

name = 홍길동
phone = 010 - 0000 - 0000



다른 해시맵을 가리키는 값(reference)

해시맵의 대단한 점은 단순히 '자유롭다' 뿐이 아닙니다. 
해시맵의 값에 다른 해시맵을 가리키게 할 수 있다는 점도 매우 강력한 특징입니다.
위에서 등장했던 번화번호를 여러 개 만들어 보겠습니다.

전화번호1
name = 홍길동
phone = 010 - 0000 - 0000

전화번호2
name = 이순신
phone = 010 - 0000 - 0000

전화번호3
name = 장영실
phone = 010 - 0000 - 0000

이제 해시맵 3개가 생겨났습니다. 이 세 개의 해시맵을 묶어서 주소록을 만든다면 아래와 같습니다.

주소록
number1 = 전화번호1
number2 = 전화번호2
number3 = 전화번호3

값의 자리에 해시맵이 있습니다. 이렇게 되면 number1은 전화번호1을 가리키게 됩니다. 
해시맵은 이러한 원리를 통해 복잡한 그물처럼 서로가 서로를 가리키며 연결되게 됩니다. 
연결된 해시맵이 또 다른 해시맵을 가리키는 식으로 끝없이 연결될 수 있기 때문에 단순히 한 번에 하나의 해시맵을 차근차근 추적하는 것만으로도 복잡한 처리 가능해 집니다.



해시맵의 약점

해시맵은 이미 키를 알고 있는 경우에는 매우 빠르게 값을 찾을 수 있습니다(그래서 키-열쇠 라고 부릅니다)
전화번호1에서 이미 name이라는 키를 알고 있다면 신속히 홍길동이란 값을 얻을 수 있습니다.
하지만 키 자체를 모르는 경우는 먼저 키를 찾아야 합니다. 해시맵에서 키를 찾는 과정은 키를 통해 값을 찾는 것보다 매우 오래 걸립니다. 
따라서 해시맵은 키를 이미 알고 있을 때는 매우 고속이지만 해시맵 안에서 키를 찾는 과정은 느리게 진행됩니다.



자바스크립트와 해시맵

자바스크립트의 문법으로 작성된 코드(스크립트)는 사실 단순한 텍스트일 뿐입니다. 
자바스크립트엔진은 우선 이 텍스트를 쭉 읽어들여서 분석하게 됩니다. 보통 이 과정은 인터프리팅(interpreting)이라고 합니다. 
인터프리팅의 결과는 다양한 형태로 나타납니다만 근본적으로 자바스크립트의 경우는 해시맵을 통해 표현하게 됩니다.
복잡하게 얼키고 설킨 해시맵 구조로 인터프리팅이 완료되면 비로소 그 중에 관련된 부분 부터 실행하기 시작합니다.

여기서 중요한 점은 자바스크립트는 결국 해시맵이 될 운명이므로 이 점을 잘 생각해야한다는 점입니다.
구체적으로는 해시맵의 약점은 키를 찾는 시간이 오래 걸린다는 점을 고려해야 합니다. 
따라서 키를 미리 알려주는 방식으로 작성해야 합니다.
어떻게 하면 키를 찾지 않고 직접 알려주는 방식으로 코드를 작성하는지는 나중에 알아보도록 하죠!