React Redux ProductMoor Frontend

이 프로젝트는 Product Moor 웹 프론트엔드 제작을 위한 Kit 입니다. 추후에 마크업 나오면 구조에 맞추어 적용하겠습니다.

Table of Contents

1. Running the Project
2. Project Structure
3. Data Modeling
4. Live Development
   • Hot Reloading
   • Redux DevTools
5. Routing

Running the Project

$ yarn start  # Start the development server (or `npm start`)

Project Structure

.
├── build                    # 전체 소스 빌드
├── public                   # Main HTML page and Static public assets 
├── src                      # Application source code
│   ├── components           # Global Reusable Components
│   │   └── Article          # PD page all component
│   │   └── Home             # Home page all component
│   ├── constants            # action 정의서 
│   ├── reducers             # all reducers definition
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── agent.js             # 외부 API 연계 호출 (데이터)
│   └── index.js             # 페이지 Router 정의 

Data Modeling

마크업에 따라 변경이 되겠지만 home과 detail page에 대한 데이터 모델링이 필요하여 다음과 같이 구성하고 페이지에 출력했음. [Home]

{ 
   articles:[ 
      { 
         img:"/uploads-productions-156392658587651995.jpg/640/640",
         title:"title_title",
         description:"test1",
         url:"charming",
         slug:1
      },
      { 
         img:"/uploads-productions-157526343486057882.jpg/640/640",
         title:"title_title",
         description:"test1",
         url:"charming",
         slug:2
      }
   ]
}

[Detail Page]

{ 
   article:{ 
      content1:"Lorem ipsum dolor sit amet",
      content2:"Lorem ipsum dolor sit amet",
      img1:"http://demo.themefisher.com/parsa/images/post-single.jpg",
      img2:"http://demo.themefisher.com/parsa/images/post-img.jpg"
   }
}

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

• For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

• For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

yarn add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.

Routing

We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the project structure section for more information.