개발소발닭발

리액티브 프로그래밍은 비동기 데이터 스트림에 기반을 둔 프로그래밍입니다. 뭔가 대단해 보이는데 무슨 의미일까요. 개발을 하다 보면 동기 / 비동기 프로그래밍을 자연스럽게 경험하게 됩니다. 동기는 일반적인 프로그래밍 방식으로, 순차적으로 실행됩니다. 예를 들어 B함수에서 A 함수를 호출하면 A 함수가 실행되고, A 함수가 값을 반환하면 B함수 내에서 A함수를 호출한 위치에서 이어서 실행됩니다. 순차적이죠. 비동기 방식은 어떠한 이벤트가 일어나면 특정 행동을 취하는 방식입니다. AJAX 요청이 좋은 예입니다. 이벤트는 서버의 응답이 될 수도 있고, 유저의 특정 이벤트가 될 수도 있고 인터벌이 될 수도 있습니다. 그렇다면 프로그래밍을 대하는 관점을 바꿔봅시다. 개발자의 입장이 아닌 데이터의 입장에서 프로그램을..

자바스크립트는 스크립트 언어입니다. 말 그대로 클래스 언어가 아니라 스크립트 언어죠. 우리가 작성한 스크립트 구문을 해석하고 실행하는 엔진은 어떻게 동작하는 건지 알아보겠습니다. 왜 알아봐야 하냐면, 자바스크립트가 어떻게 동작하는지를 알아야 코딩하고 이해할 수 있는 코드가 있습니다. setTimeout(function(){},1) 여러 이벤트 리스너들의 순차적 동작들 자바스크립트 엔진은 크게 3가지 영역으로 나누어 집니다. 콜 스택 힙 이벤트 큐 이벤트 루프 3가지라고 해놓고서는 이벤트 루프를 끼워 팔았습니다. 1. 콜 스택. 프런트 개발을 해보았다면 익숙한 이름입니다. (크롬 개발자 도구를 보다 보면 콜 스택이 착착 쌓이는 것을 확인할 수 있습니다. 가끔은 에러 코드에서 만날 때도 있고요 ; ) ) 자..

자바스크립트는 객체지향을 클래스로도, 프로토타입으로도 구현할 수 있다. 클래스는 es6 문법이니 추후 포스팅할 예정이고 이번에는 프로토타입에 대해 알아보자. 이것은 클래스 방식보다 더 강렬하고 강력하게 느껴질 수도 있다. 언제나 그렇듯 검정화면. 1 2 3 4 5 6 7 8 function Person(age){ this.age = age this.printAge = function(){ console.log(this.age); } } var leesukkyu = new Person(34); cs #1 자바스크립트의 클래스는 함수로 구현이 가능하다. 이러한 함수를 생성자 함수라 부른다. (보통 대문자로 시작) #8 34세의 사람 인스턴스를 생성자 함수를 통해 생성. #2 인스턴스의 멤버 변수로 age 등..

자바스크립트를 개발하다 보면 apply와 call을 사용하는 경우가 생깁니다. 1. this 변수에 원하는 값을 할당하고 싶을 때. 2. '파라미터를 담은 배열'을 이용할 때. 하나씩 알아보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function thisTest() { console.log(this); } thisTest(); thisTest.apply(5); thisTest.call({x:10}); function drawPage() { var str; str = '버튼 클릭' createBtn(); //createBtn.call(this, str); //createBtn.apply(this, [str]); } function creat..

자바스크립트를 사용하다 보면 this를 이용하는 경우가 많이 있습니다. 이번 시간에는 실행 문맥 내에서 this 바인딩이 어떻게 이루어지는지 알아보겠습니다. this란 무엇인가. 일반적으로 함수 내에서 사용되는 특정 키워드 변수입니다. 자바스크립트는 함수를 실행할 때 몇 가지 단계 거치며 동작하는데요, 그중 한 가지 단계가 this 변수를 만드는 일입니다. 그런데 자바스크립트가 this라는 키워드에 어떠한 값을 할당할지는 경우에 따라 조금 다릅니다. 당연히 헷갈리겠죠. 이러한 this를 예측 가능하도록 사용하고, 이에 더해 원하는 값을 this 키워드에 할당할 수 있습니다. 먼저 우리가 좋아하는 검정 화면입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var test = { x:..

추후 예정

자바스크립트를 제대로 알기 위해서는 객체에 대한 이해가 필요합니다. JS의 모든 것이 객체로 이루어져 있기 때문입니다. 자 같이 공부해 봅시다. 자바스크립트에는 클래스가 있는가? 객체지향 개발이 가능한가? 이 질문에 대답하기위해 우리는 클래스와 객체를 구분해야 합니다. 클래스는 틀입니다. 사람이라는 틀이 있고 그 틀로 찍어내듯 만든 "이석규"라는 인간이 있죠. 만들어진 "이석규"라는 인간은 객체입니다. 사람이라는 클래스의 인스턴스죠. "자 그럼 자바스크립트에는 클래스가 있는가?" 그렇습니다. 본래 자바스크립트에는 클래스 문법이 없었습니다. ES6에 들어와서 제공되기 시작한 거죠. 두 번째 질문인 "객체지향 개발이 가능한가?" 매우 그렇습니다. 그렇다면 ES6에서 클래스가 제공되고 난 후에야 JS로 객체지..

추후 강좌

자바스크립트에는 호이스팅이라는 특성이 있습니다. 처음 JS를 사용할 때 놀래키는 녀석 중 하나죠. 호이스팅이란 자바스크립트에서 실행 문맥을 동작할 때 함수와 변수의 선언을 해당 컨텍스트의 최상위로 끌어올리는 것을 의미합니다. 실제로 끌여올려지는 것은 아니며, 실행문맥과 활성 객체에 대한 이해가 있어야지만 호이스팅을 정확하게 이해할 수 있습니다. 이게 뭔 소리야? 우리는 검정 화면을 좋아하는 개발자니 코드로 보면서 확인해 봅시다. 1 2 3 4 5 6 7 printAge(17); function printAge(age){ console.log("내 나이가 벌써" + age + "라니?"); } Colored by Color Scripter cs 아무 문제없이 실행됩니다. 이제는 익숙해서 당연하게 느껴지네요..

- 자바스크립트는 프로토타입 기반의 언어다.- 프로토타입은 다른 오브젝트를 가르키는 내부 링크다.- 모든 오브젝트는 프로토타입을 가지고 있고 이러한 프로토타입 역시 프로토타입을 가지고 있다. 결국 이것은 반복된다. null 오브젝트를 프로토 타입으로 가지는 오브젝트에서 끝이난다.- 이를 프로토타입 체인이라 부른다. 프로토타입은 고전적인 상속 모델보다 더 강력한 방법이다. 프로토타입으로 고전적인 방식은 쉽게 구현할 수 있지만, 그 반대는 어렵다. // apply, call, bind // 팝업의 전처리의 경우 apply를 쓰는 경우 // 데이터를 apply로 넘겨 주는 경우 // 함수 상속에서의 this var x = { a : 10, b : function(){ console.log(this.a) } }..