728x90 Programming/Vue.js15 vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기 vue3-tree 트리 컴포넌트 Axios(비동기)로 데이터 가져오기 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 라이브러리는 vue3을 위한 트리 컴포넌트 라이브러리다. 이 라이브러리는 계층적 구조를 가지는 데이터를 시각적으로 표현하고 다룰 수 있다. vue3-tree jiurinie.tistory.com 지난 시간에 vue3-tree 트리 컴포넌트 라이브러리를 이용하여 트리 구조의 데이터를 시각적으로 보여줄 수 있도록 샘플 예제를 구현해보았다. 실제 운영환경에서는 서버에서 알맞은 데이터를 조회하고 가져와서 사용자에게 보여줄 것이다. 현재 사용중인 백엔드가 없으므로 public에 json 데이터를 넣고 Axios 라이브러리를 이용하여 데이터를 .. 2023. 6. 8. vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 트리 컴포넌트 라이브러리 vue3-tree 라이브러리는 vue3을 위한 트리 컴포넌트 라이브러리다. 이 라이브러리는 계층적 구조를 가지는 데이터를 시각적으로 표현하고 다룰 수 있다. vue3-tree 라이브러리로 트리의 각 노드를 확장하거나 축소할 수 있으며, 체크박스, 삭제 수정에 따른 이벤트 처리 또한 가능하다. 아래의 JSON 데이터와 같이 계층 구조의 데이터를 불러와 사용자에게 보여주는 화면을 만들어보자. [ { "id": 1, "label": "Electronics", "nodes": [ { "id": 2, "label": "Computers", "nodes": [ { "id": 4, "label": "Laptops" }, { "id": 5, "label": "Desktops".. 2023. 6. 8. Vue3에서 Composition API를 이용한 Axios 비동기 통신 Vue3에서 Composition API를 이용한 Axios 비동기 통신 Vue에서 권고하는 Promise 기반의 HTTP 라이브러리로서 웹 어플리케이션에서 서버와 HTTP 요청을 주고 받을 수 있다. 또 Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어왔을 때만 해당 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. Axios 는 다음과 같은 기능을 제공한다. 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 지난 시간에 Vue에서 기본적인 Options API 문법으로 Axios를 이용한 비.. 2023. 5. 31. Vue3에서 Composition API을 써야하는 이유? Vue3에서 Composition API을 써야하는 이유? 기존의 Vue에서는 Options API(일반적인 Vue 문법)을 기본적으로 사용하였다. 그 후 Vue3 버전부터는 Composition API를 플러그인 설치 없이 선언만으로도 사용할 수 있도록 업그레이드가 되었는데, 이전 버전에서는 Vue3의 형태와 조금은 다르지만@vue/composition-api 플러그인을 이용해서 사용할 수도 있다. Vue3에서 Compostion API는 setup(){}이라는 함수를 이용해서 사용할 수 있다. 아래 코드는 동일한 기능을 구현하는 코드인데 Compostion API를 이용한 코드와 Options API(일반적인 Vue 문법)을 사용한 코드를 비교해보자. Composition API Composition.. 2023. 5. 16. Vue.js에서 Vuex 사용하기(2) [state, actions, mutations] Vue.js에서 Vuex 사용하기(2) [state, actions, mutations] 지난 시간에는 간단하게 Vuex를 설치하고 세팅, 선언된 값의 간단한 사용방법에 대해 알아보았다. 이번 시간에는 서버에서 데이터를 가져오는 방법(actions)과 수정 및 가공하는 방법(mutations)과 추가적으로 사용할 수 있는 방법에 대해서 알아보자. 또한 mapState와 mapMutations을 활용하여 간단하게 축약하여 사용해보자. Axios 설치 vuex의 actions에서 ajax통신을 할 예정이므로 axios를 설치하자. > npm install axios 상태 (state) 상태(state)는 애플리케이션에서 관리되어야 할 구성요소이며 데이터이다. 이 값은 여러 컴포넌트에 의해 사용될 수 있다. .. 2023. 1. 3. Vue.js에서 Vuex 설치 및 기본 사용 방법(1) Vue.js에서 Vuex 설치 및 기본 사용 방법(1) 지금까지 Props, Slot, Custom Events, Mitt을 이용한 컴포넌트 간 데이터를 주고 받는 예제를 했다. 간단한 프로젝트의 경우에는 위 방법으로도 충분히 가능하지만 컴포넌트 및 데이터가 많은 프로젝트의 경우에는 Vuex를 사용하는 것이 좋다. 하위의 하위의 하위의 컴포넌트에 데이터를 전송하는데 Props만 세번 사용해서 전달하기에는 소스코드의 복잡도만 올라갈 뿐이다. 게다가 어느 컴포넌트에서 그 값을 변경해버렸을 때 어느 컴포넌트에서 이 값을 변경했는지 찾는데에도 많은 시간이 걸릴 것이다. Vuex는 상태(데이터)관리 라이브러리이며 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하고 예측 가능한 방식으로 상태(데이터)를 변경할 수.. 2022. 12. 30. Vue.js에서 mitt을 이용한 멀리있는 컴포넌트간 데이터 전송 Vue.js에서 mitt을 이용한 멀리있는 컴포넌트간 데이터 전송 Props, Slot, Custom Events는 상위 컴포넌트와 하위 컴포넌트 간의 데이터 통신을 지원한다. 하지만 연결되어 있지 않은 컴포넌트간 데이터 통신 또는 상위의 상위 등 은 지원하지 않는데 이때는 mitt을 이용하면 된다. mitt은 모든 컴포넌트 간 데이터 통신을 지원한다. Vue2에서는 Event Bus라는 것을 이용해 멀리 있는 컴포넌트간 데이터를 전송했지만 Vue3부터는 지원하지 않아 mitt 외부 라이브러리를 따로 사용해야 한다. 샘플 프로젝트 생성 > vue create mitt-test 데이터 전송 App.vue는 하위 컴포넌트로 ManView.vue와 WomanView.vue를 가지고 있다. ManView.vue.. 2022. 12. 23. Vue.js에서 Props 대신 Slot! 하위 컴포넌트에게 데이터 전송 Vue.js에서 Props 대신 Slot! 하위 컴포넌트에게 데이터 전송 Props를 이용한 하위 컴포넌트에게 데이터를 전송하는 방식 말고도 슬롯(Slot)을 이용할 수도 있다. Slot은 컴포넌트의 재사용성을 높여주며 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있다. Slot에는 몇가지 단점이 존재하는데 다량의 데이터를 Slot으로 전송하는 경우 Props보다 복잡할 수 있다. 또한 Slot으로는 하위 컴포넌트의 HTML태그의 attirbute에 값을 바인딩할 수 없고 오로지 HTML로서만 사용한 다는점이다. 허나 간단한 데이터나 HTML을 재정의하는 경우에는 Props문법보다 훨씬 간결하고 유용하게 사용할 수 있으므로 상황에 맞게 Slot과 Props를 선택하여 사용하면 .. 2022. 12. 20. Vue.js에서 Custom Events를 이용한 상위 컴포넌트의 데이터 변경 Vue.js에서 Custom Events를 이용한 상위 컴포넌트의 데이터 변경 하위 컴포넌트에서 상위 컴포넌트로 어떠한 데이터를 전송하거나 상위 컴포넌트의 데이터를 수정하고 싶을 때 Custom Events를 사용할 수 있다. 하위 컴포넌트는 상위 컴포넌트의 데이터에는 직접 접근하여 수정할 수 없으며 상위 컴포넌트로 요청을 하는 것이다. 이때 하위 컴포넌트에서는 상위 컴포넌트가 알 수 있도록 $emit('작명') 구문으로 전송하고 상위 컴포넌트에서는 메세지를 수신할 수 있도록 @작명="스크립트" 코드를 이용한다. 샘플 프로젝트 생성 > vue create custom-events-test 샘플 프로젝트를 생성하면 App.vue는 상위(부모) 컴포넌트로서 하위(자식) 컴포넌트인 HelloWorld를 쓰고 .. 2022. 12. 15. Vue.js에서 Props를 이용한 하위 컴포넌트에게 데이터 전송 Vue.js에서 Props를 이용한 하위 컴포넌트에게 데이터 전송 props는 properties 의 줄임말로 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줘야 할 때 props를 사용한다. 단방향 데이터 흐름을 가지며, 하위 컴포넌트는 상위 컴포넌트의 데이터를 수정할 수 없다. 번외로 상위 컴포넌트에게 데이터 전송이나 상위 컴포넌트의 데이터를 수정하려면 Custom Events라는 기능을 이용하여 요청할 수 있다. 이번시간에는 Props를 이용한 하위 컴포넌트에게 데이터 전송하는 사용방법에 대해 알아보자. 샘플 프로젝트 생성 > vue create props-test 샘플 프로젝트를 생성하면 App.vue는 상위(부모) 컴포넌트로서 하위(자식) 컴포넌트인 HelloWorld를 쓰고 있다. 샘플 프로.. 2022. 12. 9. Vue.js에서 Axios를 이용한 비동기 통신 Vue.js에서 Axios를 이용한 비동기 통신 Vue에서 권고하는 Promise 기반의 HTTP 라이브러리로서 웹 어플리케이션에서 서버와 HTTP 요청을 주고 받을 수 있다. 또 Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어왔을 때만 해당 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. Axios 는 다음과 같은 기능을 제공한다. 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 샘플 프로젝트 생성 > vue create axios-test Axios 설치 > npm install axi.. 2022. 12. 6. Vue.js에 Bootstrap 설치 및 사용하기 Vue.js에 Bootstrap 설치 및 사용하기 Bootstrap 이란 CSS에 대한 많은 지식 필요 없이도 미리 선언되어 있는 class를 찾아서 복붙하기만 해도 웹에서 사용하는 버튼, 메뉴 바, 카드, 리스트 등 예쁜 UI를 만들 수 있다. 반응형 웹 페이지를 지원하며 미리 정의된 HTML, CSS, JS를 이용하여 순식간에 웹 페이지를 꾸밀 수 있으며 현재 가장 인기있는 라이브러리이다. 우선 Bootstrap을 이용할 Vue 프로젝트를 생성하고 생성한 폴더를 열어보자. > vue create bootstrap-project 아래 링크에서 Bootstrap 홈페이지에서 다운로드할 수 있다. Bootstrap Powerful, extensible, and feature-packed frontend t.. 2022. 11. 25. vue-router redirect 404 NotFound 에러페이지 vue-router redirect 404 NotFound 에러페이지 이번시간에는 사용자가 의도하지 않는 URL로 접근 시 뷰 라우터에 404 오류 페이지로 리다이렉션을 설정해보고자 한다. 아직 vue-router 설정을 하지 않은 경우에는 아래 링크를 확인하여 vue-router를 추가하자. vue-router 설치 / vue -router 추가 및 라우터 예제 vue-router 설치 / vue-router 추가 및 라우터 예제 이번 시간에는 라우터에에 대해서 알아보고자 한다. 사용자가 '/list' 또는 '/detail' 등 서브페이지에 접근하려면 router를 통해 페이지를 연결할 수 있다 jiurinie.tistory.com Vue 프로젝트 구조 NotFound.vue 페이지를 찾을 수 없습니다.. 2022. 11. 10. vue-router 설치 / vue -router 추가 및 라우터 예제 vue-router 설치 / vue-router 추가 및 라우터 예제 이번 시간에는 라우터에에 대해서 알아보고자 한다. 사용자가 '/list' 또는 '/detail' 등 서브페이지에 접근하려면 router를 통해 페이지를 연결할 수 있다. 관리자가 티스토리 블로그에서 '블로그 관리'로 들어갈 때 https://jiurinie.tistory.com/manage의 '/manage' 경로와 같다. 물론 중간에 로그인 인증이 껴있긴 하지만 권한이 주어졌을때는 바로 관리 페이지로 이동한다. 이와 같이 페이지 이동을 위한 vue-router를 설치하고 vue에서 제공하는 기본 router를 추가하여 라우터가 어떻게 사용되는지에 대해서 알아보자. 기본 프로젝트 생성 > vue create vue-router-samp.. 2022. 11. 4. [Windows] Vue.js 설치 및 Vue 프로젝트 생성 [Windows] Vue.js 설치 및 Vue 프로젝트 생성 Vue.js는 웹 개발을 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크로 페이지 새로고침 없이 UI변경이 가능하다. 초보자가 사용하기 편리하며, React.js나 Angular.js에 비해 배우기 쉽다. Angular는 Typescript를 강제로 써야하며, React는 javascript 문법을 많이 사용한다(Javascript에 취약하다면 힘들 수 있다.). Vue는 새로운 문법을 사용해야 하지만 간단하고 빠르게 배울수 있다. 렌더링 속도 또한 다른 프레임워크과 비교하여 뒤지지 않으며 라이브러리 지원 업데이트도 지속적으로 하는 안정적인 프레임워크다. Vue.js는 NPM(Node Package Manager)을 통해서 다운로드 가능.. 2022. 9. 19. 이전 1 다음 728x90
