늘 겸손하게

목차 문제명 해결책 해결 문제명 프로젝트에 추가한 csv 파일이 깨지는 문제가 발생 해결책 인코딩 방식을 UTF-8에서 Korean(EUC-KR)로 변경한다. vscode 오른쪽 하단에 UTF-8을 클릭 > 인코딩하여 다시 열기 에서 'Korean(EUC-KR)'을 클릭하여 변경한다. 해결

목차 WebWorker WebWorker 특징 Web Worker HTML 페이지에서 스크립트를 실행하면 페이지는 스크립트가 완료할 때까지 기다리게 됩니다. 이는 사용자 입장에서 화면이 정지된 듯이 보여 불편함을 줄 수 있습니다. 이를 위해 웹 워커(Web Worker)를 사용합니다. 웹 워커는 웹 브라우저에서 멀티스레딩 및 백그라운드 스레드 작업을 수행하기 위한 기술입니다. 웹 애플리케이션에서 CPU 집중적인 작업 또는 긴 처리 시간이 필요한 작업을 수행할 때 웹 워커를 사용하면 메인 스레드의 브라우저 성능에 영향을 미치지 않고 작업을 백그라운드에서 병렬로 처리할 수 있습니다. 자바스크립트는 싱글 스레드 언어입니다. 하지만 실제로는 멀티 스레드처럼 사용되는데 그 이유는 바로 Web Worker 덕분입니..

목차 문제 해결책 코드 문제 apikey를 숨기기 위해 프로젝트에 apikey를 담은 .env 파일을 생성하고 .gitignore에 .env를 추가하여 apikey가 공개 레포지토리에서 보이지 않도록 막았다. 하지만 Github pages에 배포된 프로젝트가 apikey를 읽지 못하고 undefined를 url에 담아 api 호출이 제대로 되지 않는 문제가 발생. 로컬 서버에서 돌릴때는 apikey를 잘 읽으나 github page서는 읽지 못하고 api 호출을 못하는 상황이 발생하였다. 해결책 1. 프로젝트에 환경변수 추가 배포된 프로젝트 환경에 환경변수를 추가해주어야 한다. 우선 프로젝트 레포지토리의 settings > Secrets and Variables > Actions 에 들어간다. New r..

목차 useCallback 사용법 useCallback useCallback은 리액트 최적화에 사용되는 기능 중 하나입니다. useCallback이 필요한 이유는 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 됩니다. 하지만 똑같은 함수가 컴포넌트가 리렌더링 될 때마다 다시 생성되는 것은 낭비입니다. 그리고 만약 함수를 자식 컴포넌트에 props로 내려준다면 함수를 포함하고 있는 컴포넌트가 리렌더링 될 때마다 자식 컴포넌트도 함수가 새로 만들어지니 리렌더링을 하게 됩니다. 이러한 무분별한 리렌더링을 최소화하기 위해 함수를 최적화하는 기능이 바로 useCallback입니다. 사용법 useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 됩니다. 함수 ..

목차 얕은 비교 깊은 비교 얕은 비교 자바스크립트에서 얕은 비교는 원시값을 비교할 경우 값을 비교하나, 배열 객체 등 객체를 비교할때는 레퍼런스, 즉 참조값을 비교합니다. 그래서 자바스크립트에서는 같은 값을 가진 객체라도 얕은 비교를 하면 다르다고 판단할 수 있습니다. const str1 = "hello" const str2 = "hello" if (str1 === str2) { console.log("string same") // string name } const obj1 = { number : 10 } const obj2 = { number : 10 } if (obj1 == obj2) { console.log("object same") // 출력 안됨 } 깊은 비교 객체를 비교할때 레퍼런스(주소)만..

목차 최적화 방법 React.memo와 메모이제이션 실제 사용 React.memo를 지양해야 하는 상황 결론 최적화 방법 React 앱을 최적화하는 데 사용하는 방법은 크게 네 가지가 있다. 첫 번째가 React.memo 두 번째로, useCallback 세 번째로, useMemo 네 번째로, 얕은 비교 (shallow compare) React.memo, useMemo는 메모이제이션을 활용한 최적화 방법이다. React.memo와 메모이제이션 메모이제이션이란 계산 결과를 메모리에 저장해 두고, 같은 연산에 대한 계산 결과를 요구할 때 재계산하지 않고 메모리에 저장된 값을 불러와 사용하는 방식을 말한다. React.memo로 감싸진 컴포넌트는 같은 props가 전달되면 리렌더링 없이 메모리에 저장된 컴포..

React Profiler React Developer Tools를 설치하고 react 앱을 실행시킨 뒤, 개발자 도구를 켜면 React Components와 React Profiler가 보인다. React Profiler를 통해 컴포넌트 렌더링에 걸린 시간을 알 수 있다. React Profiler 사용하기 React Profiler를 켜면 아래와 같은 화면이 뜨는데 왼쪽에 rec 버튼을 클릭하면 기록이 시작되고, 리액트 앱에서 렌더링이 발생하도록 앱과 상호작용해보자. 상단에 원이 rec 시작 버튼이고 클릭하면 profilling이 시작된다. profilling이 시작되면 앱과 상호작용하고 다시 rec 버튼을 클릭해보면 렌더링하는데 소요된 시간이 ms 단위로 나타난다. 오른쪽 화면에 보면 Durati..

성능 최적화 필요한 이유 당연하게도 사용자 입장에서 가볍고 빠른 앱을 사용하기가 더 편리하다. React 앱 또한 성능 최적화를 위한 기능들이 존재한다. 개발한 프로젝트를 최적화하여 더 빠르고 가벼운 앱으로 업그레이드 해보자. 프로젝트 최적화를 위해선 성능 테스트를 바로바로 가능한 확장 프로그램이 필요하다. 무료 확장 프로그램인 React Developer Tools를 브라우저에 설치하자. 확장 프로그램 설치 구글에 'React Developer Tools'를 입력하면 chrome 웹 스트어에서 다운로드 받을 수 있다.