삽질Oㅔ는 끝2 없ㄷr...

2019-12 에 작성된 글입니다. mixin 사용 믹스인 - Vue.js Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이…kr.vuejs.org 컴포넌트에 mixin의 함수를 사용하면, 해당 mixin 함수가 컴포넌트에 혼합됩니다. 이게 그렇게 좋은 건지 모르겠는데? 라고 생각되시는 분들이 계실 겁니다. 그러나, 믹스인은 함수 뿐만이 아닌, data 등과 같은 옵션들과 훅들도 같이 혼합하여 사용할 수 있습니다. 긴말 않고 시작하겠습니다. 먼저 mixins 폴더를 components 폴더에 생성한 다음, 그 안에 믹스인 객체를 만들 js 파일을 생..

2019-12 에 작성된 글입니다. 프로젝트 생성 먼저 뷰 프로젝트를 생성해야 합니다. 터미널에 아래를 입력하여 뷰 프로젝트를 생성해 주세요. $ vue create [프로젝트 이름] 혹시 vue/cli가 설치되어있지 않은 상태라면, vue/cli를 먼저 설치해 주세요. $ npm install -g @vue/cli 이를 제외한 나머지는 기본 셋팅으로 만들었습니다. cd [프로젝트 이름] 을 입력하여 만든 프로젝트로 이동한 후 npm run serve로 프로젝트를 실행시켜 브라우저에 정상적으로 나오는지 확인해 주세요. 정상적으로 표출된다면, 현재 만든 뷰 프로젝트에 아이오닉 패키지를 설치해 주세요. $ npm install @ionic/vue 그 후, src/main.js 파일에 다음과 같은 내용들을 추..

2019-11 에 작성한 글입니다. 지난 포스트에서 SSR 확인까지 다뤄 보았고, 이제 지금까지 만들어 온 프로젝트에 PWA를 적용시킬 것입니다. 적용시키기 전에, 먼저 PWA에 대해 알아보고 들어갈까요? Your First Progressive Web App | Web Fundamentals | Google Developers Progressive Web Apps provide an installable, app-like experience on desktop and mobile that are built and delivered…developers.google.com 위 페이지에서 관련 내용을 확인할 수 있습니다. 간단하게 말하자면 PWA는, 설치 없이 앱처럼 동작하고, 바탕화면에 앱 아이콘을 저장할..

2019-11 에 작성된 글입니다. 1. 글 표출 글을 작성할 수만 있고 확인할 수가 없다면, 그건 완벽한 페이지가 아니겠죠? 그렇기 때문에, 저는 작성한 게시글들을 가져와서 제 메인페이지에 보여 줄 것입니다. 이 역시 카드 형태로 보여 줄 텐데요, 카드의 맨 밑까지 스크롤하면 무한으로 글들을 가져오는 형태로 만들겠습니다. 메인 페이지에 Cards.vue 를 추가해 줄 텐데요, 이 카드는 다른 페이지에서도 계속 쓸 예정이기 때문에, 컴포넌트 형태로 작성해 주겠습니다. Components에 Cards.vue 를 추가해 주고, Vuetify의 card 를 이용하여 template을 작성해 줍니다. 그리고 여기에서는 특이하게 vue-infinite-loading이라는 모듈을 사용할 건데요, 스크롤 이벤트를 만..

2019-11 에 쓴 글입니다. 이전 포스트에서는 회원가입과 로그인 설정까지 해 보았습니다. 이번 포스팅에서는 전 포스트에서 말씀드린 getMemberInfo 함수를 따로 뺀 이유와, login 적용에 대하여 작성하도록 하겠습니다. 1. 로그인 적용 로그인 페이지의 template과, vuex의 로그인 함수들을 전부 만들었다면, 이제 로그인 적용을 시켜야 할 텐데요. 저는 mapState와, mapActions를 통하여 Vuex의 로그인 함수를 연결시키도록 하겠습니다. 여기에서 mapState와 mapActions가 생소한 분들을 위하여 간단하게 설명해 드리겠습니다. 제가 사용한 Vuex 중앙 통제 저장 관리소에서는 컴포넌트에서 Vuex의 데이터들에 접근할 때 중복된 코드를 반복 호출해야 된다는 문제점이..

2019-11 에 작성된 글입니다. 1. 회원가입 글 작성 등의 기능을 하기 위해서는 회원가입이 먼저 필요하겠죠? 일단, 페이지부터 만들어 주겠습니다. ├── pages/ ├── recipes/ └── signUp.vue └── index.vue pages 폴더에 vue 파일을 생성하면, router 설정은 Nuxt가 알아서 해 줍니다. (와, 너무 쉽다! 🤭) 이렇게 해서 페이지 생성은 끝이고, 본인이 원하는 메뉴에 자동생성 된 router name을 추가해 주기만 하면 됩니다. router :to="{name: 'users-signUp'}" router name은 .nuxt > router.js 에서 확인할 수 있습니다! 이제 회원가입 폼을 만들어야 할 텐데요, 회원가입 폼은 Vuetify의 card..