반응형 개발364 webpack에서 vite로 마이그레이션 이 프로젝트를 webpack에서 vite로 마이그레이션했다. 1. 빈 vite 만들고 필요한 것 복붙 https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/ 번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기 Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구로 요즘 인기를 끌고 있습니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠 tech.cloudmt.co.kr 위 글이면 왠만한건 다 해결된다. 3. index.html은 root로 옮기기 localhost:3000을 켰는데 아무것도 되지 않았다. cra에서는 index.html을 public폴더에 만.. 2024. 1. 7. 객체를 state로 이용할 때는 readonly로 직접 변경 못하게 막기 리렌더링 방지를 하는게 아니라면 아래와 같은 코드는 쓰지 않는게 좋다.(리렌더링 방지를 원한다면 useRef가 적합하다) const [application, setApplication] = useState({ name: "june", product: "SEB", }); // application을 직접 변경하는 것은 리렌더링을 일으키지 않음 application.name = "seung"; 코딩단계에서 막을 수 있게 타입스크립트로 타입가드를 하자. readonly를 이용해서 직접 변경을 막은 코드이다. interface ApplicationType { readonly name: string; readonly product: string; } const [application, setApplication].. 2024. 1. 7. state 업데이트는 비동기라기보다는 스냅샷이다. state 업데이트는 비동기라기보다는 스냅샷이다. 아래와 같이 코드를 작성하면 console.log(state)는 1이 아닌 0이 찍힌다. const Component = () => { const [state,setState] = useState(0) return ( { setState(1) console.log(state) // 0 }}> ) } setState가 비동기로 작동해서 console.log보다 나중에 실행되기 때문이라고 생각했는데, 그보다는 스냅샷이 맞는 표현이다. { setState(1) // 다음렌더링에서 state를 1로 바꿀 준비를 한다. console.log(state) // 0 }}> 리액트는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. .. 2024. 1. 7. GitHub Actions에서 build시 사용할 환경 변수 넣기 자꾸 build에서 실패했다. 로그를 살펴보면 401 에러였는데 API키는 환경변수에 넣어놓았기 때문에 next 내부에서 일어나는 어떤 문제라고 생각하고 Error: 401 Unauthorized: {"data":[{"id":"5413bc","type":"api_error","attributes":{"code":"INVALID_AUTHORIZATION_HEADER","details":{}}}]} at s (/home/runner/work/blog/blog/.next/server/chunks/724.js:8:121) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.c [as generat.. 2023. 12. 28. 이전 1 2 3 4 5 6 7 ··· 91 다음 반응형
