전체 글

오늘은 쓰로틀과 디바운스에 대해서 알아보겠습니다. 두 가지 기법 모두 DOM 이벤트가 발생했을 때 성능을 최적화하기 위한 기법입니다. Debounce 예를 들어 보죠. 유저가 검색창에 "보드게임"을 입력한다고 생각을 해봅시다. input 이벤트를 걸어둔다면 검색어를 입력할 때마다 이벤트 콜백함수가 실행될 겁니다. input.addEventListener("input", eventListener); ㅂ, 보, 보ㄷ, 보드, 보드ㄱ, 보드게, 보드게ㅇ, 보드게이, 보드게임 위처럼 각각에 대해 callback 함수를 실행시키는 것보다 유저가 검색어를 다 입력하면 콜백함수를 실행시키는 것이 자원 측면에서 더 효율적이죠. 이렇게 짧은 시간안에 많은 이벤트가 발생했을 경우 이를 무시하고 특정 시간이 지난 후에 이벤..

코드 분할이란? 리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리티가 저해될 것입니다. 따라서 main.js를 여러 파일로 나눠, 용량을 줄여줘야만 하겠죠? 여기서 사용하는 기술이 코드 분할입니다. 코드 분할의 방법 코드 분할을 하기 위해서는 물론 bundler가 설치되어있어야겠죠? 저는 제일 익숙한 webpack을 사용했습니다. 내장 import 함수 사용하기 코드 분할을 하는 가장 좋은 방법은 import() 문법을 사용하는 것이라고 공식 docs에 나와있습니다. 아래와 같이 butt..

Preiew babel.config.js에 경로를 추가합니다. tsconfig.json에 경로 추가해서 vscode가 인식할 수 있게 만들어줍니다. metro server 캐시를 리셋해줍니다. (이것 때문에 삽질함) babel.config.js "babel-plugin-root-import", { paths: [{ rootPathSuffix: "./src", rootPathPrefix: "~/" }], }, src/components 디렉토리를 절대경로로 추가해보겠습니다. "babel-plugin-root-import", { paths: [ { rootPathSuffix: "./src", rootPathPrefix: "~/" }, { rootPathSuffix: "./src/components", roo..

Next.js에서 unit testing을 위해 jest, testing-library를 활용하여 테스트 환경을 구축해봅시다. 패키지 설치해야할 패키지들은 아래와 같습니다. $ yarn add next react react-dom $ yarn add --dev jest @testing-library/jest-dom @testing-library/react babel-jest Babel 루트 경로에 babel.config.js를 생성한 뒤 아래의 코드를 작성하세요. next/babel preset은 next를 설치할때 같이 설치됩니다. 이 preset은 react application과 ssr에 사용되는 코드를 컴파일하는데에 사용됩니다. module.exports = { presets: [ ['ne..