Simple React Shopping Mall 만들기(1)

내가 React로 처음 진행하였던 Project는 React을 이용한 Shopping Mall만들기 였다. 본래 많은 개발 Project에서는 React와 Redux를 같이 사용하지만, 이번에는 React만을 사용해 Project를 진행해 보도록 하겠다.

이 게시물의 목적은 실제 Shopping Mall을 만드는 것이 아니다. 간단한 기능을 실제로 구현해봄으로써 React의 실제 기능에 대해 설명하고자 하는 것이다.

실제 Shopping Mall처럼 Modal창이 뜨고, 예쁜 css를 가지고, 로그인이 구현된 사이트를 만들진 않을것이다. 다만 아주 간단한 기능들만을 구현함으로써, React가 가진 기술적 측면을 설명하는데 집중하도록 하겠다.

Navigation, Router 이동, state, props 정도의 기능만을 설명하고자 한다.

What are we using?

Nodejs
NPM
Yarn
개인적으로 NPM보다 빠른 Yarn을 추천한다.
Editor는 Atom, Visual Studio Code등 편한 것을 사용하면 된다.

Using Create React App

Webpack을 이용하여 처음부터 React 프로젝트를 진행할수도 있지만, 이는 시간이 많이 걸린다. 하지만 다행히 Facebook에서 이를 도와줄 공식 도구를 Realese하였다.
Create React App은 React의 작업환경을 쉽게 설정하고 만들어주는 멋진 도구이다. Create React App을 설치하고 React프로젝트를 생성하는 것은 매우 간단하다. Terminal에서 각각의 명령어를 입력한다.

- yarn global add create-react-app
- create-react-app project
- cd project
- yarn start

create-react-app으로 만든 Project의 초기 모습

Delete unnecessary files && folders

Create React App으로 Project를 만들게 되면 나의 Project를 진행할 때 필요가 없는 몇가지 폴더들과 파일들이 있다. 필요 없으니 삭제하는게 좋지만, 하지 않아도 진행하는데 큰 문제는 없다.

- node_modules/
- public/
	- index.html
	- manifest.json
- src
    `- components/ ##component들이 위치할 폴더
	    -App/ App폴더 생성
		    - App.js
		    - App.css
		    - App.test
        - public/ image파일 등이 위치할 폴더
        - index.css
        - index.js
    - .gitignore
    - package.json
    - README.md
    - yarn.lock

index.js

App.js

Directory 전체 구조가 변경되었으므로 import 부분의 수정이 필요하다.

또한, 본인같은 경우, logo.svg, registerServiceWorker.js파일등을 삭제하였다.

React Router 적용

React Router: Declarative Routing for React

React Router는 Web, React Native, 심지어 VR에서도 사용 가능한 멋진 routing 라이브러리이다. React는 기본적으로 SPA(Single Page Application)을 위한 라이브러리인데, SPA의 문제점은 프로젝트의 규모가 커진다면 Javascript file이 커지므로 렌더링시간이 오래 걸린다는 것이다. 이를 해결하기 위해 React에 Routing기능을 적용시키는 것이다. 설치 방법은 간단하다.

- yarn add react-router-dom

그 후, src폴더에 있는 index.js를 다음과 같이 수정한다.

index.js

설치한 react-router-dom에서 BrowserRouter을 불러와 우리 App에 적용시켰다. 이제 Routing 기능을 사용할 수 있다. 차후 Redux를 사용할 경우 BrowserRoter대신, import { Provider } from ‘react-redux’ 같은 기능을 설치하고 사용하면 된다.

NODE PATH 적용

위에 index.js파일을 살펴보자. App파일을 불러오는데, 상대경로를 사용하여 파일을 불러오는 중이다. Director구조가 조금만 복잡해지면 다른 파일들을 import할 때 굉장히 번거로워진다. 이를 해결하기 위해 Node Path를 적용시켜 절대경로를 사용하면, 프로젝트를 진행하기 수월해진다. 이를 적용하는 것은 간단하다.

- root폴더에 .env 파일 생성(확장자 X)
- .env 파일
  NODE_PATH=src 

이렇게 되면, 이후 파일을 import할 때 src폴더가 기준이 된다. 전체 프로젝트에서 import를 한 부분을 수정해보도록 하자.

index.js

App.js

index.js, App.js를 수정한 후 서버를 재시작하면 정상적으로 작동한다. 이후 import하는 component들과 파일은 src폴더 기준으로 import하도록 하겠다.

다음 블로그에서는 본격적으로 Component들을 생성하고 Routing 처리 등을 진행해 보도록 하겠다.

Simple React Shopping Mall 만들기(2)