jhhan의 블로그

이번 시간에는 vuex에서 mutations에 대해서 알아보겠습니다. 지난번 포스트에서는 state에 대해 알아봤는데요. (store.js 사용) state는 상태관리를 하는 항목이 들어가는 곳입니다. 그러면 state에 데이터를 넣어주면 어느 vue파일에서든지 끌어와서 쓸 수 있게 됩니다. 그리고, state에 넣어준 데이터가 변경이 되는 경우가 있을 수도 있습니다. 그런데 각각의 vue 파일에서 state 값을 변경하면 어떻게 될까요? 코딩하는 당시에는 편할 수 있겠지만, 나중에 오류가 생겼을 때 해당 vue 파일로 가서 고쳐야 합니다. 이게 큰 문제가 아니라고 생각할 수 도 있지만, vue 파일이 100개가 있다고 생각해봅시다. 그리고 100개의 파일에서 모두 state 값을 변경했다고 했고 오류가..

이번 포스트에서는 vue.js에서 많이 쓰는 라이브러리인 vuex를 알아보겠습니다. 사실 이번 포스트(vuex)는 이전부터 한 번 정리를 해보고 싶었는데.. 공부도 많이 안해봤고, 실제 적용도 어려운 것 같고, 귀찮기도 하고, 등등 여러가지 핑계를 대면서 미루다가 이제야 쓰게 됩니다. https://vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC..

Vue.js에 대해서 적어보는 포스트입니다. 이번에는 제목처럼 slot 문법에 대해서 알아보겠습니다. 컴포넌트끼리 데이터를 전달하기 위해서, 특히 부모컴포넌트에서 자식컴포넌트로 데이터를 전달하려면 반드시 props를 사용해서 진행해야 합니다. 참고로 props 사용법입니다. // 부모 컴포넌트 // 자식 컴포넌트 // Example.vue 부모 컴포넌트에서 전송하고, 자식 컴포넌트에서 받아서 사용합니다. 정확하게 단계로 알아본다면 부모 컴포넌트에서 전송 자식 컴포넌트에서 받기 + 등록 자식 컴포넌트에서 사용 대략 3가지 단계입니다. 하지만 이런 단계들이 귀찮다고 여길 수도 있습니다. 이런 귀찮음을 해소해주는 문법이 바로 slot 문법입니다. // 부모 컴포넌트 테스트 // 자식 컴포넌트 - Example..

Vue 프로젝트를 github pages로 배포하는 방법에 대해 알아보는 두번째 포스트 입니다. 저번에 기본적인(?) github pages 배포 방법에 대해 알아봤습니다. 하지만, 이 방법의 단점은 [github 아이디].github.io에 1개의 프로젝트만 배포할 수 있다는 것입니다. 즉, 2개 이상을 배포하고 싶다면, 적절하지 않은 방식입니다. 이번에는 서브페이지로 배포하는 방식에 대해 알아보겠습니다. ( [github 아이디].github.io/[원하는 url] ) ( 혹은 다른 주소로 된 자신만의 페이지를 원하는 경우일 수 도 있습니다. 그런 경우에 참고하면 매우 유용할 것 같습니다. ) 사실 저번의 방법은 단 1개만 배포할 수 있어서 실용적이라고 할 수 없겠습니다. 정말 중요한 단 1가지만 배..

오랜만에 다시 Vue 글을 써봅니다. 이번에는 vue.js로 만든 코드를 웹서버에 올리는 법을 알아보겠습니다. 지금까지는 모두 다 로컬에서 진행을 했습니다. 그래서 사실 열심히 개발해도 누군가에게 보여주기는 어려웠습니다. 이번에는 남들도 구경할 수 있도록 해봅시다. (이번 글은 기존에 진행하는 vue 프로젝트가 있다는 전제 하에 진행하겠습니다.) 본인의 vue 프로젝트를 배포하고 싶다면 먼저 build를 해야합니다. 웹브라우저는 .vue 파일을 인식할 수 없기 때문입니다. (웹브라우저는 html, css, js 파일만 해석할 수 있다고 합니다.) 그래서 먼저 build를 해서 브라우저가 해석할 수 있는 코드로 변경이 필요합니다. 이 build한 것을 웹서버에 올리면 남들도 접근할 수 있게 됩니다. bui..

Vue.js 관련 글을 써보겠다고 하고,, 3개정도 올리고 아무것도 안했습니다. 생각나서 다시 써볼려고 합니다. Vue.js에서는 emit을 이용해서 컴포넌트끼리 정보전송을 진행할 수 있습니다. (자식 컴포넌트 → 부모 컴포넌트) 그리고 뷰에서 기본으로 제공하는 것이 있죠. $emit을 사용하면 가능합니다. this.$emit("이름", 데이터); 정말 간단하게 나타내면 이렇게 나타낼 수 있습니다. 이렇게만 알면 조금 아쉬우니깐 사용가능한 예시를 하나 들어보겠습니다. 자식 컴포넌트에서 이름이 업데이트 되면 부모 컴포넌트로 이름을 출력해보는 예제를 간단하게 해보겠습니다. ... ... 자식 컴포넌트에서는 이름을 입력받을 수 있게 했습니다. 그리고 watch를 이용해서 부모 컴포넌트로 넘길 수 있게 했습니다..

이번에는 vue-router에 대해서 더 적어보려고 한다. 아마 이전에 vue-router에 대해서 적기는 했는데, 그래도 이번에 다시 배우면서 복습도 해볼겸 새로운 마음으로 다시 정리하려고 합니다. (만약 이전글도 보고 싶다면 아래의 링크에 들어가보셔도 됩니다.) https://jhhan009.tistory.com/27?category=773859 Vue.js 기초(3)_라우터 이번 시간에는 라우팅에 대해 알아보겠습니다. 라우팅 : 웹페이지 간의 이동방법 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용 라우팅 특징 화면간의 전환 매끄러움 애플 jhhan009.tistory.com vue-router 역시 → 기본지식이 있다는 가정하에 적겠습니다. 1. vue-router설치 이 글을..

Vue.js를 요즘 공부하고 있고 기존에 해봤던 것을 다시 한번 하는 것이기 때문에 아직까지는 어려움이 없다. 그래도 이번에 정식으로 Vue.js를 공부하면서 새롭게 알게 된 내용들 or 중요하다고 생각하는 내용을 기록하려 한다. 이 글은 Vue.js에 대한 기본지식이 있어야 이해할 수 있을 것이다. (자세하게 적을 생각이 없다.. ㅎㅎ) 1. v-for v-for은 Vue에서 제공하는 반복문이다. 코드에서처럼 v-for를 사용해서 진행하고, :key="??"를 추가한다. :key="??"는 반복문을 돌면서 반복 요소들을 구분하는 속성이다. data가 될 수도 있고, (data, idx)의 경우에는 idx가 key역할을 할 것이다. 2. export , import export로 보내고 싶은 데이터를 설..