Develop Note by J.S.

Service Worker - 웹 페이지 외에서 브라우저 내 스크립트와는 다른 쓰레드로 동작되는 기능입니다. http 요청을 catch하는 네트워크 프록시 기능을 구현할 수 있습니다. - 리소스 caching 처리 기능 구현이 가능하고 Push 알림(PWA)이 가능하여 개발 단계에서 MSW(mocking service worker)를 사용한 API Testing 기능 구현이 가능합니다. - Service Work는 페이지의 DOM과의 직접적인 상호작용은 할수 없지만 Message를 통하여 통신합니다. - Service Worker 생명주기 : 설치중 -> 설치완료/대기 -> 활성화중 -> 활성화완료 -> 중복(설치실패 및 교체) 설치 npm install register-service-worker 1. ..

개발을 하다보면 "Object에 들어있는 원시값만 사용하고싶어!" 또는 "a객체의 메모리를 공유하는 다른 이름의 객체를 만들고 싶어" 등의 목적으로 코딩을 하다보면 원치않는 동작을 할때가 있습니다. 가장 기본적인 것이지만 한번 제대로 공부해놓지 않고 대충 보고 넘어가다보면 항상 문제가 생기게 되어 정리해 보았습니다. 1. 얕은복사 (메모리 복사) let obj = {}; newObj = obj; let arr = []; newArr = arr; Object와 Array는 1, '1', true(boolean) 등의 리터럴 값이 아닌, 리터럴 값이 저장된 메모리 주소들의 묶음을 새로운 이름으로 재할당하여 사용하는 것입니다. obj와 arr처럼 메모리 주소들의 묶음 자체를 newObj, newArr에 할당하..

프로그래밍 개발에서 꼭 이해하고 넘어가야하는 부분입니다. 대부분의 프로그래밍 언어에서는 존재하는 개념인데요, 값에 의한 호출인지 메모리 참조에 의한 호출인지에 따라 동작이 달라지게 됩니다. 매개변수의 전달 방법, 변수 접근 방법, 특정 변수의 복사 등 어떠한 상황이던 구분해서 사용해야 합니다. Call by Value - 값의 의한 호출, 해당 변수가 가리키는 메모리 내에 들어있는 실제 데이터 (literal)를 사용한다. (ex. 깊은복사) Call by Reference - 메모리 참조에 의한 호출, 해당 변수가 가리키는 메모리 번지를 사용한다 (ex. 얕은복사) Call by Sharing - 함수의 매개변수의 타입(value or reference)과 반대의 타입으로 값을 재할당할 경우 메모리가 ..

Watch는 Obverving 상태의 값이 변경 될 경우 동작시키는 logic을 사전에 정의하여 사용 할 수 있습니다. watch(question, async (newQuestion, oldQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = '생각 중...' try { const res = await fetch('https://yesno.wtf/api') answer.value = (await res.json()).answer === 'yes' ? '네' : '아니오' } catch (error) { answer.value = '에러! API에 연결할 수 없습니다. ' + error } } }) 또한 단일 변수가 아닌 getter 등 여..

Methods로 변화가 적고 간단한 계산식을 구현 할 경우 상태가 변하지 않더라도 매번 연산작업이 수행되어 효율성이 떨어지는 상황에 대체할 수 있는 기능으로 Computed를 사용합니다. 만약 이전 계산식에서 Observing하고있는 상태값이 변하지 않을 경우 재연산 하지 않고 cache data를 그대로 사용하여 효율적으로 결과값을 가져올 수 있습니다. 책을 가지고 있다: {{ publishedBooksMessage }} 참조 : https://v3-docs.vuejs-korea.org/guide/essentials/computed.html

1. LifeCycle Hook 상기 이미지는 vue의 LifeCycle입니다. 기존의 Vue2에서 사용했던 LifeCylcle Hook의 사용법 또한 약간 차이점이 있습니다. 앞선 게시글에서 말씀드렸듯이, created대신 setup함수로 대체되었다는 부분 외에는 거의 비슷하지만 호출 방식의 경우 setup 함수 내에서는 composition api 방식으로 호출 할 수 도 있고, setup함수 외부에서는 기존의 option api 방식으로 LifeCycle Hook을 사용할 수 있습니다. import { onMounted, ref, reative } from 'vue' export default { setup() { const _ref = ref(3); const _reactive = reactive..

Async Await async await는 return형이 Promise 객체일 때 (비동기처리) await 연산자로 동작된 비동기함수의 처리를 순차적으로 동작시키는 기능을 제공합니다. console.log('1'); function callback1 () { return new Promise ((resolve)=> { setTimeout(function() { resolve('2') }, 1000) }) } function callback2 () { return new Promise ((resolve, reject)=> { setTimeout(function() { reject('3') }, 1000) }) } async function showNumber () { try { let number1 =..

1. Promise란 Promise는 ES6에서 새로나운 객체로, then, catch, finally 프로퍼티를 사용하여 비동기처리를 제공하는 기능입니다. 1) then : 앞선 비동기 동작이 종료된 후 동작될 function을 매개변수로 정의한 뒤 이후 순차적으로 then내부에 있는 function들이 동작됩니다. 2) catch : then 동작 중 error 발생 시 가로채어 에러처리를 정의할 수 있습니다. 3) finally : 모든 then 동작이 마무리된 후 마지막에 실행 될 function을 정의합니다. 2. Promise 예제 console.log('1'); function callback1 () { return new Promise ((resolve)=> { setTimeout(func..