[React] 1. 환경세팅

1. Cursor
2. Node.js (js runtime 환경)
3. 플러그인
- Prettier (코드 포맷팅)
- ESLint (문법 버그 찾아주는 것)
- Reactjs code snippets (코드 조각)
4. npm (패키지 관리자 - 라이브러리 저장소)

2. Node.js

1. 다운로드

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

https://nodejs.org/ko/download

2. path 잡혔는지 확인하기

3. 플러그인

1. Prettier

2.

3. Reactjs code snippets

4. npm

5. 시작해보기

1. 프로젝트 생성

npx create-react-app myapp

• npx: 패키지를 일시적으로 내려받아 실행하고, 사용 후 삭제. (npm과 달리 전역 설치 불필요)

• myapp: 생성할 프로젝트 이름. 실행하면 myapp 폴더가 자동으로 만들어짐.

2. 프로젝트 열기

• VSCode에서 myapp 폴더 자체를 Open Folder 해야 함.

• 초보자 실수: 상위 폴더 열고 실행하면 터미널 경로가 달라서 명령어가 안 먹음.

3. 서버 실행

npm start

• Node.js 설치 시 함께 설치된 npm으로 실행 가능.

• 실행하면 localhost:3000 에서 앱이 열림.

• 이 서버는 웹서버(프론트 서버) 역할을 하며, 단순히 public/index.html을 읽어 화면에 띄워줌.

4. 프로젝트 구조

• public/index.html
• <div id="root"></div>만 남음.
• 실제 내용은 JS 코드가 이 root에 그려 넣음.

• src/index.js
• ReactDOM.createRoot(document.getElementById('root'))로 root를 찾아 렌더링.
• <App /> 컴포넌트를 root에 그림.

• src/App.js
• 함수형 컴포넌트 App 정의.
• return (...) 안에서 JSX 문법으로 HTML처럼 코드를 작성.
 

5. JSX (JavaScript + XML)

• JS 안에서 HTML 코드를 따옴표 없이 작성 가능.

• 예시:

function App() {
  return <h1>Hello World</h1>;
}

• 사실은 브라우저가 이해하는 HTML이 아니고, React가 해석 후 JS로 변환해줌.

• 템플릿 엔진과 유사: HTML 안에 JS 문법을 자연스럽게 삽입 가능.

6. 템플릿 엔진 정리

• 정의: HTML 코드 안에 특정 언어(Java, Python, JS 등)를 얹을 수 있게 해주는 도구.

• 필요한 것: 브라우저 + language 컴파일러

• 동작 방식
1. 컴파일러 단계
• HTML 안에 삽입된 언어 코드를 먼저 해당 언어의 컴파일러/인터프리터가 해석한다.
• 이 과정에서 언어 부분이 실제 값으로 치환되어 순수 HTML이 생성됨.
2. 브라우저 단계
• 순수 HTML을 브라우저가 렌더링하여 최종 화면에 표시.

• 특징
• HTML에 언어를 얹는 것은 쉽다.
• 예: <p>안녕하세요, ${username}</p>
• 언어에 HTML을 얹는 것은 어렵다.
• HTML은 문자열 처리해야 해서 디버깅과 유지보수가 힘듦.
• 따라서 HTML 중심 + 동적 코드 삽입 방식이 훨씬 편리 → 템플릿 엔진의 핵심.