PRDEN

1. 초기 렌더링 속도 개선하기 ( Webpack 번들 크기 줄이기, 코드 스플리팅) https://suspicious-pare-a66702.netlify.app/develop/initialRenderingOnVue/ https://suspicious-pare-a66702.netlify.app/develop/initialrenderingonvue/ 최근 회사의 모바일 어플리케이션을 개발하고 있는 중에 초기 렌더링 속도의 개선에 대해 큰 필요성을 느꼈다. 우리 회사는 Native에서 프론트에 Webview를 요청하면 webpack으로 빌드되어 있는 파일 suspicious-pare-a66702.netlify.app 2. 웹팩 용량 최적화 https://romeoh.tistory.com/367 [Vue + ..

1. 네비게이션 가드란? 뷰 라우터로 특정 URL에 접근할 때 해당 URL에 접근을 막는 방법을 말한다. 예를 들어 로그인 인증정보 없을 때 로그인 페이지로 돌아가게 하는 것 2. 네비게이션 가드의 종류 (전역가드, 라우터가드, 컴포넌트 가드) 1) 애플리케이션 전역에서 동작하는 전역 가드 var router = new VueRouter(); router.beforeEach(function (to, from, next) { // to : 이동할 url // from : 현재 url // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수 }); router.beforeEach()를 호출하고 나면 모든 라우팅이 대기상태가 된다. 원래 url이 변하면 해당 url에 따른 화면으로 자연..

FCM이란? FCM(Firebase Cloud Messaging)이란 메세지를 안정적으로 클라이언트 인스턴스에게 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. 애플리이션 서버에서 직접 전송되는 것이 아닌, FCM backend를 거쳐 클라이언트에 전송됨. 이렇게 FCM backend를 중간에 두는 이유는? 1. 교차 플랫폼 메시징 서비스이기 때문에 메세징을 클라이언트의 플랫폼(Web, IOS, Android) 환경 별로 개발할 필요가 없어지므로 플랫폼에 종속되지 않고 메세지를 전송할 수 있다. 2. 만약 클라우드 메세징 서버가 없이 애플리케이션 서버 -> 클라이언트로 메세지를 전송하는 구현에서 클라이언트가 계속해서 서버에 접속해 있어야 하기 때문에 발생하는 디바이스의 전력 사용과 네트워크 효율 문제를 ..

1. Vue LifeCycle Vue 인스턴스는 생성(create) -> DOM에 부착(mount) -> 업데이트(update) -> 사라짐(destroy) 과정을 거친다. 1) beforeCreate : Vue 인스턴스가 초기화된 직후 발생으로 DOM에 추가되기 전이라 this.$el에 접근할 수 없다. 또한, data, event, watcher에도 접근하기 전이라 data, methods에도 접근 불가능하다. 2) created : data를 반응형으로 추적할 수 있게 되고, computed, methods, watch 등이 활성화 되어 접근이 가능하게 된다. 그러나 아직 DOM에는 추가되지 않은 상태이다. - >data에 직접 접근이 가능해 data를 세팅해야하거나 이벤트 리스너를 선언해야 한다면..

webview와 Native통신하는데 필요함. https://fishcoding.tistory.com/34 [Android] 크롬으로 안드로이드 디버깅 하기 먼저 원리는 간단합니다. 안드로이드에 크롬을 설치하고,USB로 PC로 연결하고,PC의 크롬에서 인식하는 방식입니다. 좀더 자세히 설명하면, 1. 안드로이드에서 크롬을 설치하고요.(버전 32 이상!) 2. fishcoding.tistory.com 파일 업로드 할 경우 네이티브에서 접근하는 방법 https://coding-food-court.tistory.com/37 WebView 기반 안드로이드 네이티브 앱 개발5 (file upload) webView를 이용해서 android 네이티브 앱 개발시에, webView 안에 html 안에 은 네이티브 쪽에..

1. Cookie 옵션 Secure : 웹브라우저와 웹서버가 https로 통신하는 경우만 웹브라우저가 쿠키를 서버로 전송하는 옵션 HttpOnly : 자바스크립트의 document.cookie를 이용해 쿠키에 접속하는 것을 막는 옵션 https://opentutorials.org/course/3387/21744 쿠키 옵션 - Secure & HttpOnly - 생활코딩 수업소개 Secure는 웹브라우저와 웹서버가 https로 통신하는 경우만 웹브라우저가 쿠키를 서버로 전송하는 옵션입니다. HttpOnly는 자바스크립트의 document.cookie를 이용해서 쿠키에 접속하는 것을 opentutorials.org Path : 웹서버의 특정 URL에 대해서만 쿠키를 전송할 수 있다. path 속성은 웹서버의..

https://hydev.tistory.com/3 axios.interceptors를 사용해 JWT유효성 관리 Axios.interceptors 별도의 Library가 아닌 axios에 포함된 기능이다. 요청이나 응답 전에 무엇인가를 수행해주거나, 오류 발생시에 수행할 것들을 미리 정의해둘 수 있다. axios.interceptors.request.use() axio.. hydev.tistory.com https://medium.com/zigbang/%EC%9A%B0%EB%A6%AC-axios%EC%97%90%EA%B2%8C-%EB%8B%A4%EC%8B%9C-%ED%95%9C-%EB%B2%88-%EA%B8%B0%ED%9A%8C%EB%A5%BC-%EC%A3%BC%EC%84%B8%EC%9A%94-a7b32f..

Vue3의 주요 특징 1. Composition API 2. Suspense 컴포넌트가 데이터를 받아오기 전까지 기본 컨텐츠를 표시할 수 있는 기능이다. 예를 들어 소셜 네트워크에서 데이터를 불러올 때 로딩의 속도차이를 고려해 스켈레톤이라 불리우는 UI를 먼저 띄우고, 데이터 로딩이 완료되면 실제화면을 띄우는 것 -> Vue2는 v-if, v-show 같은 디렉티브를 이용했지만 Vue3의 Suspense는 비동기적 컴포넌트의 로딩이 완료될 때까지 대체 컴포넌트를 그리는 방법을 제시한다. 3. Teleport 4. 여러 개의 v-model 디렉티브 하나의 컴포넌트에 두 개의 양방향 결합 매개변수가 필요할 때 이렇게 할 수 있다. 과거 5. 프록시로 진화된 반응성 6. Fragments 7. Emit Opt..

vuex in Vue3에서 문법 namespaced : true state는 기존대로 state.moduleName.stateName으로 getters는 computed(() => store.getters["moduleName/getterName"])으로 mutation은 store.commit("moduleName/mutationName", params)으로 action은 store.dispatch("moduleName/actionName", params)으로 composition api를 통해 vuex를 대체할 수 있는가? (proviedr - inject 사용) -> vuex사용하느 게 낫다. vue Devtools에 의해 데이터가 어떤 함수와 컴포넌트에 의해 변경되는지 추적가능하기 때문에. 1. ..

Computed vs. Watch computed는 템플릿 내의 값이 data와 종속되었을 경우 사용하는게 좋다. computed의 값은 캐싱되기 때문에, 리렌더링 됬을 때, 같은 값이 들어왔다면 연산하지 않습니다. 그에 반해 watch는 같은 값이여도 연산을 다시 합니다. 컴포넌트가 리렌더링이 많이 되나, 값이 바뀔일이 없다면 computed를 반드시 사용해야한다. watch는 지정한 값이 변경된 시점에서 내가 원하는 액션(api call, route.push())을 하기 원할 때, 특정 프로퍼티가 변할 때 콜백함수 실행시키고 싶을 때 사용한다. 참조1: https://kyounghwan01.github.io/blog/Vue/vue/computed/#computed-getter-setter comput..