본문 바로가기

전체 글

(166)
Container 사용자 지정, 에러 메시지 출력, 로딩 애니메이션, Footer Container 너비 사용자 지정, MovieItem영역 회색 배경 $container-max-widths: ( sm: 540px, md: 704px, lg: 924px, xl: 1140px, xxl: 1364px ); src폴더의 scss폴더 안에 main.scss에서 container너비를 위와같이 수정합니다. MovieList.vue의 style부분에서 inner를 꾸며서 movie를 출력하는 곳에 회색 배경을 보여줍니다. 에러 메시지 출력 왼쪽은 MovieList.vue의 state부분 message입니다. 오른쪽은 movie.js의 actions의 searchMovies중 try앞에 추가합니다. 웹페이지 열어줄 때는 먼저 검색하라고 나올 것이고, 검색버튼 클릭 시, message가 오른쪽처럼 ..
영화 아이템 - 기본 출력, 텍스트 말줄임와 배경 흐림 영화 아이템 - 기본 출력 MovieList.vue의 MovieItem부분을 movies로 감싸주고 스타일을 줍니다. {{ movie.Year }} {{ movie.Title }} MovieItem.vue의 template부분입니다. MovieItem.vue의 style부분입니다. 여기까지 기본적으로 출력하는 용도입니다. 영화 소개하는 부분의 길이도 일치하지 않고 기타 스타일도 예쁘게 나오지 않았습니다. 스타일을 좀 더 깔끔하게 나오게 추가 작업이 필요합니다. 영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리 movie클래스에 마우스 올리면 border생길 수 있게 :hover::after를 추가했습니다. 배경 흐림 처리는 오른쪽에 backdrop-filter 속성을 사용할 수 있습니다. firefo..
비동기 - 콜백과 프로미스 객체의 이해, 예외 처리 비동기 - 콜백과 프로미스 객체의 이해 function a() { console.log('A') } function b() { console.log('B') } a() b() 위처럼 코드 작성 순서대로 출력된 방식이 동기 방식(Synchronous)라고 부릅니다. function a() { setTimeout( () => { console.log('A') }, 1000) } function b() { console.log('B') } a() b() 위처럼 a함수에 setTimeout함수를 사용해, 결국 B를 먼저 출력하고 A가 출력됩니다. function a(callback) { setTimeout( () => { console.log('A') callback() }, 1000) } function b(..
영화 검색 - 기본 검색, 추가 요청, ID중복 제거, 리팩토링 영화 검색 - 기본 검색 import axios from 'axios' export default { namespaced: true, state: () => ({ movies: [], message: 'hello movie', loading: false }), getters: {}, mutations: { updateState(state, payload) { // ['movies', 'message', 'loading'] Object.keys(payload).forEach(key => { state[key] = payload[key] }) }, resetMovies(state) { state.movies = [] } }, actions: { async searchMovies({commit}, payloa..
Vuex(Store) - 개요, 구성 Vuex(Store) 개요 search부분과 하단 결과 표시 부분은 형제요소입니다. search부분에서 apply메소드를 통해 결과를 가지고 오는게 search내부에서 표시되는 겁니다. 부모 자식간에 데이터 통신은 props혹은 emit을 사용할 수 있고, 상위 혹은 하위 component들은 provide혹은 inject을 통해 데이터 통신할 수 있습니다. 형제 component들끼리 Vuex를 사용하면 됩니다. 지금 프로젝트의 구조도입니다. 보다시피 Home과 MovieList는 부모자식임으로 props, MovieList와 MovieItem도 마찬가지로 props를 사용할 수 있습니다. Home에서 MovieList를 건너뛰서 MovieItem에 provide/inject를 통해 데이터 통신 가능합..
Search - 필터, 버튼 Search - 필터 src폴더 안에 components폴더를 만들고 Search.vue파일을 만듭니다. container안에 input창을 우선 만들었습니다. v-model="title"를 통해 양방향 바인딩합니다. class는 부트스트랩 .form-control를 적용합니다. script부분에 title를 반환합니다. selects부분에 필터를 만들었습니다. 3개의 select박스였고 반복적으로 나타나서 v-for를 사용했습니다. 양방향 바인딩때문에 v-model를 사용했고, 위에 반복문때문에 값이 바뀔 수 있어서 v-model="$data[filter.name]"으로 자동 완성했습니다. option에는 연도에만 All Years를 표시하면 됨으로 v-if 조건문 사용했습니다. 기타 부분은 반복문 v..
Header - Nav, Logo&구글폰트, Headline Header - Nav src폴더 안에 components폴더를 만들고 Header.vue파일을 만듭니다. 부트스트랩을 확인한 결과 nav pills모양을 따라 하고 싶었습니다. nav, nav-item, nav-link 클래스를 부여하면 기본 구조가 나오니 그대로 해봤습니다. v-for를 이용해 반복작업을 피했습니다. Header - Logo 및 Google Font 본 프로젝트 전체에서 Roboto 400, 700 사용할 예정이며 로고부분은 Oswald 500를 사용할 겁니다. Google Font에서 선택한 후 link를 복사합니다. 루트경로의 index.html의 head부분에 붙여줍니다. 전체 파일에 roboto를 사용할 것이니 style에 명시해줍니다. src폴더 안에 components폴더 ..
시작하기 - Vue Router, Bootstrap 구성 Vue Router 구성 특정한 사이트를 만들 때 페이지를 구분하기 위해 사용한 것이 바로 Router입니다. 예를 들면, naver/news, naver/store등 각각 뉴스, 스토어 페이지를 구분합니다. Vue Router 문서 npm i vue-router를 통해 설치합니다. src폴더 안의 main.js에 router를 import하고 사용합니다. routes폴더 안의 index.js를 작성해보겠습니다. vue-router에서 createRouter와 createWebHashHistory를 import합니다. history는 두 개의 방법이 있으며 각각 Hash와 History입니다. hash는 주석에 나오듯이 #가 존재합니다. history방식은 별도 설정이 필요해서 나중에 시도하겠습니다. r..
컴포지션 API 관련된 내용을 한 덩어리를 만들 수 있는 API입니다. 예를 들면, 왼쪽은 여태까지 배워왔던 vue.js입니다. 자세히 보면, 빨간박스는 msg를 다루고, 노란박스는 count를 다룹니다. 아직 내용이 적어서 구분하기 편하지만, 나중에 데이터들 많아지면 보기 힘들 것 같습니다. 오른쪽은 컴포지션 api를 사용했습니다. 관련된 내용을 모두 한 묶음으로 처리해서 작업이나 수정, 분석할 때 모두 편리합니다. 반응형 데이터(반응성) ref패키지를 통해 반응성을 추가합니다. 전에도 배웠듯이 ref는 객체 데이터를 반환해서 increase함수에 count.value를 명시해야 됩니다. 기본 옵션과 라이프사이클 ref 옵션 computed 옵션 watch 옵션 첫번째 변수는 감시하고 싶은 객체입니다. mounted라..
Vue문법(3) - 컴포넌트 컴포넌트 기초 scripts에서 components를 통해 불러옵니다. MyBtn의 script에서 props 속성을 기본 설정한 후, App.vue에서 수정할 수 있습니다. props를 통해 App.vue(부모)와 MyBtn.vue(자식)간 데이터를 통신할 수 있습니다. slot태그는 문자열만 들어가는 게 아니고 다른 태그도 들어 갑니다. 컴포넌트 속성 상속 App.vue에 MyBtn를 import한 후, 클래스를 추가하면, 해당 클래스가 MyBtn에도 나타납니다. 만약에 MyBtn에 내용이 여러개가 있으면, 해당 클래스는 추가되지 않습니다. 상속 옵션을 false를 지정하면 상속하지 않겠다고 선언한 겁니다. 개별 속성을 상속받고 싶으면 태그 안에 v-bind로 개별 지정하면 됩니다. 모든 속성을 다 ..