jhhan의 블로그

이번 포스트에서는 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로 보내고 싶은 데이터를 설..

Vanilla JS에 대해서 익히고 난 후 고민을 (조금) 해본 후 내린 결론은 일단은 Vue.js를 공부해보자 였다. 그 이유로는 1. 현재 하는 일이 백엔드보다는 프론트엔드를 훨씬 많이 다루기 때문이다. 물론 그렇다고 Vue.js처럼 3대장 프론트엔드를 사용하는 것도 아니지만 지금은 프론트엔드를 사용해서 일을 하고 있으니, 같은 프론트엔드를 공부해놓으면 조금이라도 도움이 되지 않을까 싶어서이다. 2. 예전에 Vue.js를 사용했기 때문이다. 예전에 잠깐이나마 (야매로) Vue를 사용한 경험때문에 그런지 Vue를 공부하는 것이 나쁘다고는 생각하지 않는다. 물론 내가 프론트엔드를 더 사용하지 않는다면 시간낭비가 될 수도 있을 것이다. 3. 현재 무슨 공부를 해야할 지 모르겠어서 일단은 Vue를 공부해보기..