웹 공부일지

Axios 요청 취소하기 (cancel token) 상황 http 요청을 보냈을 때, 혹여나 취소할 수 있는 방법이 없을까? 하다가 axios 공식문서에 cancel token이 있어서 사용해보기로 했습니다. "react": "18.2.0", "next": "13.3.4" https://axios-http.com/kr/docs/cancellation 사용법 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.l..

Nextjs redux-persist 적용 (typescript) 상황 이미 리덕스를 사용해서 데이터를 관리하고 있던 상황에서 새로고침 해도 데이터를 유지하려함. 로컬스토리지나 세션스토리지에 직접 넣는 코드를 추가할 수 있으나, 그렇다면 리덕스를 사용할 필요가 없고 관리해야할 데이터가 많아서 비효율적이라고 생각함. redux-persist를 사용하면 redux-persist config에서 허용한 리듀서만 새로고침해도, 데이터를 유지할 수 있음. 제 경우에는 로컬스토리지를 사용하였습니다. 설치 npm i redux-persist npm i --save-dev @types/redux-persist 혹시.. npm i --save-dev @types/redux-persist 설치 하였음에도 불구하고 계속 설..

nextjs env setting 개념 Next.js 프레임워크에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 일반적으로 .env 파일 내부에는 API 키, OAuth 토큰, 데이터베이스 연결 등 민감한 정보가 포함되어 있습니다. 중요한 정보를 .gitignore 파일에 넣어서 모든개발자와 공유하지 않도록 해주는 것이 좋습니다. 우선순위 process.env .env.${NODE_ENV}.local .env.local .env.${NODE_ENV} .env ${NODE_ENV}에 올 수 있는 값 dev, devlopment, prod, production, test, qa, staging 등 작성예시 DB_HOST=localhost DB_USER=root DB_PASS=s1mpl3 브라..

next router, push vs replace router.push() push 메서드는 현재 페이지 스택에 새로운 페이지를 추가하고 해당 페이지로 이동합니다. 예를 들어, 사용자가 버튼을 클릭하면 push 메서드를 호출하여 새로운 페이지로 이동할 수 있습니다. 이렇게 하면 브라우저의 뒤로가기 버튼을 사용하여 이전 페이지로 되돌아갈 수 있습니다. router.push() 사용법 router.push(url, as, options); 1. url url (문자열 또는 객체): 이동할 페이지의 URL을 지정합니다. 문자열 형태로 URL을 전달할 수도 있고, 객체 형태로 경로와 쿼리 파라미터 등을 지정할 수 있습니다. // 문자열 형태로 URL 전달 router.push('/about'); // 객체 형..

Next Image Next Image의 사용법 next에서 기본적으로 제공하는 next/image에서 import 하여 사용합니다. import Image from 'next/image' Next Image의 특징 서버에서 자동으로 webp 형식으로 변환해주어서 용량이 기존 img 태그보다 더 작습니다. (이미지 자동 최적화) loading=”lazy” 속성이 자동으로 들어가 있습니다. 이는 페이지 로드시 이미지를 무조건적으로 요청해서 다운받는 것이 아닌, 이미지가 스크롤 저 밑에있을 경우에는 스크롤이 특정 위치에 도달하기 전까지 이미지를 요청하지 않습니다. quality 속성을 이용하여 최적화의 정도를 결정해줄 수 있습니다. 기본값은 quality={75} 입니다. quality를 높일수록 용량이 커..