본문 바로가기

전체 글

 (445)
hands on vue3 - npm run serve시에 out of memory 뜰 때.. npm run serve 하기 전에 $env:NODE_OPTIONS="--max-old-space-size=8192" 해주고 다시 npm run serve 하면 됨 8192는 사이즈이니 원하느 사이즈로 수정해서 사용하면 됨
hands on vue3 - 재사용성이 높은 button component 만들어보기 [목표] 1. 버튼을 만들 때마다 계속 만들지 않고 필요한 내용들만 수정해서 사용하도록 하는 component를 생성한다. 제공된 소스만을 가지고서 다음과 같이 구현해보기 [Button을 위한 CSS] button { padding: 0.75rem 1.5rem; font-family: inherit; background-color: #3a0061; border: 1px solid #3a0061; color: white; cursor: pointer; } button:hover, button:active { background-color: #270041; border-color: #270041; } .flat { background-color: transparent; color: #3a0061; borde..
hands on vue3 - component를 이용해 누른 버튼에 따라 다른 화면 보여주기 [목표] 1. 각 버튼을 누르면 다른 화면을 보여준다. 화면1 : StoredResource 화면2 : AddResource 2. 누르지 않은 버튼은 flat 클래스로 설정한다. 3. 누른 버튼은 색상이 있어야함 [App.vue] [TheResources.vue] Stored Resources Add Resource [StoredResource.vue] [AddResource.vue] Add [LearningResource.vue] {{res.title}} {{res.description}} Delete View Resource
vue2 - 사용자에게 input박스에 숫자를 콤마형식으로 보여주기 [목표] 1. 예를 들어 사용자가 금액을 입력한다. 금액은 천단위로 comma가 들어간다. 하지만 보여지는 것은 String으로 보여주지만 값을 다루는 부분은 Number 타입을 유지해야한다. v-model을 사용하여 구현해보자 App.vue -> Number.vue 구조이다. [App.vue] Hello World! [Number.vue] This is Number Money [ main.js] import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 해결한 뒤 얻은 점.. 1. vue2에서는 v-model을 사용할 때 자식이..
hands on vue3 - 원하는 요소에 붙여넣는 teleport tag에 대한 연습 [목표] 1. App.vue -> ManageGoals.vue -> ErrorAlert.vue 상속구조다 예를 들어 제일 아래의 자식에서 만든 엘레멘트를 Body에 붙이고 싶다면? 고것이 바로 teleport 태그다.. 전 포스팅에서 소스를 가져와 다음 연습문제를 풀어보도록 Q. Modal창으로 사용자에게 알려준 error-alert를 body에 붙이도록 하라. 현재 ManageGoals.vue 안에 error-alert 태그가 입력되어 있다. 이렇게 되면 body -> App -> ManageGoals 안에 error-alert 태그가 있는 셈이다. 원하는 목표는 body 안에 error-alert이 있어야한다. [ManageGoals.vue] Manage Goals SetGoals 내용을 입력해주세요..
hands on vue3 - slot을 이용해 Modal Alert 띄우기(모달알럿) [목표] 1. 사용자에게 알리기 위해 browser-api인 alert함수를 많이 사용했다. 이것은 styling도 할 수 없어서 지양해야된다. 다음은 간단한 Custom Modal Alert을 만들 것이다. 만들기 전 미리 혼자 해보는 게 좋다. 모달 요구조건은 다음과 같다. - Manage Active 버튼을 누른다. - set Goal에 대한 input 내용이 없을 경우, "내용을 입력해주세요."라는 문구와 OK버튼이 있어야한다. 버튼을 누르면 닫아진다. 힌트 1) slot을 사용해 부모에서 원하는 문구를 넣을 수 있도록 한다.(이렇게 하면 어디서든 사용 가능) 2) dialog태그를 이용해 만든다.(주의할점은 open 속성을 넣어야한다. [App.vue] Show Active Goals Show ..
hands on vue3 - component 데이터를 삭제 방지를 위한 keep alive 태그를 알아보자 [목표] 1. component는 상태에 따라 변경된다. 변경되면서 component 요소가 삭제되고 재 생성이 되는데 그때마다 데이터가 사라진다. 아래는 그 예시다. Show Active Goals를 눌러 만들어진 컴포넌트 안에서 Hello World를 썼다. 이번엔 Show Manage Goals버튼 클릭 - > 다시 Show Active Goals 버튼 클릭 리로드를 하지도 않았는데 ... 데이터가 사라졌다. 이유는 다음과 같다. 컴포넌트 하나의 태그로 상태에 따라 변동된다. 따라서 버튼을 누를 때 마다 컴포넌트가 바뀐다. 바뀐다는 것은 컴포넌트가 삭제되고 재 생성된다. 그래서 데이터가 없어지는 것.. 하지만 이 데이터를 캐시에 넣어서 임시로 계속 쓸 수 있게 할 수 있다. 그것이 keep-aliv..
hands on vue3 - component 태그 이해하고 연습문제로 연습하기 [목표] 1. component 태그에 대한 이해를 한다. 이해를 바탕으로 연습문제를 풀어본다. 첫번째로는 component 태그를 사용하지 않고 연습문제를 풀어본다. 두번째로는 component 태그를 사용하여 연습문제를 풀어본다. 문제는 다음과 같다 버튼 두 개가 있다. 하나씩 누를 때 마다 밑에 텍스트가 나오게 한다. 다음은 첫번째 버튼을 누를 때 다음은 두번째 버튼을 누를 때 [component태그를 사용하지 않고 풀어보기] [App.vue] Show Active Goals Show Manage Goals [ManageGoals.vue] Manage Goals [ActiveGoals.vue] Active Goals [main.js] import { createApp } from 'vue'; imp..

티스토리툴바