Develop Note by J.S.

개발을 하다보면 "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..

Composition API ? Vue의 버전이 3.x 버전으로 업데이트 되면서 등장한 새로운 기능입니다. 기존에 사용했던 data, methods, computed 등을 사용하는 Option API 의 경우 직관적으로 사용할 data를 작성하는 영역과, observer 역할을 하는 watch, 계산된 결과의 Cache 처리를 하는 computed, 복잡한 계산 또는 잦은 변경의 로직을 작성하는 methods 옵션이 있습니다. 하지만 해당 옵션들을 사용하다보면 한 파일 영역 내에 논리적으로 공통되지 않은 기능들이 뒤죽박죽 섞여있어 가독성이 떨어지는 문제가 있었는데요, 이에 대한 개선방안으로 Vue3.x 버전부터 Composition API 가 등장하게 됩니다. Compostion API의 주요 구성 1...