728x90 💎 리액트17 리액트 uncaught syntaxerror: unexpected token '<' 해결 리액트 uncaught syntaxerror: unexpected token ' 2022. 6. 20. [React] ERROR in Module.createRequire is not a function 해결 리액트 실행 중.. ERROR in Module.createRequire is not a function 에러가 났다. 삽질 끝에 npm과 node의 버전 때문인 것을 알았다. node는 14.0.0 이상, npm은 5.6 이상이어야 아래 에러가 안난다. ERROR in Module.createRequire is not a function ERROR in Error: Child compilation failed: Module.createRequire is not a function - child-compiler.js:169 childCompiler.runAsChild - Compiler.js:559 compile - Compiler.js:1129 hooks.afterCompile.callAsync.err.. 2022. 6. 10. location.href 와 location.replace 차이점 location.href는 객체의 속성, loaction.replace()는 메서드(함수)로 작동된다. href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능하지만, replace는 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. href는 일반적인 페이지 이동시 이용을 하면 되고, replace의 경우는 이전페이지로 접근이 필요없는경우 보안상 덮어씌우는 것도 괜찮을듯 하다. 2022. 5. 10. [리액트] Invalid token specified Invalid token specified 떴을때 try { const data = decode(token); // valid token format } catch(error) { // invalid token format console.log("error: " + JSON.stringify(localStorage)); } 예외처리로 돌려서 에러 메시지 확인하면 된다. 2022. 5. 10. [React 리액트] react-dom.development.js:67 Warning: You provided a `value` prop to a form field without an `onChange` handler 해결 [ 문제 ] react-dom.development.js:67 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 태그 사용시 value속성이 고정값이 아니라 나는 에러! [ 해결1 ] value 속성이 변하지 않는 값일 때: input태그에 readOnly 속성을 추가해주면 경고창이 사라진다. [ 해결2 ] value 속성이 변하는 값일때: value 속성이름을 def.. 2022. 5. 4. [React 리액트] a component is changing a controlled input of type text to be uncontrolled. input elements 해결! [ 문제 ] A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. input 의 value에 undefined가 들어갔을 경우에 대한 처리가 없다는 경고. [ 해결 ] input의 value가 undefined일 때 ''가 들어올 수 있도록 한다. value={value || ""} 2022. 5. 4. React json 형태의 [object Object] 출력하기 React에서 json 형태의 object 변수(responseObj)를 alert나 console.log로 찍고싶을때 alert(responseObj); 로만 찍으면 [object Object] 라고 나온다. responseObj의 내용을 알고 싶다면 alert(JSON.stringify(responseObj)); 라고 찍어주면 된다. [ #리액트소설 : 1 편 : #Object씨의_속마을_모르겠어.. ] 등장인물 소개 에반 오브젝트(Evan object): 프론트엔드 시니어 개발자 / 34살 오스틴 콘솔(Austin console): 프론트엔드 주니어 개발자 / 28살 스트링파이 제이슨(stringify json): 프론트엔드 신입 개발자 / 26살 내용 [ 오브젝트를 좋아하는 콘솔. 오늘도 먼저 말.. 2022. 4. 21. React 컴포넌트 호출시 유의사항 - PascalCase React 공부 중, 다음과 같은 에러가 발생했다. react-dom.development.js:67 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. PascalCase를 사용하라는 말인데, 이는 대문자를 사용하라는 것이었다. 2022. 4. 19. 리액트 useCallback, useCallback 쓰는 이유 리액트 useCallback, useCallback 쓰는 이유 1. useCallback useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. React 공식 문서에서는 useCallback을 '메모제이션된 함수를 반한하는 하는 함수' 라고 한다. useMemo와의 차이는, useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다는 점. 2. 왜 useCallback을 사용해야 할까? 현재 하위 컴포넌트에 전달하는 콜백 함수가 inline 함수로 사용되거나, 컴포넌트 내에서 함수를 생성하고 있다면 새로운 함수가 만들어지게 된다. 예를들어, Counter안에 increament 함수들은 컴.. 2022. 3. 10. 이전 1 2 다음 728x90
