프론트엔드 개발

React에서 자주 사용되는 setState를 사용하는데 문제가 있었고, 어떠한 원리로, 비동기 동작을 하는지 이해하고 사용하려 한다. setState 역할 setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리 렌더링 됩니다. state와 props의 차이점 props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다. 더 자세히 알고 싶다면 여기를 참고하세요 언제 setState가 비동기로 작동할까? import React, { useState } from "react"; func..

ECMAScript 6부터 일 년 단위 릴리스(yearly release)로 변경된 이후로, 해마다 연도별 명세가 완성되고 공개되고 있다. 2020 6월18일 ECMAScript 2020(ECMA-262 11번째 에디션)이 공식적으로 릴리스 되었다. ECMAScript 2020 릴리스된 내용들을 살펴보겠다. Optional Chaining (?.) 연산자인 ?.는 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, undefined를 반환한다. const title = data && data.article && data.article.title // 위의 표현식은 다음의 optional chaining 연산자를 통해 동일하게 표현될 수 있다. const title = dat..

프로그래밍 패러다임 - 절차 지향 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 함수형 반응형 프로그래밍 함수형에 특화된 프로그래밍 언어들 F# Haskell OCaml Erlang 함수형 프로그래밍을 지원하는 언어들 Javascript Kotlin Go Python Java C++ 등 1958년 최초의 함수형 프로그래밍 언어인 LISP가 나오게 되었는데, 최근에 함수형 프로그래밍이 다시 화제가 된 이유는, 요즘 AI, IoT, 빅데이터, 비트코인이 화제가 되면서, 방대한 데이터를 빠르게 계산해서 병렬적, 안정적으로 처리하는 것의 중요성이 부각되면서 다시 주목받기 시작한 것 파이프라인과 비유해 보면, 인풋(입력)을 넣으면 처리과정을 거쳐서 아웃풋(결과)가 나오게 되는 것이며, 외부에서는 파이..

JavaScript는 CallStack, Event Queue를 이용하여 Single Thread 기반으로 동작한다. Single Thread 기반에서는 단 하나의 CallStack만 존재하기 때문에 네트워크 요청 등 비용이 많이 드는 연산을 수행하게 되면 매우 비효율적으로 동작된다. 이러한 문제점을 어떻게 해결해나갈까? 자바스크립트 자바스크립트 엔진은 실행할 전체 함수를 실행 직전에 간단히 변수 및 함수 선언들만 스캔하는 JIT 컴파일 과정을 거치기 때문에 컴파일 과정을 갖는 인터프리터 언어라고 부릅니다. 자바스크립트 엔진 자바스크립트 엔진의 대표적인 예는 Google V8 엔진입니다. V8 은 Chrome 브라우저와 Node.js에서 사용합니다. 엔진의 주요 두 구성요소는 Memory Heap : 메..

JS에서 prototype이 필요한 이유 function Person(name, fir, sec, thi) { this.name = name; this.fir = fir; this.sec = sec; this.thi = thi; this.sum = function() { return this.fir + this.sec + this.thi; } } const kim = new Person('kim', 100, 100, 100); console.log(kim.sum()); // 300 kim.sum = function(){ return (this.fir + this.sec )/ this.thi } console.log(kim.sum()); // 2 const park = new Person('park', 5..

자바스크립트에서 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 함수의 호출 방식 1. 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. apply / call / bind 호출 const tell = function () { console.dir(this); }; // 1. 함수 호출 tell(); // window // 2. 메소드 호출 const person = { say: tel..

undefined undefined는 데이터 타입이자, 값을 나타냅니다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다. temp라는 변수를 선언하였지만, 값을 할당하지 않았기 때문에 temp변수에 undefined를 할당하게 됩니다. 변수만 선언했지만 값을 가지게 되어 undefined는 값이면서 데이터 타입인 것입니다. let currentUser; console.log(currentUser, typeof currentUser); // undefined, "undefined" null null 타입 변수의 경우는 명시적으로 '값이 비어있음'을 나타내는데 사용합니다. 다시 말해, 아무것도 참조하고 있지 않다는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용합..

정규표현식이란? 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 문자 검색(search), 문자 대체(replace), 문자 추출(extract)와 같은 역할을 수행합니다. 예를들어, 많은 텍스트 중에 전화번호의 텍스트를 찾거나 웹사이트의 패턴을 찾을 수 있습니다. 이렇게 찾아진 패턴을 다른 문자열로 변환시킬 수도 있습니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit https://example.com. Officia veniam molestias iure rem vero totam fuga rerum consequatur sed placeat? Sed, fugit dolor voluptatem libero...