전체 글
-
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:..
-
SPA (Single Page Application)기본 지식 2021. 8. 25. 06:52
SPA (Single Page Application) 페이지 로드 없이 데이터를 요청 SPA 장점 빠르고 자연스러운 전환으로 훌륭한 사용자 경험 제공 더 적게 요청해 빠르게 렌더링 가능 컴포넌트 단위 개발로 생산성 향상 쉬운 분업화 SPA 단점 => 보완 방법 느린 최초 로드 => Lazy loading, 브라우저 캐싱 어려운 검색 엔진 최적화(SEO) => SSR, Serverless Functions 모든 데이터 노출 => 비즈니스 로직 최소화
-
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 수정 - 반응형 작업 .. ..
-
Vue 프로젝트 404 Page Not Found프로젝트/영화 검색 (Vue) 2021. 8. 20. 16:24
Vue 프로젝트 404 Page Not Found 1. /src/routes/NotFound.vue 생성 404 Page Not Found! 2. /src/routes/index.js 수정 /* 페이지를 관리해주는 구성 파일 */ ... import NotFound from './NotFound' export default createRouter({ ... routes: [ ... { path: '/about', component: About }, { path: '/:notFound(.*)', component: NotFound } ... 결과 참고 https://next.router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-..