728x90 반응형 웹개발7 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. 리액트 타입스크립트 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. 리액트 프로젝트 생성 - 셀프 개발자 코딩 부트캠프 리액트 프로젝트 생성 yarn create react-app $yarn create react-app hello-react 프로젝트에 기본 파일들이 생성된다. $yarn start 를 실행하면 리액트 프로젝트가 실행된다. http://localhost:3000/ 로 접속하면 위와같은 화면이 나온다. 비주얼 스튜디오로 프로젝트를 연다. // 특정 파일 불러오기 import logo from './logo.svg'; import './App.css'; // App 이라는 함수 컴포넌트 새성 function App() { return ( // jsx -> js의 확장 문법으로 번들링 과정에서 js형태로 변함 Edita src/App.js and save to reload. Learn React ); } exp.. 2022. 3. 6. 이전 1 2 다음 728x90 반응형
