프로젝트/영화 검색 (Vue)
-
영화 검색 이관프로젝트/영화 검색 (Vue) 2021. 9. 17. 16:44
영화 검색 이관 - 기존 영화 검색 프로젝트는 SPA 로 제작되었기 때문에 SEO(검색 엔진 최적화) 문제가 발생 - 해당 프로젝트를 SSR(Server Side Rendering) 방식으로 이관(옮길) 예정 - Nuxt.js 라이브러리와 Heroku 서비스를 사용할 예정 Nuxt 프로젝트 생성 1. 프로젝트 생성 // npx create-nuxt-app 프로젝트명 npx create-nuxt-app nuxt-movie-app 2. 기존 프로젝트(Vue2) 가져오기 - 기존 프로젝트는 Vue3 로 제작되었기 때문에 Nuxt.js 에서 지원하지 않음 - 예제 Vue2 버전 코드로 진행 Heroku Node.js 등 여러 언어를 지원하는 클라우드 PaaS(Platform as a Service) 서비스 Pa..
-
Vue 프로젝트 로컬 및 서버의 환경 변수 구성프로젝트/영화 검색 (Vue) 2021. 8. 29. 10:53
Vue 프로젝트 로컬 및 서버의 환경 변수 구성 1. npm i -D dotenv-webpack 설치 2. /webpack.config.js 수정 ... const Dotenv = require('dotenv-webpack') module.exports = { ... plugins: [ ... new Dotenv() ], ... 3. /.env 생성 OMDB_API_KEY = ... 4. /functions/movie.js 수정 const axios = require('axios') const { OMDB_API_KEY } = process.env ...
-
Vue 프로젝트 영화 정보 반환 API 만들기프로젝트/영화 검색 (Vue) 2021. 8. 27. 16:21
Vue 프로젝트 영화 정보 반환 API 만들기 1. /src/functions 폴더 생성, /src/functions/movie.js /파일 생성 - Netlify Serverless Functions 로 사용 - /src/store/movie.js 내부 _fetchMovie() 를 옮김 const axios = require('axios') exports.handler = async function (event) { const payload = JSON.parse(event.body) const { title, type, year, page, id } = payload const OMDB_API_KEY = ... const url = id ? `https://www.omdbapi.com/?apikey=..
-
Vue 프로젝트 Netliyfy-CLI 구성프로젝트/영화 검색 (Vue) 2021. 8. 26. 10:32
Vue 프로젝트 Netliyfy-CLI 구성 1. /Netliyfy.toml 생성 # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "dist" # 프로젝트 빌드 결과의 디렉토리를 지정합니다. # 개발 모드 [dev] framework = "#custom" # 감지할 프로젝트 유형을 지정합니다. 앱 서버 및 `targetPort` 옵션을 실행하는 명령 옵션은 `#custom`입니다. command = "npm run dev:..
-
Vue 프로젝트 검색 정보 초기화 및 페이지 전환 스크롤 위치 복구프로젝트/영화 검색 (Vue) 2021. 8. 24. 19:03
Vue 프로젝트 검색 정보 초기화 및 페이지 전환 스크롤 위치 복구 1. /src/routes/index.js 수정 - scrollBehavior() 추가 ... export default createRouter({ history: createWebHashHistory(), scrollBehavior() { return { top: 0 } }, routes: [ ... ] }) 2. /src/store/movie.js 수정 - resetMovies() 수정 import axios from 'axios' import _uniqBy from 'lodash/uniqBy' const _defaultMessage = 'Search for the movie title!' export default { namespa..
-
Vue 프로젝트 Vuex Helpers프로젝트/영화 검색 (Vue) 2021. 8. 22. 00:26
Vue 프로젝트 Vuex Helpers 1. /src/routes/About.vue 수정 - computed 수정 (반복적인 코드 간소화) ... ... 2. /src/components/Header.vue 수정 - computed 수정 (반복적인 코드 간소화) ... ... 3. /src/components/MovieList.vue 수정 - computed 수정 (반복적인 코드 간소화) ... ... 4. /src/routes/Movie.vue 수정 - computed 수정 (반복적인 코드 간소화) ... ... 참고 https://next.vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components State | Vuex State S..
-
Vue 프로젝트 모든 컴포넌트에서 전역 스타일 가져오기프로젝트/영화 검색 (Vue) 2021. 8. 21. 16:46
@import "~/scss/main"; - 매번 입력하기가 번거롭다 - 자동으로 맨 앞으로 해당 코드가 붙도록 webpack.config.js 를 수정해준다 Vue 프로젝트 모든 컴포넌트에서 전역 스타일 가져오기 1. /webpack.config.js 수정 module: { rules: [ { ... }, { test: /\.s?css$/, use: [ // 순서 중요! 'vue-style-loader', 'style-loader', 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: { additionalData: '@import "~/scss/main";' } } ] }, ... 2. 사용중인 @import "~/scss/main" ..
-
Vue 프로젝트 부트스트랩 Breakpoint(반응형)프로젝트/영화 검색 (Vue) 2021. 8. 20. 19:34
Vue 프로젝트 부트스트랩 Breakpoint(반응형) 1. /src/components/Header.vue 수정 - 로고 제작 (로고 클릭 시에 About 페이지로 이동) - 네비 반응형 작업 ... ... class="user" @click="toAbout"> ... ... computed: { image() { return this.$store.state.about.image }, name() { return this.$store.state.about.name } }, methods: { isMatch(path) { ... }, toAbout() { this.$router.push('/about') } } ... 결과 2. /src/components/Search.vue 수정 - 반응형 작업 .. ..