늘 겸손하게

목차 문제명 해결책 해결 문제명 프로젝트에 추가한 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 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 됩니다. 함수 ..