배포

배포 링크

기본 세팅


#1 폴더 변경
cd Desktop

#2 프로젝트 복사
npx degit ParkYoungWoong/vue3-webpack-template#eslint vue3-movie-app

#3 설치
npm i vue@next

#4 실행
npm run dev

폴더 구조?

Vue Router 구성

페이지를 구분하기 위해 사용하는 기술을 Router 라고 합니다.

  • <RouterView> : 페이지가 출력(랜더링)되는 영역 컴포넌트
  • <RouterLink> : 페이지 이동을 위한 링크 컴포넌트
  • $route : 페이지 정보를 가지는 객체
  • $router : 페이지 조작을 위한 객체

공식 문서


# Vue Router 설치
npm install vue-router@4

위에 설치후 main.js 에 추가하기


import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'

// use() : 플러그인을 연결할떄 사용하는 메소드
createApp(App)
  .use(router)
  .mount('#app')

위에 추가하고 나서 src > routes 폴더생성 후 index.js 생성하기


import { createRouter, createWebHashHistory} from 'vue-router'
import Home from './Home'
import About from './About'

// 기본 내보내기
export default createRouter({
  // Hash는 해당하는 페이지에 /#/을 붙여서 접근하는 모드
  // 특정페이지에서 새로고침시 404방지
  // History 모드는 따로 서버에 세팅이 필요하기때문에 이 프로젝트에서는 Hash 모드 사용
  history: createWebHashHistory(),
  // routes 는 배열 데이터로 만들기
  // routes 는 페이지를 구분해주는 개념
  routes: [
    // path : 페이지를 구분하는 각각의 경로
    // '/' : 메인페이지를 뜻함
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Bootstrap 구성


npm i bootstrap@next
# 나는 위에꺼 에러나서 아래꺼로 설치함
npm i bootstrap@5.2.1

설치후 src>scss>main.scss


// 부트스트랩 커스텀
$primary: #FDC000;

// 순서 매우 중요!
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

@import "../../node_modules/bootstrap/scss/bootstrap";

위에 세팅하고 App.vue


<style lang="scss">
  @import "~/scss/main"; 
</style>

세팅다하면 btn-primary 테스트 해보기!

Header

Nav

App.vue


<template>
  <Header></Header>
  <RouterView />
</template>

<script>
import Header from '~/components/Header'

export default {
  components:{
    Header
  }
}
</script>

components > Header.vue 생성

배열로 만들고 v-for로 HTML 뿌리기


<template>
  <header>
    <div class="nav nav-pills">
      <div 
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <!-- RouterLink = a태그 대신 사용 가능  -->
        <!-- :to = 이동할 주소 할당 -->
        <!-- active-class = 활성화된 클래스 이름 변경 가능 -->
        <RouterLink 
          :to="nav.href"
          active-class="active"
          class="nav-link">
          {{nav.name}}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data(){
    return{
      navigations: [
        {
          name:'Search',
          href:'/'
        },
        {
          name:'Movie',
          href:'/movie'
        },
        {
          name:'About',
          href:'/about'
        }
      ]
    }
  }
}
</script>

routes>index.js


import { createRouter, createWebHashHistory} from 'vue-router'
import Home from './Home'
import Movie from './Movie' // 추가됨
import About from './About'

// 기본 내보내기
export default createRouter({
  // Hash는 해당하는 페이지에 /#/을 붙여서 접근하는 모드
  // 특정페이지에서 새로고침시 404방지
  // History 모드는 따로 서버에 세팅이 필요하기때문에 이 프로젝트에서는 Hash 모드 사용
  history: createWebHashHistory(),
  // routes 는 배열 데이터로 만들기
  // routes 는 페이지를 구분해주는 개념
  routes: [
    // path : 페이지를 구분하는 각각의 경로
    // '/' : 메인페이지를 뜻함
    {
      path: '/',
      component: Home
    },
    { // 추가됨
      path: '/movie',
      component: Movie
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Logo 및 Google Fonts

수정사항(Git)

구글 폰트 세팅함

Headline

수정사항(Git)

  • Headline.vue 생성함

Search - 필터

수정사항(Git)

  • Search.vue 생성
  • Home.vue 에 Search.vue 연결함
  • 배열로 데이터 정리해서 v-for사용해서 select 태그 뿌림

Search - 버튼

수정사항(Git)

  • omdbapi 여기있는 By Search 옵션으로 검색엔진 제작
  • axios를 사용하여 비동기 통신함

# axios 설치
# http 요철 날리는 플러그인?
npm i axios

Vuex - 세팅

수정사항(Git)

데이터를 집중 관리 할수있는 장소를 만드는거라고 생각하면됨

프로젝트 내부 어떤곳이든 전달 가능


npm i vuex@next
  • namespaced : 하나의 스토어에서 모듈화 될수 있다는 옵션
  • state : 실제로 취급하는 data
  • getters : 계산된 상태 computed랑 비슷
  • mutations : store 에서 데이터의 수정은 mutations에서만 가능
  • actions : 비동기로 동작
mutations 을 실행할때는 .commit() 메소드를,
actions 을 실행할때는 .dispatch() 메소드를 사용합니다.

main.js 에 코드 추가하기


import router from './routes/index.js'

.use(router)

store > index.js 생성하기


import {createStore} from 'vuex'
import movie from './movie'
import about from './about'


export default createStore({
  modules:{
    movie,
    about
  }
})

영화 검색

수정사항(Git)

결론은 this.$store.state.movie.movies 에 배열로 저장해서 사용

영화 검색 추가 요청

수정사항(Git)

검색시 출력되는 개수 기능 추가함

영화 목록에서 ID 중복 제거

수정사항(Git)

lodash의 _.uniqBy() 를 사용해 중복을 제거함


#lodash 설치
npm i lodash

영화 검색 코드 리팩토링

수정사항(Git)

코드 리팩토링 함

영화 아이템 - 기본 출력

수정사항(Git)

영화 아이템 리스트 나오는곳 레이아웃 제작함

영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리

수정사항(Git)

텍스트 ... 처리와 배경 흐림 마우스 오버 효과 추가함

Container 너비 사용자 지정

수정사항(Git)

부트스트랩 container 크기를 커스텀함

에러 메시지 출력과 로딩 애니메이션

수정사항(Git)

부트스트랩 spinner 사용해서 로딩 생성함

footer

수정사항(Git)

전체 페이지에 footer 추가함

단일 영화 상세 정보 가져오기

수정사항(Git)

고유 id값으로 영화 상세정보 받아오기 함

스켈레톤 UI

수정사항(Git)

movie 페이지 접근시 데이터 불러오기전에 잠깐 보여주는 스켈레톤 UI라는걸 제작함

Loader

수정사항(Git)

로딩을 컴포넌트에 등록해서 쓰기 편하게 제작함

영화 상세 페이지 정리

수정사항(Git)

theMovie에 저장된 데이터로 뿌려줌

Ratings 데이터 출력

수정사항(Git)

평점 부분 이미지+데이터 뿌림

높은 해상도 포스터로 변경

수정사항(Git)

이미지 주소 뒤를 .replace()로 변경하여 고화질 이미지 뿌림

Vuex 플러그인(이미지로드 이벤트)

수정사항(Git)

커스텀 플러그인 생성함 (이미지 불러올때 로딩되는 이펙트)

영화 포스터 없는경우 예외처리

수정사항(Git)

영화 이미지가 없을경우 예외처리 추가함

Nav 경로 일치 및 활성화

수정사항(Git)

메인페이지에서 포스터 클릭시 상세페이지 이동 연결 작업함

About 페이지 생성

수정사항(Git)

vuex 를 활용해서 store에 저장해서 꺼내오는식으로 페이지 생성함

404 페이지 추가

수정사항(Git)

내가 설정한 페이지 아닐경우 404페이지로 접근하게 함

부트스트랩으로 반응형 추가하기

수정사항(Git)

부트스트랩 이용해서 반응형 추가함

sass-loader 옵션 추가하기

수정사항(Git)

webpack.config.js 에 수정하기


{
  test: /\.s?css$/,
  use: [
    // 순서 중요!
    'vue-style-loader',
    'style-loader',
    'css-loader',
    'postcss-loader',
    {
      loader:'sass-loader',
      options:{
        additionalData:`@import "~/scss/main";`
      }
    }
  ]
},

이걸 설정하면 scss 선언한곳에 무조건 main.scss 파일 불러와짐

페이지 전환시 스크롤 위치 복구

수정사항(Git)

routes > index.js 에 추가하기


scrollBehavior(){
  return { top:0 }
},
위에 옵션 추가하면 페이지 이동시 항상 최상단으로 이동함

타이틀h2

h3

타이틀h2

h3

타이틀 설명

그냥 설명

  • 글머리
콜아웃 

<!DOCTYPE html> : 문서(페이지) HTML 버전을 지정
tr>(td>code.code)+td
종류 설명