JS
-
JS(Async, Await)JS 2022. 3. 23. 17:20
JS 비동기 처리 패턴 중 가장 최근 문법! ☞여러 개의 비동기 처리 코드를 다룰 때 좋다. ☞callback, promise 보다 가독성이 좋다. 사용법 async function 함수() { await 비동기_처리_메서드(); } 1. 함수 앞에 async 예약어 붙이기 2. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 붙이기 예제 function fetchItems() { return new Promise(function(resolve, reject) { const items = [1,2,3]; resolve(items) }); } async function logItems() { const resultItems = await fetchItems(); console...
-
vue14(computed,watch)JS/vue.js 2022. 3. 18. 15:51
const vm = new Vue({ el: '#example', data: { message: 'hello' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } } → computed 속성인 reversedMessage 선언 console.log(vm.reversedMessage) //"olleh" vm.message = "Nope!" console.log(vm.reversedMessage) //"!epoN" → vm.reversedMessage 값은 항상 vm.message 값에 의존!!!! → vm.message가 바뀔 때 vm.reversedMessage 에 의존하는 바인딩을..
-
JS9(동기/비동기)JS 2022. 3. 17. 12:05
JS는 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식(브라우저X. 브라우저에 내장된 자바스크립트 엔진O) 으로 동작! 동기 : 순서대로 작동한다. 요청을 보낸 후에 결과가 나와야지 다음 동작이 이루어진다 → 대기 필요 장점은 코드가 직관적이고 간단함 function delayFunc(func, delay) { const delayUntil = Date.now() + delay; while (Date.now() < delayUntil); func() } delayFunc(foo, 5000); zoo() function foo() { console.log("foooo") } function zoo() { console.log('zoooooo') } setTimeout(boo, 2000) xoo(..
-
vue13(vuex)JS/vue.js 2022. 3. 16. 17:59
vuex : 상태 관리 라이브러리 state(상태) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다. 상태 관리 : 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리 → 효율적으로 데이터 관리 (↔props, emit event, eventbus 활용) - vuex를 쓰는 방법↓ 1. State : 변수 정의 프로젝트 내의 모든 곳에서 참조 및 사용 가능 state를 통해 각 컴포넌트에서 동일한 값 사용 가능 2. Mutations : state 변경하는 로직 (state 변경은 mutation을 통해야만 함! only!) 동기적 로직 : 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수 있기 때문에! 함수 형태로 작성 인자를 받아 vu..
-
vue11(redirect 리다이렉트 )JS/vue.js 2022. 3. 15. 18:25
Redirect : 특정 URL 접속시 다른 URL로 보내는 기능 const routes = [ { path: '/', component: () => import('./components/Bbb'), redirect: '/home', children: [ { path: 'home', component: () => import('./components/Home'), name: "home" }] } 다음과 같이 path 가 '/'인 경우에 redirect: '/home'으로 걸어두면 자동으로 넘어간다.
-
vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기)JS/vue.js 2022. 3. 15. 17:48
화면 이동 / 변경 하는 경우 1.vue-router 사용 2.dynamic component 사용 컴포넌트를 동적으로 변화가 필요한 경우 사용 : 다른 컴포넌트로 전환하면 해당 컴포넌트는 destroy 되고, 새 컴포넌트가 create 된다. .. 다음과 같이 is 를 사용하여 동적으로 컴포넌트 랜더링한다. (destroy되는걸 막으려면 를 사용하면 인스턴스를 캐시로 저장 가능 → 이전상태를 기억ㅇㅇ!) --연습하기-- 동적 컴포넌트를 이용하지 않는 경우에는 Here! 이렇게 작성했던걸 동적 컴포넌트를 이용하면 조금 간단해진다. HERE!