JavaScript
-
[iOS솔루션] 오토 포커싱 이슈JavaScript 2023. 6. 7. 17:33
환경: vue2 내용: Form 유효성 검사 이후 다음 input에 auto-focus 처리를 할 경우 iOS 브라우저에서 키패드가 활성화 되지 않는 상황이 발생한다. 2023.08.30~ ## 추가 ### input을 re-render하고 하기 솔루션을 따른다 ######### 솔루션: 1) Vue this.$nextTick(()=>{ nextComponent.$el.querySelector('input')[0].focus(); }); 2) 일반적인 경우 Promise.resolve().then(()=>{ document.querySelector('input')[0].focus(); } );
-
PWA 개발하기 앞서 사전지식 익히기! - 2JavaScript/PWA(Progressive Webp Application) 2020. 3. 27. 18:14
WORKBOX Custom Plugin 순서 requestWillFetch -> cacheWillUpdate -> cachedResponseWillBeUsed -> cacheDidUpdate cacheWillUpdate : 응답을 사용하여 캐시를 업데이트하기 전에 호출됩니다. 캐시에 추가되기 전에 응답을 변경하거나 캐시를 전혀 업데이트하지 않도록 null을 반환 할 수 있습니다. cacheDidUpdate : 새 항목이 캐시에 추가되거나 기존 항목이 업데이트 될 때 호출됩니다. 캐시 업데이트 후 작업을 수행하려는 경우에 유용합니다. cacheKeyWillBeUsed : 캐시 조회 (모드가 '읽기'인 경우)와 캐시 쓰기 (모드가 '쓰기'인 경우) 모두에 대해 요청이 캐시 키로 사용되기 전에 호출됩니다. 캐..
-
PWA 개발하기 앞서 사전지식 익히기! - 1JavaScript/PWA(Progressive Webp Application) 2020. 3. 9. 16:33
Service Worker Lifecycle 웹 페이지와 완전 별개의 라이프싸이클을 갖고 있다. [등록] 서비스워커 사용을 위해서는 먼저 페이지의 자바스크립트를 사용하여 등록해야 한다. [설치] 설치하는 과정에서 static한 자원들을 캐싱하고, 캐싱이 완료되면 서비스 워커가 설치가 된다. 한 개의 파일일라도 캐싱에 실패하면, 설치가 종료되고, 서비스워커는 다시 활성화되지 않는다. [활성] 설치가 되고 나면, 활성 스텝으로 넘어오고, 이 떄 이전(오래된) 캐쉬들을 다룰 수 있는 상태가 된다. [제어] 활성화 스텝 이후에는 서비스 워커가 본격적으로 모든 페이지를 제어하기 시작한다. 서비스워커에게 제어권이 돌아가면, 보통 아래 2가지 상태(Fetch, Terminated)로 나뉘게 된다. [페치/메시지] 네..
-
Vue.js computed & watchJavaScript/Vue.js 2019. 9. 2. 11:36
watch를 사용해야할 경우 mustache(템플릿 표현식) 없이 값의 변화를 관찰하고 싶을때는 watch를 사용한다. 비동기적 처리시 사용한다! 값이 바뀔 때마다 매번 호출되어야 할 경우 연산을 얼마나 자주 수행하는지 제한가능(lodash의 debounce 이용) computed 사용해야 할 경우 종속된 값의 변화를 관찰하고 싶은 경우 mustache(템플릿 표현식) 을 사용하는 경우 동기 호출에 무관할 경우 input의 v-model로 서버호출이 필요한데 computed 를 사용할 경우, 입력이 멈춰버린다. 값을 직접 리턴해야하기 때문. 동일한 인풋 값에 대해선, 캐싱이 적용된다! 출처 : https://skout90.github.io/2018/01/24/Vue/1.1.Computed-VS-Watch/
-
자바스크립트 수행 과정JavaScript 2019. 1. 4. 18:06
자바스크립트 엔진 파이프라인자바스크립트 엔진들이 소스 코드를 기계어로 만들기까지 공통적으로 수행하는 과정을 살펴봅시다. 먼저, 자신이 작성한 자바스크립트 소스 코드에서부터 시작합니다. 자바스크립트 엔진은 소스 코드를 파싱해서 Abstract Syntax Tree(AST) 로 만듭니다. 그리고 AST를 바탕으로, 인터프리터는 바이트 코드를 생성합니다. 여기까지가 자바스크립트로 작성된 코드를 실제로 엔진이 실행하는 부분입니다.코드를 더 빠르게 실행하기 위해, 바이트코드는 프로파일링 된 데이터와 함께 최적화 컴파일러(optimizing compiler)로 보내집니다. 이곳에서는 프로파일링 데이터를 기반으로 매우 최적화 된 기계어를 생성합니다. 만약 정확하지 않은 결과가 나왔다면 다시 deoptimizes하여 ..
-
리액트 processUpdates(): Unable to find childJavaScript/React.js 2017. 9. 18. 17:54
아직 많은 경험이 부족한 탓에 구글링을 열심히 하면서 에러를 해결해 나가고 있는중이다.. 리액트는 엄격한 웹표준을 따르는거 같다.. (아니면 알고리즘을 그렇게 짜놓았는지는 모르겠지만) 우선 저는 최초 ajax로 서버에서 값을 json으로 받아서 값을 output 후 사용자가 검색 버튼을 클릭 시 다시 ajax로 리스트 데이터를 변경 시키는 작업에 있었습니다. 그런데 예상치도 못한 processUpdates(): Unable to find child 에러가 발생한것!! 최초 이상없이 ouput을 하였는데도 불구하고 값을 변경하면 저런 에러가 발생을 하는게 이해가 안갔다.. 그래서 반나절동안 구글링한 결과 해답을 찾았다... 제목1 제목2 불라1 불라2 이렇게 사용을 하는데( 위에서 말하던 ajax사용하는 ..