진수의 개발세계 진수의 개발세계

캡틴판교님의 포스트를 보며 공부한 내용을 정리한 글 입니다. 자바스크립트에서 말하는 비동기 처리란, 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 말한다. 예시 : setTimeout, 제이쿼리의 ajax 통신 (참고 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ ) 비동기 처리에서 발생할 수 있는 문제를 해결하기 위해 콜백함수를 쓸 수 있다. 콜백함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 하지만 비동기 처리를 위해 콜백함수를 연속적으로 쓰다보면 콜백지옥이 생긴다. 콜백지옥을 해결하기 위한 방법..

오늘 배운 개념들의 용어 정리! 아직은 확 와 닿지 않지만 경험이 쌓이면 더 깊이 이해할 수 있을 것 같다. 웹(Web) - 월드 와이드 웹(World Wide Web) : 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간. - 웹과 인터넷은 다른 개념이며, 웹은 인터넷 상의 하나의 서비스라고 볼 수 있다. (인터넷 : TCP/IP를 기반으로 하여 전 세계적으로 연결된 컴퓨터 네트워크를 일컫는 말) - 웹의 특징 : 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다. (하이퍼 텍스트 : 문서 내부에 또 다른 문서로 연결되는 참조를 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술. 이때 문서 내부에서 다른 문서로..

상속의 방법으로는 크게 2가지가 있다. ES5에서의 pseudoclassical 방법과, ES6의 class 키워드를 이용한 방법이다. 1. ES5(Pseudoclassical) 문법 function Person(name){//부모 객체(생성자 함수) Person의 속성으로 name을 정의. this.name = name; } Person.prototype.introduce = function(){//Person의 prototype객체에 메서드 introduce를 정의. return 'My name is ' + this.name; } function Singer(name, style){ Person.call(this, name);//자식 객체(생성자 함수) Singer에서 부모 객체 Person의 속성을..

this 함수 안에서 함수 호출 맥락을 의미(맥락: 의미가 고정되어 있지 않고 상황에 따라 달라질 수 있음) 자바스크립트의 함수 안에서 사용할 수 있는, 의미가 약속되어 있는(그러나 고정적이지 않은) 변수 this가 '함수 호출 맥락'이라는 말은, 함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라진다는 뜻 본질 : "함수 안에서 this는 함수가 소속되어 있는 객체를 가리킨다" 1. 함수 호출에서의 this function func(){ console.log(this === window); } func(); // true window.func(); // true 함수 호출에서의 this는 전역 객체인 window를 가리킨다. 이때, 위에서 볼 수 있듯이 func( );와 window.fun..

생활코딩 이고잉님의 강의를 보며 공부한 내용을 정리한 글 입니다 먼저 이해 해야할 전제 : 자바스크립트의 함수는 객체다. 객체이기 때문에 함수는 property를 가질 수 있다. function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } 위와 같이 Person이라는 함수를 정의하면, Person이라는 함수, 즉 객체가 생긴다. 그러나 이 객체만 생기는 것이 아니라, Person의 prototype이라는 객체도 함께 생긴다. 그리고 이 두 개의 객체는 서로 연결되어있다. 이때, 객체 Person에는 내부적으로 prototype이라는 프로퍼티가 생기며, 그것은 Person의 prototyp..

모든 함수에는 prototype이라는 속성이 있다. prototype을 이용하면 생성자가 만든 모든 객체가 공통적으로 사용하는 속성을 만들 수 있다. function Person(name, first, second, third){ this.name = name; this.first = first; this.second = second; } // Person이라는 생성자 함수의 prototype(원형)에 sum이라는 함수를 정의하는 과정 Person.prototype.sum = function(){ return `${this.name} sum() : ${this.first + this.second}`; } let kim = new Person('kim', 10, 20); let lee = new Perso..

OOP(Object Oriented Programming) / 객체 지향 프로그래밍 1) 객체를 기반으로 하는 프로그래밍 패러다임. 2) 하나의 모델이 되는 청사진(class)을 만들고, 그 청사진을 바탕으로한 객체(instance)를 만드는 프로그래밍 패턴. * 객체(Object) : 서로 연관된 변수와 함수를 그룹핑한 것, 객체 내의 변수를 property, 함수를 method라고 한다. 3) 객체 지향 프로그래밍의 4가지 특징 캡슐화(encapsulation) : 변수와 함수를 하나의 함수로 묶는 것을 말한다. 사용자에게는 사용법만 알려주고 내부가 어떻게 되있는지는 숨길 수 있다. 이런 컨셉을 정보의 은닉화 또는 캡슐화라고 부른다. 상속(inheritance) : 자식(sub) 클래스가 부모(sup..

자료구조(Data structure)는 현실을 프로그래밍적으로 표현하는 것이다. 회사의 조직도를 떠올려보자. DOM을 공부할 때 Tree 구조라고 했던 게 생각난다. 최상위 노드가 있고, 그 아래에 자식 노드가 나무에 붙은 가지처럼 뻗어나간다. 회사로 치면 사장님부터 부장, 대리, 신입사원까지 어떤 조직의 형태를 프로그래밍적으로 표현하고 싶을 때 TREE 구조를 사용할 수 있다. 또 디렉터리를 떠올릴 수 있다. 어떤 디렉터리 안에 또 다른 디렉터리들이 있고, 그 디렉터리들 안에 또 디렉터리들이 있을 수 있다. 그러한 관계도 Tree 구조로 표현될 수 있다. 또 다른 예로, 지도 애플리케이션을 만드는 경우를 가정할 수 있다. 각각의 위치별로 지역이 있을 것이고, 어떤 위치에서 다른 위치로 최단거리로 이동하..