본문 바로가기

분류 전체보기

 (71)
리액트 (클래스컴포넌트 vs 함수컴포넌트) 클래스 컴포넌트 state와 lifecycle methods가 있다. 함수 컴포넌트 state와 lifecycle methods가 없다. react16.8부터 React Hook을 도입하여 state와 lifecycle methods를 사용할 수 있도록 했다. 클래스 컴포넌트 대신 함수 컴포넌트를 사용하는 이유 (클래스 컴포넌트의 단점) 클래스 컴포넌트는 어렵다. 클래스 컴포넌트에는 this bind issue가 있다. functional programming을 이용하기 위해. lifecycle methods가 세분화 되어있어 코드를 중복으로 사용하는 경우가 발생했는데, 그 중복을 줄일 수 있다. 출처 드림코딩 엘리 - 리액트 4.1 강의
Web Hosting (웹 호스팅) host 인터넷이 연결되어 있는 컴퓨터 한대, 한대를 각각 호스트(host)라고 함. web hosting 업체 웹서버를 운영하기 위한 컴퓨터(= host)를 빌려주는 회사 * github도 웹호스팅을 제공하고 있음. 무료 또는 추천 호스팅 업체 출처 opentutorials.org/course/3084/18891
상속 (prototype) 기본 상속 (prototype) function Person(name, age){ this.name = name; this.age = age; } function Programmer(name, age, lan){ Person.call(this, name, age); // prototype을 추가해도 변수?들은 상속이 안된다. 기능만 된다. this.lan = lan; } Programmer.prototype = Object.create(Person.prototype); // 새 객체를 생성해서 prototype을 할당한다. // 새 객체를 생성하지 않고, Person.prototype을 그대로 넣으면, 추후 Programmer.prototype에 기능을 추가했을때, Person.prototype에도 같이..
전역객체 / this & this의 제어 전역객체 (window/global) 모든 객체는 전역객체의 프로퍼티 이다. 전역객체의 이름은 호스트 환경에 따라 다를 수 있다. (웹브라우저 : window / node.js : global) function func(){ console.log('hello?'); } func(); window.func(); // 위의 코드와 실행결과가 같음. // 점(.)이 있고, 그 앞에 있는 것은 객체이며, func함수는 window객체 안의 메소드 이다. this 함수의 호출 맥락에 따라서, 상황에 따라서 달라진다. 함수나 메소드에서 this는 그 함수가 속해있는 객체를 가리킨다. 생성자에서의 this var funcThis = null; function Func(){ funcThis = this; } var o..
객체의 생성 ( 생성자 & new ) 객체의 생성 var person = { 'name' : 'bolbbang', 'introduce' : function(){ return `my name is ${this.name}`; } } document.write(person.introduce()); //person.name = 'bolbbang' 으로 객체의 프로퍼티를 넣을 수 있지만, 객체를 정의하는 부분이 분산되므로 위와 같이 사용하는 것이 좋다. new ( 생성자 함수를 이용하여 객체 생성하기 ) function Person(){} // Person이라는 기본 함수 정의 var p0 = Person(); // p0 = undefined var p1 = new Person(); // p1 = {} // 함수에 new를 붙이면 그 return 값..
함수의 호출(call & apply) 함수를 호출하는 방법 1. 함수(파라미터인자) : 가장 기본적인 방법 2. 함수.call(null, 파라미터인자1, 파라미터인자2, ..) : 함수.call()을 생략하여 더 간단하게 호출할 수 있게 한 것이 1번 3. 함수.apply(null, 파라미터인자 배열) : apply의 첫번째 인자를 null로 하고, 두번째 인자를 배열형식으로 한다면 1,2번과 같은 결과가 나온다. apply의 사용 apply(this로 보내고 싶은 객체, 파라미터인자 배열) const obj = { msg : 'hello' } function print(){ console.log(this.msg); } print.apply(obj); // 결과: hello가 출력된다. 이것은 흡사 obj안에 print함수를 넣은 것과 같은..
arguments VS parameter arguments VS parameter arguments : 함수를 호출할 때 함수에 전달된 인자들 (배열과 유사하지만 배열은 아니고, arguments 객체의 인스턴스) parameter : 함수에 정의된 변수. 자바스크립트에서는 함수에 정의된 변수의 개수와 다르게 함수를 호출할 수 있다. function print (a){ // parameter가 1개 console.log(a); } print(1, 2); // 호출할때는 두개의 데이터를 넣을 수 있다. 이 때, 1과 2라는 데이터가 arguments 이다. arguments는 배열처럼 함수로 전달된 인자들의 값을 가지고 있다. arguments[0] : 함수로 전달된 인자들 중 첫번째 값 arguments.length : 함수로 전달된 인자의 개..
클로저(closure) 클로저(closure) 내부함수가 외부함수의 맥락에 접근할 수 있는 것 function outter(){ var title = 'Hello world'; return function (){ alert(title); } } var inner = outter(); inner(); 외부함수가 종료된 이후에도 내부함수에서 외부함수의 지역변수에 접근할 수 있다. 위의 코드에서 outter()가 한번 실행되고, 그 결과로 반환된 함수가 inner에 할당 되었다. outter는 이미 종료되었지만, inner 함수를 호출할 때 마다 outter의 지역변수인 title에 접근이 된다. private variable 정보를 아무나 수정하는 것을 방지하기 위해 사용된다. function factory_movie (titl..

티스토리툴바