Vue에서 text파일 .txt로 저장하고 text로된 .txt파일을 불러와서 Vue의 data영역의 데이터에 바인딩을 하기 위해 만든 코드입니다. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 불러오기 저장 export default { name: 'TextFile', data() { return { /** * textarea에 보여줄 텍스트 * @type {String} */ textData: '', }; }, methods: { /*..
vue에서 배열 데이터에 특정 인덱스에 값을 넣었는데도 리렌더링이 안되서 값의 변경을 감지 못해서 데이터가 그대로 남아있는 경우일 때 해당 현상에 대해서 원인과 해결방법을 살펴보겠습니다. 1 2 3 4 5 6 7 data() { return { steps: [ {name: 'step1', number:1}, {name: 'step2', number:2}, {name: 'step3', number:3} ], } } Colored by Color Scripter cs 이렇게 steps 객체 배열이 있다고 가정하고 해당 스텝의 특정 인덱스에 원하는 객체 배열을 넣으려고 했습니다. 다른 컴포넌트에서 stepData를 받아왔다고 가정해서 editStep의 인자에는 스텝데이터로 {name: 'step2', numb..
이번에도 토이프로젝트 진행과정중에서 발생했던 겪었던 문제 중 하나에 대해서 다뤄보려고 합니다. 화면을 마우스로 당겨서 넘기게 해주는 라이브러리입니다. 블라인드에서 해당 부분처럼 당겨서 밀어내는 방식을 사용하길래 찾던 중 알게된 것이 swiper입니다. https://swiperjs.com/ 처음에 공식문서에 나와있는 그대로 코드를 프로젝트에 적용해봤지만 적용이 안되는 현상이 있길래 또 당황... 결과적으로는 또 vue의 버전과 맞지않는 문제가 발생해서 vue2에서는 현재(2021.08.19 기준) swiper의 버전이 swiper6버전이 맞지 않아서 swiper 5버전대를 받아서 사용하였습니다. https://swiperjs.com/vue Swiper Vue.js Components Swiper is t..
프론트엔드 개발을 할 때 아이콘을 많이 사용합니다. 프론트엔드 라이브러리내에서 아이콘들을 제공하긴 하지만 종류가 제한적이고 원하는 아이콘이 없을때가 많습니다. 회사에서 Font Awesome 라이브러리를 사용하는데 개인 프로젝트에서도 사용할려고 했었을때 사용방법을 남기면 좋을 것 같아서 포스팅을 해보려고 합니다. | 설치 방법 yarn이나 npm을 통해서 fontawesome라이브러리를 설치합니다. (fontawesome일것 같지만 fortawesome인점 주의해주세요) npm npm install --save @fortawesome/fontawesome-free yarn yarn add @fortawesome/fontawesome-free main.js에 추가 main.js에 아래 코드를 추가해줍니다...
Vue에서 Bootstrap Vue를 사용하다가 메뉴바를 적용하다가 계속 적용이 안되는 현상이 있어서 애초에 Bootstrap Vue가 적용이 안되어 있다는 것을 알게되었습니다. 검색을 해봐도 알 수 없어서 깃허브에 Bootstrap Vue 의 repository에 issue를 통해 얻은 이유와 해결방법에 대해서 공유해보고자 하겠습니다. https://bootstrap-vue.org/docs/components/navbar#navbar BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 부트스트랩의 navbar예제를 구현하고자 했었습니다. 이게 왜 그런지 모르겠는데 계속해서 검색부터해서 오른쪽정렬이 전혀 ..
이번에는 Vue 개발할때 자주 사용하는 개발 도구인 Vue devtools에 대해 포스팅해보겠습니다. 크롬에서 확장 프로그램 플러그인으로 제공하는 Vue devtools는 Vue로 만든 웹의 구조를 파악하거나 데이터 파악하고 디버깅을 할 수 있게합니다. 설치 주소 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com 설치주소로가서 확장프로그램을 추가해줍니다. 확장프로그램을 보시면 Vue.js devtools가 ..
단일 컴포넌트 # 전역수준 컴포넌트 문제점 컴포넌트 관리가 어렵고 재사용성이 낮아진다. 빌드 단계가 없으므로 ES2015, TypeScript와 같은 최신 버전 자바스크립트 문법을 사용할 수 없다. (ES 2015 전 문법 작성만 가능) CSS를 지원하지 않는다. 컴포넌트들은 고유한 스타일 정보를 포함하는 경우가 많으나, 전역 컴포넌트에서는 CSS 스타일을 빌드하고 모듈화하는 기능을 제공하지 않는다. css를 방식이 아니라 모듈 처럼 참조(import)할 수 없다. → 모듈 처럼 사용할 경우 빌드 거치면 자체적으로 link 태그를 만든다. 컴포넌트들의 템플릿이 작성될 때, HTML 파일 안에 여러 개의 태그가 작성되어 식별하기 어렵다. 또한 템플릿마다 고유한 ID를 부여하고 컴포넌트들도 고유한 이름을 지..
컴포넌트란? 컴포넌트 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념이다. 기본 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화할 수 있게 해준다. 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 Element이다. 경우에 따라 is 속성으로 확장된 원시 HTML Element로 나타낼 수 있다. 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있다. Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue인스턴스이다. Vue 컴포넌트는 Vue 인스턴스이기하므로, 모든 옵션 객체를 사용할 수 있다. (루트에만 사용하는 옵션은 제외) Vue 인스턴스와 같은 라이프사이클 훅을 사용할 수..
Vue로 만든 다이어리입니다. 요구사항은 다음과 같습니다. 일단 Vue webpack을 생성합니다. CMD 에서 빈 디렉토리로 이동 후 vue init webpack-simple를 통해 webpack을 생성합니다. 이후 폴더의 구조는 아래와 같습니다. 처음에 package.json에는 위와 같이 생성되어 있는데 해당 프로젝트에서는 vuex와 vue-router, element-ui가 필요하므로 install하여 설치 해 준다. npm을 기준으로 npm install vuex --save npm install vue-router --save npm install element-ui -S 다음과 같이 설치해준다. 그럼 이후에 "dependencies" 부분에 보면 다음과 같이 vuex,vue-router,e..