vue.js 기초- 인스타그램 만들어보기 09_vueX (코딩애플 세미나 후기)
EventBus도 힘들다 하면 VueX를 사용합니다. props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다. 하지만 실무에서 쓰려면 알아야겠죠.? vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다. 이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다. vueX는 4개의 기능을 알아야 합니다. state 데이터 저장공간 getters 저장한 데이터 가져오기 mutations 데이터 업데이트 actions mutations 실행하기 (ajax요청, mutations동작) vuex를 install해줍니다. npm install vuex 서버가 켜져있을때 npm install하면 오류날 때도 ..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)
더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..
vue.js 기초- 인스타그램 만들어보기 07_slot (코딩애플 세미나 후기)
에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..
vue.js 기초- 인스타그램 만들어보기 06_EventBus(코딩애플 세미나 후기)
EventBus에 대해 알아보겠습니다. EventBus는 컴포넌트간의 통신을 쉽게해준다고 합니다. 물론 child-parent 까지의 간단한 컴포넌트라면 사용안해도 props를 통해 통신을 할 수 있습니다. 하지만 복잡해진 트리 체계를 갖게된다면? EventBus를 사용해서 처리하는 방식을 알아보겠습니다. EventBus.js 파일을 생성해줍니다. 그리고 EventBus.js에 내용을 작성해 줍니다. import Vue from 'vue'; export default new Vue() 이것으로 EventBus.js 내부 작성은 끝입니다. 이것을 기존 프로젝트에서 import해서 사용하면됩니다. 예제를 하기위해서 기존 프로젝트에 parent-child 구조의 컴포넌트 하나를 추가하겠습니다. 아래 영역을 C..
vue.js 기초- 인스타그램 만들어보기 05 (코딩애플 세미나 후기)
기존의 3차에서 썼던 소스를 활용해서 계속 수업을 진행했습니다. 잘 있나 npm run serve를 한 번 해보고 시작합니다. 잘있으면 일단 첫번째로는 인스타에 올릴 때 필터효과를 사용해보도록 하겠습니다. cssgram 을 사용할 것인데요, 전 처음 알았어요 https://una.im/CSSgram/ CSSGram What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for ed..
메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기)
리다이렉션이란 사용자 지정 위치로 우회시키는 방법입니다.(출력의 방향을 바꾸는) 예를 들어서 내가 만약 네이버로 접속했는데, 네이버에서 다음으로 리다이렉션 시킨다면 나는 네이버를 들어갔어도 결론적으로 다음 사이트에 들어가지게 됩니다.^^ 보통 리다이렉션을 js로 작업하는데, 접근한 사용자에 따라 분기를 해서 리다이렉트를 시키는 경우라면 아래와 같이 작업을 합니다. if( user == '유저이름' ) { window.location.href = '이 유저에게만 보여줄 주소'; } 근데 이번에 관련 검색을 하던 중에 태그에도 리다이렉트 기능이 있다는 것을 알게되었습니다. 물론, 태그니까 강제로 태그를 수정하는 작업은 하지 말고, 심플하게 사용할 때 쓰도록 하면 좋을 것 같습니다. 비공개 페이지로 사용자가 ..