React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(1) - 구조 설정

약간 복잡한 회원가입 페이지를 구현해보겠습니다. 일반적인 가입 양식뿐만 아니라 다음과 같은 반응형 커스텀 컨포넌트도 만들게 됩니다.

yarn 패키지 설치

yarn은 조금 개선된 버전의 npm이라고 생각하면 됩니다.

npm install -g yarn

 

초기 앱 생성 도구 설치

이 프로젝트에서는 create-react-app이라는 도구를 사용해서 초기 react앱을 생성합니다.

npm install -g create-react-app

만약 yarn을 이용하여 설치하고 싶다면 다음과 같이 입력하면 됩니다.

yarn global add create-react-app

 

필요 패키지 설치

nodemon은 개발 서버 실행 중 코드를 수정하면 즉각적으로 페이지가 변화되도록 해줍니다.

yarn add nodemon

Redux는 React 앱의 상태 관리를 도와줍니다.

yarn add redux react-redux redux-actions

react router를 통해 페이지를 이동합니다.

yarn add react-router-dom

웹 호스팅을 위해 serve 패키지를 설치합니다.

yarn global add serve

미리 정의된 UI 컴포넌트를 사용하기 위해 Semantic UI를 설치해줍니다. 다른 UI 패키지도 많기 때문에 나중에 Semantic UI가 아닌 다른 패키지를 사용해도 좋습니다. 자세한 사용법은 여기를 참고하세요.

yarn add semantic-ui-react

import를 편하게 하기 위해 cross-env를 설치합니다.

yarn add cross-env

 

0. 시작하기 전

import를 할 때 사용하려는 모듈의 경로를 작성하여야 합니다. 이 때 상대경로로 하면 ../../~ 와 같이 경로가 길어지고 굉장히 불편하며 직관적이지도 않습니다. 따라서 cross-env로 경로 설정을 하여 import할 때 절대 경로를 사용할 수 있도록 하겠습니다.

package.json

// ..
"scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
// ..

이렇게 하면 src/App.js를 import App from 'App'와 같이 불러올 수 있습니다.

 

1. 초기 앱 생성

각 운영체제의 bash에서 앱을 생성하고자 하는 폴더로 이동한 뒤 다음 명령어를 입력해줍니다.

xxxxxxxxxx
create-react-app [앱 이름]

여기선 Windows 운영체제를 기준으로 설명하겠습니다. 저는 D드라이브의 React 폴더 내에 생성해주기 위해 다음과 같이 하였습니다.

D:
cd React
create-react-app register_app

이 명령어를 입력하고나면 잠깐의 시간 뒤에 register_app 폴더가 생성되어 있는 것을 확인할 수 있습니다.

생성이 완료되면 해당 폴더 내로 이동합니다.

xxxxxxxxxx
cd register_app

그런 다음 앱의 실행을 위해 다음 명령어를 입력해줍니다.

xxxxxxxxxx
yarn start

다음과 같은 화면이 뜨면 성공입니다!

 

2. 초기 프로젝트 구조 수정하기

VS code나 Atom과 같은 개발자 도구를 이용해서 프로젝트 폴더를 열어주면 다음과 같은 구조를 확인할 수 있습니다.

xxxxxxxxxx
src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

현재 저희가 필요없는 파일들은 전부 지워주도록 하겠습니다.

다음 목록의 파일들을 지워주고

xxxxxxxxxx
App.css / App.test.js / logo.svg

App.js를 다음과 같이 수정합니다.

​x
import React, { Component } from 'react';
​
class App extends Component {
  render() {
    return (
      <div>
        Hello world
      </div>
    );
  }
}
​
export default App;

실행되고 있는 페이지를 확인했을 때 Hello world라는 문장만 뜨면 성공입니다.

이제 본격적인 코딩에 앞서 프로젝트 구조를 다음과 같이 수정해줍니다. 이전에 없던 파일은 그대로 생성만 해주시면 됩니다. 앞으로 진행하면서 많은 파일들을 폴더 내에 생성해줄 것 입니다.

xxxxxxxxxx
src
├── App.js
├── Root.js
├── index.js
├── index.css
├── components
│   ├── Login
│   ├── Register
│   └── TagInput
├── containers
│   ├── Register
│   ├── Login
│   └── index.js
├── image
├── pages
│   ├── index.js
│   ├── Home.js
│   └── Signup.js
└── serviceWorker.js

 

간단히 구조를 설명하겠습니다.

components : 페이지에 보여지는 여러 컴포넌트(구성요소)들이 정의됩니다.

containers : Redux store와 컴포넌트를 연결하는 컨테이너들이 정의됩니다.

pages : 각 페이지들이 정의됩니다. 여기선 Home(로그인 페이지), Signup(회원가입 페이지) 두 개의 페이지가 존재합니다.

여기에 Redux store 정의를 위해 추후에 store라는 폴더를 구조에 추가하게 됩니다.