개발일기

useNavigate는 useHistory를 대체하여 react router dom v6에서 도입되었다. useHistory와 동일하게 url을 변경하여 페이지를 이동시키는데 사용된다.useNavigate 기본 사용법import { useNavigate } from 'react-router-dom' // 6버전 이상에서만 사용 가능const navigate = useNavigate()navigate('/test') // /test url로 이동기본적인 사용법은 위와 같이 useNavigate를 import한 후, navigate()에 이동할 url를 추가하여 사용한다. 예를 들어 버튼 onClick 함수에 navigate()를 정의하면 버튼을 클릭했을 때, 입력한 url로 이동하게 된다. 위의 방법 외에..

useCallback은 useMemo와 비슷하게 memoization하는 hook이지만 함수를 memoization한다는 점에서 useMemo와 차별점을 가지고 있다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 하지만 useCallback으로 감싸 memoization된 함수는 의존성 배열에 들어있는 변수 또는 함수가 변경되지 않은 이상 재생성되지 않는다. 즉 useMemo와 비슷한 개념으로 useCallbak은 기존 함수를 재사용할 수 있게 하는 hook이다. useCallback의 형태import { useCallback } from 'react' // useCallack 사용을 위해 useCallback import// useCallb..

react에는 변수, 함수의 성능을 최적화하는 hook인 useMemo와 useCallback이 존재한다. useMemo는 그 중에서 변수를 최적화 할 때 사용한다. useMemo는 변수의 값을 memoization한다. 여기서 memoization 이란 값을 캐싱하여 나중에 재활용하는 것을 의미한다. useMemo는 변수의 값을 memoization 하여 의존 변수가 변경되지 않으면 캐싱된 변수 값을 계속 사용한다. 만약 의존 변수가 변경되면 캐싱된 데이터를 삭제하고 새로 변수 값을 계산하여 대입한다. useMemo의 형태import { useMemo } from 'react' // useMemo 사용을 위해 useMemo import// useMemo로 함수를 감싸기const memoizedValue..

자바스크립트에서 비동기 작업을 처리하기 위해 주로 사용되는 방법은 Promise.all과 Async Await다. Promise.allPromise.all은 비동기로 실행할 여러 개의 Promise 객체를 배열에 넣어서 병렬로 실행한다.const promise1 = setTimeout(() => { console.log('Start Promise1')}, 2000) // 2초 후 실행(setTimeout)const promise2 = setTimeout(() => { console.log('Start Promies2')}, 1000) // 1초 후 실행(setTimeout)// Promise.all 배열에 비동기로 실행한 작업들을 추가Promise.all([promise1, promise2])..

Webpack4까지는 Buffer는 전역으로 지원했으나 Webpack5부터는 이 Polyfill을 지원하지 않는다. Buffer가 필요한 부분마다 import하거나 Webpack 설정 파일에 Buffer 플러그인을 추가해줘야 한다. 1. Buffer 패키지 설치yarn add buffernpm install buffer# import Bufferfrom 'buffer'패키지 매니저를 통해 buffer를 설치한 후 Buffer를 import하면 각 파일마다 사용이 가능하다. 2. Webpack 설정plugins: [ ... new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }) ...]Webpack 설정파일에 위의 코드..

Nodejs의 PM2는 여러개의 노드 프로세스를 관리할 수 있는 데몬 프로세스이다. pm2로 애플리케이션을 다운타임없이 재시작할 수 있고, 애플리케이션이 계속 실행되도록 유지할 수 있다. 기존에는 자바스크립트 파일을 테스트하려면 node [파일명]으로 실행하여 터미널이 종료되면 프로세스가 종료되는 단점이 존재했다. 하지만 pm를 사용하면 노드 프로세스를 계속 유지할 수있어 여러모로 편리한 점을 제공한다. 또한 프로세스를 여러개 실행시키면 각 프로세스마다 포트가 할당된다. 이를 통해 로드밸런싱하여 프로세스의 작동을 분할할 수 있다. 1. PM2 설치 npm isntall pm2 -g yarn add pm2 -g pm2는 package.json, node_modules없이도 노드 프로세스를 관리할 수 있기에..

Backbonejs는 SPA 방식으로 처음 페이지를 서버에서 불러온 후, 이후에 변경되는 페이지 내 요소들은 클라이언트를 통해 부분 요소만 그려낼 수 있다. 이러한 방식을 사용하면 서버에 주는 부담을 최소화 할 수 있으며 최소한의 새로고침으로 사용자들이 해당 웹을 이용할 때, 자연스럽고 빠른 성능의 화면 변경 요소를 확인할 수 있다. SPA 방식으로 검색 페이지를 구현하고 검색 결과를 공유하기 위해 다른 사용자에게 URL를 공유하면 검색 결과가 나온 페이지가 아닌 검색을 처음부터 진행해야하는 페이지가 불러와지는 것을 확인할 수 있다. SPA 방식이지만 다른 사용자에게 공유할 수 있는 URL을 Backbonejs의 Router로 생성하여 공유할 수 있다. 1. Backbonejs의 Router // ind..

1. on() 이벤트 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'melon', price: 5000 } }); const fruitModel = new FruitModel(); fruitModel.set({ name: 'water melon', price: 20000 }); // 속성 변경 fruitModel.on('change', function(e) { // 모델 속성 변경 이벤트 console.log(e.toJSON()); }); on() : 모델에 발생하는 이벤트에 따라 콜백함수를 연결해주는 메서드이다. 여기서 과일 모델의 속성을 이름은 수박, 가격을 2만원으로 수정하면 ..