Vue5 [Vue] 페이지 새로고침 기능을 만들자! (on-off 기능 추가) bootstrap-vue 를 활용해서 새로고침 아이콘(b-icon) 으로 새로고침을 on-off 하는 기능을 만들자! 이제 간단한 조건문을 곁들인 컴포넌트 개발은 많이 헤매지 않고 할 수 있는 것 같다. 역시 백문이 불여일타 🤓 2021. 8. 30. [Vue] bootstrap-vue 에서 icon 을 사용했는데 왜 안나오지?? (b-icon 삽질 후기) 네. 결론부터 말하면 삽질 맞습니다. 공홈 가이드를 백번 읽고, 구글링하면서 수정 -> 빌드 -> 확인 루프만 7시간 내내 돌린 삽질 후기 입니다 🤭 우선 특정 아이콘을 import 하지 않고 모두 불러와서 (all import) 사용하는 방식을 사용하고자 공식 홈페이지 (https://bootstrap-vue.org/docs/icons) 에 나와있는 'Module bundlers' 섹션을 정독했다. 그 런 데 이렇게 영역만 잡히고 아이콘이 노출되지 않았다. (not showing) 심지어 `b-icon` 컴포넌트를 찾을 수 없다는 오류메세지 까지 만나게 되는데.. vue.runtime.esm.js?ff9b:619 [Vue warn]: Unknown custom element: - did you regi.. 2021. 8. 23. [Vue] b-icon 전역 컴포넌트로 등록해서 별도로 관리하기 vue + bootstrap 으로 페이지를 관리하고 있었고, 필요한 아이콘은 bootstrap 에서 제공해주는 아이콘(b-icon) 을 사용하고 있었다. 디스플레이 아이콘을 노출합니다. 그러다보니 각 컴포넌트 별로 아이콘을 사용하기 위한 위 코드가 중복으로 들어가있었고, 중복을 제거하기 위해 b-icon 을 전역 컴포넌트로 등록해서 별도로 관리하기로 결심했다. 🌝 위와 같이 전역 컴포넌트로 사용 할 Icon.vue 파일을 생성해주고, (props 로 icon 을 노출하도록 했는데 이게 최선인지는 잘 모르겠다..) // 전역 컴포넌트로 사용하려고 만든 Icon.vue import import Icon from './components/Icon' // 전역 컴포넌트로 사용하기 위해서 선언 Vue.compon.. 2021. 8. 20. [Vue.js] Uncaught ReferenceError: process is not defined Uncaught ReferenceError: process is not defined Vue 로 띄운 프로젝트에서 각 환경마다 달리한 변수를 꺼내서 쓰고 싶어서 콘솔에 `console.log(process.env)` 명령어로 변수 값을 확인해보고 싶었으나 돌아오는건 위 에러메시지 뿐.. 찾아보니 콘솔에서는 환경 변수에 접근할 수 없다고 한다 하하 😅 코드 내에서 특정 액션이 일어났을 때 콘솔 찍히도록 하니까 잘 나옴! 2021. 6. 24. [Vue.js] vue-router 로 component 에 props data 전달하는 방법 Vue.js 를 배워보겠다고 책도 읽고 강의도 보았지만 역시 개발자는 코딩을 해봐야되나보다.. 백문이 불여일타 🙏 # 하게 된 계기 (tmi) - Vue.js 프로젝트를 진행하면서 모니터링 페이지를 만들고 있는데, 각 컴포넌트의 title 이 여러 군데에서 하드코딩 되어 있는 것을 보고.... 상수처럼 한 번만 정의해보자! 하게 됨 # 검색 1. vue-router props data 2. vue-router passing data 3. vue-router access app vue data 4. component props data ..... 등등 수많은 키워드로 검색했지만 거의 다 공식홈페이지에 있는 내용이라서 도움이 되지 못했다 😥 나는 App.vue 에서 data 로 각 컴포넌트의 title 을 .. 2021. 6. 4. 이전 1 다음
