본문 바로가기

Frontend67

[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.
[Webpack] webpack plugins 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] devServer option 정리 [Webpack] devServer option 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] webpack option 정리 [Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어.. vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) PortFinder 실행 가능한 포트를 찾아주는 플러그인 실행 가능한 포트를 찾아서 devServer 에 연결도 가능.. 2021. 6. 25.
[Webpack] devServer option 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] webpack option 정리 [Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어서 그냥 따로 정리하기로 했다! 2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있 vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) clientLogLevel inline 모드를 사용할 때 DevTools 콘솔에서 표시될 lovel (df. info) webpack6 이후부터는 제거될 옵션이라고 .. 2021. 6. 25.
[Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어서 그냥 따로 정리하기로 했다! 2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. 지금 유지보수하고 있는 모니터링 시스템은 운영중인 사이트와 다르게 vue.js (+webpack) 설정으로 구성되어 있다. 다른 사람이 설정해놓은 웹팩을 가져다 쓰기 보다는 이해하고 사용하고 싶어서, vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) context 복잡한 상대경로를 쉽게 사용하.. 2021. 6. 25.