모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해

현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.

당연히 자바스크립트에 대해 알면 많은 도움이 되겠죠?

강좌를 보시는 분들중 다른 언어를 하시던 분들이 정말 바꿀만 한 것인지 고민이 많을 거라 생각하기 때문에…

몇가지 비교를 하고, 제가 자바스크립트를 사용하게 된 계기에 대해 설명해보고자 합니다.

어떤 장단점이 있는 지 생각 나는 대로 정리해 보려 합니다.

‘나는 언어가 뭔 지도 모르고 아예 처음이다’ 라고 생각하시는 분은 다음 챕터로 넘겨도 좋습니다.

일화 하나 소개: JSON

여기저기서 자주 쓰는 제이슨(JSON)이란 단어 들어보신 적 있을 것입니다.

지슨이라고 불리기도 하고 각양각색이죠.

용어에 민감한 사람들이 있는데요 대충 불러도 다 통합니다.
예를들어 ajax를 에이작스라고 하든 아약스라고 하든 아작스라고 하든 상관 없다는 것입니다 다 알아듣고 그거 잘 부른다고 절대 고급스럽지도 않답니다. 부끄러워하지 마세요..
부끄러워 해야할 것은 오히려 용기가 없어서 말 조차 못꺼내는 쪽 아닐까요?

저는 C++ 윈도우 프로그램을 하다가 어디로 부터인가 데이터를 받을 일이 있어서 처음 접하게 되었었는데요.

어느 서버로부터 데이터를 가져오니 제이슨이란입니다.

처음 봤을 때 맨붕에 빠졌습니다.

대부분 통신으로 받는 데이터는 그저 바이트로 이루어진 덩어리 혹은 문자열이었거든요..

유저정보.json

{
    "name": "홍길동",
    "age": 14,
    "friends": [
        {
            "name": "김선생",
            "age": 11
        },
        {
            "name": "이선생",
            "hobby": "십자수"
        }
    ]
}

그런데 이딴 데이터가 들어왔습니다.

이름은 홍길동이고 14인데 친구들이 김선생, 이선생이 있는거죠.

저는 요소들을 분리해서(파싱) 저장하기 위해..

저 문자열을 받아서 문자의 시작부터 끝까지 ({,”,:) 같은 걸 찾아서 정말 힘들게 추출했었습니다.

물론 라이브러리가 있었겠지만. 알아 볼 새도 없이 급하게 우선 “김선생”의 나이만 당장 구했어야해서..

대충 이런식이었죠

char* str = 유저정보.json

for (int i = 0; i < str.length(); i++) {
    if (str[i] == '{') {
        kFlag = true;
        continue;
    }
    else if ... // { 찾고나서 " 찾고 ..어쩌고
}

나중에 알고보니 제이슨은 자바스크립트 변수라는 것을 알게 되었습니다.

딕셔너리-스타일 인간들은 바로 말로 또박또박 나옵니다. 위키에 찾아보면 Javascript Object ? 일 건데요 굳이 외울 필요 있을 까요?

아무튼 c언어에서 고생했던 것이 자바스크립트에서는..

var obj = 유저정보.json

// obj[0].age < 바로 이것이 김선생의 나이인 것이죠..

이런 설명의 이유는 이렇게 무식한 저도 자바스크립트 진입에 저언혀 문제가 되지 않았다는 것입니다.

네이티브 언어들과 자스와 데이터형 비교

자바나 씨등의 비교적 오래된 언어들을 보면.. 변수를 선언 할때 정말 또렷하게 잘 정의해줘야 연산이 되었죠..

정수 관련

자바나 씨등의 비교적 오래된 언어들을 보면.. 변수를 선언 할때 정말 또렷하게 잘 정의해줘야 연산이 되었죠..

씨언어

unsigned char uc = 257; // 0~255(0x00 ~ 0xFF)라서 선언 즉시 에러입니다.
short s = -40000; // 이것 역시 에러입니다. 쇼트는 두바이트 정수로 0x0000 ~ 0xFFFF 까지의 범위를 가지는데 unsigned가 아니기 때문에 -3276? ~ 3276? 의 범위를 갖습니다.
int i = 333; // 컴파일러마다 범위가 틀립니다. 4바이트 정수일 수도.. 8바이트 일 수도..
float f = 3.3; // 소수점을 가지고 있는 것들은 플롯으로 선언해야합니다.

이처럼 큰 정수, 중간 정수, 작은 정수 이렇게 각각 잘 선언해야합니다.

작은 정수형에서 큰 정수형의 데이터를 빼버리면 돌고 돌아 절삭된 이상한 값이 나옵니다.

위의 변수로 f랑 i를 더하려면..

result = f + (float)i

이런식으로 형변환(타입캐스팅?)을 해줘야 원하는 값을 얻습니다.

자바스크립트에선 어떨까요? (앞으로 그냥 자스라고 할께요..)

자스

var a = 33333333, b = -342, c = 3.14

그냥 아무렇게나 막 쓰면 됩니다.

연산 역시 a+c-b 아무렇게나죠.

당연히 정수형 변수는 자스가 극도로 편합니다.

다만 뭉탱이 연산(포인터로 메모리 번지 연산등)이 가능해서 고 성능 모듈에서는 네이티브가 빠르겠죠.

문자열 관련

기본 C에서 문자를 다루는 것은 정말 욕이 절로 나오는 수준의 원시 수준입니다.

펌웨어에서 가끔 문자열 비교를 할때 속터져서 죽을 것 같습니다.

씨언어에서 “AB” 라는 문자는

const char* c = "AB";
const char s[3] = [ 0x41, 0x42, 0x00 ];

위의 c와 s는 같습니다.

씨언어에서 문자열이란 저렇게 끝나는 부분이 널(NULL=0x00) 이 될때까지 라는 것이죠..

문자열을 더하거나 비교하는 함수는 있긴 하지만 여러모로 불편합니다.

그나마 C++은 다양한 스트링관련 클래스가 있어서 문자와 문자를 더한다던지 나름 쉽게는 쓸 수 있지만..

숫자와의 연산은 그대로는 안됩니다.

String str = "abcd";
int i = 33;
String result;
result = str + String(i); // or IntToStr(i) 이런식..
// result = abcd33

위와 같이 문자와 숫자를 더할 경우 문자가 우선순위라 숫자를 문자로 변환해야합니다.

하지만 자스에선 데이터 형이 하나 뿐이죠.

var str = 'abcd'
const i = 33;
let result

result = str + i
// result = abcd33

합리적으로 생각했을 때 문자와 숫자를 더할때는 당연히 숫자가 문자가 되어야되는 적당한 판단으로 더해지는 것이죠..

물론 장단점이 있겠지만 제 경험으론 장단 비율 자스:C = 9:1 입니다.

엄격함

기존 언어들은 상당히 엄격합니다.

세미콜론 하나 빠지면 바로 컴파일 에러납니다.

일반언어는 문자열 표기는 “abc” 입니다.

자스의 스트링은 ‘abc’, “abc”, abc 다 같은 겁니다. 사실 그래서 셋 중 뭘써될지 고민하는 게 일이긴하죠.

그 밖에도 많은 것들이 엄격한데 생각나는 것이 지금은 없네요..

위의 자스 코드를 보시면 세미콜론이 있어도 되고 없어도 되죠.. 진짜 대충 해도 왠만하면 다 되는 느낌이 듭니다.

이것 역시 장단 비율 자스:C = 9:1 입니다.

편의성

자주 쓰던 C++클래스가 있었습니다.

String result;
TStringList *sl = new TStringList();
sl.add("abc");
sl.add("def");
result = sl.CommaText; 
delete sl;
// result = abc,edf

우선 클래스 선언 자체가 두번 써야되서 영 보기가 안좋습니다.(TStringList 2번)

그리고 new로 선언 했다면 꼭 delete를 해줘야합니다.

delete를 안하고 쌓인 힙메모리라는 내맘데로 메모리공간이 꽉차면 그 유명한 스택오버플로우가 되는 것이죠.

물론 c++도 부스트 이후 나날이 발전해서 auto_ptr, 벡터와 리스트등이 나와서 많이 나아지긴 하죠.

자스에서 똑같이 한다면..

let sl = []
sl.push('abc')
sl.push("def");
let result = sl.join(',')
// result = abc,edf

난이도

난이도라 함은 익숙함이라는 어드벤티지를 깨고 객관적으로 판단해야된다고 봅니다.

사실 그래서 객관적인 판단이 어렵습니다.

고르게 파이썬도 중급 노드도 중급 자바도 중급 인 사람이 그닥 많지 않을테니깐요…

그나마 제가 자스와 씨언어 둘다 초급이라 해본 결과 당연히 씨언어가 어렵습니다.

가비지컬렉터 같은 메모리 관리가 자동으로 되는 것이 아닌 실제 메모리를 번지를 억세스 하거든요..

마치며

두 언어, 플랫폼을 비교했다 해서 객관적 지표가 되긴 여전히 힘듭니다.

제 경험을 살린 한가지 이야기일 뿐이고요.. 오해는 마시기 바랍니다.

더 나은 방법으로 잘하시는 분들이 계실테지만 이런 것도 있다 라는 느낌으로 봐주시기 바랍니다.

영상

자세한 것은 영상을 보며 확인하세요~