오늘의 CODE

vue2로 프로젝트를 생성할 때 주로 vue init webpack-simple을 이용했더랬다. 그런데 vue-cli를 사용해서 vue create 으로 세팅하려고 하니 자꾸 에러가 떴다. 구글링을 통해 2가지 방법을 확인했다. 1. 모든 vue 모듈을 삭제하고 다시 설치한다. sudo npm uninstall -g vue sudo npm uninstall -g vue-cli sudo npm uninstall -g @vue/cli sudo npm cache clean --force sudo npm install -g vue sudo npm install -g @vue/cli 하지만 에러는 해결되지 않고 프로젝트는 생성되지 않았다. 2. ~/.vuerc 파일 삭제 후 vue-cli 재설치 우선, .vuer..

will-change: 값이 변경될 속성에 대한 힌트 웹이 동적으로 상호작용하는 복잡한 어플리케이션을 위한 플랫폼으로 진화함에 따라 transform, opacity 등 css 속성 값이 동적으로 변화하는 효과를 자주 사용한다. 이때, will-change는 브라우저에게 엘리먼트의 어떤 속성이 높은 확률로 변할 것인지 힌트를 줄 수 있다. 브라우저는 이 힌트로 앞으로 일어날 변화에 대해 미리 대비해 더 매끄러운 트랜지션을 구사할 수 있다. will-chagne: auto; // 기본값 will-chagne: scroll-position; // 엘리먼트의 스크롤 위치가 바뀜 will-chagne: contents; // 엘리먼트의 컨텐츠 중 일부가 바뀜 // 특정 css 속성을 명시할 수 있음. // tr..

list-style-position: 리스트 마커 위치 지정 리스트 아이템 앞에 오는 리스트 마커는 기본적으로 li 태그 바깥에 위치한다. list-style-position의 값을 inside로 줘서 마커가 li 태그 안으로 들어오도록 설정할 수 있다. list-style-position: inside; // 마커가 li 태그 안에 위치 list-style-position: outside; // 마커가 li 태그 바깥에 위치

overflow-wrap: 오버플로우가 일어날 경우 줄바꿈 처리 word-break: keep-all(단어 단위로 줄바꿈이 일어남) 과 함께 overflow-wrap: break-word를 사용할 경우, 오버플로우가 일어났을 때 문자 단위로 줄바꿈이 생기도록 설정할 수 있다. overflow-wrap: normal; // 기본값 overflow-wrap: break-wrap; // 오버플로우가 일어나면 단어를 문자로 쪼개서 줄 바꿈 단어 단위로 줄바꿈이 발생했을 때 어색하게 들쭉날쭉하던 문단의 끝을 정리할 수 있다.

user-select: 텍스트 선택, 드래그 설정 user-select는 사용자가 텍스트를 선택할 수 있는지를 지정할 수 있다. 좀 더 자세히 말하면 텍스트를 더블클릭하거나 드래그했을 때 동작을 설정할 수 있다. user-select: auto; // 더블클릭, 드래그 시 선택됨 user-select: text; // 더블클릭, 드래그 시 선택됨(auto와 동일한 값) user-select: none; // 클릭, 드래그 불가 user-select: all; // 클릭 한번으로 전체 텍스트가 선택됨

touch-action: 브라우저에게 맡길 터치 액션 지정 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역이지만 touch-action 속성을 통해 어떤 요소 내 브라우저가 처리할 터치 액션 목록을 지정할 수 있다. 표준 터치 제스처로는 터치를 사용한 스크롤(paging)과 확대/축소(pinch zoom)이 있으며, 브라우저에 따라 더블 탭으로 확대 등 표준이 아닌 제스처를 지원하는 경우도 있다. touch-action: auto를 사용할 경우를 제외하고, 명시해준 속성의 터치 액션만이 브라우저에 의해 처리된다. 예를 들어, touch-action: pinch-zoom 속성을 갖는 엘리먼트에서는 터치를 사용한 스크롤이 (자바스크립트로 별도 처리해주지 않는 이상) 무시된다. touch-action..

NUXT를 설치하는 방법으로는 크게 3가지가 있다. 1. vue-cli 설치 2. npm(yarn) 설치 3. 수동설치 1. vue-cli 설치 vue-cli로 Nuxt start-template을 다운받아 설치한다. vue-cli를 전역으로 설치(미설치 시에만) npm install -g @vue/cli @vue/cli-init starter-template 다운로드/ 설치 vue init nuxt-community/starter-template 프로젝트 실행하기 cd npm install #Or yarn 설치 완료 후 실행하기 npm run dev 웹브라우저 http://localhost:3000에서 정상적으로 화면을 확인할 수 있다. 2. npm/yarn으로 설치하기 npx create-nuxt-a..

웹이나 앱에서는 종종 내용을 서버에 저장하고 저장된 내용을 불러다가 사용자에게 보여주는데 이 때 javascript에는 axios라는 플러그인을 사용한다. axios는 javascript에서도 많이 사용되며 Vue.js에서도 많이 활용되고 있는 플러그인이다. axios는 Promise 기반의 자바스크립트로 비동기 방식으로 처리된다. 그래서 요청 후 .then()으로 결과 값을 받아 처리한다. axios.get('/api/data').then(res => { console.log(res.data); }); /api/data에서 불러온 데이터는 .then()의 res에 담아 처리한다. 🤔 axios 설치 방법 1. npm 으로 설치하는 경우 npm install --save axios 2. yarn으로 설치..

1. 케밥(ke-bob)과 카멜(camelCase) 표현 import한 컴포넌트를 template 영역에 태그로 작성할 때, 꼭 케밥(ke-bob)으로 작성해야 한다. HTML은 대소문자를 구분하지 않기 때문에 todoList와 todolist를 동일하게 처리하기 때문에 규칙을 가지고 작성하는 것이 좋다. script 영역에서 컴포넌트의 이름은 카멜(camelCase)로 작성했더라도 Vue.js가 자동으로 같은 컴포넌트인 것을 인식하기 때문에 동작에는 문제없다. 2. 컴포넌트에서 Style(css)을 모듈화하여 사용하기 컴포넌트에서 화면을 꾸며주는 css를 모듈 형태로 지정해서 사용할 수 있다. 컴포넌트의 style 영역 안에 작성된 css는 정적형태로만 사용될 수밖에 없다. 하지만 Vue.js에서는 s..

부모 컴포넌트 -> 자식 컴포넌트 props를 전달하거나 자식 컴포넌트 -> 부모 컴포넌트로 events를 발생시켜 전달하는 것 외에도 형제 컴포넌트끼리 데이터를 통신할 수 있는 방법이 EventBus이다. ** EventBus는 컴포넌트가 많지 않아 규모가 작은 프로젝트에 사용해야 한다. (대규모 프로젝트에서는 vuex를 사용) 😐 이벤트버스 생성 방법 EventBus는 쉽게 말해 비어있는 Vue 인스턴스 객체라고 할 수 있다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간 다리로 활용한다. (데이터 전달 방향 : vue components -> EventBus -> vue component) import Vue from "vue"; var EventBus = new Vue(); 🤪 이벤트버스..