react

Contents JSX은 react를 사용해 개발할 때 거의 필수적으로 사용 JSX란? JS: JavaScript JSX : A syntax extension to JavaScript(자바스크립트의 확장 문법) JSX : JavaScript + XML/HTML JSX 코드 // 대입연산자 오른쪽에 html 코드가 나옴 // JavaScript코드와 HTML 코드가 결합된 JSX 코드 const element = Hello, world!; JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 JavaScript 코드로 변환하는 과정을 거침 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 됨 아래에서 JSX 코드를 JavaScript 코드로 변환하는 역..

Contents 앞에서는 기존에 있는 웹사이트에 react를 적용하는 방법에 대해 배워보았다 하지만 새로운 웹사이트를 만들 때에는 굳이 그렇게 할 필요가 없다 처음부터 react가 적용되어 있는 상태로 개발을 시작하면 되기 때문 그래서 react로 웹사이트를 개발할 때에는 주로 create-react-app을 사용 create-react-app : react로 웹애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태. 프로젝트를 생성해주는 도구 (실습) create-react-app 필요한 것 Node.js v14.0.0 이상 npm v6.14.0 이상 VS Code create-react-app은 npx 명령어를 이용하여 실행 npx : npm package를 설치한 이후에 곧바로 실행(exec..

Contents 1. (실습) HTML만으로 간단한 웹사이트 만들기 index.html 작성 소플의 블로그 소플의 블로그에 오신 여러분을 환영합니다! 2. (실습) CSS를 사용하여 웹사이트 스타일링하기 styles.css h1 { color:green; font-style: italic; } index.html에 styles.css 적용 브라우저로 열때는 다음과 같이 마우스 오른쪽 버튼 클릭 > Open with Live Server 3. (실습) 웹사이트에 React.js 추가하기 react와 react-dom ,react component 가져오기 react component 만들기 그냥 react component가 이렇게 생겼구나 하고 넘어가기 // 아주 간단한 react의 함수 컴포넌트 fun..