방춘덕(고양이 키우면 지을 이름)의 개발 블로그입니다.

JS에서 blob을 이용한 기능 구현 도중, 해당 버그(?)를 발견했다. 버그(?)인 이유는 내 생각에는 딱히 잘못이 없어 보이지만.. iOS를 잘하지 못하기 때문에 그렇게 적어뒀다. (정확한 원인을 아신다면, 아래 저장소에 풀 리퀘스트를 부탁드립니다!!) 버그의 내용은 viewWillAppear에서 웹뷰의 load 함수를 사용해 페이지를 부르면 위와 같은 코드가 올바르게 동작하지 않는다는 것이다! 해결방법은 viewWillAppear 말고 다른 곳에서 함수를 호출하면 된다. 아래는 따로 프로젝트를 만들어 실험해본 결과다. viewWillAppear에서는 이미지가 첨부되지 않고, 페이지가 새로고침되는 모습을 볼 수 있다. 아래 저장소에서 위 코드를 직접 확인해볼 수 있다. https://github.co..

목차 prototype 이란? prototype, [[Prototype]], __proto__ [[prototype]] prototype __proto__ constructor property prototype chain 1). prototype 이란? JS는 prototype 기반의 객체지향 언어로써, prototype을 사용하여 다른 객체지향 언어들(C++, Java 등)의 class처럼 객체지향적이고 확장 가능한 코드를 작성하게 만들어준다. (물론 ES6부터 JS도 class 문법을 지원하긴 하지만, 런타임에서 prototype으로 변환되어 실행된다.) 대표적인 예시로는 우리가 이미 코드에서 흔하게 사용 중인 Array, Object 등에서 사용하는 메서드들은 모두 prototype으로 구현되어 있..

이 글을 원활하게 읽으려면 이전 글인 execution context 와 execution context stack과 execution context의 생성과정을 읽는 것을 권장한다. 목차 scope란? global scope local scope 몇 가지 상황들 non block level scope lexical scope 1). scope란? scope는 런타임에서 함수, 변수, 객체등에 대한 접근성을 결정한다. 즉, scope는 참조하려는 식별자를 찾기 위한 규칙이다. var a = 10 function A() { var b = 20 console.log(a, b) } A() JS는 이런 코드에서 식별자에 대한 접근을 어떻게 할까? scope가 바로 어디서 어떻게 식별자에 대해 접근하는지를 결정해..

JS는 단일 스레드 기반의 언어이며 이는 한 번에 한 작업밖에 처리하지 못한다는 것을 뜻한다. (이는 정확히 JS엔진에서만 국한된 것이다. 브라우저 등의 상황에서는 다르다) 하지만 우리가 흔히 접할 수 있는 웹 애플리케이션들은 HTTP 요청을 처리하며 화면에 애니메이션을 보여주고, 이에 대한 프리징이나 다른 현상들을 찾아볼 수가 없다. 이것에 대한 해답이 위의 사진에 있듯, event loop와 그 친구들이다. 1). call stack 브라우저 안의 자바스크립트 인터프리터와 같이, 인터프리터를 위한 메커니즘이다. 현재 실행되고 있는 함수는 무엇인지, 그 함수 내에서 어떤 함수가 호출되고 있는지, 다음에 어떤 함수가 호출되는지 등을 관리한다. 보통 다음과 같은 순서로 실행된다. 함수를 호출하면 인터프리터..

이 내용은 이전에 작성했던 execution context와 execution context stack과 execution context의 생성과정 글과 관련이 있습니다. Hoisting is JavaScript's default behavior of moving declarations to the top. (hoisting은 선언을 맨 위로 이동시키는 JS의 기본 동작이다.) - https://www.w3schools.com/js/js_hoisting.asp 1). JS의 선언과 hoisted 먼저 예제를 보고 시작해보자. console.log(hello) // undefined var hello = 'HI!' 왜 다른 언어들과 같이 error를 출력하지 않고 undefined로 출력될까? execut..

지난 글에서는 EC(execution context)와 ECS(execution context stack)이 무엇인지 알아봤고 오늘은 실제로 EC가 어떻게 생성되는지 알아볼 것이다. (이 글을 이해하기 위해서는 꼭 지난 글을 읽어야만 한다.) JS엔진은 2가지 단계로 EC를 생성한다. 1). creation phase 생성 단계는 JS 엔진이 함수를 호출했지만, 아직 실행이 되지 않은 상태다. 이 단계에서 JS 엔진은 컴파일 단계에 있으며 작성된 코드를 컴파일하기 위해 함수를 스캔한다. global EC일 때와 function EC일 때 동작이 아주 약간 다르다. 그리고 이전 글의 각 EC별 특징과 매우 흡사하다. global EC 전역 객체를 생성한다. (window... 등) this 객체를 생성한다..

오늘 다뤄볼 내용은 실행 콘텍스트(execution context)와 실행 콘텍스트 스택(execution context stack)에 관해서다. 1). 실행 콘텍스트 An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. (실행 콘텍스트는 ECMAScript 구현으로 코드의 런타임 평가를 추적하는 데 사용되는 사양 장치입니다. by 구글 번역) - ECMAScript® 2019 Language Specification 흠.. 잘 이해가 되지 않는다. 몇몇 다른 블로그를 찾아본 결과 실행 가능한 코드를 형상화하고 구분하는 추..