React 초기 설정

1. Node.js, Visual Studio Code 필요

📗 Node.js
https://nodejs.org/ko/download

📖 Visual Studio Code
https://code.visualstudio.com/download

2. 폴더 생성 후 패키지 설치

npx create-react-app voca

설치가 완료된 모습 (터미널이 길어서 이미지상으로는 코드가 전부 안 보인다.)

1. 패키지 설치: npx create-react-app voca 명령 텍스트을 실행한 후 필요한 패키지들 설치
2. 보안 경고: 몇 가지 패키지가 보안 업데이트가 필요하다는 경고 표시

246 packages are looking for funding
  run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)

• tar 패키지가 더 이상 지원되지 않으며 보안 업데이트를 받지 않을 것이라는 내용
  • npm audit fix --force를 실행하여 업데이트가 가능하지만 애플리케이션의 안정성에 영향을 미칠 수 있으므로 주의 필요

3. 서버 실행 명령어 작성

npm start 실행

---

오류 발생 시

cd voca
npm install

Hot module Replacement (HMR)

: 개발자가 애플리케이션을 개발하는 동안 소스 코드의 변경 사항을 즉시 적용할 수 있는 개발 도구 또는 기능

• 주로 웹개발에서 사용
  -> 웹 애플리케이션을 개발하는 동안 바르게 반복 빛 테스트를 수행하는 데 도움

JSX (JavaScript XML)

: JavaScript 코드 안에서 XML 형식의 마크업을 사용할 수 있게 해주는 JavaScript 확장 문법

• 주로 React와 함께 사용
  • React 애플리케이션을 개발할 때 UI 구성 요소를 렌더링하기 위해 JSX 사용

1. 마크업과 JavaScript 통합:

• JSX는 HTML과 유사한 구문을 가진다.
• JavaScript 코드 안에서 직접 사용할 수 있다. 이는 UI 요소를 정의할 때 HTML과 유사한 방식으로 작성할 수 있어 가독성 향상

2. 변수, 표현식, 함수 호출 포함:

• JSX 내에서 중괄호 {}를 사용하여 JavaScript 변수, 표현식 및 함수 호출을 포함

const name = "John";
const element = <h1>Hello, {name}</h1>;

3. 컴포넌트 정의:

• JSX를 사용하여 React 컴포넌트를 정의
• 컴포넌트는 재사용 가능한 UI 요소를 나타내며, JSX를 사용하여 컴포넌트 구성

function MyComponent(props) {
  return <div>{props.text}</div>;
}

4. Babel 변환:

• 브라우저에서 JSX를 직접 해석할 수 없으므로 Babel과 같은 JavaScript 컴파일러를 사용하여 JSX 코드를 일반 JavaScript 코드로 변환
• Babel은 JSX를 React.createElement 호출로 변환하여 브라우저에서 이해할 수 있는 형태

const element = <h1>Hello, World!</h1>;

->

const element = React.createElement("h1", null, "Hello, World!");