vue3

📌 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() 함수를 정의했다.버튼을 누르면 카운터가 ..

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. 부모 컴포넌트에서보낼거보낼거 이름은 자..

📌 Tab 만들기// App.vue 내용0 내용1 내용2 버튼0 버튼1 버튼2  data () { return { data, moreNum : 0, step : 0 // tab 구분값 }}​ step 이 0이면 내용0 이 노출,step 이 1이면 내용1 이 노출된다. 버튼에 클릭이벤트를 넣음으로써 step 의 state 를 변경시켜준다.  ⚡ 여러 페이지를 만들 때 vue-router 를 써도 되지만 간단한 UI 는 탭으로 만들어도 된다.⚡ 중요한 데이터들은 웬만하면 상위 컴포넌트에 저장하자 (App.vue)  📌 서버 없이 업로드한 이미지 다루기 / URL.createObjectURL()이미지 업로드한 걸 HTML 에 보여주려면 업로드 한 걸 서버로..