Vue.js에서 기본으로 제공하는 데이터 전달 방식으로 두개를 꼽아 생각할 수 있다. 하나는 부모에서 자식으로 전달하는 방식인 Props와 자식에서 부모로 전달하는 Emit이다. 이 문서는 이를 정리하는 문서이다. Props (부모에서 자식) props 속성을 통해 부모 컴포넌트가 가진 데이터를 자식 컴포넌트로 전달해준다. 코드 /* 부모 컴포넌트 */ var parentComponent = { template: '#parentComponent', data: function() { return { age: '30', name: 'Jeon' } } } /* 자식 컴포넌트 */ 내 이름은 {{ name }} 이다. 내 나이는 {{ age }}이다. var childComponent = { template: ..
Vue.js 를 통해서 SPA의 형태로 만든 사이트에 GTM(google tag manager)을 설치해달라는 요청이 들어왔다. 스크립트 코드가 메일로 전달 됐기 때문에 아무 생각없이 /public/index.html 에 추가하면 될거라 생각했던건 경기도 오산시였다. 처음엔 위에 방법으로 추가한 후에 배포를 했다. 그러나 GA가 활성화가 안된다는 연락이 온 것이다. 그래서 찾아보니 Vue.js에서는 vue-gtag 를 쓰는것을 확인했다. [공식] Get started vue-gtag documentation page matteo-gabriele.gitbook.io 설치 방법 npm install --save vue-gtag // 공식click // main.js import VueGtag from 'vu..
공식 : https://vuex.vuejs.org/kr/ 이번엔 Vue에서 상태관리를 어떻게 할 것인가에 대해 정리해본다. 공부의 순서는 이러했다. 내가 봤을때 vue를 처음부터 끝까지 작은 프로젝트를 해보면서.. 삽질도 해보면서.. 정리가 잡힌거같다. 만약 뷰를 처음 공부하는 사람이 있다면 나는 이 순서대로 공부해보라고 말해주고 싶다. 꼬리물기처럼 하다보면 필요한 기능들이 보이고 그게 결국 도달하는 점을 말해주는 것 같다. vue-cli를 통해 프로젝트 생성 후, 처음 한 페이지의 기본적인 레이아웃을 짰다. 그러다보니 Vue에서 페이지 이동시 각 페이지에 맞게 불러오는 기능이 필요해졌다. 그게 vue-router 이다. 뷰-라우터 설치 후, 아무래도 SPA로 만들어진 사이트에서 SEO가 필요할 것으로 ..
나중에 쓸지도 몰라서 해시태그를 추가하는 컴포넌트를 만들었다. 기본적인 기능은 네이버 블로그의 해시태그 기능을 보며 참고했다. 아래는 내가 만든 해시태그 첫 진입시 UI 이걸 클릭하게되면.. 이런식으로 focus가 input에 들어가게된다. enter나 space를 누를때마다 태그가 추가되고, 특수문자나 중복은 안된다. 위의 이미지처럼 중복태그나, 특수문자 입력 후 태그 추가시(enter, space) 경고창이 뜬다. 아래는 만든 해시태그를 불러올 부모 컴포넌트이다. // 부모 컴포넌트 바인딩된 placeholder로 기본 설명을 넣을 수 있다. 기본값이 들어가 있으니 굳이 쓰고 싶지 않다면 제외해도 된다. // 부모 js import Hashtags from '@/components/Hashtags';..
설치 version 3.4.10 npm install vee-validate // main.js import veeValidate from 'vee-validate'; new Vue({ veeValidate }).$mount('#app'); 적용 // in component import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'; import * as rules from 'vee-validate/dist/rules'; import {messages} from 'vee-validate/dist/locale/ko.json'; import {configure} from 'vee-validate'; // configure 통해 각 ..
vue에서 textarea로 입력받은 값을 textarea 안에서가 아닌 일반 html에서 보여줄 때의 방법을 정리해본다. 줄바꿈이 들어간 경우 바로 html에 값으로 넣어주면 줄바꿈이 표시되지 않는데 이럴땐 아래 계산식 즉, computed를 이용하여 값을 정제해준다. computed: { content() { return this.content.split('\n').join(' '); //return this.content.replace(/(?:\r\n|\r|\n)/g, ' '); 정규식 }, }, copputed를 작성 후, 해당 html이 들어간 content 값을 dom에 넣어야하는데 {{ 값 }}으로 넣어주면 string으로 표현되기 때문에 v-html을 같이 써줘야한다. 이렇게 하면 br 속..
vue-awesome-swiper 설치 후 IE11 에서 안보이는 이슈가 발생하였다. 코드는 아래와 같이 작성하였다. import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'test', components: { Swiper : Swiper, SwiperSlide : SwiperSlide }, directives: { swiper: directive, } //...생략 } 뭐 대강 이런식으로.. 그런데 확인겸 IE를 확인해보다가 구문오류 이슈를 확인한 것이다. IE 꼭 맞춰야하나.... 내년이면 아웃인데.... 찾고찾고찾고. 이것때문에 아까운 ..
이리저리 여러가지들을 참고하여 내가 했던 방식을 서술합니다. 현재 새로운 프로젝트를 시작했다. 해당 프로젝트는 Vue cli 를 통해서 만드는데 작은 프로젝트지만 확장될 가능성이 있으며 무엇보다 사용자에게 검색이 잘 되어야한다는 조건이 있다. (게시판 두개와 해당 게시판을 운영할 백오피스 정도의 규모) 내가 해당 프로젝트를 하면서 프로젝트에 녹이고 싶은 두가지가 있는데 그것은 다음과 같다. WAI ARIA를 사용할 것 SEO(검색 엔진 최적화)를 신경 쓸 것 그 중 두번째 이슈에 대한 포스팅이다. Vue router를 쓴다는 전제하에 이 포스팅은 작성되었다. 많이들 알겠지만 Vue.js에서 SEO를 위해 크게 세가지 방식으로 쓰이는 것 같다. SSR (Server Side Rendering) Pre-re..
- Total
- Today
- Yesterday
- 퍼블리싱
- 퍼블리셔
- vue
- ES5
- js
- youtube
- 웹퍼블리셔
- jQuery
- frontend
- 이론공부
- API
- 리액트생명주기
- curring
- 환경설정
- 포세이돈되기까지
- Issue
- 웹접근성
- WAI-ARIA
- 커리패턴
- javascript
- css3
- 자바스크립트
- props
- jeonst
- 수영하기전후기
- component
- 수영전후기
- 웹퍼블리싱
- vue.js
- Aria
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |