반응형 엔드11 알기 쉽게 정리한 Babel이란? 프론트엔드 개발자를 위한 웹팩 Babel이란?React 프로젝트 생성 도구 내부에 기본적으로 Babel이 구성되어 있습니다.즉, React를 사용하여 프로젝트를 구성한다는 것은 Babel을 사용하여 프로젝트를 구성한다는 것입니다. 브라우저는 JSX를 이해하지 못합니다.그래서 Babel이라는 통역사로 JSX -> JavaScript로 변환해서 브라우저에게 알려줍니다. JavaScript는 시대가 변함에 따라 문법에 변화가 생겼습니다.JavaScript의 어떤 최신 문법들을 최대한 많은 브라우저가 호환할 수 있게끔 변환해 줍니다.=> 브라우저의 버전이 최신 버전이 아니라면 해석할 수 있는 JavaScript의 문법이 최신 버전이 아닐 수 있기 때문즉, Babel은 기본적으로 JSX의 문법을 JavaScript 문법으로 변환해서 브라우저에.. 2024. 10. 7. [ React ] Warning: Each child in a list should have a unique "key" prop. 오류 해결 방법 💥 React 실행 후 발생한 에러 메시지Warning: Each child in a list should have a unique "key" prop.Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.❓에러 발생 이유React의 리스트 엘리먼트 요소에 key 값이 없어서 발생하는 오류입니다.React는 가상 DOM을 사용하여 Diffing 작업을 수행합니다.하지만 key 값이 없으면 각각의 리스트 요소를 구분할 수 없기 때문에 발생하는 오류 에러 메시지입니다.참고로 key 값은 유니크해야 합니다. 추가로 아래는 React 공식문서로 key에 대한 설명글입니다.https://re.. 2024. 7. 12. [ React ] SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. 오류 해결 방법 💥 React 실행 후 발생한 에러 메시지Compiled with problems:ERROR in ./src/App.jsModule build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/user/Documents/study/react/sec02/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? (37:12) ❓에러 발생 이유JSX 문법 오류 입니다. JSX는 기본적으로 최상위 요소(Element)를 사용해야합니다.하지만 최상위 요소(Element)가 존재하지 않아서 나타난 문법.. 2024. 7. 12. 이전 1 2 3 다음 반응형
