개발 관련 지식/Vue.JS7 vue.config.js vue/cli 2.0은 프로젝트를 만들면 webpack.config.js 파일이 생성이 되지만, vue/cli 3.0은 config 파일이 설정에 따라 생성될 수도 있고 생성되지 않을 수도 있다. 생성되지 않았다면 프로젝트 root에 vue.config.js 파일을 만들어서 설정하면 되는데, vue.config.js는 온전한 webpack은 아니지만 webpack 빌드를 설정할 수 있는 파일이다. 2020. 6. 5. vue create 프로젝트 read-only sudo vue create. 관리자 권한으로 vue 프로젝트를 생성하면 read-only로 생성된다 그냥 vue create 로 프로젝트를 생성해야지 write까지 가능하다. 2020. 5. 29. Vue - computed, watch computed : 최종 결과에 대해서는 메소드와 동일하다. 메소드와의 차이점은 computed는 종속 대상을 따라 저장된다. computed는 대상이 변경될 때만 함수를 실행. 종속된 대상이 변경되지 않는한 computed 속성의 데이터를 아무리 요청해도 계산 되어 있던 결과를 즉시 반환함. computed: { now: function() { return Date.now() } } 또한 Date.now() 처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않는다. computed와 watch watch는 종속 대상(감시할 데이터)을 지정하고 그 데이터가 바뀌면 이런 함수를 실행해라.는 용도 computed는 감시할 데이터에 따라 특정 데이터를 정의하는 방식 2020. 3. 17. Vuex : vue 상태 관리 패턴 컴포넌트들에 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리해야 한다. 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있다. 싱글톤 : 특정 클래스에서 인스턴스가 만들어지고, 어디서든지 그 하나의 인스턴스에 접근할 수 있도록 하기 위한 패턴 또한 상태 관리 및 특정 규칙 적용과 관련된 개념을 정의하고 분리함으로써 코드의 구조와 유지 관리 기능을 향상시킨다. Vuex를 다루는 디렉토리 store store는 반응형이다. Vue 컴포넌트는 상태(state)를 검색할 때 store의 상태가 변경되면 효율적으로 대응하고 업데이트 한다. 저장소의 상태를 직접 변경할 수 없다. 저장소의 상태(state)를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이(mutations)이다. 이렇.. 2020. 3. 15. vee-validate input box에 validation을 적용하기 위해 외부 라이브러리 vee-validate를 사용했다. 여기에서 사용하는 버전은 2.2.15 버전이다 // package.json "dependencies": { "vee-validate": "^2.2.15", "vue": "^2.6.11", }, 먼저 vee-validate를 설치한다. npm install vee-validate --save 그 다음, 컴포넌트에 vee-validate를 불러온다.(나는 최상위 컴포넌트에 불러왔다.) 그 후에 html에 {{ errors.first('title') }} 저장 validate 검사 후 저장 되도록 하기 위해 save 함수를 만든다. 만약 validate 규칙에 어긋나서 validateAll()의 결과가 .. 2020. 3. 10. virtual scroll 프로젝트에 virtual scroll를 적용했다. 기존에 infinity scroll이 있긴 했는데 단순히 infinity scroll을 이용하자니 DOM에 띄워두는 data 양이 많아서 렉이 걸려가지고 virtual scroll을 사용했다. virtual scroll은 현재 스크롤이 있는 위치에 존재하는 데이터만 화면에 보이게 하고 현재스크롤의 바깥에 있는 데이터들을 보이지 않도록 처리해 놓는 방법이다. 스크롤을 움직이면 그 움직인 스크롤의 위치에 있는 데이터들이 보여지고, 스크롤 바깥 부분의 데이터는 잠시 사라지는 기능을 한다. 이렇게 하면 데이터가 많아도 DOM에 올려져있는 데이터가 적어지기 때문에 DOM에 부담을 줄일 수 있다. 크롬에서 검사해보면 많은 데이터들이 -9999 영역으로 이동 되어 있.. 2020. 3. 5. 이전 1 2 다음
