YoungTae's Thoughts

자바스크립트를 사용하면서 메모리단에서의 동작 및 주의점에 대해 공부해 보았습니다. 일반적인 정적 언어와 달리 자바스크립트에서의 메모리 동작은 조금 다른 부분이 있어 궁금증을 가지고 구글링를 했습니다. 궁금한 대로 조사를 하다보니 순서가 조금은 뒤죽 박죽입니다. 틀린 부분이 있다면 언제든지 지적해주시기 바랍니다. 메모리? 프로그램이 동작하기 위해선 메모리가 필요하다. 재료를 손질하기 위한 도마가 필요하달까. 다수의 플립플롭 (flip-flop) 으로 구성된 메모리에는 바이트 단위로 데이터를 저장된다. 크게 코드영역, 데이터 영역, 콜스택 영역, 힙 영역 4가지로 나뉜다. 코드영역은 우리가 적은 코드가 적재되는 영역이다. 컴파일이 끝난 기계어로 들어간다고 한다. 데이터 영역은 전역 변수 static 변수들이 적재되는 곳이다. 프로그램이 끝날때까지 존재한다. 스택 영역은 지역변수, 매개 변수들이 저장이 되는데 함수 호출시 사용되고 끝나면 반환된다. 함수가 호출될때 그 메모리가 할당된다고 하여 콜 스택이라고 불리운다. 선입후출의 자료구조이다.  컴파일 시에 크기가 결정된다 힙 영역은 메모리가 동적으로 할당되는 곳이다. 런타임시에 크기가 결정된다고 한다. 자 하나하나 궁금증을 풀어나가본다. 스택과 힙의 방향이 저렇게 자라나는 이유는 ? 스택의 bottom 쪽에는 프로그램이 닿아서는 안되는 커널 영역의 메모리가 들어간다고 한다. 커널과 닿을 수 없는 방향에 두어야해서 그렇게 된다는 썰을 보았다. 또 힙과 스택이 서로 자라나는 방향이 마주보게된다면 공유 라이브러리 영역의 메모리를 참조하는 곳이 가까워져서 효율적이라고 한다. JS는 인터프리터언어잖아? 스택은 컴파일시에 그 크기가 결정된다고 하는데 , JS 스택 크기는 언제 결정되는 거야??? 크롬과 Node js에서 사용되는 V8 엔진을 통해 알아보았다. V8엔진은 JIT(Just In Time) 컴파일을 채택했다. 인터프리터와 정적 컴파일러의 중간단계라고 볼 ...

블로그 이전했습니다~ 링크( https://steemit.com/@cicada0014 )  시작하며 Angular cli 툴을 써서 서버를 가동시키거나 빌드를 할때 터미널에 항상 뜨는 문구가 있다 webpack : Compiling... Angular를 처음 접했을때는 이것이 뭔지 몰랐다. 그냥 필요한거겠지 하고 넘겼었는데, 점차 프레임워크를 파고들고 이해하는 과정에서 꼭 알아야 하는 하나의 관문같은 존재였기에  면접을 준비하면서 제대로 파헤쳐보자는 생각으로 조사를 실시하였다.  나는 맥락을 좋아한다. 전체적인 큰 흐름을 보지 않으면 답답해지고 불안해지는 이상한 정신병을 앓고 있다.  이번에 소개하는 자바스크립트의 모듈화는 아주 거대한 서사시의 일부, 삼국지로 치면 삼고초려같은 하나의 에피소드같은 단편적인 부분이다.  자바스크립트의 허점과 그를 해결하기 위한 움직임  자바스크립트는 웹에서 간편하게 쓰일 수 있도록 설계되었다. 하지만 시간이 지남에 따라 기술이 발전하고, 구현하고자하는 것이 많아지면서 점점 코드의 복잡화가 일어나기 시작했다. 하지만 자바스크립트는 그런 복잡도를 예상하지 못했기때문에 허점이 자꾸 드러나게 되었다.  그 허점의 근간은 전역 스페이스이다. 자바스크립트는 암묵적 전역이라는 개념이 있다고한다. 명시적으로 var라는 키워드를 쓰지 않은 변수는 자연스럽게 전역변수로 인식된다는 것이다. 이 문제는 중첩의 문제로 발견된다.  내가 a라는 변수를 써서 코드를 짰다. 1년 뒤 프로그램이 상당히 복잡해졌을때, 새로운 코드를 짜다가 a라는 변수가 있는지를 모르고 같은 이름의 a변수를 써서 작업을 시작했다. 이렇게 함으로써 전에 쓰던 a라는 변수를 1년뒤에 쓴 a로 덮어써버리게 되었고, 기능상 큰 문제를 야기하게 되었다. 이런 문제점을 해결하기위해 여러가지 방법들이 도입이 된다. 즉시실행함수는 ...

시작하며 this에 대하여 1  Lexical Environment  this에 대하여 2  Scope Chain & Closure this에 대하여 3  함수 호출 방식에 따라서 this에 대하여 4  화살표 함수 드디어 this 이해에 대한 종착점에 다다렀다. 이번 포스트에서는 ES6 스펙을 살펴보면서  이런 골칫덩어리 this를 어떤식으로 해결하려 했는지를 파악해본다.  => 화살표 함수에서 this의 의미는 ?? => (화살표)  함수는 기존의 function를 비교했을때 단순히 표기법만 바뀐 것이 아니다.  화살표 함수와 기존의 function()은 여러가지 다른점이 있지만 우리는 this에 대해서만 집중하도록 하자.  2가지만 확실히 알아두면 된다. 첫째, 기존에 function은 thisBinding이 이뤄지는 시점이 호출되는 시점이라고 이야기를 했었다. 화살표함수는 호출되는 시점에 thisBinding 대상을 문맥에서 찾는다.  화살표함수 자신을 감싸고 있는 문맥(스코프)의 this를 바인딩한다는 것이다.  완벽하게 맞지는 않지만 쉽게 기억할 수 있는 방법으로 설명을 하자면, 기존 처럼  호출 시점에 호출한 대상을 바라보는것이 아니라,  자신이 어디에 존재하는지, 어디서 정의되었는지 를 파악한다고 보면 편하다.  자바같은 객체지향 언어에서 흔히 볼 수 있는 환경이다.  둘째, 화살표함수는 이름이 없는 익명함수이다. 익명함수는 이름이 없기때문에 변수에 담아두는 행동은 잘 하지 않는다. 그만한 이유가 있는데 바로 this 바인딩과 관련이 있기때문이다.  (즉 매 콜백함수로 많이쓰임) .  바로 이전 포스트 마지막부분에 추가를 했었는데, 익명함수는 이름이 없는 내부함수와 같다. 이해를 돕기위해 짤막한 코...

시작하며 this에 대하여 1  Lexical Environment  this에 대하여 2  Scope Chain & Closure this에 대하여 3  함수 호출 방식에 따라서 this에 대하여 4  화살표 함수 우리의 목적은 this를 이해함으로써, 헷갈리지 않고 this의 범위를 예측 하는 것이었다.  이전 포스트에서 실행환경(Execution Context) 과 언어적 환경(Lexical Environment)을 이야기 했었는데, 이 두가지를 잘 사용하면 된다!  이 부분이 이해가 안된다면 계속 읽고, 연구하고, 연습해봐야 한다. this의 범위를 아는 것은 자바스크립트를 다룰줄 아는 개발자라면 필수적으로 알아야 하는 부분인 것 같다고 생각한다. (한 줄 팁)  함수가 호출될 때 왼쪽에 객체가 있는지만 살펴보면 this가 어디에 바인딩되는지 알 수 있다. (예를 들어 object.function() 인지, function() 단독 호출인지만 보면 된다는 것) 자바스크립트에서 함수가 호출될 수 있는 패턴을 살펴보고, 실전예제를 통해 직접 예측해보자. 이번 포스트의 목차는 다음과 같다. 메소드 호출 패턴 함수 호출 패턴 생성자 패턴 apply 호출 패턴 콜백 패턴 1. 메소드 호출 패턴 함수가 어떤 객체의 속성에 있는 경우 특별히 메소드라고 부른다.  아래 코드를 준비했다. 그림 1 testObject 는 2개의 멤버가 있는데, 그중 하나가 함수형태로 표현된 method 라는 이름을 가지고 있는  메소드이다. 객체의 속성을 불러오는 방법은 마침표 . 연산자를 이용하거나, 대괄호 [] 안에 해당 속성과 일치하는 이름을 입력해주면 된다.  그럼 우리가 알고싶은 this가 어디에 바인딩 되는지 살펴본다 그림2 2개의 객체를...