📌 리액트 앱 만들기
- React 란?
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
라이브러리란, API를 기반으로 대상 환경에서 바로 실행 될 수 있도록 모듈화된 프로그램 모음이다.
페이스북에서 만든 자바스크립트 사용자 인터페이스 라이브러리인 리액트는, 기존의 방식보다 빠른 UI 랜더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 만들었다.
사용한 에디터: VSCode
1. Node.js 설치
Node.js 공식 다운로드 링크: https://nodejs.org/ko
- Node.js 란?
Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
런타임이란, 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다.
기존에는 브라우저에스 자바스크립트 해석 엔진을 통해서 자바스크립트를 실행하였다.
그러나, Nodejs라는 자바스크립트 실행환경을 이용하면 브라우저 외에서도 자바스크립트를 사용할 수 있게 된다.
2. Create React App
npx create-react-app app-name
cd app-name
npm startcreate-react-app은 개발자로 하여금 수많은 빌드 도구를 배우고 구성할 필요 없이 개발을 시작할 수 있도록 해준다.
📌 기본 구조
다음 명령어를 통해 앱을 시작, 빌드, 테스트 할 수 있다.
// pakage.json
...{othr codes}
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
{other codes}...src/index.js 파일에서 public/index.html 파일로 요소를 렌더해주며 앱이 실행된다.
// src/index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);<!-- public/index.html -->
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
Frontend, Mobile Developer