ReactJS - 설치: 초보자 가이드

안녕하세요, 미래의 React 개발자 여러분! ReactJS의 세상으로의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 사람으로서 React를 배우는 것은 자전거 타는 것과 같습니다.처음에는 어렵게 보일 수 있지만, 한 번 익숙해지면 쉽게巡航할 수 있을 것입니다!

ReactJS - Installation

ReactJS는 무엇인가요?

설치에 들어가기 전에 ReactJS가 무엇인지 간단히 이해해 보겠습니다. React는 사용자 인터페이스를 구축하기 위한 인기 있는 JavaScript 라이브러리로, 특히 단일 페이지 애플리케이션에 사용됩니다. 재사용 가능한 UI 컴포넌트를 만들어 자신의 상태를 관리하도록 하여 복잡한 인터페이스를 구축하는 것을 더 쉽게 만들어줍니다.

이제 손을 더러워지게 하고 React를 설정해 보겠습니다!

도구 체인: 당신의 React 도구箱

React를 사용할 때, "도구 체인"이라는 도구 세트를 사용합니다. 이를 당신의 React 스위스 아ーノ이 청소 도구로 생각해 보세요 – 놀라운 웹 애플리케이션을 만들기 위해 필요한 모든 것이 있습니다.

도구 체인의 필수 도구

도구	목적
Node.js	JavaScript 런타임
npm (Node Package Manager)	JavaScript 패키지 관리자
Babel	JavaScript 컴파일러
Webpack	모듈 바인더
ESLint	코드 라인터
Jest	테스트 프레임워크

이제 이 용어들이 외계어 같아 보일 수 있지만, 우리는 각각을 차례대로 탐구해 나갈 것입니다!

정적 서버: 당신의 로컬 놀이터

복잡한 설정에 뛰어들기 전에, 간단한 것으로 시작해 보겠습니다 – 정적 서버. 이를 통해 우리는 컴퓨터에서 로컬로 React 애플리케이션을 제공할 수 있습니다.

간단한 정적 서버 설정

먼저 Node.js가 설치되어 있는지 확인하세요. nodejs.org에서 다운로드할 수 있습니다.
터미널이나 명령 프롬프트를 엽니다. 다음 명령어를 실행합니다:

npm install -g serve

이 명령어는 'serve' 패키지를 시스템 전체에 설치합니다.

새로운 프로젝트 디렉토리를 만들고 이동합니다:

mkdir my-react-app
cd my-react-app

간단한 HTML 파일 index.html을 만듭니다:

<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 React 앱</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

이제 serve 명령어를 실행합니다:

serve

이제 애플리케이션이 어디서 제공되고 있는지 알려주는 메시지를 볼 수 있을 것입니다. 일반적으로 http://localhost:5000입니다. 이 URL을 브라우저에서 열어, 첫 번째 React 앱을 볼 수 있습니다!

Babel 컴파일러: 미래를 번역하다

우리의 도구 체인에서 Babel을 기억하시나요? 이 마법의 통역가를 만나보겠습니다! Babel은 최신 JavaScript 기능을 사용할 수 있도록 해주는 JavaScript 컴파일러로, 브라우저가 아직 지원하지 않는 기능도 사용할 수 있게 해줍니다.

왜 Babel이 필요한가요?

다른 언어를 사용하는 친구에게 편지를 쓰는 것을 생각해 보세요. Babel은 친구의 언어로 즉시 편지를 번역할 수 있는 통역가입니다. React의 세상에서 Babel은 최신 JavaScript와 JSX(React의 문법 확장)을 모든 브라우저가 이해할 수 있는 JavaScript로 번역합니다.

프로젝트에서 Babel 사용하기

이미 간단한 HTML 파일에서 Babel을 포함했습니다. 이 부분을 분해해 보겠습니다:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// React 코드 여기에
</script>

첫 번째 줄은 Babel 스탠다론 라이브러리를 포함합니다. 두 번째 줄은 Babel에게 스크립트 태그 내의 코드를 컴파일하도록 합니다.

Create React App 도구 체인: 올인원 솔루션

이제 React의 물에 발을 담그고, Create React App 도구 체인으로 더 깊이 뛰어들어 보겠습니다. 이는 학습과 새로운 React 단일 페이지 애플리케이션을 만들기 위한 편안하고 기능이 풍부한 환경입니다.

Create React App 설정

터미널을 엽니다. 다음 명령어를 실행합니다:

npx create-react-app my-app

작업이 완료되면, 새로운 애플리케이션으로 이동합니다:

cd my-app

개발 서버를 시작합니다:

npm start

새로운 React 애플리케이션이 자동으로 브라우저에서 열리며, 일반적으로 http://localhost:3000에서 볼 수 있습니다.

무엇이 들어 있나요?

Create React App은 완전히 설정된 개발 환경을 제공합니다. 어떤 기능들이 있는지 살펴보겠습니다:

기능	설명
React	React 핵심 라이브러리
webpack	코드와 자산을 바인딩
Babel	최신 JavaScript를 컴파일
ESLint	코드를 오류로 검사
Jest	테스트를 작성할 수 있게 함
Hot Reloading	브라우저에서 즉시 변경 사항을 볼 수 있게 함

첫 번째 컴포넌트

간단한 React 컴포넌트를 만들어 보겠습니다. src/App.js를 엽니다. 내용을 다음과 같이 변경합니다:

import React from 'react';

function App() {
return (
<div>
<h1>내 React 앱에 오신 것을 환영합니다</h1>
<p>이것이 내 첫 번째 컴포넌트입니다!</p>
</div>
);
}

export default App;

파일을 저장하고 브라우저를 확인하세요. 새로운 컴포넌트가 렌더링되어야 합니다!

결론

축하합니다! React 개발의 흥미로운 세상으로 첫 걸음을 뗀 것입니다. 우리는 많은 내용을 다루었습니다 – 간단한 정적 서버 설정에서 강력한 Create React App 도구 체인 사용까지.

기억하세요, React를 배우는 것은 여정입니다. 모든 것이 즉시 이해되지 않아도 괜찮습니다. 계속 연습하고, 계속 빌드하고, 가장 중요한 것은 즐겁게 만들어 가세요!

다음 강의에서는 React 컴포넌트를 더 깊이 탐구하고 더 복잡한 애플리케이션을 만들기 시작하겠습니다. 그때까지, 즐거운 코딩을!

Credits: Image by storyset