Vue3/코딩애플 part3

📌 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 설치 명령어..

📌 mitt 라이브러리 설치FilterBox.vue -> Container.vue -> App.vue 까지 데이터를 전송시켜보자 단순히 바로 위 상위 컴포넌트로 데이터를 전송할 때는 custom event 를 쓰면 됐었다.상위상위 컴포넌트로 데이터로 전송시키고 싶을 때는 mitt 라이브러리를 이용할 수 있다.  1. 터미널을 열고 mitt 라이브러리 설치한다.npm install mitt  2. main.js 에 mitt 라이브러리 등록import { createApp } from 'vue'import App from './App.vue'import mitt from 'mitt'let emitter = mitt();let app = createApp(App)app.config.globalProperti..

📌 slot 으로 부모 -> 자식 데이터 전송법1. 자식은 구멍 뚫기// FilterBox.vue  2. 태그 사이에 데이터 넣기// Container.vue 데이터~~~  데이터~~~ 가 자리에 들어간다.  필터명을 노출시키고 싶다면 {{ filter }}    slot 보다 간단하지만태그 안에 데이터바인딩 할 때만 slot 사용 가능하다. (속성에 바인딩 불가) / HTML 태그처럼만 사용 가능 🔹 Named Slots  : slot 여러 개 사용하는 법1. 자식 컴포넌트에서 2. 부모 컴포넌트에서보낼거보낼거 이름은 자..