ReactJS - React 애플리케이션 생성

안녕하세요, 미래의 React 개발자 여러분! 여러분이 첫 번째 React 애플리케이션을 만드는 흥미로운 여정을 안내해드리게 되어 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 사람으로서 React는 강력하며 배우는 것도 재미있단 말씀드릴 수 있습니다. 그럼 시작해보겠습니다!

ReactJS - Creating a React Application

React는 무엇인가요?

코딩을 시작하기 전에 React에 대해 이해해보겠습니다. React는 사용자 인터페이스를 구축하기 위한 인기 있는 JavaScript 라이브러리입니다. Facebook에서 개발되었으며, Netflix, Instagram, Airbnb와 같은 많은 대형 회사에서 사용하고 있습니다. React를 레고 블록 세트라고 생각해보세요. 이를 통해 복잡한 웹 애플리케이션을 쉽게 만들 수 있습니다.

시작하기

React 애플리케이션을 만들기 위해 몇 가지 도구가 필요합니다. 이전에 사용한 적이 없다면 걱정하지 마세요! 우리는每步를 함께 따라갈 테니!

사전 요구 사항

Node.js와 npm (Node Package Manager)
코드 에디터 (Visual Studio Code를 추천합니다)

이这些东西还沒有安装的话，花点时间安装一下。 이것은 요리하기 전에 주방을 준비하는 것과 같은 것입니다!

Rollup 바ンド러 사용

먼저 Rollup을 사용하여 React 애플리케이션을 만들어보겠습니다. Rollup은 JavaScript 모듈 바운드러로, 작은 코드 조각을 더 크고 복잡한 것으로 컴파일합니다.

단계 1: 프로젝트 설정

먼저 프로젝트 디렉토리를 만들고 초기화합니다:

mkdir my-react-app
cd my-react-app
npm init -y

이렇게 하면 새文件夹를 만들고 새 Node.js 프로젝트를 초기화합니다. 이것은 우리의 집을 기반으로 하는 것과 같습니다!

단계 2: 의존성 설치

이제 필요한 패키지를 설치하겠습니다:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

이 긴 이름들에 놀라지 마세요. 이들은 우리의 React 레시피의 재료라고 생각해보세요!

단계 3: 설정 파일 생성

두 개의 중요한 파일을 만들겠습니다:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

이 파일은 Rollup이 우리의 애플리케이션을 어떻게 바운드할지 알려줍니다. 이것은 셰프에게 요리 방법을 설명하는 것과 같습니다.

.babelrc:

{
"presets": ["@babel/preset-react"]
}

이 파일은 Babel을 설정하고, Babel은 최신 JavaScript를 구식 브라우저에서 이해할 수 있도록 번역하는 데 도움을 줍니다.

단계 4: React 컴포넌트 생성

이제 첫 번째 React 컴포넌트를 만들겠습니다. src/App.js 파일을 생성합니다:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Welcome to my first React application!</p>
</div>
);
}

export default App;

이것은 우리의 주요 컴포넌트입니다. 이것은 우리의 쇼의 스타입니다!

다음으로 src/index.js 파일을 생성합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

이 파일은 우리의 App 컴포넌트를 HTML에 렌더링하는 데 담당합니다.

단계 5: HTML 파일 생성

새 파일 public/index.html을 생성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

이곳에 우리의 React 애플리케이션이 마운트됩니다.

단계 6: package.json에 스크립트 추가

package.json 파일을 업데이트하여 다음 스크립트를 포함시킵니다:

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

이 스크립트는 우리의 애플리케이션을 빌드하고 실행하는 데 도움을 줍니다.

단계 7: 애플리케이션 빌드 및 실행

이제 우리의 창작물을 생명에 불어넣읍시다! 다음을 실행합니다:

npm run build

이 명령어는 우리의 바운드된 JavaScript 파일을 생성합니다. 애플리케이션을 보기 위해 public/index.html을 웹 브라우저에서 엽니다. 축하합니다! 여러분은 Rollup을 사용하여 첫 번째 React 애플리케이션을 만들었습니다!

Parcel 바운더 사용

이제 Rollup을 사용하는 방법을 배웠으니, 또 다른 인기 있는 바운더인 Parcel을 시도해보겠습니다. Parcel은 제로 설정 접근 방식으로 유명하여 시작하기 매우 쉽습니다.

단계 1: 프로젝트 설정

새 프로젝트를 만듭니다:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

단계 2: 의존성 설치

React와 Parcel을 설치합니다:

npm install react react-dom
npm install --save-dev parcel-bundler

단계 3: React 컴포넌트 생성

src/App.js 파일을 생성합니다:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>This app was bundled with Parcel.</p>
</div>
);
}

export default App;

src/index.js 파일을 생성합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

단계 4: HTML 파일 생성

src/index.html 파일을 생성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

이렇게 하면 우리의 index.js 파일에 직접 링크할 수 있습니다. Parcel은 우리를 위해 바운딩을 처리해줄 것입니다!

단계 5: package.json에 스크립트 추가

package.json 파일을 업데이트하여 다음 스크립트를 포함시킵니다:

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

단계 6: 애플리케이션 실행

이제 애플리케이션을 실행합니다:

npm start

Parcel은 자동으로 브라우저에서 애플리케이션을 엽니다. 변경사항을 할 때마다 즉시 반영됩니다!

생산 환경을 위한 빌드:

npm run build

이 명령어는 최적화된 파일을 dist 디렉토리에 생성합니다.

Rollup과 Parcel 비교

이제 두 바운더를 간단히 비교해보겠습니다:

기능	Rollup	Parcel
설정	설정 파일 필요	제로 설정
속도	빠르다	매우 빠르다
파일 크기	일반적으로 더 작다	약간 더 크다
학습 곡선	더 가파르다	부드럽다
유연성	매우 커스터마이즈 가능	덜 커스터마이즈 가능

두 바운더 모두 강점이 있으며, 선택은 프로젝트의 특정 요구에 따라 달라집니다.

결론

축하합니다! 이제 Rollup과 Parcel을 사용하여 React 애플리케이션을 만들었습니다. 기억하시라, 천 리의 여정은 단 한 걸음으로 시작된다. 여러분은 React 개발의 흥미로운 세계로 첫 걸음을 내딛었습니다.

계속 학습하고 성장하면서 React는 웹 개발에서 새로운 가능성을 열어줄 것입니다. 그림을 그리는 것처럼, 처음에는 기본적인 형태에 어려움을 겪을 수 있지만, 곧 마스터피스를 만들 수 있을 것입니다!

계속 연습하고, 호기심을 유지하며, 가장 중요한 것은 즐기세요! React는 강력한 도구이지만, 사용하기에도 기쁨을 줍니다. 행복한 코딩을 기원합니다!

Credits: Image by storyset