uni's code uni's code

이벤트(특히 click)가 발생할 때, router 경로(특정 컴포넌트)로 이동해야할 때가 많습니다. 이럴 경우, 몇가지 자주 사용하는 방법에 대해 정리하고자 합니다. 1. router-link 사용하기 기존의 a태그를 이용하여 를 사용하는 의미와 동일합니다. 그러나, 태그를 이용할 때는 여러 속성을 추가할 수 있습니다. router link move 그냥 to로 할 경우는 기존의 경로에서 추가되어 "기존경로/path 경로" 로 나타나집니다. 만약 기존경로를 제외하고, 그 경로자체로 이동하고 싶은 경우 아래와 같이 name을 추가하여 이동하고자 하는 컴포넌트 name을 기입합니다. router link move 2. this.$router.push router-link 태그를 사용하기 힘든 경우, 자주 ..

안녕하세요. vue-router에 이어서 vue 프로젝트를 진행할 때, 백엔드 서버와 data를 받고 보내기 위해 필요한 axios를 알아보겠습니다. 1. axios란? axios는 promise기반의 http 비동기식 자바스크립트 통신기법입니다. 기존의 ajax는 jquery에 특화되어있고, promise기반이 아니라는 점이 단점인데 axios는 js의 플러그인으로 vue뿐만 아니라 react에서도 훌륭하게 쓸 수 있는 통신기법으로 자리잡았습니다. 또한, 비슷한 통신기법으로 fetch가 있지만 fetch에 비해 다양한 기능을 제공하고 있습니다. 물론 fetch는 별도의 설치가 필요없다는 점에서 아직 불안정한 라이브러리에서 종종 쓰이고 있습니다. ++) ajax / axios / fetch에 대해 추가적..

저번 글을 통해 vue-cli 설치하고, 컴포넌트를 활용하는 것까지 작성하였습니다. 이번에는 vue에서 SPA를 만들 수 있도록 하는 중요 개념인 vue-router에 대해 알아보도록 합시다. 1. vue-router란? vue에서 경로에 따라 컴포넌트를 변경(전환)시킬 수 있는 라이브러리입니다. 이는 기존의 바닐라 js에서 흔히 말하는 화면 전환할 경우 생기는 "깜빡임"없이 작용하는 점에서 VUE의 SPA 기능을 만듭니다. 2. vue-router 설치하기 1) cdn 이용하기 2) npm 설치 npm install vue-router 3. router 설정하기 1) 먼저, router정보를 담아 둘 router.js 파일을 생성. 2) main.js에 router.js를 등록. import route..

vue의 생명주기 주로 사용하는 created, mounted는 많이 사용해봤지만, 다른 생명주기 요소에 대해 제대로 알지 못해 이번 참에 공부를 하며, 정리를 하자. 1. creation 단계 1) beforeCreate() 라이프 사이클 중 가장 맨 처음에 실행된다. vue의 인스턴스가 생성된 직후!!! 컴포넌트가 dom에 추가되기 전 → 어떤 컴포넌트가 어떠한 template(dom, html)안에 부착되기 전임. 즉, dom에 접근 아예 못함. data, methods, watch 속성에도 접근 못함. (아직, data, methods 등이 생성되지 않은 시점이기 때문) 2) created() 얘도 beforeCreate()처럼, dom에 접근 못함. but data, methods, watch ..

이전 글에서 vue-cli를 이용하여 프로젝트를 생성하는 과정에 대해 알아보았습니다. 이제, 원하는 내용을 vue의 컴포넌트로 만들고 화면에 띄워보겠습니다. 1. vue의 app.vue 파일에서 기존 내용을 다 지우고 "vue입력 후 엔터" 그러면 자동으로 밑에 저렇게 뜨는데 엔터를 누르면 짜잔!! 이런 기본 컴포넌트의 구조를 알 수 있습니다. 잠깐 설명을 하자면, vue의 컴포넌트는 크게 3가지 구성으로 이루어져있습니다. 1. template : html와 비슷하게 태그를 이용하여 화면을 구성해주는 역할을 합니다. 2. script : js와 비슷하게 data의 조작이나 이벤트 발생하는 역할을 합니다. 3. style : css와 비슷하게 template 안의 요소들을 꾸며주는 역할을 합니다. 사실 비..

vue를 배우고 나서 처음으로 글을 작성합니다. 첫글을 무엇으로 작성하면 좋을지 생각을 하다..! vue를 이용하여 프로젝트를 할때, 정말 기본이 되는 vue-cli를 사용하는 방법에 대해 적으면 좋겠다고 생각해서 이에 대해 끄적끄적 해보려고 합니다. ㅎㅎ 앞으로 vue-cli를 기반으로 한 프로젝트를 통해, vue에 대해 알아야 하는 부모-자식간의 통신방법, router사용 등등에 대해 적겠습니다. 1. VUE-CLI는 무엇인가? vue cli는 Vue command line interface의 약자로, vue 개발 환경을 설정해주는 도구입니다. vue cli가 알아서 기본적인, 프로젝트 환경 세팅을 완료해줍니다! (편하고, 멋지죠?) 2. VUE-CLI 설치하기 1) node js 설치하기 vue-c..