Jade_o.o

JSX JavaScript + XML • 자바스크립트 확장 문법으로 XML 과 유사 • 바벨을 이용해 일반 자바스크립트 코드로 변환 JSX 1. 전체는 하나의 태그로 감싸야함 html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로! + 딱 하나의 태그만 return할 때는 ()가 필요 없지만 여러 개의 태그가 있다면 return (~) 괄호 내 부에 작성해야 해요! function App() { const str = 'hello'; return ( {str} world ); } export default App; JSX 2. html with JS html를 작성하다가 중간에 js 문법을 사용하고 싶을 때는 {중괄호}로 감싸 야 합니다. JSX 3. 인라인 sty..

방법1. CDN 사용 방법2. npx create-react-app 사용 • 리액트 앱(프로젝트) 이름 규칙 • 대문자 사용 불가능 • 단어 여러 개 사용시 하이픈(-) 기호로 구분 • npx • npm의 자식 명령어로 npm보다 가볍게 패키지를 구성 • npm 버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능 npm install create-react-app -g // create-react-app 모듈 사용할 수 있도록 global로 설치 npx create-react-app test-app // test-app => React App Name React 프로젝트 실행하기 npm start create-react-app으로 생성한 프로젝트의 구조 /node_modules : np..

Node.js & NPM • Node.js는 React를 사용하기 쉽게 하는 도구를 내장하고 있음 • Node.js와 함께 설치되는 NPM(Node Package Manager)를 이용 하면 프론트엔드 프로젝트를 위한 다양한 패키지를 쉽게 설치하고 관리 가 능 • 리액트도 하나의 패키지! • 자바스크립트 런타임인 Node.js 기반으로 만들어진 Webpack과 Babel 같은 도구을 자주 사용 Babel • 옛날에는 큰 기능을 하지 않는 자바스크립트 컴파일러(해석기)였지만 리 액트에서는 중요한 역할 • 최신 JavaScript 문법을 이전 버전의 JavaScript 문법으로 변환해주 어 다양한 브라우저에서 호환성에 문제 없이 코드를 실행할 수 있음 Webpack • 자바스크립트 모듈 번들러 (Module..

React • https://react.dev/ React React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati react.dev • The library for web and native user interfaces React 란? • 화면을 만들기 위한 자바스크립트 라이브러리 • 현재 프론트엔드 개발 ..