허도경, limewhale

메모이제이션(memoization)이란? useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 알아보겠습니다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. useMemo와 useCallback을 너무나도 어렵게 설명하는 곳이 많아서 여기서는 간단하게만 알아보겠습니다. 1. useMemo 메모이제이션된 '값'을 반환한다. 용법 useMemo(() => fn, deps) useMemo는 deps 가 변한다..

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​ 1) for( ) 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다. 중간에 "break;" 문을 만나면 반복문을 중단합니다. for ([initialization]; [condition]; [final-expression]) statement​ ​ 2) forEach( ) 배열의 각 요소에 대해 callback을 실행합니다. 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다. array.forEach(callback(currentvalue[, index[, array]])[, thisArg]) ​ 3) map( ..

💡 WEB STORAGE 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념으로 사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다..

React Hook 주의점 최상위 바깥에 선언해서 실행 순서가 일정하게 하는 것이 중요합니다. 조건문 안에서 Hook를 실행시키지 않습니다. hook안에 hook을 사용하지 않습니다. Hook을 일반적인 JavaScript 함수에서 호출하지 않습니다. React 함수 컴포넌트에서 Hook을 호출하세요. Custom Hook에서 Hook을 호출하세요. 리액트에서 Hook을 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않습니다. Hook은 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState와 useEffect 가 여러 번 ..

스크립트를 작성하다 보면 이벤트에서 currentTarget과 target이 구분되어 존재하는 것을 알 수 있습니다. 분명 차이점이 존재하기 때문에 두 개가 구분되어 사용되는 데 그 차이점을 알아보려고 합니다. 💡 currentTarget과 target의 차이점 currentTarget : 이벤트 리스너가 달린 요소 target : 실제 이벤트가 발생하는 요소 좀 더 쉽게 이해하기 위해 예시를 통해서 알아볼게요. Click!! const currentTarget = document.getElementById('event-wrap'); currentTarget.addEventListener('click',(event)=>{ console.log('currentTarget : ', event.currentT..

React를 공부하다 보면 useMemo와 useEffect의 기능이 비슷하면서 다르다고 느끼는데 그 차이점을 처음에 정확히 이해하기가 쉽지 않습니다. 그래서 두 기능의 차이점을 알아보고 어떠한 상황에서 두 기능을 각각 사용하는지 정리해보려고 합니다. useMemo와 useEffect의 기능을 공식 문서에 정의되어 있는 내용을 다시 한번 살펴볼게요. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 공식문서에 보면 useMemo는 [메모이제이션된 값을 반환합니다. “생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것..

ES6에서 새롭게 추가된 변수 선언 방식 let, const와 기존 ES5에서 사용하던 변수 var가 어떠한 차이점이 있고 어떻게 사용해야 하는지 알아보려고 합니다. 스크립트에서 값을 할당하는건데 그렇게 꼭 구분을 지어야 하나? 아무거나 사용하면 안 돼?라고 생각하시는 분들도 있을지 모르겠어요. 하지만 무엇이든 이유 없이 탄생하는 문법은 없고 새로운 문법이 탄생하는 이유는 지금보다 더 나은 코드를 사용하기 위해서이기 때문에 우리는 목적에 맞게 해당 문법을 사용해야 합니다. 기존 자바스크립트에서 변수를 선언하는 방식은 "var" 오직 하나였습니다. 처음에는 한 가지 방법으로만 사용하니 편하다고 생각할지도 모르지만 이 방법은 편안함보다는 코드상에서 더 큰 문제점들을 만들었습니다. ES5의 "var"에 대한 ..

우리는 CSS의 속성을 이용하여 화면에 특정 영역을 보이지 않게 처리할 때 display:none과 visibility:hidden 속성을 사용하게 됩니다. 두 속성 모두 화면에 정의하면 결과는 똑같이 화면에서 콘텐츠가 사라지게 되지만 이 둘의 속성을 사용하는 목적은 명확하게 다릅니다. 지금부터 이 둘의 차이점을 같이 알아보도록 해요. 1. 영역의 인식 display:none과 visibility:hidden의 속성에서 가장 큰 차이점은 바로 영역의 인식입니다. 두 속성 모두 화면상에서 콘텐츠 영역을 동일하게 숨기는 역할을 하지만 그 둘에는 엄청난 차이가 있습니다. display:none 속성을 이용하면 해당 콘텐츠가 안 보이게 되면서 해당 콘테츠가 가지고 있던 있던 영역 또한 사라지게 됩니다. 하지만 ..