React 3D 웹앱 - 1. 개요

IT/3D Web

React 3D 웹앱 - 1. 개요

루벤초이 2021. 3. 11. 21:12

React 3D 웹앱 Basic 시리즈입니다.

Github

빠르고 간결하게 React 기반 3D 웹앱을 만들어 봅시다.

먼저 개발환경을 설정합니다.

Node.js 설치

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

위 페이지에서 최신 LTS 설치하시면 됩니다. (v14.60.0, 2021년 3월 기준)

Tip> Node.js는 자바스크립트를 실행 가능한 소프트웨어 플랫폼입니다. React는 자바스크립트 라이브러리로 알려져 있지만, 쉽게 앱을 짤 수 있다는 의미에서 앱 프레임워크(Framework)라고도 합니다. 플랫폼과 프레임워크 차이에 대해 공부해 두면 설계/개발에 도움이 됩니다.

Create React App

터미널을 열고(Windows OS에서는 Node.js command prompt를 열고) 원하는 디렉토리로 이동 후 create-react-app 패키지를 설치합니다.

npm install -g create-react-app

Tip> Node.js에는 어마어마한 오픈 소스 라이브러리들이 있는데요, 이것들을 쉽게 가져다 쓸 수 있는 도구가 npm(node package manager)으로 Node.js 설치 시 기본으로 깔립니다. 위 명령어는 create-react-app 이라는 패키지를 설치한다는 의미인데,
이 패키지는 리액트 앱 템플릿을 단번에 설치해줍니다.

설치 완료 후 다음 명령으로 앱(템플릿)을 생성합니다.

npx create-react-app ruben-app

자, 이제 처음으로 ruben-app이 만들어졌는데요, 앱을 살펴보기 전에 개발툴을 설치합시다.

개발 툴

편리한 개발을 위해 Visual Studio Code(이하 VS Code)를 설치합니다.

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

React나 자바스크립트 개발 시 많이 쓰는 무료 툴이에요. 상업적으로도 무료입니다. (2021년 3월 기준)

Tip> File - Preferences - Extensions에서 여러 유용한 기능들을 설치할 수 있는데요, 특히 사용해오던 익숙한 개발툴이 있으면, 해당 Keymap을 찾아 설치하면 아주 편리해요. 가령 저는 Eclipse에 익숙해서 Eclipse Keymap을 설치합니다.

실행

이제 템플릿을 실행합니다. VS Code 상단 메뉴에서 File - Terminal - New Terminal 을 선택하면 화면 하단에 터미널 창이 열리는데요, 다음 명령으로 설치합니다.

npm install

이 명령은 현재 디렉토리의 package.json 파일 안에 dependencies 항목에 정의된 패키지들을 자동으로 설치해줍니다. 설치가 끝나면 실행해 봅시다.

npm start

잠시 후, 브라우저가 실행되면서 리액트 로고가 보이면 완료!

크롬을 기본 브라우저로 설정하세요. IExplorer는 잘 안되는 기능이 많습니다. 그럼 다음 편에서 React 앱의 구조를 살펴 보고 간단히 수정도 해보겠습니다.

React 앱 구조

※앱 구조를 이해해 두면 개발할 때 알게 모르게 도움이 되고 회의할 때 아는 척 하기도 좋으니 조금 지루하더라도 잘 읽어보시기 바랍니다.

프로젝트 구조

VS Code로 ruben-app을 열어보면, 아래 스크린샷처럼 파일들과 폴더들이 보일 거에요. 하나하나 살펴봅시다.

public/

React 앱은 브라우저로 로컬 URL에 접속하는 형태로 실행됩니다. 앱을 실행(npm start)하면 브라우저가 열리면서 http://localhost:3000 같은 주소(URL)가 자동으로 입력됩니다.

Tip> 이 말은 다른 PC에서도 내 IP 주소로 접근하면 웹 앱을 실행할 수 있다는 의미입니다. 터미널에서 ifconfig(윈도우에서는 ipconfig)로 내 IP 주소를 확인하고 같은 네트워크에 물려있는 다른 PC에서 해당 IP 주소와 포트를 입력하면 똑같은 화면을 볼 수 있습니다.
단, 웹캠을 사용하거나 할 때는 (HTTP가 아닌) HTTPS로 연결되어야 하기 때문에 원격 접속 시 연결 오류가 나는데요, 이 부분은 어려운 내용이라, 추후에 별도 섹션으로 다루겠습니다.

위 경우처럼 브라우저에 입력된 URL이 파일을 가리키는 것이 아닐 때, 브라우저는 자동으로 public/index.html 파일을 열어요. 우리 앱에서도 public/index.html 가 보이시죠? 잠깐 들여다 볼까요?

<html lang="en">
  <body>
    <div id="root"></div>
  </body>
</html>

엥? 아무것도 없잖아? 그쵸, 기대와는 다르게 별 것 없어 보여 당황스럽죠. 그런데 <div> 태그를 보면 id가 'root'로 할당돼있죠. 지금은 비어 있지만, 앱이 실행되면 이 곳을 꽉 채워요. 있어보이는 말로, 렌더링한다고 하죠.

그럼 React 앱은 어떻게 렌더링할까요?

src/

이 폴더 안에 있는 소스 코드들이 public/index.html의 빈 공간 'root' div를 채우게 되는데요, 코드를 살펴볼까요?

import App from './App';

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

맨 아래 줄 document.getElementById('root')에서 public/index.html의 'root' div를 가리키는 것이 보이시죠? 그 root div에 <App /> 내용을 보여주겠다(render)는 의미죠.

이 <App />은 어딘고 하니, 맨 윗줄에서 현재 디렉토리의 App.js 파일을 import 했네요. (.js 확장자는 생략 가능합니다.) App.js를 열어봅시다.

function App() {
  return (
    <div className="App">
      <p>Hello, this is Ruben's app!</p>
    </div>
  );
}

return() 안의 내용이 root div로 들어가게 되는 거죠. <p> 태그 안의 이름을 당신 이름으로 바꿔보세요.

축하합니다, 이제 당신의 React 앱이 되었네요!

package.json

이 파일은 당장 꼭 알아야 할 필요는 없지만 알아두면 아주 좋습니다. 열어볼까요?

{
  "name": "ruben-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

길죠? 다 무시하고 지금은 dependencies 항목만 살펴봅니다. dependencies는 이 앱을 실행하기 위해 필요한 node 패키지(라이브러리)들인데요, (React가 node.js 기반이라는 점 잊지 않으셨죠?)

npm install 명령이 실행될 때 여기 적힌 패키지들이 현재 디렉토리의 node_modules/ 폴더 안에 설치됩니다. node_modules/는 실행에 필요한 빌드 폴더이므로 git에 올라가지 않도록 .gitignore에 포함하는 것이 일반적이죠. 뭔가 꼬인 것 같다 싶으면 node_modules/와 package-lock.json을 지우고 다시 npm install하면 됩니다. node.js에는 많은 패키지들이 있는데, 필요한 것들은 구글링하거나 npmjs.com에서 검색하면 됩니다.

자, 여기까지 읽으셨으면 이제 당신은 리액트 개발자!

당장 다 이해할 필요 없어요, 하다 보면 이해되니까 일단 넘어갑시다.

728x90

'IT > 3D Web' 카테고리의 다른 글

메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 (3)	2021.07.01
메타버스 앱 - 1. 3D 파일 업로드 (2)	2021.07.01
React 3D 웹앱 - 4. 3D 뷰어 (0)	2021.04.24
React 3D 웹앱 - 3. 3D 모델 (0)	2021.03.18
React 3D 웹앱 - 2. Three.js (1)	2021.03.11

현재글React 3D 웹앱 - 1. 개요

IT & Art