호쌤
호쌤 Just For Fun

[React] 01강 - Hello React

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[React] 01강 - Hello React≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[React] 01강 - Hello React

이 포스트는 수업에 활용되기 위한 강의 노트 입니다. 실습을 진행하기 전까지 수행해야 하는 기본 설정 작업과 간단한 요약 내용이 정리되어 있습니다.

실제 React 내용을 다루기 전까지 수강생들이 준비해야 할 과정을 정리한 것임을 참고하시기 바랍니다.

#01. 기본 개발환경 구축하기

1) Node.js

https://nodejs.org

원래는 백엔드 서버를 구현하는 Framework이지만 node에 포함되어 있는 npm 명령을 사용하기 위해 설치해야 한다.

npm은 패캐지 매니저 도구로서 앞으로 사용하게 될 각종 패키지들을 설치,삭제,업데이트 하는 기능을 제공한다.

설치확인

명령프롬프트에서 다음의 명령어를 수행

1
$ node --version

아래와 같이 버전 정보가 표시된다면 node.js가 이미 설치되어 있는 상태이므로 다음으로 넘어간다.

1
2
C:\Users\leekh>node --version
v13.0.1

다운로드 및 설치

만약 버전이 표시되지 않고 에러메시지가 출력되면 https://nodejs.org 사이트를 통해 다운로드 받는다.

설치시 LTS 버전을 사용하도록 한다. (장기적으로 안정적인 지원을 제공하는 버전)

설치 과정상에서 특이사항은 없으므로 부담없이 설치하면 된다.

2) yarn

npm보다 더 빠르고 효율적인 패키지 관리도구로서 훨씬 많은 부가 기능을 제공한다.

npm과 역할은 동일하지만 최근에 각광받고 있는 도구이므로 함께 사용해 보는 것을 권장한다.

설치 확인

다음의 명령으로 설치 여부를 확인한다.

1
$ yarn --verion

아래와 같이 표시되면 설치가 되어 있는 상태이다.

1
2
C:\Users\leekh>yarn --version
1.19.1

설치하기

만약 위와 같이 표시되지 않을 경우 (https://yarnpkg.com/en/docs/install)[https://yarnpkg.com/en/docs/install]에서 설치 프로그램을 내려받아 설치를 진행한다.

설치 프로그램을 내려받을 때 사용중인 운영체제에 맞는 버전을 선택해야 하며 Stable 버전 (안정화 버전)을 내려받도록 한다.

3) Editor

자신에게 익숙한 에디터가 가장 좋은 것 입니다.

  • Sublime Text 3
  • Visual Studio Code
  • Atom
  • Braket
  • WebStorm
  • Eclipse
  • Editplus

VSCode 사용시 React 관련 필수 익스텐션

  • ESLint : 자바 스크립트 문법 및 코드 스타일 검사 도구
  • Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 조각 모음.

    제작자가 charalampos karypidis인 것 추천

  • Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구

ESLint 설치 후 명령프롬프트를 관리자 권한으로 실행하여 아래의 명령어들을 실행해야 한다.

1
2
3
$ npm install -g eslint
$ npm install --save-dev babel-eslint
$ npm install --save-dev eslint-plugin-react

VSCode 설정파일에 다음 구문을 추가한다.

1
2
3
4
5
"javascript.validate.enable": false,
"eslint.enable": true,
"jshint.options": {
    "esversion": 6
}

그 밖의 VSCode 필수 익스텐션들

1
2
3
4
5
6
7
8
9
10
11
12
13
Auto Close Tag
Auto Rename Tag
GitLens
Image Preview
IntelliSense for CSS Class name
JavaScript(ES6) Code snippets
jshint
npm
npm Intellisense
Output Cloloizer
Path Intellisense
Prettier - code formatter (비슷한 이름이 많으니 주의)
Rainbow Brakets

#02. Hello World

1) react 프로젝트 생성하기

임의의 작업 폴더를 하나 생성하고 명령 프롬프트를 실행하여 해당 위치로 이동한다.

1
cd /d 이동할경로

혹은 작업폴더에서 Shift + 마우스우클릭여기에 PowerShell 창 열기 메뉴를 선택한다.

001

Window10 미만 버전의 경우 여기에 명령 프롬프트 열기 메뉴로 표시된다.

다음의 명령어를 사용하여 프로젝트를 생성한다.

1
$ yarn create react-app 프로젝트이름

혹은

1
$ npm create react-app 프로젝트이름

혹은

1
$ npm init react-app 프로젝트이름

002

02) 프로젝트 실행하기

생성된 프로젝트 폴더 안으로 이동한 후 다음의 명령어로 리액트 개발 전용 서버를 구동한다.

1
yarn start

혹은

1
npm start

003

이후 웹 브라우저가 자동으로 실행되면서 React 페이지에 접속된다.

다음의 URL을 통해 직접 접근도 가능하다.

http://localhost:3000

#03. 기본 코드 분석

/src/App.js

/src/index.js에 의해 호출되는 컴포넌트 객체

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
32
33
34
35
36
37
38
39
/** 웹 팩을 통해 번들링(통합) 될 파일들 선언 */

// 번들링 시에는 웹 팩에 포함되어 있는 바벨이라는 도구를 통해
// ES6 문법이 하ES5 문법으로 변환된다.(위 브라우저 호환을 위함)

// node_modules 폴더에 다운로드 된 리액트를 불러와서 실행할 수 있게 한다.
import React from 'react';
// 사용하고자 하는 이미지 파일 불러오기
import logo from './logo.svg';
// 사용하고자 하는 스타일시트 가져오기
import './App.css';

/** App이라는 이름의 함수형 컴포넌트 정의 */
// 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용이 브라우저에 나타난다.
function App() {
  // 반환되는 HTML 코드는 JSX 문법을 사용한다.
  // JSX --> XML과 비슷한 React 전용 Javascript 확장 문법.
  // react 프로젝트가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

/src/index.js

프로젝트의 첫 페이지를 구동시키는 스크립트 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

// App.js를 가져온다.
import App from "./App";
import * as serviceWorker from "./serviceWorker";

/** 컴포넌트를 페이지에 랜더링한다. */
// App.js에서 정의한 `App`이라는 이름의 컴포넌트를 HTML 태그처럼 사용한다.
// -> 첫 번째 파라미터: 사용할 컴포넌트
// -> 두 번째 파라미터: 컴포넌트를 출력할 index.html 페이지에 정의되어 있는 요소
// -> <React.StrictMode> 이 적용되어 있는 경우, 선언만 하고 사용되지 않는 변수들에 대한 경고 메시지가 브라우저 콘솔에 표시된다.
//    개발용이므로 최종 빌드시에는 제거하는 것이 좋다.
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root"));

serviceWorker.unregister();
Rating:

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[React] 01강 - Hello React≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus