React (리액트) 기초 강좌

티스토리 뷰

REACT

React (리액트) 기초 강좌

브라이언77 2022. 12. 29. 10:18

리액트 기초 강좌

1. 리액트를 위한 프로그램 설치 및 환경 설정

리액트 프로그램 개발을 위해서 Visual Studio Code, Node.js, React Developer Tools ( chrome extension ) 을 설치한다.

- VS Code : https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

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

code.visualstudio.com

자신의 운영체제에 맞는 버전을 다운로드 받아서 설치한다. 이번 강좌에서 사용할 버전은 1.74.0 for MAC 이다.

- Node.js : https://nodejs.org/en/download/

Download | Node.js

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

nodejs.org

node.js 는 javascript 실행환경이다. 강좌에서는 v19.2.0 버전을 사용한다.

- React Development Tools(Chrome extension): https://chrome.google.com/webstore/category/extensions?hl=en-GB

Chrome Web Store

Discover great apps, games, extensions and themes for Google Chrome.

chrome.google.com

React Development Tools은 브라우져에서 React component 에 대한 정보를 확인할 수 있는 chrome extension 이다. 크롬 / 파이어폭스 extension 에서 검색해서 설치한다.

2. VS Code : Extention 추가하기

VS Code를 사용해서 코딩할 때 유용한 다음 패키지들을 설치한다.

- ES7+ React/Redux/React-Native snippets

- Prettier - Code Formatter

여기가지 하면 리액트 개발을 위한 준비가 끝났다. 다음은 본격적으로 프로젝트 폴더를 생성하고 리액트 코드를 만들어보자.

3. 리액트 프로젝트 생성 ( create-react-app )

리액트 강좌를 위한 새로운 폴더를 생성하고 VS Code 에서 생성된 새폴더를 열어준다.

terminal 을 열어서 강좌를 위한 새로운 리액트 애플리케이션을 생성한다. 이번 강좌에서는 마트의 재고관리를 위한 mart inventory 관리웹을 만들어볼 예정이다. "mart-inventory" 로 리액트 애플리케이션을 생성한다.

% npx create-react-app mart-inventory

리액트 관련 패키지들이 생성된다. 정상적으로 리액트 프로젝트가 생성되면 다음과 같이 메시지가 나타난다.

다음은 리액트가 생성한 프로젝트로 들어가서 프로그램을 실행시켜본다. npm은 javascript 프로그램 패키지 관리 모듈이다. node.js 에서는 npm 을 기본으로 사용하고 있는데, yarn 을 설치해서 패키지를 관리할 수도 있다.

brian@Brians-MacBook-Pro react-tutorial % cd mart-inventory 
brian@Brians-MacBook-Pro mart-inventory % npm start

yarn을 사용하는 경우,

yarn start

npm / yarm 을 이용해서 프로그램을 실행시키면, react 의 초기 화면이 나타난다.

react 로고 화면이 나온다면 정상적으로 프로그램이 설치되고, 애플리케이션 생성도 되었다는 의미이다. 이제 부터 본격적으로 mart-inventory 를 위한 작업을 시작하면된다.

4. react 소스 코드 정리하기

리액트 애플리케이션을 생성하면 기본으로 많은 파일들이 생성되는데, 불필요한 파일을 삭제해서 기본 소스 코드만 남긴다.

리액트 애플리케이션을 생성하면 node_modules, public, src 폴더가 생성된다. node_modules 폴더에는 javascript 패키지들이 저장되고, public 폴더에는 html / images 관련 파일들이 저장된다. 마지막으로 src 에 모든 javascript 소스코드가 저장되는 곳이다.

최소한의 파일만 남기고 모두 삭제한다. 남겨진 파일에서도 필요 없는 코드는 삭제한다.

index.html >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

App.css >

.. 모두 삭제 ..

App.js >

import "./App.css";

function App() {
  return <div className='App'>Hello, React App !!!</div>;
}

export default App;

index.js >

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.css >

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

파일들을 삭제, 수정하고 저장하면 web 에서 다음과 같이 나타난다.

여기까지 했다면 새로운 애플리케이션 개발이 완료된 것이다. 다음 포스팅에서는 리액트 구조에 대해서 좀더 알아보고 mart-inventory 애플리케이션을 개발을 본격적으로 시작한다.

끝.

'REACT' 카테고리의 다른 글

리액트 기초 강좌 - Library Management #2 (0)	2022.12.29

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

IT Dev Log

티스토리 뷰