기록

AngularJS의 $scope는 Vue.js에서의 데이터와 관련된 영역과 유사한 개념입니다. Vue.js에서는 $scope 대신 데이터 객체를 사용합니다. AngularJS의 $scope를 Vue.js로 변환하려면 다음과 같은 단계를 따를 수 있습니다. $scope에 정의된 데이터를 Vue.js 데이터 객체로 변환합니다. Vue.js에서 데이터 객체는 일반 JavaScript 객체입니다. Vue.js의 데이터 바인딩 구문(v-bind, v-model, {{}})을 사용하여 Vue.js 데이터 객체와 HTML 요소를 연결합니다. Vue.js의 v-on 디렉티브를 사용하여 HTML 이벤트와 Vue.js 메소드를 연결합니다. AngularJS의 $watch를 Vue.js의 watch 속성으로 변환합니다. A..

아래 코드에서 common.js와 common2.js를 모듈화 import common from '@/assets/js/common.js'; import common2 from '@/assets/js/common2.js'; export default { name: 'HelloWorld', props: { msg: String }, methods: { method1() { common.method1(); }, method2() { common2.method2(); } } } 1. Webpack 사용하기 Webpack은 대표적인 모듈 번들러로서, 모듈의 종속성을 분석하고 묶어서 하나의 파일로 만들어 줍니다. 이를 사용하면 여러 개의 모듈을 하나의 파일로 번들링할 수 있습니다. 예를 들어, common.js와..

import common from '@/assets/js/common.js'; import HelloWorld from './components/HelloWorld.vue' 좌측의 구조에서 HelloWorld.vue에서 common.js를 가져올 때 App.vue에서 HelloWorld.vue를 가져올 때 위의 코드처럼 가져온다!! vue사용이 처음이라 경로표시에 대해 궁금한 점을 알아보았다. vue에서 경로를 가져올 때 @, .의 의미 @와 .은 모두 파일 경로를 나타내는 기호입니다. @: @ 기호는 Vue CLI에서 제공하는 앨리어싱(aliasing) 기능으로, 프로젝트 루트 경로를 가리킵니다. 이를 통해 상대 경로 대신에 프로젝트 루트 경로를 기준으로 파일 경로를 지정할 수 있습니다. .: . 기호..

i18n 라이브러리는 Vue.js의 공식 라이브러리 중 하나로, 다양한 언어와 지역을 지원하는 다국어 처리를 쉽게 구현할 수 있도록 도와줍니다. 1. Vue.js i18n 라이브러리 설치 npm install vue-i18n 2. Vue.js i18n 라이브러리 사용 main.js 파일에 다음과 같이 i18n 라이브러리를 추가합니다. import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', // 언어 설정 fallbackLocale: 'en', // fallback 언어 설정 messages: { en: { // 영어 메시지 hello: 'Hello World!' ..