JS 톺아보기(JS 개요, REACT기초)

JS는 어디에서 왔는가?

JS는 왜 JavaScript일까?

이름이 자바스크립트인 것을 보면, 무언가 자바와 큰 관계가 있는 것처럼 느껴지지만 사실은 그렇지 않다.

 

JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌으며 1996년 초에 Netscape2와 함께 처음으로 배포되었다. 원래 이 친구의 이름은 LiveScript였지만, 당시에 썬 마이크로시스템의 Java성공에 힘입어 마케팅을 위해 이름을 바꿔버리게 된다.(같은 C언어 계보니까 같은 식구인 건가..? 쟤는 객체 지향이고 얘는 기반었지만.. 이제는 의미가 있나)

원래 첫 이름은 Mocha였다

 

이후 자바스크립트는 Ecma International에서 표준으로 제정되고, 지속적으로 개정을 거쳐 현재는 2022 개정판까지 나왔다(최신을 확인하고 싶으면 링크) JS를 배우면서 많이 느끼는 것은 이 동네는 레거시가 되는 속도가 궤를 달리한다. 내가 프로그래밍의 근간으로 두고 있는 C는 아직도 2000년대 초 레퍼런스를 봐도 잘 작동하는데, 여기는 3년 정도 지나면 oldFashioned 되어버린다. 참으로 아이러니하지만, 이 동네의 룰이 그러하니 어쩔 수 없다(강의 찾기가 너무 힘들어서 레퍼런스로 공부를 강제한다)

 

---

간단한 자료형들 설명

프로그래밍에 익숙한 사람들입장에서는 당연한 것들이겠지만 자료형의 사이즈가 다를 수 있으니 한번 보고 가자

숫자 -> int -> 2147483647이라고 생각할 수 있지만, 다른 언어에서는 다를 수 있으니까 말이다.

 

1. 숫자, bigInt

2. 문자열

3. 부울

4. 함수

5. 객체

6. 기호

 

(링크를 누르면 각각 자료형들에 대한 설명이 나온다.)

---

제어 구조

JS의 자료형은 이제 알았으니, 자료들을 어떻게 컨트롤할 것인가?

다행히도, JS는 C와 유사한 제어구조를 가지고 있다.

즉, if, while, for, do while 등등 기본적으로 아는 녀석들은 다 쓸 수 있다)

(근데 안 되는 것도 있나?)

 

이런 녀석들은 너무나도 자료가 많기에 그냥 넘기겠다.

C랑 유사한 구조라는 것만 알고 넘어가다고 충분하다고 생각한다!

 

---

클로저

아래 코드를 보면 무슨 생각이 드는가?

function makeAdder(a) {
  return function(b) {
    return a + b;
  };
}
var add5 = makeAdder(5);
var add20 = makeAdder(20);
add5(6); // ?
add20(7); // ?

 

나는 "아! 이 녀석이 React를 배울 때 맨날 나오던 그 녀석이구나"

'그 Component 만드는 녀석이 이 친구였구나! 이걸 모르고 내가 리액트를 공부하려 했다니 내가 정말 미련했구나'라고 생각했다.

 

위 소스코드의 구조는 이렇다

1. add5라는 객체에 a는 5가 설정된 상태로 객체가 만들어진다.

2. add20이라는 객체에  a는 20인 상태로 객체가 만들어진다.

3. add5객체에 5라는 인자가 제공되고 이 친구는 b로 간다. 즉, b는 6이다.

4. add5는 11을 반환한다 (return 5 + 6이므로)

5. 3,4번을 a가 20, b가 7인 상태로 반복. 즉, 27을 반환한다.

 

어우 간단하게 위의 과정을 쭉 봐도 머리가 아프다.

그렇다면 왜 이렇게 작동하는 것일까?

 

JS에서는 함수가 실행될 때마다 Scope라는 객체가 생성되며, 해당 함수 내에서 생성된 지역변수를 담고 있다.

그렇기 때문에 makeAdder()이라는 함수가 호출되면, 스코프 객체는 makeAdder() 함수에 전달한 인수인 a속성을 가진 상태로 생성된다.

그렇기 때문에 a는 처음 함수가 만들 때 넣은 값으로 초기화된 상태에서 아래 함수가 이제 이 객체의 인자를 받게 되는 것이다.

 

그렇기 때문에 위의 구조로 실행이 된다!

 

그러면 이 Scope는 언제 없어질까? Leak 나는 것은 아닐까 싶지만, 이 친구는 add5 같은 인스턴스가 더 이상 안 쓰일 때까지 유지되다가 자동으로 쓰레기 수집기(GarbageCollector)에 의해서 제거된다.( free 안 해도 된다니! 현대 언어는 최고야! )

 

 

---

React로 출발

아마 이 정도만 알면 나머지 녀석들은 여러분이 알고 있는 프로그래밍적인 지식으로 대체할 수 있을 것이다.

안된다면 C언어 혹은 다른 언어를 더 공부해보는 것도 좋은 옵션일 수 있다!

혹은 이 모든 것들을 위한 레퍼런스를 찾아보아라. 아래 링크가 큰 도움을 줄 수 있을 것이다.

 

당신을 위한 JS의 거의 모든 것