728x90 반응형 Reactjs14 Server Error ReferenceError: window is not definedThis error happened while generating the page. Any Server Error ReferenceError: window is not definedThis error happened while generating the page. Any console logs will be displayed in the terminal window. import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../components/hello')) function Home() { return ( HOME PAGE is here! ) } export default Home 동격 가져로기로 에러해결 2022. 4. 19. useState 동기화 문제 export default function Test() { const [value1, setValue1] = useState(0); const [value2, setValue2] = useState(0); return ( value1 : {value1} value2 : {value2} { setValue1(prev => prev+1); setValue2(value1); }}> 계산 ) } 얼마 전에 useState를 사용하다가 난감한 상황에 빠져서 해결방법을 공유합니다. 대충 위와 같은 코드를 작성했습니다. 버튼을 클릭할 때마다 value1을 +1시 키고 value2에 대입합니다. 코드만 봤을 때는 두 값이 동시에 올라가야 합니다. 결과는... value2 값이 1 작게 설정됩니다. 이유는 SetValu.. 2022. 4. 19. Nextjs Fast Refresh 안되는 문제 해결 - 핫 리로딩 You have enabled experimental feature(s). warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk. nextjs를 사용하는데 Fast Refresh가 안 되는 문제가 있었습니다. dev 빌드를 돌리면 위와 같은 에러가 발생했습니다. Fast Refresh가 안 되는 게 저 에러와 관련 있는지 확실하지는 않지만 해결하니 에러는 사라 졌습니다. 이것저것 삽질하다 보니 해결되었습니다. 혹시 안되면 아래 방법들을 시도해 보시기 바랍니다. next버전을 올렸습니다. package.json 에.. 2022. 4. 1. 리액트 타입스크립트 zustand - 셀프 개발자 코딩 부트캠프 리액트에서 상태 관리를 할 때 대부분 리덕스(Redux)라는 것을 사용하는 것 같았다. 쉬운 작업도 복잡하게 되어 있는 것 같아서 심플한 것 찾아봄. zustand라는 게 좋아 보임. 아래는 github 주소. https://github.com/pmndrs/zustand import create from 'zustand' interface CounterState { count: number; increase:()=>void; decrease:()=>void; } const useStore = create(set => ({ count: 0, increase: () => set(state => ({ count: state.count + 1 })), decrease: () => set(state => ({ c.. 2022. 3. 23. 리액트 타입스크립트 array map - 셀프 개발자 코딩 부트캠프 function App() { let names:Array = ["사과", "고구마", "오렌지"]; let nameList = names.map(name => ({name})); return ( {nameList} ); } export default App; array 를 render 부분에서 보여줄 수 있다. map 은 c# linq에 있는 select 와 비슷하다. c# 에 있는 extension method같은 기능이 typescript에 있다면 위와 같은 상황에서 편할것 같다. 귀찮아서 조사는 안해봄. https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; functio.. 2022. 3. 15. 리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프 useRef를 이용하면 DOM을 직접 참조할 수 있다. import { createRef } from "react"; function App() { let refInput = createRef(); function handleClick(e:React.MouseEvent) { refInput.current?.focus(); } return ( Click!! ); } export default App; 버튼을 클릭하면 input에 포커스 된다. import { createRef } from "react"; function App() { let refDiv = createRef(); return ( ); } export default App; div 를 참조할수도 있다. https://jinibh.tistor.. 2022. 3. 15. 이전 1 2 3 다음 728x90 반응형
