정도영 Tech-Blog 정도영 Tech-Blog

기존에 내가 해왔던 Vue 컴포넌트 파일 script 작성법이 Options API이다. data(), methods:, mounted() 이렇게 병렬로 작성하는 방법말이다. 근데 저걸 한 뭉치로 개발하는 방법이 있다는데 그게 Compisition API 방법이다. 사용법은 setUp()이라는 함수 안에 이것 저것 전부 넣어줄 수 있다. 결론은 그냥 Options API 쓰자.. 딱봐도 너무 피곤하게 생겼다. 문법도 꽤 다르니까 나중에 필요할 때 공부하면 될것같다.

computed는 프로젝트할 때도 많이 썼는데, 그냥 계산기이다. 그리고 값을 꼭 return하기때문에, 함수 형식 몸통 안에 return이 있어야한다. 그리고 html에 넣을 때 메소드처럼 ( )를 하지않는다. 그냥 변수처럼 이름만 써주면된다. 그리고 기본적으로 페이지가 로드될 때 계산값이 정해저 return 결과가 생성되고, 만약 로직 내부에 script의 data 변수같은게 들어있다면, 다시 로직이 실행돼 계산돼 새로운 return값을 반환한다. 그리고 computed는 state에 있는 변수들을 컴포넌트에서 쓸 수 있게 해준다. 보통 state에 있는 name 변수를 쓰고자한다면, computed: { name() { return this.$store.state.name; } } 이렇게 정의해줄 ..

학원을 다닐 때 vuex를 패턴대로 무지성 사용했는데, 지금 강의를 들으니 조금 원리를 알것같기도하다. 어쨋든 vuex의 store.js에 actions 이라는 프로퍼티가 있다. 여기에는 비동기 함수들을 정리한다. Ajax같은것들 말이다. 근데 matations이던 actions이던 결국 목적은 state 변수의 값을 변화시키기위함이다. 비동기 함수를 굳이 actions에 놓는것은 제일 큰 목적이 순차처리를 위한 로직을 짜기 위해서이다. Axios로 서버와 통신해 데이터를 받아와 state 변수에 할당할 경우를 가정하자. actions을 안쓰고 mutations에 api 통신을 하는 함수들을 다 나열한다면 비동기 처리가 적용되기때문에 axios의 코드 실행 후 서버에서 정보를 받기도 전에 밑의 코드가 실..

vuex를 npm으로 설치하고, src파일 안에 store.js를 만들어주자. 요렇게 만들면되는데, 역시 여기서도 router.js랑 비슷하게 npm으로 설치한 vuex라이브러리에서 createStore라는 함수를 import하고, store 변수를 createStore 함수로 만들어준다. 그리고 createStore 함수의 인자에 우리가 사용할 전역 state변수와 mutations이라는 state 변수를 조작하는 메소드들의 모임을 정의해주면된다. 그리고 맨 밑에는 store 변수를 main.js가 사용할 수 있도록 export해주는 로직으로 짜여있다. 그리고 export 한 store 변수를 main.js에서 위 사진처럼 import해 app 변수가 store를 쓸 수 있게 만들어주면 끝. 저 sto..

Vue2까진 EventBus를 쓸 수 있었는데 Vue3 이후로는 mitt을 쓴다. EventBus와 mitt이란 서로 연관없는 컴포넌트나 꽤 떨어진 계층의 조상, 자식 컴포넌트끼리 데이터를 주고받을 때 사용하는 라이브러리이다. 가까운 계층이라면 props나 $emit을 사용하면 되겠지만, 멀리 떨어져있다면 저 라이브러리를 쓰는게 효율적이다. cmd에서 npm install mitt으로 설치 후 main.js에 등록을 해줘야한다. main.js에는 우리가 자주 쓰는 라이브러리를 등록해줄 수 있는데, 저렇게 mitt를 import해줘야한다.(외부에서 설치한 라이브러리는 from에 ./ 이런 경로 설정이 필요없다.) 그리고 emitter라는 let 변수에 mitt()이라는 함수를 할당하는데, 이 mitt()함..

부모 컴포넌트가 자식 컴퍼넌트에 데이터를 보내는 방법이 크게 두 가지인데, 하나가 props이고 다른 하나가 slot이다. props는 자식 컴포넌트의 script로 보내 script안에서나 html에서나 자유롭게 사용할 수 있지만, slot은 자식 컴포넌트의 html에밖에 보낼 수 없다. 그래서 사용 빈도는 좀 떨어지지만 간편하게 자식 컴포넌트에 데이터를 보낼 때 가끔 사용한다. 사용법은 간단하다. 부모 컴포넌트에서 자식 컴포넌트의 태그 사이에 원하는 데이터(태그, 변수 등)를 넣어주면된다. 보내고싶은 태그와 데이터를 넣는다. ex) {{ data1 }} 또는 {{ data2 }} 그리고 자식 컴포넌트에서 받고자하는 부분에 이렇게 해주면 끝. 근데 보내고싶은 slot이 다수일 때는, {{ data }}..

1) :style 이렇게 넣을 수 있는데, 그냥 넣을수도 있지만, 좀 더 가독성좋은 방법으로 저렇게 객체 형식으로 집어넣을 수 있다. 2) Vue에서 컴포넌트는 파일 하나당 객체 형식으로 이루어진 자체 script를 갖는다. 그리고 export default로 해당 객체 형식 스크립트를 내보낸다. 그 객체에는 name, props, data, methods 등의 key값이 있는데 그 안에 value들이 또 key, value로 나뉘어져 페이지의 데이터와 함수 동작을 정의한다. 여기서 Vue는 data, props에 정의된 변수를 쓰려면 this.를 앞에 꼭 붙여야한다. script 내의 this는 export default 되는 컴포넌트 가장 상위의 객체 형식 script가 되기 때문이고 그 안의 dat..

Vue에서 router는 페이지를 쪼개는 기능을 하는데, import { createWebHistory, createRouter } from "vue-router"; import List from './components/List.vue'; import Contact from './components/Contact.vue'; const routes = [ { path: "/list", name: 'list', component: List }, { path: "/contact", name: 'contact', component: Contact } ] const router = createRouter({ history: createWebHistory(), routes, }); export default ro..