vue 모바일웹 설정 (Feat. wonya)

모바일 시장이 커지면서 웹과 같이 운영하는 방식이 크게 3가지로 분류 되어 있는데요.

 

1. 네이티브앱

- play store 에 올라온 앱

 

2. 모바일웹

- 브라우저에서 모바일 버젼을 지원해 주는것

 

3. 하이브리드앱

- play store 에 올라온앱이지만 내부는 모바일웹인 것

 

여기서 나는 모바일웹 방식을 오늘 해볼 생각이다.

모바일웹에도 다양한 기법이 있는데요.

 

URL 을 직접적으로 다르게 해서 화면을 다르게 보여주는것 예를 들어 네이버가 있겠네요.

https://www.naver.com/

https://m.naver.com/

 

그렇지만, 오늘은 같은 도메인으로 vue에서 모바일, 웹을 구분하는 방법을 해보겠습니다.

 

먼저 완성본을 보자

 

전제조건은 node + vue 셋팅(vue node 연동 이라 검색하면 마니 나옴)이 다 되어 있다고 가정하구,

폴더 구조는 아래와 같고 vue는 npm add router 를 추가하였다.

front = vue / back = node(express)

front 폴더 구조는 아래와 같다. (빨간줄은 상관없는 파일)

vue 폴더 구조

1. app.vue 셋팅

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <router-view v-if="!isMobile"/>
      <router-view v-else name="mobile"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    isMobile: false
  }),

  beforeDestroy () {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.onResize, { passive: true })
    }
  },

  mounted () {
    this.onResize()
    window.addEventListener('resize', this.onResize, { passive: true })
  },

  methods: {
    onResize () {
      this.isMobile = window.innerWidth < 600
    }
  }
}
</script>

-  isMobile 이라는 변수를 선언하고 windown.innerWidth < 600 이하이면 true 를 반환해서 

v-if 를 통해 false(웹이면) 이면 router에 name이 default를 반환 true(모바일이면) name 이 mobile 을 반환

 

2. router.js 셋팅

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Init from '../components/Init'
import Index from '../components/web/Index.vue'
import IndexM from '../components/mobile/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Root',
    components: {
      default: Index,
      mobile: IndexM
    }
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

- app.js 에서 넘겨준 name 값을 기준으로 default면 Index 를 반환, mobile 이면 IndexM 을 반환

 

3. index.vue 셋팅

 

○ index.vue(WEB)

<template>
  <div class="movies">
    <h1>영화 목록(MOBILE) </h1>
    <div v-for="movie in movies" class="movie" v-bind:key="movie.id">
      <img v-bind:src="movie.poster" class="poster" style="max-width:185px;">
      <div>
        <router-link :to="{ name: 'Show', params: { id: movie.id }}">더보기</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.$http.get('/api/movies')
    .then((response) => {
      this.movies = response.data
    })
  },
  data () {
    return {
      movies: []
    }
  }
}
</script>

○ index.vue(MOBILE)

<template>
  <div class="movies">
    <h1>영화 목록(WEB)</h1>
    <div v-for="movie in movies" class="movie" v-bind:key="movie.id">
      <img v-bind:src="movie.poster" class="poster" style="max-width:185px;">
      <div>
        <router-link :to="{ name: 'Show', params: { id: movie.id }}">더보기</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.$http.get('/api/movies')
    .then((response) => {
      this.movies = response.data
    })
  },
  data () {
    return {
      movies: []
    }
  }
}
</script>

- 여기는 별게 없음 그냥 node에서  /api/movies 로 똑같은 api를 호출하고 구분을 위해 <h1> 태그에 모바일,웹 구분만 해두었다.

 

마치면서...

내가 검색해보고 같은 도메인에서 모바일, 웹 을 구분하는 가장 괜찮은 방법인 것 같아 남겨둔다.

다른 도메인을 쓴다면 검색해보면 나오겠지만 router 부분을 지금은 name값을 받아서 했지만 애초에 다른 router 경로를 호출하면 될 것 같은 느낌이었다.