vue6 Storybook 컴포넌트 기반 개발환경(Component-Driven Development)(CDD) Story는 args를 넘긴 UI Component 가 어떻게 렌더링 되는지 확인하기 위한 도구입니다. Storybook을 정적파일로 만들어 UI 배포용 웹으로 만들 수 있습니다. 하나의 UI Component는 하나 이상의 Story를 가질 수 있습니다. 사용자 인터랙션을 작성하고 화면을 전부 렌더링 해야하는 E2E 테스트보다 간편히 Component 테스트를 진행할 수 있습니다. Story 파일은 개발 전용이며, 상용 번들에 포함되지 않습니다. 사용법 : 1. 기존 프로젝트에 Storybook 설치 npx -p @storybook/cli sb init --type vue Storybook initial file tr.. 2023. 2. 15. Vuex 부제 : Vue API 모듈 개발시 Axios 모듈만 별도 개발하지 않고 Vuex 에서 개발하는 이유 기반 지식 3줄 요약: Vue 에서 사용되는 MVVM(Model-View-ViewModel) 패턴은 ‘이벤트 기반 프로그래밍’ 을 단순화 하기 위해 만든 ‘프레젠테이션 모델 디자인패턴’에서 파생됐다. Vue 는 데이터(상태)를 중심으로 움직인다. 데이터(상태)가 바뀌면 ViewModel 객체가 바라보고 있다 감지하여 View를 자동으로 변경한다. 어떤 컴포넌트, 어떤 메서드에 의해, 언제 변경되는지 알기 힘들다. 이 때문에 Vuex 를 사용한다. 단방향으로 흐르는 Vuex : Vue Components 에서 액션 발생 → Action API 호출 후 데이터 변이 → Mutation 결과 데이터를 받아 상.. 2023. 2. 3. Vue Router 만들기 (url에 페이지 연결하기) Vue 에서 url로 페이지 넘길 수 있도록 Router를 만들어 보겠습니다. 콘솔창을 엽니다. 자신의 vue 패키지 폴더 경로 밑에서 npm install vue-router --save 로 라우터를 깝니다. src 밑에 routes.js 파일을 하나 만듭니다. 그리고 component들을 임포트 한 다음 path를 각각 지정해 줍니다. 이제 main.js로 가서 라우터를 임포트 해줍니다.아까 npm으로 설치한 라우터와방금 위에서 만든 routes 파일을 임포트 해줍니다. 그리고 Vue.use(VueRouter); 코드로 라우터 사용 선언해줍니다. 그리고 Vue를 정의해 준 곳에 router:router를 추가해줍니다. App.vue에 router-view를 추가해줍니다. 그럼 url을 타고 페이지를 .. 2018. 12. 5. Computed와 Methods 차이 보통 computed는 data 속성 변화가 있을 때 자동 연산함.computed에서 사용하고 있는 data속성인 message 라는 프로퍼티가 변화가 있을 때만 다시 연산하고연산 값을 캐싱 해놓았다가 필요한 부분에 재사용함. methos는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 된다. 2018. 11. 30. 이전 1 2 다음
