자바스크립트

form, XHR, AJAX, jQuery.ajax, Fetch

XHR이 나오기 이전의 서버와의 통신 XHR, AJAX, jQuery.ajax(), Fetch를 보기 전에 XHR이 나오기 전에는 어떻게 서버와 통신했는지를 알아보자. form 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다. 위키백과-Ajax GET request first name: last name: POST request first name: last name: server code app.post("/name-post", function(request, response) { const { firstname, lastname } = req..

OOP (Object Oriented Programming)

들어가며 Object(Instance), Class에 대해 감이 오지 않는다면 이 글 을 참고해주세요. 내용 OOP가 뭐야? Object Oriented Programming으로, 객체 지향 프로그래밍을 말한다. 즉 어떤 개념에 대해서 추상화한 (속성과 행위를 가진) 객체로 만들어, 그들 사이에서 상호작용을 하며 프로그래밍하는 것을 말한다. 예시 철수와 영희, 경아와 상아를 추상화하여 객체로 만들어보자. 이들은 모두 이름과 나이, 직업이라는 속성 을 갖고 잠을 자고, 숨을 쉰다 (행동). const cheolsu = { name: '철수', age: 28, job: '대학원생' sleep: function() { console.log("zzz...") }, breath: function() { conso..

Object(Instance), Class

들어가며 OOP에 대해서 공부를 하던 중에 Object 에 대해 공부가 부족하다는 생각이 들어 Object(Instance) 와 Class 에 대해 먼저 공부를 하게 되었다. 공부를 하며 내가 그동안 헤멨던 내용에 대해 정리를 했다. 내용 객체가 뭐야? 객체 란 무엇일까? 객체에 대해 찾아보면 흔히 나오는 답은 아래와 같다. 객체란 어떤 물체나 개념을 추상적으로 표현한 것이다. 객체란 현실의 것을 코드로써 표현한 것이다. (간혹 인스턴스라는 말도 볼 수 있다. 객체와 인스턴스는 종종 같은 의미로 쓰인다.) 처음 객체에 대해 접했을 때 이러한 설명들은 나를 더 혼란스럽게 만들었다. 둘 중 어느게 맞는건지 고민도 했었다. 아는 것이 많지는 않지만, 그 때보다는 많아진 지금 나름 내릴 수 있는 결론은 아래와 ..

생성자와 This

들어가며 생성자와 this 에 대해서 알아보았다. 개인적으로 생성자 함수라는 말 보다는 함수의 생성자가 맞다고 생각하지만, 생성자라고 작성하면 읽는데 헷갈리는 부분이 있을 것 같아 이해를 위해 생성자 함수라고 적었다. 인사이드 자바스크립트 Ch.4.4를 참고하였다. 생성자와 this 예를 들어 이런 코드가 있다고 해보자. function foo() { this.name = 'foo'; // ... } var bar = new foo(); bar 는 foo 에게 접근할 수 있다. 이것이 가능한 이유는 bar 가 생성될 때 foo() 의 constructor 로 하여금, bar.__proto__ 가 foo()의 prototype 객체를 가리키게끔 했기 때문이다. 그리고 이 때 새롭게 생성된 new objec..

This 의 바인딩

들어가며 실행 컨텍스트에 관한 지난번 자료 에서 this는 실행 컨텍스트에 따라 달라진다 라는 내용을 간단하게 언급했었다. 그 때는 왜 달라지는지 에 대해서 언급을 했었다. 이번에는 어떻게 달라지는지 에 대한 내용이다. 혹시나 링크를 타고가지 않을 누군가를 위해 간단하게 말해보자면, Execution context 가 만들어질 때 this 가 바인딩이 되기 때문이다. 그러니까 실행 중에 결정이 된다는 말이다. 추가적으로 this 를 찾다보면 this는 Lexical Scope 와 아무런 관계가 없다 라는 것을 종종 볼 수 있다. 나는 이 말을 Execution context 가 만들어질 때 activation object(variable object) 안에서 this 와 parameter 가 아예 별개의..

함수

들어가며 함수에 대한 내용입니다. 책 인사이드 자바스크립트(4.1~4.3)를 참고하였습니다. 함수의 정의 함수를 정의하는 방식에는 크게 세 가지 방식이 있다. 함수 선언문 함수 표현식 Function() 생성자 함수 그리고 1번과 2번은 함수 리터럴 방식 을 이용해서 선언된다. 3번은 말 그대로, Function() 생성자 함수 를 통해서 선언된다. 함수 리터럴 방식 리터럴이란, 선언함과 동시에 값 또는 코드를 지정해주는 것을 말한다. -참고1 함수 선언문 - 기명 함수 function fInit(a) { console.log(a); } 함수를 선언할 때 이름이 꼭 있어야(기명) 한다. 그리고 선언문 이기 때문에 호이스팅이 일어날 수 있다. 때문에 코드 구성을 엉성하게 만들 수 있어서, 되도록이면 선언문..

Closure

들어가며 클로저에 관한 내용입니다. 개념 위주로 작성하였습니다. Closure 책과 여러 자료를 보고 정리 해봤을 때, 클로저는 아래와 같은 개념을 말한다고 나름의 정리를 해봤다. 클로저는 함수 자신과 함수 자신이 선언된 어휘적 환경을 기억하고 있다. 따라서 생명주기가 끝난 외부 함수의 변수를 스코프 체인 을 통해서 참조 를 할 수 있다. 코드를 보자. function outerFunc() { // 외부 함수 var x = 10; function innerFunc() { console.log(x); } return innerFunc; } var inner = outerFunc(); inner(); // 10 ffInner = fOuter() 를 했을 때, fOuter()의 execution context..

Scope

Scope 스코프는 흔히, 변수의 생존 범위 라고 알고 있다. 나 또한 그렇게만 생각하고 있었다. 물론 이 말이 마냥 틀린것은 아니지만, 스코프는 보다 넓은 개념을 포함하는 단어이다. 그래서 스코프를 알기 전에, 자바스크립트 프로그램이 어떻게 작동하는지를 먼저 볼것이다. 자바스크립트 프로그램은 어떻게 실행될까? 자바스크립트 프로그램은 Engine, Compiler, Scope에 의해 실행된다. (보다 정확하게는 엔진에 의해 실행되지만, 컴파일러와 스코프는 엔진의 명령에 따라 각기 맡은 일을 하기 때문에, 각각에 의해 실행된다는 것도 마냥 틀리지만은 않다고 생각한다) Engine Compilation의 전 과정과 자바스크립트 프로그램 실행의 전 과정을 담당한다. (우리가 흔히 아는 V8은 자바스크립트의 다..