React 개발 환경 설정

Node.js

  Node.js란 Chrome V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 즉, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다.

• https://nodejs.org/en

LTS(Long Term Support) 버전을 다운로드합니다.

  프로그램 다운로드 후 설치합니다.

  설치 완료 후 터미널에서 node -v 입력하여 정상적으로 설치 되었는지 확인합니다.

 

Visual Studio Code

  Visual Studio Code는 Microsoft에서 오픈소스로 개발하고 있는 소스 코드 편집기입니다.

• https://code.visualstudio.com/

  프로그램 다운로드 후 설치합니다.

 

React

  Create-React-App을 이용해서 리액트를 설치합니다. 이렇게 하면 Babel이나 Webpack 설정이 이미 다 되어있기에 많은 시간이 걸리지 않고 리액트 앱을 시작할 수 있습니다.

npx create-react-app <폴더 이름>

• npx: 노드 패키지 실행을 도와주는 도구입니다.

 

Note)

• Webpack: 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기에 로딩에 대한 네트워크 비용을 줄일 수 있고, 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽습니다.
• Babel: 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리입니다.

 

1. 리액트 앱을 만들 폴더를 생성합니다.
2. 해당 폴더에서 터미널을 실행합니다.
3. npx create-react-app ./
4. 폴더를 Visual Studio Code에 Drag&Drop 하거나 Visual Studio Code에서 해당 폴더를 Open 합니다.

 

React Folder Structure

Folder Structure

public 폴더

• public/index.html은 페이지 템플릿입니다.
• 해당 폴더의 파일들은 오직 public/index.html만 쓰일 수 있습니다.

 

src 폴더

• src/index.js 파일은 자바스크립트의 시작점입니다.
• 대부분의 리액트 소스 코드들은 이곳에 작성합니다.
• JS파일과 CSS 파일들을 넣으면 됩니다.
• Webpack은 여기에 있는 파일만 봅니다.

 

package.json

• 프로젝트에 대한 정보들이 들어 있습니다.
• 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있습니다.
• 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트 등이 명시되어 있습니다.

package.json

 

React App 실행

  Visual Studio Code에서 터미널을 열고 다음 명령어를 실행합니다.

npm run start

 

SPA(Single Page Application)

  전통적으로 두 개 이상의 페이지를 만들 때, a 페이지를 만들면 a.html b 페이지를 만들면 b.html 으로 만들었습니다. 이러한 방식을 Multi Page Application이라고 합니다. SPA(Single Page Application)이란 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것입니다.

 

  index.html 밖에 없는 SPA에서 페이지 전환(브라우징)은 HTML 5의 History API를 사용해서 가능하게 만듭니다. 자바스크립트 영역에서 History API를 이용해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줍니다.

 

JSX(Javascript Syntax Extension)

  JSX는 자바스크립트의 확장 문법입니다. React에서는 JSX를 이용해 화면에서 UI가 보이는 모습을 나타내줍니다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있습니다.

 

  React에서 화면을 그리는 방식은 React.createElement API를 사용해 엘리먼트를 생성한 후, 해당 엘리먼트를 In-Memory에 저장합니다. 그리고 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려줍니다.

 

  모든 UI를 만들 때마다 createElement를 사용해서 컴포넌트를 만들 수는 없기에 JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용합니다. JSX에 대한 내용은 다음을 참고하시면 됩니다.

• https://ko.legacy.reactjs.org/docs/introducing-jsx.html

 

VSCode Extension

• ESLint: EcmaScript(javascript) + Lint 합성어입니다. Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. 즉, ESLint는 자바스크립트 문법에 에러가 발생하면 표시해주는 도구입니다.

 

• ES7 React / Redux / GrapthQL / React-Native snippets: 키워드로 편리하게 리액트에서 쓰이는 구조를 만들어 줍니다. rfc 키워드의 경우, 아래 코드를 자동으로 완성해 줍니다. 추가 키워드는 다음을 참고하시면 됩니다. https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

import React from 'react'

export default function Form() {
  return (
    <div>
      
    </div>
  )
}

 

• Prettier: Code Formatte 입니다.

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z