Front-End 검색 결과

해당 글 41건
[JavaScript] 콜백 함수 (Callback Function)

콜백 함수 (Callback Function) 콜백 함수란, 영어 뜻 그대로 callback은 call (부르다, 호출하다) 과 back (뒤돌아오다, 되돌다) 의 합성어로 되돌아 호출해달라는 명령입니다. 쉽게 설명하면 함수 A 를 호출하면서 '특정 조건일 때 함수 B 를 실행하여 나에게 알려줘!'라는 뜻이죠 어려운 용어로 설명하면, 콜백함수는 다른 코드 (함수 또는 메서드) 에게 인자로 넘겨줌으로써 그 제어권도 함께 위임하는 함수란 것입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것입니다. 줄글로 설명하면, 어려우니 예제를 통해 구체적으로 살펴보겠습니다. function fn_sum(a, b, callback) { var sum = a + b; c..
Front-End/JavaScript 2020. 4. 4. 13:31
[JavaScript] this 파헤치기

this 파헤치기 this 는 객체지향언어에서 클래스로 생성한 인스턴스의 의미한다. 하지만 JavaScript 에서의 this 는 어디서든 활용이 가능하다. JavaScript 에서 this 는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this 는 함수를 호출할 때 결정된다고 이해할 수 있다. 전역공간에서의 this 는 전역 객체를 가르킨다. 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 참고로 브라우저 환경에서 전역객체는 window이고, Node.js 환경에서는 global이다. var a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); //..
Front-End/JavaScript 2020. 3. 28. 12:43
[JavaScript] 실행 컨텍스트(Execution Context)

실행 컨텍스트 (Execution Context) 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로서, JavaScript 의 동적언어의 성격을 가장 잘 나타내는 개념이다. JavaScript 는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅의 개념), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다. 실행 컨텍스트라는 개념을 이해하는 것은 개발자의 성장으로서 가장 중요한 핵심이니 꼭 이해하고 넘어가도록 하자. 실행 컨텍스트를 이해하기 전 스택(stack) 과 큐(queue) 의 개념부터 살펴보자. 스택(stack) 은 출입구가 하나뿐인 깊은 우물같은 데이터 구조이다. 비어있는 스택에 순서대로 데이터 a, b, c, d 를 저장..
Front-End/JavaScript 2020. 3. 21. 14:06
[JavaScript] 데이터 타입(기본형과 참조형)

데이터 타입(기본형과 참조형) JavaScript 의 데이터 타입에는 두 가지 종류가 있습니다. 기본형과 참조형입니다. 데이터 타입에 대해 자세히 알아보겠습니다. 1. 기본형 - 값이 담긴 주소값을 바로 복제 ex) 숫자, 문자열, 불리언, null, undefined (null과 undefined 의 차이점이란?), Symbol(ES6추가) 2. 참조형 - 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 ex) 객체, 배열, 함수, 날짜, 정규표현식 ES6에 추가된 Map, WeakMap, set, WeakSet 먼저, 기본형은 불변성(Immutability) 의 성격을 띄우는데, 불변성을 이해하기 위해서는 메모리와 데이터에 대한 지식과 식별자와 변수의 개념을 이해해야합니다. 이번엔 메모리..
Front-End/JavaScript 2020. 3. 16. 22:52
[React] 클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트 1. 함수형 컴포넌트 장점 - 클래스형 컴포넌트보다 선언하기가 간편합니다. - 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. - 프로젝트를 완성 후 빌드하고 배포할 때에도 파일 크기가 작습니다. 2. 함수형 컴포넌트 단점 - state 와 라이프사이클 API 의 사용이 불가능했지만, React v16.8 업데이트 후 Hooks 기능이 도입되면서 해결되었습니다.
Front-End/React 2020. 2. 9. 21:41
[React] 3. 리액트 JSX

React JSX JSX 는 JavaScript 의 확장 문법으로 XML 과 유사하게 생겼습니다. 이런 형식으로 작성된 코드는 Browser 에서 실행되기 전 코드가 번들링(Bundlering, 파일을 묶듯이 연결)되는 과정과정에서 바벨을 사용하여 일반 JavaScript 코드로 변환됩니다. function App() { return ( Hello react ); } 위 코드는 아래와 같이 변환됩니다. function App() { return React.createElement("div", null, "Hello " React.createElement("b", null, "react")); } JSX 를 사용하면 간편하게 UI 를 렌더링할 수 있습니다. 3.1 JSX 의 장점 (1) 보기 쉽고 익숙함 ..
Front-End/React 2020. 2. 2. 15:53