똑같은 삽질은 2번 하지 말자

개요 vue + firebase + cloud functions(API Server) 로 이루어진 어플리케이션의 staging/production 환경 만들기 1. Firebase는 복수의 호스팅이 가능하다. 2. vue-cli를 이용해 staging용 production용 빌드 스크립트 정의 "scripts": { "build-stg": "vue-cli-service build --mode staging", "build-prd": "vue-cli-service build --mode production", // firebase deploy --only hosting:타겟이름(.firebasesrc에 정의한) "stg-deploy": "npm run build-stg && firebase deploy -..

개요 Nuxt와 Firebase로 구성되어 있는 앱에 analytics가 활성화 되어 있는 상태이다. 하지만 수집되고 있는 페이지뷰의 이벤트를 보면 페이지가 하나밖에 없는것?처럼 보이는데 이건 SPA(Single Page Application)라 페이지의 이동이 javascript에 의해 이루어지므로 페이지의 로드 없이 이루어진다. 그래서 페이지가 하나밖에 없는것처럼 보인다. 그럼 SPA에서는 어떻게해야 페이지뷰 이벤트를 정상적으로 측정할 수 있을까? 1. 기존에 활성화 되어있던 analytics을 없앤다.(있다면! 없으면 무시) 이하의 코드같이 analytics의 함수를 실행시키는 것만으로 analytics수집 관련 코드가 페이지에 삽입된다. 이걸 넣은 그대로 gtm으로 page_view이벤트를 커스텀..

개요 Can I use ... Vue3 의 컨퍼런스를 시청하고 메모해두고 싶은 내용들을 정리해 보았다. Vue 3 의 특징 강화된 타입스크립트 지원 코드 재사용을 위한 Composition API(Optional 써도되고 안써도되고) 그외 https://heewon26.tistory.com/258 참고 실무자의 관점의 Vue 3 이미 운영중인 서비스와 IE가 필요한 사이트는 Vue2로(IE는 2022년 6월 서비스 종료) 입문자의 고민 Vue2로 배워도 문제 없다 실무자의 고민 Vue 3를 써보고 싶은데,,,ㅠ 어떻게 해야 하나요? Vue 2의 @vue/composition-api + Typescript를 써보자 @vue/composition-api 란? Vue 2에서 컴포넌트의 재사용 가능 로직을 작성..

개요 밑의 코드처럼 prop의 타입으로써 ! ? 붙이는 차이는 무엇? @Prop({ default: [] }) prop1!: xxx[] @Prop() prop2?: xxx[] decorator에서 정의된 멤버 변수에 붙어있는 ! 는 Non Null Assertion 오퍼레이터로 불리며, !이 붙은 속성이 Null/Undefined 가 아님을 뜻한다 단, 는 required: true 또는 기본값이 설정되어 있는 속성에만 지정할 것을 권장 반대로 필수 항목이 아닌 기본값도 지정되어 있지 않다면 ?을 지정하는 것이 좋습니다. ? 의 의미는 undefined의 가능성이 있다는 말이다. 최근에 개발환경에서는 문제없이 잘 돌아갔지만, build를 할때 타입에러가 나서 문제가 된적이 있다. ERROR in /var..

개요 css옵션 안에 scss파일의 설정은 가능하지만 컴포넌트 안에서 변수라던가 mixin을 사용하게 되면 정의가 안 되면 에러가 발생해서 글로벌하게 사용할 수 있는 변수나 mixin을 Vue 컴포넌트 파일 내의 style로 사용할 수 있도록 하는 방법을 찾아보았다. 1. nuxt-community/style-resources-module 밑의 모듈을 설치해주자. 이것저것 필요한 패키지들이 있으니 링크참조 https://github.com/nuxt-community/style-resources-module GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements! Nobody likes extra @impor..

개요 @nuxtjs/dotenv 를 써도 .env 파일의 환경변수가 제대로 설정이 안되서 @nuxjs/dotenv 없이 .env파일을 읽어들여보자 같은 문제를 겪은듯한 분의 글 ↓ https://velog.io/@katanazero86/nuxt.js-nuxt-dotenv.env [nuxt.js] nuxt dotenv(.env) 닷엔브 개발환경별로 사용하고싶다. velog.io .env (.env_sample파일을 밑의 형태로 만들어 어떤 환경변수가 있는지 팀원들간에 공유한다.) apiKey= authDomain= projectId= storageBucket= messagingSenderId= appId= measurementId= nuxt.config.js nuxt config의 env 속성을 이용해서 ..

개요 콘솔에 찍히는 이 마크의 의미는 무엇? 서버사이드 돔트리와 클라이언트사이드 돔트리가 다르다고 혼나서 원인을 찾아보다가 깨달은 몇가지를 기록 결론 Nuxt의 Univeral mode를 이용하게 되면 서버사이드 클라이언트사이드 로 나뉘어져서 실행된다. 위의 마크의 의미는 서버사이드에서 실행된 나의 middleware의 마크이다. 서버사이드에서 실행되는 로그들은 위의 console.log뿐만 아니라 본인의 터미널에도 찍히고 있을것이다! 추가조사 첫 페이지를 진입할 때는 서버사이드와 클라이언트사이드가 같이 동작하는데 이건 서버사이드 렌더링의 개념을 보고오면 좋은거 같다. 간단히 말하자면 서버사이드 렌더링이 이루어지는 과정은 pre-rendering -> hydration 인데 pre-rendering을 통..

Repository Pattren 이란? 비지니스 로직과 API로 데이터를 취득하는 부분을 분리 시키기 위한 디자인 패턴이다. 그리고 서버와의 통신(api request)을 하기위해 개발할 때 고민해야 할 사항들을 해결해 줄 수 있다. api 재사용? 매번 URL을 다시 적어야 하나? 엔드포인트가 바뀌었을 때는 어떻게 됩니까? 다른 프로젝트에서 API 호출 처리를 재사용하고 싶은 경우는 어떻게 됩니까? 코드를 리팩터하거나 Vux의 actions로 이동하는 경우는 어떻게 됩니까? 여러 개의 리소스가 있는데, 네 개의 다른 엔드포인트를 정의해야 합니까? 테스트를 mock의 엔드포인트를 어떻게 다룰 수 있습니까? api.ts import { NuxtAxiosInstance } from '@nuxtjs/axio..

개요 다국어 적용 1. package install $ yarn add @nuxtjs/i18n 2. plugins로 type 확장시키기 (이건 vue용) tsconfig.json { "compilerOptions": { "types": [ "@nuxt/types", "@nuxtjs/i18n", ] } } nuxt.confing.js modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', // '@nuxtjs/firebase', 타입적용이 어려워서 nuxtjs/firebase는 안쓰는쪽으로함 // https://i18n.nuxtjs.org [ '@nuxtjs/i18n', { // 대응할 언어들 셋팅 locales: [ { code: 'ko', name: '..

개요 props로 object나 array를 내릴 경우에 default로 () => {}, () => [] 로 arrow function으로 값을 반환하는 이유에 대해서 알아보자 본론 ⬇︎ 이러한 에러는 아마 vue를 써본분이라면 한번쯤은 경험해 본 적이 있을꺼같다. 무엇을 위해? warning을 하는지 이 규칙을 무시하고 함수로 안하면 어떻게 될까? AppCounter.vue {{ obj.count }} +1 App.vue 위의 버튼을 클릭하든 아래의 버튼을 클릭하든 값이 동시에 더해져 버린다.. (마우스가 왜 안보이지 ㅠ 위 아래 버튼 번갈아가며 클릭중입니다.) 밑의 주소에서 직접 테스트 가능 https://codesandbox.io/s/lp603xn3r7 결론 data를 함수로 선언해서 return..