분류 전체보기18 Vanilla JS와 ReactJS의 비교 #2 Vanilla JS HTML 먼저 만들고, Javascript 가져와 HTML 수정 방식 Click me React JS Javascript 시작 이후 HTML이 됨. (HTML을 이 페이지에 직접 작성하지 않고, 그대신 javascript 코드 사용) React JS와 react-dom React JS (= 엔진) 어플리케이션 interactive하게 만들어주는 라이브러리 element를 생성하고 event listener를 더하는 것을 도와준다. react-dom react element를 html에 두는 역할과 html로 바꾸는 역할을 한다. 규칙 createElement로 argument를 만들때는 유효한 html태그면 가능하다. property에다가 id, style, event listener.. 2023. 1. 23. [React] Uncaught SyntaxError: Unexpected token '<' (at jsx.html:57:7) 오류가 발생한 원인 브라우저가 JSX를 이해하는 것은 아니라서 이런 에러가 발생합니다. 브라우저는 JSX를 invalid라고 생각합니다. JXS는 기본적으로 같고 아래와 같이 코드를 작성을 했다면 아래와 같이 코드를 변환시켜야 합니다다. Babel을 사용하여 변환을 시켜줍니다. Babel은 코드를 변환시켜주는 것입니다. 즉, JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것입니다. 해결방법 Bable standalone을 이용해서 다운을 받으면 오류가 사라집니다. 위와 같이 script에 추가하여 해결했습니다. * 주의사항 script type으로 된 태그 안에 컴포먼트를 작성하지 않으면 똑같은 오류가 납니다! * + script에 적은 건 script에서 확인이 가능하고 변환이 된 코.. 2023. 1. 22. [React] npm start 에러 팀원이 푸쉬한 것을 풀 받고 비쥬얼코드 종료하고 다시 열어 npm start를 진행했는데 오류 발생,,, 해결방법 1. npm install을 한 후 다시 npm start를 해보기 2. npm install -g react-scripts 하고 다시 npm start 해보기 3. paclage.json 파일에 script 명령어에 start 스크립트 명령어 추가 4. error code 1에러 메세지가 나오면 package-lock.json과 package.json의 webpack을 지운 상태에서 npm install 해보기 * npm install시 “Cannot read property ‘mach’ of undefined 에러가 나오게 되면 package-lock.json을 지우고 다시npm inst.. 2023. 1. 22. [React] Minified React error #200; / Target container is not a DOM element. Minified React error #200;가 나면 먼저 오류 코드 안에 있는 링크에 들어가서 확인하기 위와 같은 페이지와 함께 "Target container is not a DOM element."라는 오류 메세지 확인하기 오류가 발생한 원인 DOM에 렌더링 시 return하고자 하는 element를 찾을 수 없어서 발생했습니다. 해결방법 js 파일에서 가져오고자 하는 element 의 id 와 렌더링 될 element 의 id 를 맞춰주면 오류가 해결이 됩니다. 그래서 저는 아래 코드와 같이 작성을 했는데 오류가 발생하여 아래와 같이 return 할 argument를 수정해줬더니 오류가 해결되었습니다 결론 나의 오류 원인 : container로 묶은 span, btn을 한번 더 return을 해.. 2023. 1. 22. 이전 1 2 3 4 5 다음
