리액트

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..

Contents 더보기 노드 버전 확인 cmd창에서 node -v 치고 노드 설치되어있는지 노드 버전 확인 리액트 설치 vscode 터미널창에 npm create-react-app ./ 입력 ./ 이 부분에 리액트를 설치하고자 하는 디렉토리 이름을 넣어준다. ./는 현재 디렉토리를 뜻한다. 그런데 설치를 진행하려니 이런 창이 떴다. 더 이상 저 설치 버전을 지원하지 않으니 삭제하고 최신 버전을 설치하라는 내용이었다. 그래서 npm uninstall -g create-react-app 을 통해 방금 설치한 버전을 삭제해주고 npm install -g npm@8.19.2 위의 코드를 통해 새 버전을 설치해주었다. 하지만 이렇게 하고 실행코드인 npm start 를 입력하자 이런 에러가 떴다. 해결방법 npx..