전체 글 (112) 썸네일형 리스트형 메모이제이션 메모이제이션 패턴이란 결과를 메모리에 기억시켜 다음 작업에서 재사용하는 자바스크립트 패턴입니다. 예시 상황 나는 컨퍼런스 기간에 특정 업체에 고용된 단기 프리랜서 개발자이고, 컨퍼런스에 찾아온 손님들이 키오스크로 컨퍼런스 근처 식당을 찾을 수 있도록 서비스를 제공하는 개발을 맡았다고 가정합니다. 🍕 키오스크로 식당을 찾아주는 api가 호출될 때마다 비용이 발생하고 있고, 업체는 나에게 해당 비용을 절감할 방안을 요구합니다. 해결 방안 개발자인 나는 검색한 결과를 어딘가에 저장해놓고 다른 참가자가 같은 요리를 검색하면 저장한 데이터를 다시 반환하는 방법을 제시합니다. // 컨퍼런스라는 객체가 있다고 가정한다 var Conference = Conference || {}; // 이 컨퍼런스 객체는 memoiz.. React 리랜더링 조건과 랜더링 성능 최적화 방법 React 에서 컴포넌트 렌더링을 수행하는 조건은 ? state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다 새로운 props가 들어올 떄 부모 컴포넌트로부터 새props가 들어오면 자식 컴포넌트는 재렌더링 된다. 기존 props가 업데이트 됐을 때 부모 컴포넌트로부터 받은 props 값을 받은 자식 컴포넌트도 재렌더링 된다 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다. 렌더링 성능 최적화 방법 state 선언 위치 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것.. JSX란 무엇인가 JSX란 무엇인가? JSX를 리액트에서 무조건 사용해야하는것은 아니지만, JSX를 통해 얻는 이점이 많아 대부분의 개발자가 사용한다. 그렇다면 JSX란 무엇일까? JSX는 JavaScript XML의 줄임말로 XML 형태로 작성되며, 아래 문법은 JavaScript에 XML을 확장한 JSX의 문법이다. const element = Hello, World!; 그밖에 JSX의 특징은 아래와 같다. ▪ JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. ▪ 브라우저에서 실행되기 전에 바벨을 통해 일반적인 자바스크립트 코드로 변환된다. ▪ 공식적인 자바스크립트 문법은 아니다. ▪ JSX 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다. JSX 변환 예제 J.. React vs Angular vs Vue 비교 Front-end 프레임워크 1. 프레임워크란? 애플리케이션 구조에 대한 가이드라인과 기반 코드를 제공하는 개발 툴 2. Front-end 프레임워크 사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크 최근에는 웹이 복잡해지며 SPA 개발을 위한 프레임워크가 각광 받고 있다. JavaScript 프레임워크의 등장 모바일 / 웹의 발달로 화면에서 표현해야 하는 Front-end의 개발이 복잡해지며 JS를 이용한 프론트엔드 구성이 주목 받고 있다. 웹 규모가 커지며 JS 파일이 많아져 관리가 어려워졌고, 이를 관리하는 프론트엔드 프레임워크가 등장 React / Angular / Vue.js 비교 가장 먼저 발표된 프레임 워크는 Angular. 이후 React, Vue.js 순서로 개발.. 함수 스코프와 블록 스코프 1. 블록 스코프, 함수 스코프 (1) 스코프란? 스코프(scope)는 변수에 접근할 수 있는 범위를 말한다. 스코프는 크게 전역 스코프와 지역 스코프로 나눌 수 있다. 전역 스코프(global)는 어디에서든 해당 변수에 접근 가능한 걸 의미한다. (전역변수) 지역 스코프(local)의 경우, 한정적인 범위에서 해당 변수에 접근이 가능하다. (지역변수) 지역 스코프에는 함수 스코프와 블록 스코프가 있으며 이 포스팅에서는 두 스코프에 대해 알아본다. (2) 함수 스코프와 var 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 한다. 함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미한다. 아래 예시처럼 함수 외부에서 aa를 호출하면 undefined.. 클로저란? 클로저란? 클로저는 내부 함수가 정의될 떄 외부 함수의 환경을 기억하고 있는 내부 함수를 말합니다. 외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수나 함수에 접근하여 사용할 수 있습니다. 클로저 함수의 기본 형태 // 외부 함수 function closuer() { // 변수 정의 var count = 0; // 내부 함수(클로저) 선언 function inner() { return ++count; } // 내부 함수 반환 return inner(); } // 익명 함수를 이용한 방법 function closure() { var count = 0; // 익명 함수(클로저) 반환 return function() { return ++count; } } 클로저 함수 사용 예시 function .. 호이스팅 이란? 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅시 undefined로 변수를 초기화 한다. 반면 let과 const로 선언한 변수의 경우 호이스팅시 변수를 초기화하지 않는다. 쉽게 이야기하면 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다는 것을 의미한다. 바로 코드를 살펴보자! var로 선언한 변수 호이스팅 var로 선언한 변수는 호이스팅시 undefined로 변수를 초기화 한다. console.log(a) var a = 7 /* undefined */ let, const 로 선언한 변수 호이스팅 let과 const로 선언한 변수는 호이스팅시 변수를 초기화 하지 않는다. 호이스팅이 되지 않은것처럼 보이지만, .. promise와 async/await의 차이점 Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다. Promise 에는 3가지 상태가 있는데 Pending (대기) Fulfilled (이행) Rejected (실패) 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다. Promise 사용 예시 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve('resolved'); } else { reject('rejected'); } }); pro.. 이전 1 2 3 4 5 ··· 14 다음
