PRDEN

이벤트나 함수가 실행되는 빈도를 줄여 서버에서 과부하 걸리지 않게 하기 위함 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. ..

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

1. Composition API Vue2(option API)는 data() { } methods: { } computed: { } 위와 같은 구조를 가져서 data 안에 값들이 어떤 함수에 의해 변하는지 분산되어있어 추적이 어려웠다. 그러나, Vue3의 등장으로 setup 함수에 데이터가 그룹핑 되어 용이하게 데이터의 흐름을 파악할 수 있다. ex) react 처럼 2. setup 훅 내부에 data와 function을 구성한다. (반응형 data 전) setup() { let name = "sungjun"; let age = 30; const handleClick = () => { console.log(age); }; return { name, age, handleClick }; } }; 3. re..