005 프로그래밍/Vue5 [Vue와 Webpack] webpack은 무엇이고 왜 사용해야 하는가? webpack이란 웹팩은 모듈 번들러이다. 공식 홈페이지에서는 '서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구'라고 설명한다. 이를 좀 더 쉽게 설명하면, '파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구'이다. 다시 말해, 애플리케이션 동작과 관련된 여러 개의 파일(HTML, CSS, JS, 이미지 등)을 1개의 자바스크립트 파일 안에 다 넣어 버리고, 해당 자바스크립트 파일을 로딩해 이를 모두 구현할 수 있게 만드는 도구인 것이다. 장점 HTTP 네트워크 요청이 적어지기 때문에, 웹 화면 로딩 시간을 단축할 수 있다. 특징 대세 프레임워크 3가지 (Angular, React, Vue)에서 모두 권하는 모듈 번들러이다. 2022. 12. 23. [Vue-Router] 더 빠른 페이지 전환, 새로고침 없는 화면 전환 설명 Vue의 라이브러리 중 하나이다. Router를 설치 및 사용할 수 있게 해주며, 이를 통해 새로고침 없이 페이지 이동을 가능할 수 있게 해 준다. 이는 빠르게 콘텐츠 내용을 바꿀 수 있게 해주며, 특히 Vue의 Component의 특성과 함께 사용될 때, 코드의 중복을 대다수 막는 데 도움을 줄 수 있다. SPA (Single-Page-Application)에서 자주 사용되는 기술이다. 헷갈리는 문법 정리 $router.push $router.push(경로) // 경로로 이동하게 해준다. // Example $router.push({path : '/'}) // 경로 직접 입력 $router.push( {name : 'Home', params : {id : 0} }) // 'Home'으로 저장되어 .. 2022. 12. 22. [Vuetify] Vue의 디자인(UIUX) 속도를 몇 배 이상 빠르게 해주는 도구 개요 Vuetify는 Vue의 프레임워크이다. Bootstrap처럼 미리 UIUX 디자인을 설계해 두고, 사용자가 이에 접근할 수 있게 도와준다. 즉, Vuetify는 Vue의 디자인을 빠르게 만들 수 있게 도와준다. 특징 Vuetify는 모바일을 우선적으로 지향하는 디자인이다. (물론 모바일, 태블릿, PC 어느 곳에서도 훌륭한 디자인을 보이기 위해 고안되었다) Vuetify는 SASS/SCSS를 사용한다. 참고할 만한 링크 Vuetify 공식 홈페이지 https://vuetifyjs.com/ 2022. 12. 21. [Vue 에러] Component 에러 - "data" option should be a function that resturns a per-instance value in component definitions. 문제원인 Component의 data를 object로 생성해서 발생한 에러이다. 문제해결 Component의 data를 함수형으로 작성해준다. 예시 // 오류 구문 // 아래와 같이 수정해야 한다. 2022. 12. 19. [Vue-Error] vue cli 4 vulnerabilities (2 moderate, 2 high) 해결 방법, Vue 설치 에러 Vue CLI 설치 방법 1. NodeJs를 설치한다 2. Terminal에 다음의 코드를 입력한다 npm install -g @vue/cli 에러 해결 npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated res.. 2022. 12. 15. 이전 1 다음