Yeong Jin

npx create-next-app .       를 하면npm error code ENOENT npm error syscall lstat npm error path C:\Users\myPC\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\myPC\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent  이라고 뜨는데  아래 명령어로 해결npm i -g npm@latest

const [anchorEl, setAnchorEl] = React.useState(null); const handleMouseEnter = (event:any) => { setAnchorEl(event.currentTarget); }; const handleMouseLeave = () => { setAnchorEl(null); }; const open = Boolean(anchorEl); console.log("paymentPage 렌더링"); return ( Hover Menu Submenu 1 Submenu 2 Submenu 3 Navbar Title 성공했는데, HoverMenu에만 마우스를 올렸다가 치우면 안사라지고. 메뉴리스트에 마우스를 올렸다가 치워야 메뉴가 사라짐

로컬 상태 변경: React 컴포넌트 내에서 useState 훅을 사용하여 상태가 변경되면 리렌더링이 발생합니다. Props 변경: 부모 컴포넌트로부터 받은 props가 변경되면 자식 컴포넌트는 리렌더링됩니다. Redux 스토어 상태 변경: useSelector를 사용하여 Redux 스토어의 상태를 구독하고 있는 경우, 해당 상태가 변경되면 컴포넌트가 리렌더링됩니다.

로컬스토리지에 로그인정보를 넣어둘 수 있지만 그렇게 하진않겠다 useEffect로 렌더링될때마다 토큰을 서버로보내 user상태를 최신화 하였다 그런데 이러면 useSelector에서 가져온 user상태를 바로 아랫줄에서 이용하지못한다 해결방안1 리덕스 상태가 변경될 때마다 useEffect의 종속성을 활용: user 정보가 변경될 때마다 useEffect를 실행하여 checkProductInWishlist 함수를 호출하면 됩니다. 해결방안2 checkUser를 비동기 액션으로 만들기: 이 방법은 checkUser를 비동기 액션으로 변환하여 그 액션의 완료 후에 checkProductInWishlist를 호출하게 만드는 것

reducer : 컴퍼넌트의 state를 수정해준다 dispatch: reducer에 state를 수정해달라고 요구 action : state를 어떻게 수정해달라고 하는 내용 action(내용) dispatch ---------요구---------> reducer -----------수정----------> state ex) Dispatch(Action ) ----> Reducer(State, Action) --> state업데이트!

위 코드를 풀어서 쓰면 아래로 바꿀 수 있다. 즉, Redux Thunk는 Redux의 미들웨어 중 하나로서, 비동기 작업을 더 편리하게 관리할 수 있게 해주는 도구입니다. Redux Thunk를 사용하면 action creators에서 thunk라고 부르는 특별한 형태의 함수를 반환할 수 있게 됩니다. 일반적인 Redux action creator는 action 객체를 반환합니다. 그러나 Redux Thunk를 사용하면, action creator는 'thunk'라는 함수를 반환할 수 있습니다. 이 'thunk' 함수는 dispatch와 getState라는 두 개의 인자를 받습니다. 이러한 패턴은 특히 API 요청과 같은 비동기 작업을 수행할 때 유용합니다. API 요청을 시작할 때, 요청이 성공했을 ..

JavaScript 모듈에는 두 가지 주요 종류의 export가 있습니다: 기본(default) export와 명명(named) export입니다. 기본(default) export는 모듈당 한 번만 사용할 수 있습니다. 이것은 import 구문에서 중괄호 없이 import할 수 있습니다. 예를 들어, import userReducer from './user'는 user 모듈에서 기본으로 export된 userReducer 함수를 import합니다. 반면에, 명명(named) export는 모듈에서 여러 개를 export할 수 있으며, 각각은 고유한 이름을 가집니다. 명명된 export를 import하려면 중괄호 {}를 사용해야합니다. 예를 들어, import { userReducer } from './..

useReducer는 리듀서 함수와 초기 상태를 인자로 받아, 현재 상태와 상태를 업데이트하기 위한 디스패치 메소드를 반환합니다. 리듀서 함수는 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다. 이 예제에서 reducer 함수는 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환합니다. dispatch 함수는 액션 객체를 reducer에 전달하여 상태를 업데이트하는 역할을 합니다. useReducer는 상태 관리 로직을 컴포넌트 외부로 분리하고, 여러 상태 값이 서로 연관되어 있거나, 다음 상태가 이전 상태에 의존적인 경우에 유용합니다. useState와 useReducer는 React의 Hook이며 둘 다 컴포넌트의 상태를 관리하는 데 사용됩니다. 둘 사이의 주요 차이점은 어떤 상황에서 ..

useMemo와 useCallback은 둘 다 React에서 제공하는 Hook들로, 컴포넌트의 성능 최적화를 돕는데 사용됩니다. useMemo: 이 Hook은 메모이제이션된 값을 반환합니다. 이는 복잡한 함수의 결과 값을 재사용하려고 할 때 유용합니다. 함수의 결과 값이 같은 입력에 대해 항상 동일하다면 (즉, 순수 함수이다면), useMemo를 사용하여 이전에 계산된 값을 재사용하여 불필요한 계산을 줄일 수 있습니다. 이는 성능에 큰 영향을 미칠 수 있는 복잡한 계산에 특히 유용합니다. useCallback: 이 Hook은 메모이제이션된 콜백을 반환합니다. useCallback이 반환하는 콜백은 그 의존성 배열에 있는 값이 변경되지 않는 한 동일하게 유지됩니다. 이는 불필요한 리렌더링을 피하려고 할 때..

onClick= {함수명()} VS onClick = { ()=>함수명()} avaScript(또는 JSX)에서 함수를 호출하려면 이름 뒤에 괄호 ()를 붙입니다. 따라서, setIsKorea(!isKorea) 는 함수 호출을 의미하며, 이 함수 호출은 onClick 프로퍼티가 할당되는 시점, 즉 컴포넌트 렌더링 시점에 실행됩니다. 반면, onClick={() => setIsKorea(!isKorea)} 처럼 코드를 작성하면 onClick에는 "함수가 호출될 때 setIsKorea(!isKorea)를 실행하라는 명령"이 할당됩니다. 여기서 () => setIsKorea(!isKorea)는 실제로 호출되지 않고 단지 정의만 되는 "함수 표현식"입니다. 이 함수는 실제로 클릭 이벤트가 발생했을 때만 호출됩니..