계속 사용법 까먹어서 쓰는 글 Vue에서 하위컴포넌트에서 상위컴포넌트로 이벤트를 전파 할 수 있는데, 이것을 대충 커스텀 이벤트라고한다. 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전파 대충 하위컴포넌트라고 생각 대충 상위컴포넌트 이렇게 해주면 상위컴포넌트의 데이터의 에 값이 저장된다. 로 상위컴포넌트에 전달할 이벤트명을 보내주면된다. 사용은 상위컴포넌트에서 이런식으로 @작명한이벤트명으로 연결해주면 된다. 출처 코딩애플 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전파

출처 코딩애플 개념 특정 URL로 접속할 때 코드를 실행하고 싶은 경우 사용한다. 예를들면 로그인 유무에따른 페이지를 보여줘야할 때 를 사용하면 된다. 리액트로 따지면 hook같은거라고 생각하자. 사용법 파라미터는 두세개 작명 가능하다. 첫 파라미터는 목적지 페이지, 둘째 파라미터는 출발 페이지다. 라는 변수랑 똑같이 이용이 가능하다. 예를들면 하면 전체 경로를 알려주고,하면 id파라미터를 알려준다. return false는 라우팅을 중단시킨다. return이 없으면 원래의 route인 /hello로 이동시켜준다. 여러개의 route에 navigation guard를 추가하고 싶으면? 혹은 를 사용하자. 라우팅 하고나서 뭔가 실행하고 싶으면 를 사용하면 된다. Vue 컴포넌트 안에서도 navigation guard사용가능 리액트로 치면 useEffect()같다. created(), mounted() 이런거랑 비슷하게 활용이 가능하다. 위의 두 코드를 쓰는 위치에다가 쓰면 된다.…

출처 코딩애플 vue에서 애니메이션 주는 방법이 두가지가 있다고 한다. css로 애니메이션 만들기 첫번째 방법으로는, 애니메이션 시작 전 class를 디자인하고, 애니메이션 동작 후 class를 디자인한다. 원할 때 애니메이션 동작 후 class를 부착하면된다. 코드로 예시를 들면 이렇다. div태그에 class명을 start로 붙여놓고, 클릭했을때 end class를 붙이고, 떼는건데 vue에서는 조건문으로 이런식으로 코드를 작성한다. 데이터 바인딩과 비슷하게, 클래스 바인딩을 할 수있다. 모달창열렸니 이 부분이 true라면 class명에 end가 부착이된다. 더 간단하게 이용하기 두번째 방법으로 vue에서 제공하는 태그를 이용하면 된다. 태그의 name이름은 아무렇게나 작명가능한데, 위의예시 코드에서는 fade로 이름을 주었다. 그러면 css코드로 fade-어쩌구-to 이런식으로 지어주면된다. css로 애니메이션 만들기 더 간단하게 이용하기

Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다. 기존에는 이렇게 사용했다면.. 기존에는 methods함수 안에 뭔가를 적고 사용하고 이런식의 방식이였다. 이런 방식, 기존방식을 Options API라고칭한다. Composition API created hook 임 setup setup(){}을 사용해주면 된다. 컴포넌트를 생성하기전에, 이 코드가 먼저 실행된다. 이곳에 데이터 생성 및 조작과 methods를 만들 수 있고, hook도 걸 수 있다. 거의 모든 기능개발을 setup 한 곳에서 가능하다. setup()안에서 데이터 생성 ref(데이터) setup()안에서 데이터 생성은 ref()를 사용하면 되고, return{}으로 그걸 리턴해주면된다. ref()에 데이터를 넣는 이유는, vue에서 데이터가 바뀌면 실시간으로 랜더링이 일어날 수 있는 이유는 바로 데이터 타입이 reference data type이기 때문인데, 이 타입을 감지해서 랜…

Vuex 데이터들을 한곳에 몰아넣고 사용함. 리액트로따지면 리덕스,리코일 등등 같음 단점으로는 코드가 길어질 수 있고, 간단한 수정기능을 만드는데도 코드가 되게 길어짐 그래서 데이터 관리를 많이 안하는 웹이면 를 사용하고, 간단한 웹은 를 사용하자! 사용 src/store.js (store라고 작명하는게 보통 관습임) src/main.js 참고로 전 게시글 mitt사용법의 main.js와 연동되어있다. 달라진점은 import store와, 밖에없다. 여기까지 세팅해주면 모든 컴포넌트에서 데이터(state)를 사용할 수 있다. 완전 리액트 리덕스같다. state를 이런식으로 바로 변경도 가능하다 근데 Vuex법칙중 하나가, 데이터를 직접 수정하면 안된다고한다. 데이터 추적이 어렵기때문에(리덕스도 그랬음) State 수정하는 법 Vuex의 데이터를 수정하려면 다음과 같은 방법을 따르면된다. store.js에 state수정 방법을 정의하고(mutations사용), store.j…

npm i mitt 라이브러리니깐 터미널로 설치해주자. Vuex의 개념까지 알고 다시와봤는데, mitt는 리액트로따지면 contextAPI같은거라고 생각함 사용 main.js 는 글로벌한 변수 보관함이라고 생각하자. 모든 컴포넌트에서 자주 사용하는 라이브러리가있다면 등록해서 사용할 수있다. 예를들면 이렇게 해주면 import axios 해 올 필요 없이 this.axios로 사용이 가능해진다. mitt라이브러리로 데이터를 전송할 때 다음과 같이 두가지만 기억하면된다. this.emitter.emit()로 전송하고, this.emitter.on()으로 수신한다. 이제 본격적으로 mitt라이브러리를 사용해서 컴포넌트간 데이터를 전송해보자. 이런식으로 데이터를 쏴주고, 으로 데이터를 수신해주면 된다. 중요한건 항상 mounted(){}안에서 사용해줘야한다. 그리고 개인적인 생각인데 이거 말고 이렇게 사용해주는 이유는.. 크게 상관은없지만 자바스크립트의 this때문이 아닌가 싶…

actions Vuex.. ajax하는 곳 혹은 오래걸리는 작업들에 사용 사용예시 핵심 키워드 안에서 store의 state를 가져다 쓰려면 를 사용해서 불러오자. mutations안의 함수를 사용할땐 이렇게! state를 수정할땐 를 사용하자! 그런데요 mutations에 사용해도되지않을까요? 예를들어 위와 같이 사용하면 안된다. 왜냐하면, 코딩애플은 예시를들어서 name과 age를 수정하는 ajax요청이 각각 필요한데 만약 3초이상 걸리는 코드들이라면 age가 먼저 바뀔수도있는등 나중에 의도치않은 버그가 생길 수 있다고하는데.. 이거야 어떻게든 해결할 수 있겠지만, 그 해결하기위해선 코드가 길어질수밖에 없는데 이 길어지는 코드때문인것 같다. 그래서 state를 수정하는 mutations 함수는 ajax코드를 넣지말고, 순수하게 state 변경만 하는 함수로 만들어두자. ajax코드는 안에 넣어주자. 출처: 코딩애플 actions 핵심 키워드 그런데요 mutation…

vue에는 computed()와, methods()가 존재한다. 어떤 차이점이있을까? computed 함수는 사용해도 실행되지않는다. 처음 실행하고 값을 간직한다.(캐싱같은거같음,줄로 계산결과 저장용 함수로 사용함) computed함수는 이름만 사용해서 불러와야한다. 소괄호() 사용을하면 안된다. 예를들면 이렇게 methods함수는 사용할 때마다 실행된다. mapState state 꺼내쓰는 코드가 짧아진다! computed:{}안에 작성하는게 일반적이다! 예를들면 이렇게.. 중요한점은, computed함수는 꼭 을 적어줘야한다. 축약 또한 가능하다. 출처: 코딩애플 vue에는 computed()와, methods()가 존재한다. 어떤 차이점이있을까? mapState