분류 전체보기

결론 빨리 알고 싶을 땐 정리 로 이동해서 보믄 된다 📌 그냥 쓸 때 : window 태그 안에 바로 this 를 쓰면 window를 뜻한다 📌 일반 함수 : window window란?window 는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다. 전역변수를 선언하면 window 객체에 저장된다. 함수도 마찬가지이다. 🔎 그냥 쓰거나, 함수 안에서의 this 는 window 를 뜻한다 📌 strict mode 일 때 함수 안에서의 this : undefined strcit mode에선 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 키워드로 선언하거나 하는 실수들을 방지해준다. 📌 method(오브젝트 내의 함수) 안에서의 this : 해당 오브젝트 그 자체..

https://icons.getbootstrap.com/ Bootstrap IconsOfficial open source SVG icon library for Bootstrapicons.getbootstrap.com  1. 터미널에서 npm 으로 설치 (CDN 으로도 가능)npm i bootstrap-icons 2. 원하는 아이콘 선택 3. svg 형태로 이용하고 싶을 때 code copy 그대로 복붙하면 잘 노출된다.    커스터마이징 하고 싶다면하단의 examples 활용하자 (개발자 모드켜서 html 확인하면서 활용 가능)

📌 style scopedvue 파일들에 있던 CSS 는 하나로 합쳐짐 팔로워 {{ a.name }}  전 포스팅에서 만들었던 MyPage.vue 에 css 가 없음에도 이쁘게 노출 됐던 것은 css 파일이 하나로 합쳐졌기 때문임 Post.vue 에 해당하는 css 가 있었다. 근데 특정 vue 파일에만 css 를 적용하고 싶다면?안에 css 를 작성하면 된다.  📌 ref() 와 비슷한 reactive()데이터를 만들 때 두 가지 방법이 있다.1. ref() - primitive 자료형 2. reactive() - array, object 자료형 (reference data type) reactive 에는 보통 array, object 를 집어..

options API 를 이용하면 .vue 파일이 길어지게 된다.methods, computed 가 엄청 많아지면 코드가 복잡해진다.이러한 단점을 보완한 것이 Composition API 이다.computed, methods, watch, data() 이런걸로 쪼갤 필요 없이 관련 기능을 한 곳에서 쭉 코드를 짜면 된다.(대신 문법이 조금 복잡해짐) 🔎 컴포넌트마다 options API, Compostion API 를 선택할 수 있다. 📌 Compostion API 를 이용하여 마이페이지 만들기 Compostion API 를 이용해 마이페이지를 만들어보자components 파일에 MyPage.vue 를 생성했다. 팔로워 사용자명  MyPage.vue 는 Container.v..

1. chrome 웹 스토어에서 vue-devtools 검색  2. 최신 devtools 설치하기예전에 나온건 vue2 를 위한 확장프로그램이라고 한다.  3. 설치가 완료되면 개발자 모드 열어서 확인하기 저 화살표 눌러서 vue 를 선택하면 된다.  잘 나오는 것을 확인할 수 있다. - 프로젝트에 라우터를 설치했으면 현재 route, parameter 등도 확인할 수 있다.- state 도 수정 가능설정을 바꾸면 props 도 수정 가능하다. - Timeline 메뉴에서 지금까지 어떤 이벤트가 동작했는 지도 체크 가능

📌 PWA (Progressive Web App)PWA 를 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있게 만들 수 있다.앱처럼 보이지만 사실은 웹임 PWA 되려면 다음 두 가지가 필요하다.1. manifest.json2. service-worker.js 라이브러리를 이용하여 위의 두 가지 파일을 만들어보자 설치만 하면 npm runb build를 입력할 때 PWA 가 알아서 셋팅된다. 배포하면 바로 PWA 로 사용 가능하다.  1. 터미널에 다음을 입력한다. (npm 도 이용가능함)vue add pwa  설치가 끝나면 registeServiceWorker.js 파일이 생긴다  우리 프로젝트를 build 할 때 manifest.jsonservice-worker.js 를 생성해준다. 2. 터미널에 n..

📌 mothods VS computedvue 에서 함수 다루는 방법 두 가지1. methods : { }2. computed : { } methods 함수는 사용할 때마다 실행된다. computed 함수는 사용해도 실행되지 않는다. vue 파일이 로드 됐을 때 한 번 읽힌다. 그리고 그 값을 간직한다. (처음 실행하고 값을 간직함)리턴 값의 내용이 변경되면 재실행되긴 함계산결과저장용 함수들 이라고 생각하면 된다. computed 함수 호출할 때는 괄호 사용 X / 함수 이름만 쓴다computed 에 now 라는 함수가 있다하면now (O)now() (X)  method를 이용해 현재시간을 나타내는 now()computed를 이용해 현재시간을 나타내는 now2() 함수를 정의했다.버튼을 누르면 카운터가 ..

📌 actions - dispatchajax 또는 오래 걸리는 작업을 하는 곳actions : { 함수들 정의 }  mustations 안에다가 ajax 요청을 하면 되지 않을까? NO name 바꾸는 mutations 함수 실행 후age 바꾸는 mutations 함수를 순차적으로 실행하고 싶다.근데 만약에 name 바꾸는 함수가 너무 오래 걸린다면 name 함수 실행이 끝나기전에 age 를 바꾸는 함수가 실행될 수 있다.즉, 순차적 실행을 보장할 수 없다. (자바스크립트는 ajax처럼 비동기식 처리를 지원하는 코드는 잠깐 제껴두고 다음줄 부터 실행하려 한다 actions 안에 ajax or 오래걸리는 작업을 함수로 정의한다.actions : { // ajax 또는 오래걸리는 작업들 getD..

1. store.js 에 state 수정 방법을 정의한다. 2. 수정하고 싶으면 store.js 에 부탁한다.state 수정 방법을 mutations : { } 에 정의하면 된다. // store.jsimport { createStore } from 'vuex'const store = createStore({ state() { return { // state 보관은 여기에 name : 'kim', age : 20 } }, mutations : { // state 수정 방법 정의 }})export default store 'kim' 이라는 name 을 'park' 으로 변경하고 싶다면 다음과 같이 정의한다.// store.jsmutations : { ..

컴포넌트 간에 데이터를 주고 받는 것은 귀찮다.- 상위 -> 하위 컴포넌트 전송은 props 사용- 하위 -> 상위 컴포넌트 전송은 custom event- mitt 라이브러리 사용 컴포넌트 간 관계가 많아지고 복잡할 수록 관리하기가 힘들다.vuex 를 쓰면 이 문제를 해결 할 수 있다.한 파일에 데이터를 모두 몰아넣고 그 파일에 있는 데이터를 모든 vue 파일이 꺼내쓸 수 있다.단점은 코드가 길어진다. 컴포넌트, 데이터가 많을 땐 vuex를 쓰는 것이 낫고그 외엔 props를 쓰는 것이 좋다. vuex : 상태관리 (데이터관리) 라이브러리- vuex 사용 시 데이터를 한 곳에서 관리하기 때문에 디버깅이 쉽다- 큰 프로젝트 만들 때 많이 쓰는 라이브러리 vuex 설치1. 터미널 열고 vuex 설치 명령어..