나만의 컴퓨터 공학

지금까지 포스팅 한 것을 보면 기본 문법의 대부분 Vue2에서 사용하는 옵션스 API 방법이다.하지만, 요구하는 기능이 복잡해지고 다양한 로직을 유연하고 조직적으로 구성하고 관리하기 위한 방법으로 Vue3에서는 컴포지션 API를 제공한다.함수 기반 접근 방식 제공하여 개발자가 기능별로 코드를 구성할 수 있게 지원한다.옵션스API : data, computed, methods, lifecycle hook 포함한 객체 기반 옵션 속성으로 구성된 API구분옵션스API컴포지션API장점직관적쉽게 배울수 있음소규모 애플리케이션에 적합함함수 친화적기능별로 코드를 작성하기 쉬움로직의 재사용성이 좋음대규모 애플리케이션에 적합함단점컴포넌트가 복잡해질수록 관련 로직이 분산되어 코드의 재사용성과 가독성이 떨어짐옵션스API에 ..

컴포넌트 슬롯컴포넌트(vue)를 재사용할 수 있는 구성 요소로 생성해주는 도구템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 전달받은 템플릿 조각을 렌더링 할 수 있게 해준다.슬롯을 사용하기 전 App.vuescript>import CustomButton from './components/CustomButton.vue';export default{ components : { CustomButton, }}script>template> CustomButton>CustomButton>template>style scoped> style> 슬롯을 사용하기 전 CustomButton.vuetemplate> button class="btn">Clickbutton>template>style ..

컴포넌트의 데이터 참조방법(ref)부모컴포넌트와 자식컴포넌트는 서로의 컴포넌트에서 정의된 data, computed, methods 옵션 속성에 접근할 수 있다.ref 속성으로 컴포넌트의 참조를 생성하여 접근한다.App.vuescript>import RefChild from './components/refChild.vue'; export default{ components : { RefChild, }, data(){ return{ parentNum : 10, } }, computed : { numOddEven(){ return this.parentNum % 2 === 0 ? '짝수' : '홀수'; }, }, methods :{ getParentNum(){ return this.parentNum; } },..

"App 컴포넌트의 데이터 전달"의 문제점불필요한 컴포넌트도 데이터를 전달받아야함.컴포넌트 트리 구조가 깊게 연결되어 있을수록 데이터 전달이 매우 번거로움.provide컴포넌트에서 정의 데이터를 자신과 컴포넌트 트리 구조로 연결된 하위 컴포넌트에 공유하는 기능.injectprovide 기능으로 공유한 데이터를 가져올 때 사용하는 기능.default 속성으로 기본값을 따로 지정할 수도 있음.컴포넌트 구분 없이 모든 컴포넌트에 데이터를 공유하고 싶으면 App-Level provide 기능을 사용해야 한다.main.js 파일에서 provide 기능을 사용한다는 의미임.(모든 컴포넌트에서 provide()함수로 정의한 데이터를 공유함) App.vuescript>import FirstChild from './co..

컴포넌트에 속성과 이벤트를 뷰에 정의할 수 있는데, 사용자 정의 속성 및 사용자 정의 이벤트를 만들어서 적용할 수 있다. 속성사용자 정의 속성 : 전역 등록하거나 지역 등록한 컴포넌트를 사용할 때 컴포넌트와 함께 속성을 정의. App.vue 코드script>import UserProfile from './components/UserProfile.vue'; export default{ components : { UserProfile, }, data(){ return{ name : 'LJH', company : 'ljh99', age : 26, }; }, }script>template> UserProfile :name="name" :company="company" :age="age"/>template>st..

Vue.Js를 사용하여 간단한 Calculator를 만들어 보았다.script> export default { // Vue 컴포넌트를 정의하는 부분 data() { // 컴포넌트에서 사용하는 데이터 반환 return { output: null, // 현재 출력될 값을 저장 prev: null, // 이전에 입력한 숫자 또는 계산 결과를 저장 cur: null, // 현재 입력 중인 숫자를 저장 operator: null, // 선택된 연산자를 저장 (+, -, *, / 등) } }, methods: { operation(e) { // 버튼 클릭 시 호출되는 메서드 (계산 처리) const number = e.currentTarget.value; // 클릭된 버튼의 value 값을 가져옴 (숫자 또는 연..

Vue 애플리케이션의 실행 과정에서 package.json, index.html, main.js, App.vue는 각기 다른 역할을 맡으면서 유기적으로 연결되어 애플리케이션을 구동합니다. 그에 대해 앞선 글에서 뷰 애플리케이션의 기본 구조를 설명했습니다.그렇다면 이것들이 어떻게 동작하는지 실행 흐름에 맞춰 설명해 보겠습니다. 1. package.json과 개발 서버 실행역할 : package.json은 Vue 애플리케이션의 메타 정보와 스크립트를 정의한 파일입니다.연관 : npm run dev 명령어를 실행하면 package.json 파일의 scripts에 정의된 serve 명령어(vue-cli-service serve)가 호출됩니다. 이 명령어는 개발 서버를 구동하고, 소스 파일을 감시하며 변경 사항을..

Vue.js 애플리케이션의 기본 구조는 package.json, index.html, main.js, App.vue 파일들로 구성되어 있으며, 이 파일들은 서로 유기적으로 연관되어 애플리케이션을 구동하는 중요한 역할을 합니다. 각 파일을 자세하게 설명하고, 이들이 어떻게 연결되어 있는지 설명하겠습니다. package.json뷰 애플리케이션에서 가장 중심이 되는 파일은 package.json입니다.package.json 파일은 뷰 애플리케이션에서 사용하는 기본 정보, 의존성 모듈 정보, 스크립트 명령어 정보 등을 담고 있습니다.{"name": "vue-project","version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vi..

설치 방식CDN : Vue.js를 HTML 파일에 태그를 사용해 외부 URL로 직접 포함합니다. 별도의 설치 과정 없이 바로 사용할 수 있습니다.NPM : Node.js 패키지 매니저(NPM)를 사용해 Vue.js 라이브러리를 로컬에 설치한 후, 빌드 시스템(Webpack, Vite 등)을 통해 프로젝트에 포함합니다.사용 용도CDN : 작은 프로젝트나 테스트용으로 빠르게 Vue.js를 적용할 때 사용됩니다. 빌드 도구 없이 간단하게 사용 가능합니다.NPM : 대규모 애플리케이션, 프로덕션 환경에서는 NPM을 통해 패키지 관리 및 빌드 과정을 거쳐 사용합니다. 여러 패키지와 통합해 확장성을 높일 수 있습니다.번들링 및 성능CDN : Vue.js가 외부 서버에서 제공되기 때문에 로컬 번들링이 없으며, 캐싱..

Vue란?뷰 : 사용자 인터페이스(UI, User Interface)를 만드는데 사용하는 자바 스크립트 기반 오픈 소스 프로그레시브 프레임 워크대부분 오픈 소스 프레임워크는 모두 특정 소프트웨어 아키텍처 패턴에 기반을 둠.뷰는 MVVM(Model - View - ViewModel) 아키텍처 패턴을 따름.MVVM 패턴 : 데이터를 보여주는 뷰와 데이터를 처리하는 모델 사이에 데이터를 중개하는 뷰 모델을 두어 UI와 데이터 처리 로직의 상호 의존성을 줄이는 아키텍처 패턴Vue의 배경?프론트엔드 개방 시장을 이미 앵귤러, 리액트, 엠버, 백본과 같은 프레임워크가 이미 장악.특히 앵귤러와 리액트는 웹 어플리케이션 개발 과정에서 발생하는 여러 문제를 해결할 수 있는 여러 기능을 포함.기능이 많으면 다양한 문제에 ..