PRDEN

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

과정 1. Action (액션) 객체가 dispatch 메소드에 전달 2. dispatch를 통해 Reducer 호출 3. Reducer는 새로운 Store를 생성 (Store는 하나의 리듀서만 관리할 수 있지만 리듀서를 여러개 나눠서 하나로 합칠 수는 있다) // reducers 폴더 안에 reducers.js => 모든 리듀서를 합쳐준다. Cotext API Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 방식이 유사하다. 단순히 글로벌 상태 관리를 위한 것이라면 Context API를 활용하는 것 만으로 충분하다. https://react.vlpt.us/redux/ 6장. 리덕스 · GitBook 이번 챕터에서 알아볼 주제는 리덕스(Re..

이벤트나 함수가 실행되는 빈도를 줄여 서버에서 과부하 걸리지 않게 하기 위함 1. Debounce : 여러 번 발생하는 이벤트에서 가장 마지막 이벤트 만을 실행 되도록 만드는 것 예시) 프론트쪽에서 검색할 때 ex) 0.5초 0.5초 안에 이벤트가 일어났으면 초기화 계속하다가 0.5초가 지나도 아무 이벤트 일어나지 않으면 서버에 콜(submit) 날리는 것 2. Throttle: 개념 : 여러 번 발생하는 이벤트를 일정시간 동안 한 번만 실행 되도록 만드는 것. 일정 시간 동안 만 기다리고,이벤트를 실행시킨 후 재차 기다림. ex) 스크롤사용할 때 EventListener 폭주 - 브라우저 죽을 수 있다. 0.5초 동안 EventListener 한 번만 실행하겠다고 하는 것 -> Debounce 는 입력..

1. preventDefault : a 태그나 submit 태그는 고유의 동작이 있다. 예를 들어 페이지 이동 or form안에 있는 input전송 등. preventDefault는 이 기본 동작을 막아준다. a 태그에 preventDefault걸면 href기능 막아준다. 2.stopPrapagation: a 태그가 li, ul 태그에 순차적으로 감싸져 있을 때 a 태그 onclick -> li 태그 onclick -> ul태그 onclick으로 이벤트가 확산되어 감. 이를 막아주는 것이 stopPropagation(이벤트가 상위 엘리먼트에게 전달되지 않도록 막아주는 것) https://ismydream.tistory.com/98 event.stopPropagation(), event.preventDef..

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