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

2020-04 에 작성된 글입니다. NUXT universal mode에 있는 에러입니다. 참고해 주세요!! 저의 기존 로그인, 인증 방식은 이렇습니다. 1. 로그인 로그인 요청 > 백앤드에 post 요청 (store)> 응답 온 토큰을 쿠키에 저장 2. 인증 쿠키에 있는 토큰을 꺼내어 store의 action을 실행 (middleware)> axios의 default header에 넣어 줌 (store) 페이지 이동 혹은 새로고침 할 때마다 middleware가 동작하기 때문에, 2번 인증은 매번 동작합니다. 이 방법을 여럿 사용하고 있으며, 튜토리얼에서도 많이 보실 수 있을 겁니다. 하지만, 저는 이 플로우를 통해 에러를 접하게 되었고, 그때부터 삽질을 하기 시작하였습니다…. axios 통신으로 da..

2020-03 에 작성된 글입니다. 인덱스에 지도를 보여 주고 싶은데, 지도를 제 마음대로 변경하고, 지도 위에 특정 숫자도 보여 주려고 합니다. 그래서 찾은 게 바로 highChart입니다. Interactive JavaScript charts for your webpage | Highcharts "I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal…www.highcharts.com highCharts는 highmaps라는 기능도 제공하는데, 제가 사용할 기능이 바로 이 기능입니다. highcharts 공식 페이지의 데모에는 jQuery로 이용하는..

2020-03 에 작성된 글입니다. 이번 포스트에서는 앱 이름과 스플래시를 국제화 하려고 합니다. (스플래시는 Lanch Screen이라고 말해도 될 것 같네요. 앱이 켜질 때 보여지는 이미지입니다.) 그럼 이제 시작해 볼까요? 1. App name Localization (앱 이름 국제화) 먼저, File -> New -> File… 을 클릭하여 filter에 String을 검색한 후 Strings File을 선택하여, InfoPlist.strings라는 이름의 파일을 추가해 주세요. 그리고 프로젝트의 Info 부분에서 Localization 섹션의 +를 클릭하여 언어들을 추가해 주세요. finish를 눌러 추가해 주시면 됩니다. 그리고 InfoPlist.strings 파일을 선택하고 오른쪽 부분 의 ..

2019-12 에 작성된 글입니다. 현재 진행중인 플젝은 다국어 지원이 되어야 하는데요, vue에서 이러한 기능이 있다고 하여 찾아 보았습니다. Introduction | Vue I18n Notice ⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the legacy section. Vue I18n is…kazupon.github.io 그것이 바로 i18n 입니다. 역시 필요한 기능들은 다 만들어져 있네요. 👏👏👏 이는 vue 3.x만 지원이 된다고 하니, 아직 설치가 되지 않으셨다면 아래를 입력하여 설치해 주세요. $ npm install @vue/cli -g 그럼 i18n을 현재 프로젝트에 추가해 보겠습니다. $ vu..

2019-12 에 작성된 글입니다. 가로 화면으로 고정하는 방법은 여럿이 있겠지만, 저는 아이오닉의 플러그인을 이용하여 고정시켜보도록 하겠습니다. 아래 페이지에 가면 화면 고정에 대한 플러그인을 확인할 수 있습니다. Screen Orientation - Ionic Documentation Cordova plugin to set/lock the screen orientation in a common way. Requires Cordova plugin…ionicframework.com 공식 문서에 나온 것처럼, 아이오닉 플러그인을 설치해 보도록 하겠습니다. $ ionic cordova plugin add cordova-plugin-screen-orientation 웬걸, ionic/vue에서는 Cordova..

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의 데이터들에 접근할 때 중복된 코드를 반복 호출해야 된다는 문제점이..