WEB (37) 썸네일형 리스트형 [Javascript] 클래스(Class) 지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); 클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다. class User2 { constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } const tom = new User2("Tom", 10); cl.. [Javascript] 상속, 프로토타입(Prototype) const user = { name : 'Mike' } user.name; // "Mike" user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false hasOwnProperty는 자신이 프로퍼티를 가지고 있는지 확인하는 함수이다. user 객체에 name이라는 프로퍼티가 있으므로 true가 나오고, age라는 프로퍼티는 없으므로 false가 나온다. hasOwnProperty는 만든 적이 없는데 어디에 있는 것일까? __proto__라는 객체에 들어있다. 객체에서 프로퍼티를 찾으려고 하는데 없으면 여기에서 찾는다. const user = { name : 'Mike' hasOwnProperty : function(){ console.. [React] 이벤트 처리(Handling Events) 1. 미리 함수를 만들어놓고 전달2. 이벤트 리스너에 직접 함수 작성 이 방법의 장점은 매개변수를 전달할 때 편하다는 것이다. [Javascript] call, apply, bind 함수 호출 방식과 관계없이 this를 지정할 수 있는 call, apply, bind 메서드에 대해 알아보자. call call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName(){ console.log(this.name); } showThisName(); // ? showThisName 메서드를 호출했을 때 아무것도 뜨지 않는다. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 아무것도 뜨지 않는 것이다. showThisName.call(mike); // Mike showThi.. [React] CSS 작성법(module css) 1. inline style CSS 파일을 따로 작성하지 않고 html 태그에 바로 작성한다. 객체(중괄호)로 작성해야 한다. 2. index.css 파일에 작성 index.css는 전체 프로젝트에 영향을 미치고 App.css는 앱 컴포넌트에 한정된 내용들이 들어가 있다. 그런데 한 가지 문제점이 있다. App.css는 앱 컴포넌트에만 적용되는 것이 아니다. App 컴포넌트에 있는 box와 Hello 컴포넌트에 있는 box 모두에 Hello.css가 적용되었다. 같은 클래스명이라서 오버레이된다. CSS 파일들이 각 컴포넌트에 종속되는 것이 아니라 head 부분에 들어가기 때문에 전 페이지에 영향을 미치게 된다. 3. CSS module 각 컴포넌트에 특화된 CSS를 작성하기 위해서 모듈을 활용할 것이다... [Javascript] setTimeout / setInterval setTimeout : 일정 시간이 지난 후 함수를 실행 function fn(){ console.log(3) } setTimeout(fn, 3000); setTimeout은 두 개의 매개변수를 갖는다. 첫 번째는 일정 시간이 지난 뒤 실행하는 함수이고, 두 번째는 시간이다. 3000은 3초를 의미한다. setTimeout(function(){ console.log(3) }, 3000); 함수를 매개변수 안에 직접 쓰는 것도 가능하다. const tId = function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Mike'); clearTimeout(tId); 함수에 인수가 필요하다면 시간 뒤에 적어준다. 'Mike'는 name에.. [Javascript] 어휘적 환경(Lexical Environment), 클로저(Closure) 어휘적 환경(Lexical Environment)let one;one = 1;function addOne(num){ console.log(one + num);}addOne(5);코드가 위에서부터 아래로 어떻게 동작하는지 알아보자.Lexical 환경one : 초기화X 사용 불가addOne : function 사용 가능프로그램이 실행되면 스크립트 내에서 선언한 변수들이 lexical 환경에 올라간다. let으로 선언한 변수는 초기화 되어 있지 않기 때문에 사용할 수 없다. 반면 함수 선언문은 바로 초기화되어 사용할 수 있다. (함수 표현식은 불가능) let one;Lexical 환경one : undefined 사용 가능addOne : function아직 할당은 안 되어 있기 때문에 undefined.. [Javascript] 나머지 매개변수(Rest parameters), 전개 구문(Spread syntax) 인수 전달 function showName(name){ console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // ? showName(); // undefined 자바스크립트에서 함수에 넘겨주는 인수의 개수에는 제한이 없다. 인수의 개수를 정해놓고 함수를 만들어도, 함수를 호출할 때 정확히 그 개수를 맞출 필요가 없다. 따라서 위 코드에서 에러가 발생하지 않는다. 함수의 인수를 얻는 방법은 두 가지가 있다. 1) arguments 2) 나머지 매개변수 과거에는 argument만 사용할 수 있었지만 지금은 여러 가지 장점이 있는 나머지 매개변수를 쓰는 추세이다. **화살표 함수에는 argument가 없다!! 1) argument.. 이전 1 2 3 4 5 다음
