Today Yewon Learned

Visual Studio Code에서 정리되지 않은 코드들을 제대로 정렬하고 싶을 때 쉽게 정렬하는 방법을 알아보자. 1. Extensions탭 클릭 2. Beautify 검색 3. Beautift 다운로드 4. command + shif + P (명령어창 열기) 5. HooktQR.beautify 입력

JSX ※ 주의할 점 - JSX로 html태그를 작성할때는 하나로 감싸진 태그로 작성 import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트!, // 오류 발생 document.getElementById('root') ); import ReactDOM from 'react-dom'; ReactDOM.render( // 라는 하나의 태그로 감싸서 오류 해결 안녕 리액트! , document.getElementById('root') ); import { Fragment } from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트! , document.getElementById('root')..

JSX - React에서 지원, javascript와 html을 섞어서 쓸 수 있는 javascript의 확장된 문법 ※ 주의할 점 - JSX는 javascript의 확장 문법이기 때문에 html문법을 완전히 그대로 사용할 수 없음 ex) class 속성 import ReactDOM from 'react-dom'; class Dice { roll() { console.log('Roll!'); } } // html - class 속성 그대로 사용 불가 /*ReactDOM.render(안녕 리액트!, document.getElementById('root'));*/ // JSX - className 속성으로 사용해야함 ReactDOM.render(안녕 리액트!,document.getElementById('ro..

실행순서 index.html → index.jsp index.html - 웹 브라우저에서 가장 먼저 실행되는 파일 index.jsp - index.jsp파일이 열리고 나서 실행되는 파일 - React 코드들 중에서 가장 먼저 실행되는 파일 import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트!, document.getElementById('root') // 'root'라는 id속성 가져옴 ); - ReactDOM이라는 패키지에서 default로 export하는 객체를 ReactDOM이라는 이름으로 import해서 이 객체의 render라는 함수를 실행 - render : '화면을 그린다', React에서는 render라는 메소드로 html 태그를 만들어줌..

- create-react-app 으로 리액트 프로젝트 생성 npm init react-app 혹은 폴더를 VS Code로 열고 터미널에서 npm init react-app . - 개발 모드 실행 npm run start - 개발 모드 종료 Ctrl + C - react 개발자 도구 살펴보기 1. Chrome 에서 React Developer Tools 다운로드 후 React 서버 (loaclhost:3000)에 접속 후 개발자 모드 실행 2. >> 클릭하여 Components 선택하기 3. App 이라는 이름의 react Component가 있다는 의미 4. Component - react개발의 기본 단위