화살표 함수와 일반 함수의 차이점은?
화살표 함수는 일반 함수보다 함수를 간단히 표현할 수 있는 ES6 문법이다. 그런데 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 this에 대한 바인딩이 없다. 또한 화살표 함수는 프로토타입 프로퍼티를 갖고 있지 않아 생성자나 메서드로 사용할 수 없다. 그리고 일반 함수에서는 코드가 실행될 때 암묵적으로 arguments 객체가 전달되어 사용 가능하지만, 화살표 함수에서는 arguments 객체가 전달되지 않는다. 객체 프로토타입으로 메서드를 선언할 때 화살표 함수는 부적합하다.
생활코딩, JavaScript : this (2/5) : 메소드와 this
드림코딩, 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)
코딩앙마, 자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)
==와 ===의 차이점은?
동등 연산자(==)는 두 피연산자의 타입이 달라도 강제로 비교해 불리언 값을 반환한다. 만약 피연산자 타입이 변환된 값이 서로 동일한 경우 true를 반환한다. 반면 일치 연산자(===)는 타입과 값이 모두 같은 경우에만 true를 반환한다.
// == 동등 연산자(equality)
console.log(1 == 1);
// expected output: true
console.log('hello' == 'hello');
// expected output: true
console.log('1' == 1);
// expected output: true
console.log(0 == false);
// expected output: true
// === 일치 연산자(strict equality)
console.log(1 === 1);
// expected output: true
console.log('hello' === 'hello');
// expected output: true
console.log('1' === 1);
// expected output: false
console.log(0 === false);
// expected output: false
생활코딩, JavaScript - 비교 (2/4) : ==과 ===
생활코딩, JavaScript - 비교 (3/4) : ===를 사용하자!
깊은 복사와 얕은 복사의 차이점은?
깊은 복사는 실제 값을 새로운 메모리 공간에 복사하고, 얕은 복사는 주소 값을 복사한다. 따라서 깊은 복사는 원본과 복사본 간의 참조가 끊어지지만, 얕은 복사는 원본과 복사본이 같은 참조 값을 가리킨다. JavaScript에서는 원시 값에서 깊은 복사가, 객체에서는 얕은 복사가 일어난다.
라매개발자, 비전공자용 자바스크립트 deep copy, shallow copy 설명 | 깊은 복사 얕은 복사
고차 컴포넌트란? (어려움)
고차 컴포넌트는 컴포넌트 로직 재사용을 위한 React의 고급 기술이다. 고차 컴포넌트는 React API의 일부가 아니며, 컴포넌트를 가져와 새 컴포넌트를 반환한다. 사용자 인증 로직 처리, 로딩 중 화면 처리, 컨테이너 컴포넌트와 프리젠테이션 컴포넌트를 분리할 때 주로 활용된다.
Better Coding Academy, What is a Higher Order Component? | React Tutorials
이벤트 바인딩이란?
어떤 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러를 작성해야 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소와 연결시키는 것을 이벤트 바인딩이라고 한다. 이벤트 바인딩 방식은 총 세 가지로, HTML 핸들러, DOM 핸들러, EventListener를 이용한 핸들러가 있다. HTML 핸들러는 HTML 요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식이다. HTML과 JavaScript가 혼용되는 문제가 있으므로 현재는 가급적 지양하는 방식이다. DOM 핸들러는 HTML과 JavaScript가 혼용되는 문제를 해결했지만, 이벤트 핸들러에 하나의 함수만 바인딩할 수 있고, 함수에 인수를 전달하지 못하며, 바인딩된 이벤트 핸들러가 2개 이상일 때 가장 마지막에 추가된 코드의 이벤트 핸들러만 실행된다. 앞서 설명한 두 핸들러의 단점을 보완하기 위해 만들어진 게 EventListener를 이용한 이벤트 핸들러이다. 이 방식은 addEventListener 메서드를 이용해 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 실행될 콜백을 지정한다. 하나의 이벤트에 대해 다수의 핸들러를 추가 가능하고, 캡처링과 버블링을 지원한다. HTML뿐만 아니라 DOM 요소에도 동작한다는 장점이 있다.
초보 개발자의 프로그래밍 공부방, jQuery 이벤트 바인딩
Today Yurim Learned, Javascript Event
라이브러리와 프레임워크란?
라이브러리에는 프로그램 개발을 위해 필요한 기능들이 준비된 코드 형태로 모여 있다. 코드는 사용자가 제어한다. React는 UI 개발의 대표적인 JavaScript의 라이브러리다. 프레임워크는 소프트웨어 개발을 위한 개발 환경, 기반 시설을 제공한다. 개발자는 프레임워크가 제공하는 규칙을 따라가며 개발한다. 코드는 프레임워크가 제어한다.
라이브러리 예시
- Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup...)
- C++의 표준 템플릿 라이브러리 (STL)
- Node.js에서 npm으로 설치한 모듈
- HTML의 클라이언트 사이드 조작을 단순화하는 jQuery
- 웹에서 UI 개발에 사용되는 React
프레임워크 예시
- Java 서버 개발에 사용되는 Spring
- Python 서버 개발에 사용되는 Django, Flask
- 안드로이드 앱 개발에 사용되는 Android
- 아이폰 앱 개발에 사용되는 Cocoa Touch
- 웹 개발에 사용되는 Angular, Vue.js 등
- Java 기반의 JSP를 위한 프레임 워크 Struts
- Ruby로 작성된 MVC패턴을 이용하는 Ruby on Rails
생활코딩, WEB2 JavaScript - 36.UI vs API
생활코딩, WEB2 JavaScript - 35.라이브러리와 프레임워크
npm이란?
npm(node packaged manager)은 Node.js로 만들어진 모듈을 웹에서 다운로드하고 관리한다. JavaScript 패키지 매니저이고, Node.js에서 사용 가능한 다양한 모듈을 패키지화해서 모아두는 저장소이다. 설치와 관리를 담당하는 CLI를 제공한다. 여러 JavaScript 개발자들이 유용한 패키지를 만들어 npm에 오픈 소스를 공개한다. npm은 "npm install <패키지명>" 명령어로 설치할 수 있다. 한편 yarn이라는 패키지 매니저도 있는데, yarn은 Facebook에서 개발했으며 npm보다 서버 속도가 빠르다.
React의 useEffect, useCallback 등을 사용할 때 의존성 배열을 받는데, 이 배열의 역할은?
useEffect의 의존성 배열(deps)은 두 번째 매개변수로, 의존성 배열의 내용이 변경된 경우, 부수 효과 함수(이펙트 함수)가 실행된다. 의존성 배열 속 값이 바뀔 때만 렌더링되는 특징을 이용해 state 혹은 props 값이 변경될 때 특정 함수를 실행하거나, 컴포넌트가 마운트될 때 API를 이용해 데이터를 가져올 때 주로 사용된다. 빈 배열을 넣으면 최초에 마운트될 때 한 번만 호출되게 할 수 있다. 이펙트 내부에서 사용되는 모든 변수는 의존성 배열에 명시해야 버그가 발생하지 않는다. useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 훅으로 함수 안에서 사용하는 상태나 props가 있다면 의존성 배열에 추가하게 된다. 추가하지 않으면 함수 내에서 해당 값들을 참조할 때 가장 최신 값을 참조한다는 보장이 없다. 의존성 배열에 넣은 값이 변하는 경우에만 함수를 새로 만들게 된다.
별코딩, React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈
별코딩, React Hooks에 취한다 - useCallback 짱 쉬운 강의 | 리액트 훅스 시리즈