vuex 간단 정리

VueX VueX란 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인하였다. vuex를 배우기 전에 참고로 알아두자 ... MVC Controller → Model ↔ View (양방향) 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수 없음 Flux MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 (Unidirectional data flow) Action → Dispatcher → Model → View (단방향) (1) action : 화면에서 발생하는 이벤트 또는 사용자의 입력 (2) dispatcher : 데이터를 변경하는 방법, 메서드 (3) model : 화면에 표시할 데이터 (4) view : 사용자에게 비춰지는..

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

axios 간단 정리

Axios- 액시오스는 뷰에서 권고하는 Promise 기반의 HTTP 통신 라이브러리. (원래는 vue-resource 라는거 쓰다가 이제는 버리고 Axios가 공식이 되었다고 한다!) - 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어있음 - 브라우저 서포트가 잘되어있음 Axios 설치 방법cdn npm npm install axios Axios 메서드 종류axios.get(url, ...)url을 따라 서버에서 데이터를 가져옴. 두번째 파라미터에 header, params 등 같이 넣어서 요청 가능 axios.post(url, data)서버에 data를 올림. axios.put(url, data)서버의 데이터 수정을 요청함. 즉, 이미 존재하는 데이터를 대체할 때 사용. axios.delete..

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

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