Headwing

상속과 프로토타입 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. // 생성자 함수 function Circle(radius) { this.radius = radius; } // Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 // 공유해서 사용할 수 있도록 프로토타입에 추가한다. // 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function () { return Math.PI * this.radius ** 2; }; /..

1. DOM이란 ? “DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다. ex. element, 문자열, 혹은 코멘트” -MDN- 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 문서를 노드와 객체로 나타냅니다. 위 사진을 보고 HTML이 DOM이라고 생각할 수 있지만 그렇지는 않습니다. IDE에서 작성한 HTML은 DOM이 아니고 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM입니다. 이렇게 하는 이유는 프로그래밍 언어가 페이지와 상호 작용할 수 있게 하기 위해서 입니다. DOM..

Component란? 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 리액트에서 개발하는 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려줍니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요합니다. 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 그렇다면 기존 명령형 프로그..

ref란? HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용한다. 예를 들어 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등 이 있다. 왜 DOM API를 쓰면 안될까? document.getElementsByClassName과 같은 자바스크립트 문법을 쓰는 것..

데이터 바인딩이란? 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다. 단방향 데이터 바인딩 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다. [JS(Model) -> HTML(View)] 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접..

이번주는 알고리즘 주차였다. 일주일 동안 프로그래머스 중간 단계문제들 26문제를 풀었다. 사실 자바스크립트로 알고리즘 문제는 처음 풀어봐서 처음에는 달리기반에 온 것을 약간 후회할 뻔 했지만, 그래도 일주일 동안 실력이 많이 늘은 것이 보여서 매우 뿌듯해하는 중이다. 일주일 전만해도 깊은 복사, 얕은 복사도 모르고 call by value도 몰랐던 나였다ㅋㅋㅋ 알고리즘뿐 만 아니라 자바스크립트라는 언어 자체에 대한 이해도가 높아졌다. ES라는 자바스크립트의 언어 규격, 스펙에 대해 알게 된 점도 많다. 특히나 ES5에서 ES6 (정확히는 ES 2015이다.)으로 넘어오면서 달라진게 많아졌다고 한다. 가장 중요한 3가지에 대해 설명하자면 먼저 let, const 키워드가 추가되었다. 기존의 변수는 함수 s..

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 컴포넌트가 real DOM으로 re-rendering이 되기 전에 re-evaluate(재평가)를 거친다. 먼저 새로운 state인 {name: "진도사우르스"}를 가지고 해당 컴포넌트(함수) 재실행(re-run)한다. 그 과정에서 컴포넌트 내부 구조는 모두 재생성(re-creation)하게 된다. 그런 뒤에 react가 변..

유사배열(Array-Like Object)이란 이름 그대로 배열과 유사한 객체를 말한다. 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 자바스크립트에서 유사배열을 사용하기 위해서는 두 가지 조건을 성립해야한다. 먼저 숫자 형태의 indexing이 가능해야하는 것이고, 두번째로는 length 속성을 포함해야하는 것이다. 이는 유사배열을 배열처럼 사용하기 위한 최소한의 조건이다. 배열과의 차이점은 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이다. 이를 해결하기 위해 먼저 Array..