WEB/Next.js
-
2023-09-18 1. 방법 GetServerSideProps으로 데이터를 가져온 후 input에 데이터를 넣고 있었는데, 해당 데이터가 없을 경우 페이지 상에서는 오류가 나지 않지만 콘솔에서는 아래와 같은 오류가 발생하고 있었다. Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 위와 같은 오류가 발생시 데이터가 없을 경우 default로 넣어줄 값을 선언해 주면 해당 오류는 사라지게 된다. 아래와 같은 방법으로 값을 넣어주면 된다. value={userName || ''} 이렇게 데..
[Next.js] Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 오류 해결2023-09-18 1. 방법 GetServerSideProps으로 데이터를 가져온 후 input에 데이터를 넣고 있었는데, 해당 데이터가 없을 경우 페이지 상에서는 오류가 나지 않지만 콘솔에서는 아래와 같은 오류가 발생하고 있었다. Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 위와 같은 오류가 발생시 데이터가 없을 경우 default로 넣어줄 값을 선언해 주면 해당 오류는 사라지게 된다. 아래와 같은 방법으로 값을 넣어주면 된다. value={userName || ''} 이렇게 데..
2023.09.18 -
2023-04-13 1. useEffect 리액트를 기존에 사용해봤으면 해당 함수가 어떠한 기능을 수행하는지 알 수 있을 것이다. 해당 함수를 첫번째 매개 값으로는 수행할 함수를 받으며, 두번째 매개 값으로는 배열을 받는데 해당 배열에 있는 값이 변경될 경우에 첫번째의 있는 함수가 실행되게 된다. 여기서 useEffect의 비교 대상은 getServersideprops 이기 때문에 첫번째 매개 변수는 fetch 형태로 백엔드 서버에서 데이터를 가져오는 함수라고 가정해보자. import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() =..
[Next.js] useEffect 와 getServersideprops 의 차이점2023-04-13 1. useEffect 리액트를 기존에 사용해봤으면 해당 함수가 어떠한 기능을 수행하는지 알 수 있을 것이다. 해당 함수를 첫번째 매개 값으로는 수행할 함수를 받으며, 두번째 매개 값으로는 배열을 받는데 해당 배열에 있는 값이 변경될 경우에 첫번째의 있는 함수가 실행되게 된다. 여기서 useEffect의 비교 대상은 getServersideprops 이기 때문에 첫번째 매개 변수는 fetch 형태로 백엔드 서버에서 데이터를 가져오는 함수라고 가정해보자. import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() =..
2023.04.13 -
2023-04-05 1. 방법 기존에는 아래의 코드를 사용했었다. useEffect(() => { if (performance.navigation.type === 1) { console.log('Page was refreshed'); // Do something when page is refreshed } }, []); 하지만 현재 performance.navigation.type 는 deprecated 되어 다른 방안을 찾아야 했는데 아래와 같은 글을 발견했다. https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angu lar What is the replacement..
[Next.js] 페이지 새로고침 여부 확인 방법 (F5)2023-04-05 1. 방법 기존에는 아래의 코드를 사용했었다. useEffect(() => { if (performance.navigation.type === 1) { console.log('Page was refreshed'); // Do something when page is refreshed } }, []); 하지만 현재 performance.navigation.type 는 deprecated 되어 다른 방안을 찾아야 했는데 아래와 같은 글을 발견했다. https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angu lar What is the replacement..
2023.04.04