Front/React3 React - JSX 문법 JSX 자바스크립트의 확장 문법 XML과 유사함 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환됨 컴포넌트를 렌더링할 때마다 JSX가 아닌 React.createElement를 사용해야 하면 다음과 같은 상황 발생 {/* JSX 문법 */} function App() { return ( Hello react ); } 자바스크립트로 변환 // javascript 문법 function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } JSX의 장점 보기 쉽고 익숙함 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작.. 2021. 12. 17. Webpack / Babel / Node.js / NPM Webpack / Babel / Node.js / NPM Webpack 모듈 번들러(Module Bundler) 모듈화된 코드를 하나의 파일로 합치고(번들링) 코드를 수행할 때마다 웹브라우저로 리로딩한다. 코딩할 때 편의를 위해 여러 개의 모듈로 나누어 작업을 하지만, 브라우저에서 파일 단위 모듈 시스템을 이용하게 되면 많은 네트워크 비용이 낭비된다는 단점이 있다. 웹 애플리케이션의 규모가 커지면서 많은 양의 파일들이 하나로 모여 구성되는데 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다. React : Webpack이라는 모듈 번들러 사용 파일들의 관계가 복잡하고 무겁기 때문에 브라우저에서 이해하고 처리하기 힘들어지는 문제 해결 파일들 간의 의존성 관계 정리 및 최적화, JSX 파일.. 2021. 12. 17. React 환경설정(VS Code) React 설치 설치 프로그램 Node.js Visual Studio Code Create-React-App 리액트 프로젝트 생성 도구 CRA 사용하면 간편하게 리액트 개발 환경 구축 자동으로 다수의 패키지들 설치되고 Webpack 및 Babel 설정도 자동으로 설정 (나중에 번들링 옵션 변경 가능) 초기 단계에서 Webpack과 Babel 직접 설정할 일 없음!! Node.js / NPM 설치 https://nodejs.org/en/ 16.13.1 LTS 다운로드 node-v16.13.1-x64.msi 기본 설치 cmd (명렁 프롬프트) 창에서 버전 확인 node -v npm -v Visual Studio Code(VS Code) 설치 https://code.visualstudio.com/downloa.. 2021. 12. 17. 이전 1 다음