프도

비동기처리… Callback 콜백이란? 함수가 끝나고 난 뒤에 실행되는 함수. 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다. 왜? 자바스크립트는 이벤트 중심의 언어이다. 즉, 자바스크립트는 이벤트의 값이 반환될 때까지 기다리지 않고 다음의 이벤트를 계속 실행한다. 따라서 비동기적인 함수를 실행할 경우, 대표적으로 API 요청 등에서 특별한 처리를 해주지 않으면 함수를 원하는대로 실행하기 어렵다. function first(){ // Simulate a code delay setTimeout( function(){ console.log(1); }, 500 ); }function second(){ conso..

동기호출 요청에 대한 결과가 동시에 일어난다. 비동기호출 요청에 대한 결과가 동시에 일어나지 않고 요청을 한번데 다받고 이벤트가 준비 되었을 때 응답을 나중에 이루어짐 비동기 작업의 사용성 문제 비동기 작업은 여러 작업을 동시에 수행할 수 있는 장점이 있지만, 의존성이 길게 이어져 있는 비동기 작업들을 처리할 때 곤혹에 치를 수 있습니다. 왜냐하면 비동기 작업이 시작되는 시점은 함수 호출이며, 또한 이 함수 호출 시점에 다음 작업(콜백 함수)도 넘겨줘야 하기 때문입니다. 이런 행태를 이른바 콜백 지옥이라고 합니다. 콜백 지옥에 관련해서는 크게 다루지 않도록 하겠습니다. 종종 콜백 지옥에 의해서 Promise 가 등장했다고 설명하시는 분들도 있는데, 제 견해는 좀 다릅니다. callback 방식보다 Pro..

React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. useEffect 함수형 컴포넌트 안에서 useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?) useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다. 그래서 클래스형 컴포넌트의 componentDidMount ..

함수의 로컬 상태를 함수 외부에서 변경하는 경우, side effect가 발생했다고 한다. 이 개념을 react에 적용하면, function component 외부에서 로컬 상태의 값이 변경되는 것이 side effect라고 할 수 있다. 흔한 경우로 비동기 처리가 있을 것이다. 즉, react에서 side effect란, 리액트 컴포넌트가 화면에 렌더링 된 이후에 비동기적으로 처리되어야하는 부수적인 효과들을 side effect라고 일컫는다. React 마운트, 업데이트 과정 / 라이프 사이클 Render phrase에서 리액트는 새로운 props와 state를 바탕으로 Virtual DOM에 반영할 부분을 계산하며, Virtual-DOM을 생성한다. (추가로 갱신의 경우에는 어떤 차이가 있는지 파악한..

01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 side effect 를 수행하는역할을 한다. side effect 를 줄여 그냥 effect 라고 한다. 그래서 훅의 이름은 useEffect 가..

고차 함수는 다른 함수를 전달인자로 받거나 함수 실행의 결과를 함수로 반환하는 함수 를 뜻한다. 스위프트의 함수(클로저)는 일급시민(일급객체)이기 때문에 함수의 전달인자로 전달할 수 있고 함수의 결과 값으로 반환할 수 있다. JS에서 제공하는 map, filter, reduce 고차 함수가 있고 컨테이너 타입(Array, Set, Dictionary 등) 에 구현되어 있다. map은 데이터를 변형하고자 할 때 사용합니다. 기존 데이터를 변형하여 새로운 컨테이너를 만드는데, 기존 데이터는 변형되지 않습니다. 코드의 간결성 재사용 용이 컴파일러 최적화 성능 좋음 모든 요소 각각에 동일한 함수(callback 함수)를 적용한 값들을 모아 새로운 배열을 반환한다. filter와 마찬가지로 기존 배열을 수정하지 ..

자바스크립트에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있습니다. 그 중 종종 사용되는 클로저라는 개념에 대해서 알아보겠습니다. 외부 함수에 접근할 수 있는 내부함수 혹은 이러한 원리를 일컫는 용어인데 스코프에 따라서 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다. 특징으로는 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는다. 예를 들어 한 함수안에 다른 함수가 있다면 그 안의 함수는 바깥에 정의해놓은 변수를 사용할 수 있지만 그 반대는 가능하지 않다 클로저의 활용 데이터를 보존하는 함수 const add = function (x) { //외부 함수의 변수 x return function (y) ..

자바스크립트에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. (자바스크립트가 나온 시점을 고려했을 때,) 자바스크립트에서 함수는 아래와 같이 특별하게 취급됩니다. 1. 변수에 할당 가능 2. 다른 함수의 인자로 전달 가능 3. 다른 함수의 결과로서 리턴될 수 있다. 아래는 변수 square에 함수를 할당하는 함수 표현식입니다. 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다. 함수 표현식은 할당 전에 사용할 수 없습니다. square(7); // --> ReferenceError: Can't find variable: square */ const square = function (num) { return..

const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다. removeChild 도 있는데 remove와 차이가 있다 따로 블로그 하겠습니다

console.log(tweetDiv)// tweetDiv.textContent = 'dev';//textContent를 이용해 문자열을 입력합니다. console.log(tweetDiv) // dev// 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다. 앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다. tweet.classList.add('tweet') console.log(oneDiv) // dev tweet 클래스를 추가합니다