log4me

리액트에서 성능을 최적화 할 수 있는 방법에는 여러 가지가 있다. 이번엔 그 중에서도 리액트 컴포넌트를 메모리에 저장하여(memoization) 불필요한 리렌더를 방지하는 방법에 대해 알아보겠다. Memoization이란 메모이제이션은 연산의 실행 결과를 캐시에 저장해두고 동일한 연산이 반복될 때, 입력값이 전과 같다면 캐시된 결과를 반환하고 다르다면 연산을 재수행하여 새로운 결과를 반환하는 최적화 기법이다. 리액트 컴포넌트의 Memoization 기본적으로 리액트는 내부 state나 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더 될 때 shouldComponentUpdate() 메서드의 리턴값 혹은 React.memo 의 두번째 인자로 전달한 비교 함수(함수형 컴포넌트)의 리턴값이 true일 ..

현상 redux-saga의 call() 메서드를 사용하던 중 발생한 에러이다. Error: call: argument of type {context, fn} has undefined or null `fn` 원인 call() 메서드의 두 번째 파라미터로 전달해야하는 인자(action.payload)의 위치를 잘못 작성했던 것이 문제였다. function* addSaga(action) { try { const result = yield call(api.addParticle(action.payload)); } } 해결 공식 문서를 확인하니 바로 해결됐다. call() 메서드는 파라미터로 함수와 그 함수에 넣을 인자를 구분하여 받는다. call(fn, ...args) fn: 제네레이터 함수. 혹은 프로미스나 다..

원글: How and when to force a React component to re-render (주의❕ 의역 다수 존재) 리액트는 보통 자동적으로 컴포넌트를 리렌더한다. 하지만 강제적으로 리액트가 컴포넌트를 리렌더하도록 하기 위해서는 리액트의 리렌더 방식에 대한 이해가 필요하다. 웹 발전의 시작에서부터 지금까지 HTML과 CSS가 웹 사이트의 시각적인 부분을 담당하고 있다. 하지만 JavaScript가 등장함으로써 우리는 렌더링된 페이지의 HTML을 읽고 업데이트할 수 있게 되었다. 이를 DOM API라고 한다. jQuery와 같은 라이브러리는 이러한 DOM API 위에 향상된 기능과 호환성을 가진 추상적인 개념의 레이어를 제공했고, 이를 통해 개발자들이 쉽게 웹 어플리케이션을 구축할 수 있게 되..

1. APIs란 API(Application Programming Interfaces)란 프로그래밍 언어로 만들어진 일종의 데이터와 기능들의 모음, 구성정도로 생각하면 이해하기 쉽다. API는 특정 기능에 대한 복잡한 코드를 추상화해서 사용하기 쉬운 문법으로 제공한다는 것이 가장 큰 특징이다. 이를 사용하여 개발자들은 복잡한 기능을 쉽게 구현할 수 있다. 웹앱에서 3D 그래픽 개발을 하려면 어떻게 할 수 있을까? GPU를 직접적으로 다루는 C나 C++과 같은 low-level 프로그래밍 언어로 구현할 수도 있을 것이다. 하지만 저런 것들을 알지 못해도 괜찮다. 자바스크립트나 파이썬과 같은 high-level 프로그래밍 언어로 작성된 API를 사용하여 쉽게 개발할 수도 있다. 자바스크립트에서의 APIs 클..

TL;DR slice() 메서드는 복사+추출의 개념, splice() 메서드는 제거+추출의 개념이다. 때문에 원본 배열이 유지되어야 할 때는 slice() 메서드를, 원본 배열을 변경해야 할 때는 splice() 메서드를 사용한다. 특히 요소를 삭제하고 곧바로 그 위치에 새로운 요소를 삽입하고 싶다면 splice() 메서드를 사용한다. 문제 아래 array 배열의 값은 그대로 유지한 채, 맨 앞의 두 원소가 제거된 새로운 배열을 만들어 출력하려고 한다. 둘 중 어떤 메서드를 써야할까? const array = [1, 2, 3, 4, 5];1. splice() Removes elements from an array and, if necessary, inserts new elements in their pl..

TL;DR Webpack을 통해 직접 구성한 리액트 프로젝트 .env 파일에 환경 변수를 선언할 때 REACT_APP_으로 시작하지 않아도 됨 dotenv 패키지: DefinePlugin을 통해 수동으로 전역 변수 정의 dotenv-webpack 패키지: 플러그인에 new Dotenv() 추가 CRA를 통해 구축한 리액트 프로젝트 변수명은 반드시 REACT_APP_으로 시작해야 함 별도의 설정 없이 /src 디렉토리의 하위 파일에서 process.env로 환경변수 접근 1. 삽질기 '리액트에서 환경변수 사용하기' 라는 키워드로 구글링하면 대부분 dotenv 패키지 설치 -> 프로젝트 루트에 .env 파일 생성 -> REACT_APP_으로 시작하는 변수 작성 -> 변수를 사용하려는 곳에서 r..

1. 깃 403 에러 발생 깃허브 레파지토리에 push를 하려는데 뜬금없이 접근권한이 없다며 403 에러가 발생했다. 8월 13일부터 더이상 깃허브 계정의 비밀번호로 접근할 수 없다고 한다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access '': The reque..

+ 2022.07.13 추가 댓글을 무시할까 하다가 아무래도 나의 작고 다 쓰러져가는 구멍가게 같은 블로그에 이런 의견이 들어오는 일이 또 있을까 싶어 늦게라도 피드백을 남겨본다. 먼저 이 글은 티스토리에 등록한 시점보다 훨씬 이전에 쓴 글이다. 그 당시 구글링을 통해서 나도 처음 알게 된 내용이고, 너무 유익했기 때문에 공유해야겠다는 마음으로 글을 쓰기 시작했다. 시간이 꽤 지났지만 분명히 기억나는 건 외국 글을 토씨하나 안 틀리고 그대로 베껴 번역한 게 아니라 최대한 나의 언어로 정리하고 소스도 직접 테스트 해보고 내 방식 대로 수정했다는 것이다(이게 더 나쁜 걸까?ㅠㅠ). 그래서 이번에 혹시나 원글을 찾아봤는데 정확히 일치하는 글을 찾지 못했다..😥 하지만 얼추 가장 비슷해보이고 나도 낯이 가장 익..

Firebase란 Firebase는 웹 어플리케이션 개발 플랫폼이다. 개발자가 직접 서버를 구축할 필요 없이 즉, 서버리스로 빠르게 웹앱을 개발할 수 있도록 다양한 기능을 지원한다. 대표적으로는 클라우드 기반의 NoSQL 데이터베이스를 제공하는데, 이를 사용해 개인 프로젝트를 실시간 서비스로 구축할 수 있다. 이번 포스팅은 그 사전 작업으로 가지고 있던 Mock 데이터를 Firebase에 import하기 위한 방법에 관한 것이다. 🛑 이렇게 import하게 되면 기존 데이터는 덮어씌워져 사라지기 때문에, 기존 데이터와 동기화가 필요한 경우에는 이 방법을 사용해선 안된다! 1. CSV → JSON 변환 Firebase 데이터베이스에 import하기 위해선 JSON 파일이 필요하다. 데이터의 수가 많을 경우..