개발/react 생태계 썸네일형 리스트형 Uncaught SyntaxError: Unexpected identifier 개발하다보면 다양한 이유로 발행하는 에러 문구들이 있습니다. 예상치못한 토큰, 예상치못한 식별자. 저또한 node로 개발하던 중에, 함수 확인을 위해 개발자 도구를 이용했는데요. 혹시 위 에러가 왜 발생하신거 같나요?? 참 어이없었습니다. 에디터에 작성하는 버릇때문에 " ; "를 빼먹었더군요. 개발자 도구로 진행시 ; 잊지마세요;; 더보기 axios 비동기 post 전송 react, next모두 비동기 처리가 필수입니다. xhr, fetch로도 가능하지만 오늘은 axios에서 json데이터를 전송하는 방식을 익혀볼까 합니다. axios.post(url, formData, { headers: { "Content-Type": `application/json`} } ).then((res) => { console.log(res); }); post전송시 보내는 url, 데이터, req.header를 parameter로 넣어주면 됩니다.(get을 보낼시 데이터가 없을 경우 두번째 parameter를 null로 해주시면 됩니다.) 이때 여기서 주의해야할게 'formData' 형식입니다. 이미지, 영상들은 'event.target.files[0] '와 같이 파일을 넣고 header를 .. 더보기 fs.readFile error in compress-image, imagemagic cra(create-react-app)로 작업하던중 이미지와 영상을 압축하기 위해 compress-image, imagemagic같은 모듈들을 사용했습니다. 그런데 항상 뜨는 문구는 ``` fs.readFile is not a function ``` fs를 아예 인식못한다는 에러만 뜨니...이게....뭐하자는건지... 그러던중 깨달은 사실 '파일을 읽고 써야하는 fs는 브라우저에서 작동이 안된다!' 결론, node와 같은 벡단에서만 사용이 가능하다. 저처럼 CRA에서 사용하시려는 분이 계신다면.... 얼른 스킵하세요. 모듈들을 모두 컴파일하고 돌아가는 cra에서는 fs사용이 불가합니다!! 더보기 Uncaught TypeError: func is not a function at b (<anonymous>:11:6) at <anonymous>:1:1 const b =(a, func) => { func(a); } b(1, console.log(123)); 위 경우에서 b(a())을 실행할 경우 아래 에러가 발생합니다. ``` Uncaught TypeError: func is not a function at b (:11:6) at :1:1 ``` 이는 console.log()를 인자로 전달해야하는데, 실행을 했기때문에 발생하는 오류입니다. 수정 코드는 아래와 같습니다. const b =(a, func) => { func(a); } b(1, () => { console.log(123) }); 함수를 파라미터로 넘겨줄때, 실행하면 안된다는 점 잊지마세요~ 더보기 multi export in cra(create-react-app) export {}, export default, react에서 모듈을 export하는 방법은 많습니다. 다양하게 쓰여 처음에 저에게도 매우 어려웠는데요. 제가 느낀바로, export는 import와 상응하는구나 였습니다. export {Module} => import * a from "...path", 사용시 a.Module export default Module=> import Module from "...path" 본론으로 넘어가, 프로젝트를 더 진행하다보면 모듈의 갯수가 많아집니다. 하지만 늘어나는 모듈만큼 js파일을 늘리는건 미래 유지보수가 힘들어집니다. 그래서 한페이지 안에서 여러 모듈을 export하는 방법을 소개할까 합니다. 사실 정답은 위에 있었습니다. export {module1, mod.. 더보기 only Worker registration successful http://localhost:3000/ 종종 cra(create-react-app)을 사용하다보면 아래와 같이 빈 화면을 띄울때가 있습니다. 음.... 이건머지... 에러도 안나고 worker만 등록 잘되었다는 코솔만 뜨니 처음에는 당황스러웠습니다. npm build도 다시 해보고, fetch가 덜되었는지 worker도 확인하던 중에 찾은 해결법은! ctrl+s, 저장입니다. 위 상황은 종종 편집을 하고 저장이후 webpack이 다시 컴파일을 할때 생기는데, 저장을 한번더 해주면 짠하고 화면이 나타날 겁니다. 더보기 TypeError Cannot read property 'setState' of undefined" 단일 쓰레드 형식인 react는 data를 한곳에서 다룹니다. 클래스별 state을 정할수 있고, 다른 클래스에게 props형식으로 정보를 전달할 수도있습니다. 가장 기본적인 state는 setState을 이용해 접근할수 있는데, 결과를 찍어보면 다음과 같은 에러가 나옵니다. TypeError Cannot read property 'setState' of undefined" 이는 this.setState시 this(state).값이 undefined이기 때문인데, setState함수 실행 자체가 비동기적으로 작동해 this가 정해지지 않은 상태에서 콘솔을 찍었기 때문입니다. state = {} this.setState({ a: "1" }) console.log(this.state) //error 발생 s.. 더보기 Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 초기 cra(create-react-app) 사용시 위와 같은 에러가 뜹니다. 주로 class 작성시 생기는데요, 해결법은 간단합니다. 위 에러발생시 editor에는 다음과 같은 에러가 뜹니다. 제가 테스트로 작성한 코드는 다음과 같았습니다. import React, { Component } from 'react'; class Test extends Component { return ( test test ); } export default Test; 감이 오시나요? 에러문구를 해석해보면 부보 element가 없다였고.. 더보기 이전 1 2 3 4 5 6 다음
