본문 바로가기

전체 글

 (166)
Unit 테스트 Unit Test 단위(Unit) 테스트란 데이터(상태), 함수(메소드), 컴포넌트 등의 정의된 프로그램을 최소 단위들이 독립적으로 정상 동작하는지 확인하는 방법. Jest 프레임도 있고, Vue Test Utils 라이브러리도 있습니다. 테스트 환경 구성 npm i -D jest @vue/test-utils@next vue-jest@next babel-jest 위 명령어를 통해 unit test관련 프레임과 라이브러리를 설치합니다. module.exports = { // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다. // 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다. // E.g. `import HelloWorld from '~/components/HelloWorld'..
Netlify 배포, API 만들기, 변수 구성, 포트 수정 및 배포 Netlify Serverless Functions 본 프로젝트는 SPA 방식으로 작성했으며, imdbAPI 인증키를 노출 우려가 있습니다. netlify의 서버리스 함수를 사용해 해당 단점을 최소화하려고 합니다. netlify-dev 참조 기존에 프로젝트는 바로 브라우저에 배포되는데 서버리스 함수를 사용하면 functions와 함께 netlify dev에 배포후, 브라우저에 배포합니다. Netlify CLI 구성 프로젝트 폴더 안에 netlify.toml파일을 생성한 후, 위와 같이 작성해줍니다. 영화 정보 반환 API 만들기 const axios = require('axios') exports.handler = async function(event) { const payload = JSON.parse..
SPA 개요 Tranditional Web Application TWA는 데이터를 요청할 때마다 페이지를 로드해야 하는 단점이 있습니다. SPA(Single Page Application) SPA는 페이지 로드 없이 데이터를 요청할 수 있습니다. 즉, 페이지의 같은 부분을 재요청하지 않고 변경된 부분만 요청합니다. (ex. Header, Footer부분은 재요청하지 않습니다.) SPA 장점 1. 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공 2. 더 적게 요청해 빠르게 렌더링 가능 3. 컴포넌트 단위 개발로 생산성 향상 4. 쉬운 분업화 SPA 단점 1. 느린 최초 로드 => Lazy loading, 브라우저 캐싱 2. 어려운 검색 엔진 최적화(SEO) => SSR, Serverless Function 3. 모든..
Vue Router 정리 페이지가 출력(렌더링)되는 영역 컴포넌트입니다. 페이지 이동을 위한 링크 컴포넌트입니다. $route Route(페이지) 정보를 가지는 객체입니다. 대표적으로 fullPath, params속성이 있습니다. $route는 정보를 조회하는데 많이 사용되며, 여러 속성이 존재합니다. $router Route(페이지) 조작을 위한 객체입니다. 대표적으로 push 메소드를 이용해서 이동을 했습니다. $route는 정보를 조작하는데 많이 사용되며, 여러 메소드가 존재합니다. 링크 분해 https://google.com/blog/123?apikey=abcd234&name=Skye 예를 들면 위에 링크가 존재합니다. 여기서 google.com은 도메인입니다. /blog/123?apikey=abcd234&name=Sky..
검색 정보 초기화 및 스크롤 위치 복구 검색 정보 초기화 store폴더 안에 movie.js mutations 내용입니다. _defaultMessage 변수를 만들었고, loading도 false상태로 초기화하는 겁니다. routes폴더 안에 Home.vue 추가된 부분입니다. 페이지를 들어갈 때마다(created), 방금 resetMovies 메소드를 실행합니다. 페이지 전환 시 스크롤 위치 복구 vue router에서 제공하는 기능입니다. routes폴더 안에 index.js파일에 추가하면 됩니다.
Vuex Helpers, 핵심 정리 Vuex Helpers 기존에 About.vue에서 작성한 내용인데 보시면 똑같은 패턴으로 작성하고 있습니다. 이것을 vuex helpers를 통해 간략화할 수 있습니다. vuex helpers 참조 위 내용을 전개연산자 ...과 mapState를 사용해서 정리할 수 있습니다. 마찬가지로 MovieList.vue, Movie.vue 파일에도 정리합니다. mapState말고도 mapActions등을 사용할 수 있지만 실용성이 조금 떨어져서 많이 사용하지 않습니다. Vuex 핵심 정리 stores에서 namespaced는 모듈로 사용할 것을 명시해주는 역할이며, 기타 속성은 위와 같습니다. state 계산된 형태를 활용할 수 있도록 getters를 사용하며, mutations는 state를 변경하는 로직만 ..
부트스트랩 Breadkpoint, 전역 스타일 부트스트랩 Breadkpoint(반응형) 사이트가 작아져도 내용을 온전히 보일 수 있는 것을 반응형이라고 부릅니다. 부트스트랩의 기능을 통해 쉽게 만들 수 있습니다. components폴더 안의 Header.vue의 template 추가부분입니다. 해당 이미지를 클릭하면 toAbout()메소드가 작동되며 about페이지로 이동됩니다. .user { width: 40px; height: 40px; padding: 6px; border-radius: 50%; box-sizing: border-box; background-color: $gray-200; cursor: pointer; position: absolute; top: 0; bottom: 0; right: 40px; margin: auto; trans..
About, 404 Page not found About export default { namespaced: true, state: () => ({ name: 'Skye', email: 'hkim7095@gmail.com', blog: 'https://skye-coding.tistory.com/', phone: '+82-1234-5678', image: '' }) } store폴더 안에 about.js내용입니다. image 경로를 설정하면 됩니다. {{ name }} {{ email }} {{ blog }} {{ phone }} routes폴더 안에 About.vue의 template내용입니다. loading 애니메이션을 추가할 생각입니다. routes폴더 안에 About.vue의 script내용입니다. routes폴더 안에 About.vue의 st..
영화 포스트 로드 이벤트, 예외처리, Nav 경로 일치 및 활성화 이미지 로드 이벤트(Vue 플러그인) MovieItem.vue의 template과 script 추가부분입니다. 영화 검색했을 때 포스터가 로딩될 때까지 로드 애니메이션을 사용할 겁니다. methods를 플러그인 방식으로 관리할 겁니다. export default { install(app) { app.config.globalProperties.$loadImage = (src) => { return new Promise((resolve) => { const img = document.createElement('img') img.src = src img.addEventListener('load', () => { // 완료 resolve() }) }) } } } src폴더 안에 plugins폴더를 만들고 안에 ..
단일 영화 상세 페이지 단일 영화 상세 정보 가져오기 async searchMovieWithId({state, commit}, payload) { if(this.state.loading) return commit('updateState', { theMovie: {}, loading: true }) try { const result = await _fetchMovie(payload) commit('updateState', { theMovie: result.data }) } catch(error) { commit('updateState', { theMovie: {} }) } finally { commit('updateState', { loading : false }) } } movie.js파일 actions부분에 searchMov..

티스토리툴바