JavaScript48 함수와 바인딩, this 이 글은 이 포스트의 연장선에 있습니다. 같은 동작을 가진 함수를 바인딩하더라도, 경우에 따라서 실제로는 다른 값을 가지는 경우가 있습니다. 함수의 선언 방식에 따라 이벤트를 어떻게 바인딩하는 것이 좋을지에 대해 알아보겠습니다. this 이벤트에 함수를 바인딩 할 때, this는 특히 신경써야 하는 부분입니다. this에 대한 정보는 아래 그림처럼 실행 콘텍스트 객체에 포함되어 있습니다. 그러나 호출에 따라 다른 값이 할당되기 때문에 함수 내부 구조만 보고서는 this 값을 정확히 예측하기란 어렵습니다. 때문에 this가 어느 곳을 바라보고 있는지 알아내려면 아래 내용들을 살펴보아야 합니다. 함수의 종류에 따라 일반적인 함수와 화살표 함수가 가리키는 this는 서로 다릅니다. const obj = { f.. 2022. 3. 3. react에서 <script> 방식으로 js 파일 로드해야 할 때 react로 개발을 하던 중, HTML 파일에서 곧바로 제가 맞닥뜨린 상황의 경우 외부 라이브러리 파일이 본문의 특정 dom 요소를 찾아 액션을 부여하는 식으로 작동하는 구조였는데, 리액트 프로젝트의 경우 html은 먼저 로드되고, dom 요소들이 나중에 생성되기 때문에 먼저 실행된 외부 라이브러리들이 dom 요소를 찾지 못하는 결과로 이어지게 되었습니다. 그렇다면 컴포넌트들이 모두 로드 된 다음에 외부 파일을 불러오면 되지 않을까? 하는 생각이 들었고 요소를 동적으로 생성해서 붙여주면 되겠다는 그럴듯한 추측을 해보았습니다. 제가 시도한 방법은 아래와 같습니다. util/loadExternalJS.js function loadExternalJS() { // 필요한 파일들을 동적으로 생성해줍니다. cons.. 2022. 1. 11. react-canvas-draw 사용법 최근 학교 팀 프로젝트로 온라인 드로잉 웹 게임을 만들었는데, react-canvas-draw라는 라이브러리가 있기에 사용해보았습니다. 라이브러리 깃 저장소에 공식 튜토리얼은 존재했지만 한국어 자료가 거의 없다시피하여 이후에 사용하실 분들을 위해 간단한 사용법을 남겨봅니다. 설치 npm 또는 yarn을 이용해 모듈을 설치해줍니다. npm install react-canvas-draw --save yarn add react-canvas-draw 사용법 import React from "react"; import ReactDOM from "react-dom"; import CanvasDraw from "react-canvas-draw"; ReactDOM.render(, document.getElementBy.. 2021. 12. 26. JavaScript의 위임 (Delegation of JavaScript) 이번 시간에는 자바스크립트의 위임 방식에 대해 알아보고자 합니다. 단, 여기에서 말하는 위임은 캡쳐링과 버블링을 포함하는 이벤트 위임(event delegation) 또는 전파(propaganation)가 아니라 지난 시간에 알아 본 프로토타입과 이어지는 작동 방식에서의 위임입니다. 클래스 vs 위임 추상화가 가능한 유사한 속성을 가진 객체들이 있다고 할때, 이를 앞에서 살펴봤던 클래스를 이용해 모델링 해보면 이런 모습이 됩니다. class Person { name; age; constructor(name, age) { this.name = name; this.age = age; } } class Student extends Person { studentNumber; constructor(name, ag.. 2021. 11. 19. JavaScript의 프로토타입 (Prototype of JavaScript) 지난 글에서 상속과 클래스를 설명하며 프로토타입과 밀접한 관련이 있다고 언급했었습니다. 자바스크립트에서 프로토타입은 객체를 상속받기 위해 필요한 프로퍼티입니다. 지금 당장 개발자 도구를 켜고 아무 object 객체를 생성하여 객체의 속성을 확인해보면 [[prototype]] 이라는 속성을 갖고있는 것을 알 수 있습니다. 자바스크립트의 객체는 상속되는 속성과 메소드들을 객체의 생성자에 있는 [[prototype]] 에 정의합니다. 이 프로토타입 속성은 다른 상위 프로토타입 속성에게 또 다른 속성이나 메소드를 상속 받을 수 있습니다. 이러한 연쇄 과정을 프로토타입 체인이라고 부르며 자바스크립트는 이 프로토타입을 기반으로 동작하게됩니다. 프로토타입 체이닝 프로토타입 체이닝의 과정을 한 번 살펴보겠습니다. 하위.. 2021. 9. 27. JavaScript의 클래스 (Class of JavaScript) 이번 시간에는 자바스크립트의 클래스 개념에 대해 알아보겠습니다. 객체지향 프로그래밍에서 클래스는 빼놓을 수 없는 개념이지만, 자바스크립트의 객체 체계는 이러한 클래스의 개념과 그리 잘 맞는 체계는 아니었습니다. 실제로 자바스크립트에 class라는 키워드가 명세에 추가된 것도 ES6가 되고 나서부터입니다. 결국 다른 언어들에서 지원하는 클래스와 자바스크립트의 클래스는 모양만 비슷할 뿐, 그 내부는 전혀 다른 방식으로 동작하고 있다는 것이죠. 사실 너무나 흔한 개념이라 인지하지 못하고 있는 경우가 많지만, 클래스 또한 디자인 패턴의 일종입니다. 처음부터 객체지향 프로그래밍을 염두한 자바와 같은 언어는 클래스가 모든 설계의 기본이 되는 개념이지만, 절차적 프로그래밍을 지원하는 다른 코드에선 딱히 클래스를 사용.. 2021. 9. 11. 이전 1 2 3 4 5 6 7 8 다음
