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

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..