Vue.js (9) 썸네일형 리스트형 Stroybook-vue 기본 생성법 [방법1] 컴포넌트 개발 -> stories폴더에 컴포이름.stories.js 생성 export default { title: 'Button' }; //스토리북 LeftMenu 제목 export const normalButton = () => ({ // 스토리북 LeftMenu 상세제목 components: { 컴포넌트 }, template: ' 컴포넌트입니다. ' }); [방법2] s컴포넌트 개발 -> stories폴더에 컴포이름디자인1.story.vue 생성 Primary color 컴포넌트 stories폴더에 컴포넌트.stories.js 생성 import ButtonNormal from './컴포넌트프라이머리.story.vue'; import ButtonNormal from './컴포넌트블랙.sto.. 뷰js 배포 https://dev-r.tistory.com/6 라이트셰일에 https://daily-life-of-bsh.tistory.com/223 환경설정 셋팅 cd /etc/nginx/sites-available sudo vim default server{ /*수정*/ listen 9090 default_serer; /*수정*/ listen [::]:9090 default_serer; /*수정*/ root /var/www/html/static; // build하면 생기는 폴더들을 /var/www/html하위에 static이라는 폴더이름으로 놓았다. 그걸 바라보도록 /*추가*/ location /api { //서버로 가는 api 이름들은 전부 이렇게 설계해놓았었다. 그래서 서버 주소로 보냄 proxy_pass h.. vue.js 입문자가 실무에서 주의해야할 5가지 특징 1. 반응성 왜 내 화면은 다시 그려지지 않을까? -데이터의 변화에 따라 화면이 다시 그려지는 뷰의 성질 data 안에 있는 값이 변화되었을때 화면이 변경된다. #반응성은 언제 설정될까? 인스턴스가 생성될때 > data 속성들을 초기화 만약 인스턴스가 생성된 후에 data 내부에 속성을 새롭게 생성한다면 그 값을 '변경해도 화면이 새로 그려지지 않는다'. 그러면 어떻게 해야할까? 쉽게하려면 create 단계에서 속성을 미리 생성해놓는다. 또는 공식적으로 제공하는 reactivity 를 셋팅하는 방법을 사용하면 된다. |+| this.$set ( this.someData[0], '속성값' ,false ) ( reactivity 동적셋팅) # VUEX 의 state 도 data와 동일하므로 조심하자. 2. .. 라우팅 기본 동적 세그먼트 ( 라우트 파라미터 ) 각각의 사용자에 대해 같은 레이아웃 but 다른 사용자 ID 로 랜더링 되어야 하는 User컴포넌트 다음은 모두 user컴포넌트에 매핑 됩니다. 그리고 :id 는 컴포넌트에서 this.$route.params 로 가져올 수 있습니다. const router = new VueRouter({ routes:[ { path ; ' /user/:id' , component: User } ] )} tip) 세그먼트만 다른 같은 컴포넌트를 재호출 할 경우, 새로그리는 것 보다 기존것을 수정하는 것이 더 빠르다. 그러므로 다음 두가지중 한가지를 사용하자. const User = { template: '...', #######################################.. Created / Mount Created 는 인스턴스가 작성된 후 동기적으로 호출되는 지점이다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료한다. 하지만 인스턴스가 화면에 마운트 되기 전이므로 아직 $el 등을 사용할 수 없다. Mount 는 인스턴스가 작성된 후 화면에 마운트 된 시점이다. 예를 들어 Craeted 에 data를 수정하는 로직을 넣을 경우 -> Watch 에 잡히지 않는다. 하지만 Mount 에 data를 수정하는 로직을 넣을 경우 -> Watch 에 잡힌다. VS Code html 자동 태그 안됨 개선 VS Code에서 Auto Close Tag 를 깔았는데 뭔가 잘 안된다. 심지 어 를 치고 싶은데 로 자동완성이 된다. 이유를 알아보니 VS Code 에서 html 을 django-html 로 인식하고 있었기 때문. 1. settings.json 에 들어가서 다음과 같은 내용을 추가해준다. "files.associations":{ "*.html":"html" }, 2. File > Preference > Settings > Linked Editing 검색 > 체크 해주기 이 두가지를 해주니 잘된다. 모듈 내보내기 ,가져오기 두가지방법 CommonJS / ES6 1. https://www.daleseo.com/js-module-require/ 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require) Engineering Blog by Dale Seo www.daleseo.com 구형 : 많은 프로젝트에서 ES6 모듈 시스템을 점점 더 널리 사용되고 있는 추세이기는 하지만, 안타깝게도 아직까지 항상 import 키워드를 사용해서 코딩을 할 수 있는 것은 아닙니다. 태그를 사용하는 브라우저 환경에서는 물론이고, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 상황에서는 좋든 싫든 require 키워드를 사용해야 합니다. 따라서 Commo.. npm run build / npm run serve 한번에 해주는 플러그인 (maven) https://eastgyu.github.io/spring/Spring-Vue/ [Spring] Spring Boot 와 Vue.js 연동하기 Spring Boot와 Vue.js 연동하기 eastgyu.github.io pom.xml에 다음추가 ----------------------------------------------------------------------------------------------------------------------------------- ... org.springframework.boot spring-boot-maven-plugin com.github.eirslett frontend-maven-plugin 1.8.0 frontend frontend install n.. 이전 1 2 다음