E-commerce Vanila JS [2편] 라우팅 기초

---

1 테스트용 DB생성

 1) 테스트용으로 사용할 데이터베이스 'data.js'를 생성한다.

 

[ root\frontend\src\data.js ]

 

 

 2) data.js에는 임시로 사용할 db를 넣어준다.

- 임시로 사용할 data.js는 몽고DB와 같은 json형태로 생성해준다. 

 

export default {       products:[           {               _id: '1',               name: 'tree01 3d model',               category: 'Nature',               image: '/images/tree_modeling.jpg',               price: 1.2,               size: '3.1mb',               rating: 4.5,               numReviews: 7,               format:'fbx',               texture:true,               rig:false,               license:'public',               description: ' street tree 3d moding file',                         },           {               _id: '2',               name: 'human basic model',               category: 'Character',               image: '/images/human_modeling.jpg',               price: 0.8,               size: '1.2mb',               rating: 4.5,               numReviews: 3,               format:'obj',               texture:false,               rig:true,               license:'public',               description: 'charater modeling basis 3d file',           },           {               _id: '3',               name: 'sports car',               category: 'Car',               image: '/images/sportcar_modeling.jpg',               price: 2,               size: '5.3mb',               rating: 3.5,               numReviews: 5,               format:'fbx',               texture:false,               rig:false,               license:'private',               description: 'sports car 3d model of z4 bmw',           },           {               _id: '4',               name: 'study chair',               category: 'Interior',               image: '/images/chair_modeling.jpg',               price: 2.3,               size: '0.8mb',               rating: 4.3,               numReviews: 2,               format:'fbx',               texture:true,               rig:false,               license:'public',               description: 'study room with desk',           },           {               _id: '5',               name: 'gallaxy s7',               category: 'Electronics',               image: '/images/smartphone_modeling.jpg',               price: 2,               size: '1.2mb',               rating: 3.8,               numReviews: 11,               format:'ma',               texture:true,               rig:false,               license:'commercial',               description: 'samsung electronics product',           },           {               _id: '6',               name: 'ak14',               category: 'Game',               image: '/images/ak14_modeling.jpg',               price: 1.7,               size: '1.4mb',               rating: 4,               numReviews: 3,               format:'max',               texture:true,               rig:false,               license:'public',               description: 'using fps game ',           },       ]   }

[ data.js 예시 ]

 

 

 

 

 

 

---

2 메인 페이지

 1) 라우터 파일이 모여있는 screens폴더를 생성한다.

   - root/frontend/src/screens

 

 

 2) 메인화면을 랜더링하는 'HomeScreen.js' 라우터 파일을 생성한다.

- data.js파일을 모듈로 가져온 뒤, 해체할당을 통해 products객체를 생성한다. 아직 DB를 생성하지 않은 상태이므로 임시로 몽고DB에서 사용하는 _id를 .map( )방식으로 나열한다. DB를 생성하기 전까지 아래 코드를 유지한다.

 

import data from '../data.js';   const HomeScreen = {       render: () => {           const {products} = data;           return `               <ul class="products">                   ${products.map(product =>`                       <li>                           <div class="product">                               <a href="/#/product/${product._id}">                                   <img src="${product.image}" alt="${product.name}">                               </a>                               <div class="product-name">                                   <a href="/#/product/1">                                       ${product.name}                                   </a>                               </div>                               <div class="product-format">                                   ${product.format}                               </div>                               <div class="product-price">                                   $ ${ product.price}                               </div>                           </div>                       </li>                   ` ).join('\n')}               </ul>           `;       }   }   export default HomeScreen;

[ root\frontend\screens\HomeScreen.js ]

 

 

 3) 사용자가 요청한 url에 따라 라우터 파일을 랜더링하는 app.js파일을 생성한다.

- root/frontend/src/app.js

- app.js는 아키텍처 최상단에 위치한 index.js(껍데기 파일)와 같은 기능을 수행한다. 라우터, 미들웨어, 각종 의존성 모듈을 받고, 연결하며, 데이터를 전달하는 중개자와 같다. 가령, 아래 코드의 'utils.js'의 경우, url의 특정부분을 추출하거나 변환하는 외부 기능을 담고 있고, 'Error404Screen.js'파일은 사용자 에러표시를 전달한다. app.js는 여러 외부기능을 수용하고, 전달하는 아키텍처 내 인터페이스라 볼 수 있다. 

 

import {parseRequestUrl} from './utils.js';   import ProductScreen from './screens/ProductScreen.js';   import HomeScreen from './screens/HomeScreen.js';   import Error404Screen from './screens/Error404Screen.js';   const routes = {       '/' : HomeScreen,       '/product/:id':ProductScreen,   }   const router = () => {       const request = parseRequestUrl( );       const parseUrl = (request.resource ? `/${request.resource}` : '/') +                              (request.id ? '/:id' : '' ) +                              (request.verb ? `/${request.verb}` : '' );       const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;       const mainContainer = document.getElementById('main-container');       mainContainer.innerHTML = HomeScreen.render();   }   window.addEventListener('load', router);   window.addEventListener('hashchange', router);

[ root\frontend\src\app.js ]

  

 

4) utils.js를 생성한다.

- root/frontend/src/utils.js

- 아래코드는 url주소에서 '#'뒷 부분의 경로를 '/'단위로 잘라서 반환한다. 가령, 'webdoli.com/#/category/tip'이라는 경로를 받는다면, '#' 뒷부분에 해당하는 '/category/tip'에서 '/'를 기준으로 2번 잘라서 아래와 같이 배열에 저장한다. 

[0] : category

[1] : tip

 

export const parseRequestUrl = () => {       const url = document.location.hash.toLowerCase( );       const request = url.split('/');       return {           resource: request[1],           id: request[2],           action : request[3]       }   }

[ root\frontend\src\utils.js ]

 

 

 5) ProductScreen.js를 생성한다.

- 아래와 같은 임시 반환값을 지정한 뒤 테스트만 진행한다.

 

const ProductScreen = {       render: ( ) => {           return ` CG Source Page `       }   }     export default ProductScreen;

[ root\frontend\src\screens\ProductScreen.js ]

 

 

 6) Error404Screen.js를 생성한다.

- 에러페이지 역시 임시 반환값을 지정해준다.

const Error404Screen = {       render: ( ) => {           return `404 Error Occurs`;       }   }     export default Error404Screen;

[ root\frontend\src\screens\Error404Screen.js ]

 

 

위와같이 구현했다면, 아래와 같은 화면을 볼 수 있다. 

 

다음 포스팅에서는 본격적으로 라우팅을 연결해보자.