728x90 반응형 웹개발자8 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. 리액트 타입스크립트 css, sass, styled-components 리액트 컴포넌트를 스타일링할 때 여러 가지 방법 있다. css : html에서 기본적으로 사용하는 방법 sass : 확장된 css 로 작성하고 컴파일해서 사용 styled-components : 자바스크립트 안에 스타일 작성 개인적으로는 styled-components 이 가장 좋아 보였다. 정의한 스타일을 컴포넌트 처럼 사용 가능하다. props를 넘겨줄 수 있어서 상황에따라 마음데로 조절가능하다. 잘 쓰면 코드를 많이 줄일 수 있을듯 하다. react native 에서도 사용할 수 있다. # 공식사이트 https://styled-components.com/ # 참고 https://github.com/rebassjs/rebass https://github.com/styled-components/awes.. 2022. 3. 21. 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} -1 +1 ); } export default App; useState를 사용하면 두 개의 값이 튀어나온다. 내가 설정한 초기값을 갖는 변수(number)와 그 변수를 세팅할 수 있는 함수(setNumber)가 나온다. button을 클릭해서 버튼을 클릭해서 onIncrease, onDecrease 가 실행되면 setN.. 2022. 3. 6. 리액트 JSX 문법 - 셀프 개발자 코딩 부트캠프 # 감싸인 요소 function App() { return ( 하이하이 하이하이2 ); } export default App; 컴포넌트가 여러개 있다면 부모로 한번 감싸야 한다. webpack 5.70.0 compiled with 2 errors in 65 ms ERROR in src/App.tsx:7:5 TS2657: JSX expressions must have one parent element. 5 | function App() { 6 | return ( > 7 | 하이하이 | ^^^^^^^^^^^^^ > 8 | 하이하이2 | ^^^^^^^^^^^^^^^^^^^ 9 | ); 10 | } 11 | 이런 에러가 발생한다 function App() { return ( 하이하이 하이하이2 ); } expo.. 2022. 3. 6. 리액트 타입스크립트 - 셀프 개발자 코딩 부트캠프 리액트를 시작할 때부터 타입 스크립트로 시작하기로 함. 다른 건 몰라도 자바스크립트가 타입을 강제하기 않기 때문에 버그가 많이 발생할 수 있다. 타입 스크립트를 사용하면 이걸 방지할 수 있음(타입이 있는 언어만 주로 사용하다 보니 이 부분이 어려운 것일 수도 있다). 타입 스크립트에는 다른 특징도 많이 있지만 그건 찬찬히 알아 나가기로.. 리액트 타입 스크립트 프로젝트 생성 $yarn create react-app my-app --template typescript tsx확장자로 파일이 생긴다. $yarn start 기존 리액트 프로젝트 처럼 잘 실행된다. 타입스크립트 핸드북 https://www.typescriptlang.org/ko/docs/handbook/intro.html https://jinib.. 2022. 3. 6. 이전 1 2 다음 728x90 반응형
