router 간단 정리

router뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션을 구현할 때 사용하는 라이브러리 페이지 이동 관련 기능 router CDN router NPMnpm i vue-router@3.5.3 vue2에서는 버전 꼭 명시해야함 router 등록 (1) 라우터 인스턴스 생성var router = new VueRouter({ // 라우터 속성 정의 }); (2) 뷰 인스턴스에 라우터 등록 (new Vue 안에 router: router) new Vue({ el: '#app', router: router }); router의 속성, 옵션들 (1) routes : 페이지의 라우팅(어떤 url로 어떤 페이지) 정보 (객체의 배열의 형태임) var router = new VueRouter({ // (1) 페이지의..

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 10.
• textsms

컴포넌트끼리 통신 방법 (props, event emit)

그간 공부했던 vue2 내용 정리하고 얼른 vue3로 넘어가야지 컴포넌트간 통신 방식 컴포넌트는 기본적으로 고유한 데이터 유효범위를 갖는다. 그걸 서로 공유하려면 props라는 속성과, 이벤트를 활용하자 상위에서 하위로 전달 → props 하위에서 상위로 전달 → 이벤트 밑에 것들이 윗대가리들에게 이벤트를 해준다고 생각하자 ^_^ 아 근데 이렇게 나눠두면 겁나 귀찮은데 그냥 다 하나로만 통신하면 안되나? ㅡㅡ ㅇㅇ안됨 n방향 통신의 문제점 : 특정 상태, 데이터가 바꼈을 때 그로 인한 버그를 추적하기 어려움 통신 규칙(이벤트, props)이 생기면 추적이 쉬움 props 상위에서 하위로 이벤트를 발생시킴 (1) 데이터가 저장되어 있고 해당 데이터를 propsdata 이름으로 프롭스를 보냄 . . . da..

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 7.
• textsms

webkit scroll freeze 이슈

문제 ios에서 스크롤의 맨 위나 아래에서 각각 스크롤업이나 다운시 스크롤이 freezing 되는 현상 해결 방법 이벤트끼리 충돌나서 생기는 문제라 그냥 touchstart, touchmove에 대한 listener 몇 개 추가하고 에러가 생기는 케이스들에 event.preventDefault() 하여 이벤트를 막았음 var lastY = 0; var targetElt = document.querySelector(".scroller"); targetElt.addEventListener('touchstart', function(event) { lastY = event.touches[0].clientY; }); targetElt.addEventListener('touchmove', function(event..

• format_list_bulleted 🧠 저장/Javascript
• · 2023. 11. 27.
• textsms

npm(노드 패키지 매니저) 간단 정리

맨날 쓰는건데 아무 지식 없이 쓰는거라 한번 공부해봤다. NPM(Node Package Manager) - 노드패키지매니저 - 자바스크립트 패키지 관리자 - 자바스크립트 라이브러리가 있는 공개 저장소 - NPM(Node Package Manager)는 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저 → 자바스크립트 라이브러리를 npm 명령어로 편하게 다운 가능 npm 사용이유 1. 라이브러리 버전관리에 굿 → 걍 pacakage.json 에서 슥슥 세팅하면 끝 2. cdn 일일이 검색하고 찾지 않아도 된다 → 걍 install 명령어로 빠르게 세팅 버전확인 npm -v npm 초기화 npm init // ← 이름, 버전 등등 겁나 물어봄.. 어짜피 따로 세팅하는게 더 편함 npm..

• format_list_bulleted 🧠 저장/etc.
• · 2023. 11. 3.
• textsms

Promise.allSettled 초간단 사용법 + Promiss.all 차이점

맨날 헷갈려서 찾아보는 allSettled 이자식 아주 편리한 자식 Promise.all() 메서드는 객체에 주어진 모든 프로미스 중 하나라도 거절되면 모두 거절됨 한개 실패했을 뿐인데 엮여있는 애들 다 실패되면 세상 억울ㅜ Promise.allSettled 얘는 all 처럼 여러 프로미스를 처리하면서 성공을 하든 실패를 하든 일단 진행함 필요에따라 구분하여 쓰자 공통점 : 여러 프로미스의 결과를 비동기로 모두 이행하여 집계할 때 사용 아무튼 초간단 사용법 const promiseList = [ ]; primiseList.push( 함수1() ); primiseList.push( 함수2() ); primiseList.push( 함수3() ); //... 이렇게 차곡차곡 push ^^ Promise.all..

• format_list_bulleted 🧠 저장/Javascript
• · 2023. 11. 2.
• textsms