https://vuex.vuejs.org/#what-is-a-state-management-pattern What is Vuex? | Vuex What is Vuex? Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different na vuex.vuejs.org vuex 공식 문서이다. 근데 맨 위에 고정되어 있는 내용이 vuex보다 더 좋은 ..
Front-end
- 명령어 - 2.X : vue init '프로젝트 템플릿 이름' '파일 위치' - 3.x : vue create '프로젝트 이름' -웹팩 설정 파일 - 2.x : 노출 O - 3.x : 노출 X - 프로젝트 구성 - 2.x : 깃헙의 템플릿 다운로드 - 3.x : 플러그인 기반으로 기능 추가 - ES6 이해도 - 2.x : 이해 필요 X - 3.x : 이해 필요 O
https://youtu.be/38PWm8TgaV0 Js의 Import / Export 어떤 js 파일의 변수, 함수 등을 다른 js에서 갖다 쓰고 싶으면 최하단에 아래와 같이 작성한다. //한 개일 때 export default 변수명; //여러 개일 때 export {변수1, 변수2, 변수3, .....}; 그리고 export한 놈을 import 할 때는 아래처럼 작성. //한 개일 때 import 변수명 from 'export default한 js의 경로명'; //여러 개일 때 import {변수1, 변수2, ...} from 'export default한 js의 경로명'; {{ p.title }} {{ p.content }} 창 닫기 {{ menu }} {{ p.title }} {{ p.price..
https://youtu.be/UyESqYSb0gY 먼저 이미지 경로 넣기 (상대경로) App.vue가 현재 src폴더 안에 있고 같은 폴더라는 걸 뜻하는 표현은 ./ 지금은 src > assets 안에 이미지를 넣었으니 "./assets/이미지명 해주면 됨. 그리고 지금은 img의 src도 for문으로 동적으로 생성하고 싶으니 v-bind:src를 써서 경로를 바인딩 해주면 된다. 축약어는 (:src) 이 때, 경로는 require() 안에 넣어줘야 제대로 동작한다. 모달창 같은 UI 만드는 법 (마치 스위치 같은 느낌) 1. UI의 현재 상태를 데이터로 저장해둠. 예) ModalOn = false 로 지정. 2. 데이터에 따라 UI가 어떻게보일지 작성 예) v-if="ModalOn == true" 상..
https://youtu.be/Agm-F366ZwY JS의 onClick 대신 vue는 v-on:click을 쓰면 된다. v-on:은 @로 치환이 된다. {{ 작명 }} {{ p.원룸명 }} {{ p.가격 }} 만원 허위매물신고 신고수 : {{ alerts }} Vue에서 함수 만드는 법 {{ 작명 }} {{ p.원룸명 }} {{ p.가격 }} 만원 허위매물신고 신고수 : {{ alerts }}
https://youtu.be/T4N9wjx7_E4 vue의 반복문은 v-for="작명 in 횟수" :key="작명" 의 형태이다. 그런데 저 횟수 안에 array나 object도 넣을 수 있고 그 array나 object 안에 들어있는 개수 만큼 반복해주는 기능도 있다. 이걸 왜 쓰냐? 작명이라고 내가 만든 변수를 데이터바인딩하면 array안의 데이터를 출력할 수 있기 때문임. {{ 작명 }} data() { return { menus: ['Home', 'Shop', 'About'], products: ['역삼동원룸', '천호동원룸', '마포구원룸'], price: [50, 100, 150], }; {{ 작명 }} 에 Home Shop About이 차례대로 출력된다. 그리고 key는 인덱스 개념인데 작..
https://youtu.be/0BbF7UxKKvg 데이터바인딩은 데이터를 자바 오브젝트 형식으로 저장해두었다가 HTML template에 갖다 쓰는 것이다. 오브젝트 안의 변수에 할당된 값이 변하면 자동으로 렌더링을 다시 해준다. (마치 react에서 state 변경을 감지해서 렌더링해주는 것이랑 같은 느낌이다.) *요지는 자주 변하는 값들을 데이터바인딩 해두어야 한다는 것이다. HTML 태그 사이에 값을 넣는 경우에는 {{ }} 형식으로 넣어주면 된다. 태그의 속성 또한 데이터바인딩이 가능한데 :속성="데이터이름" 형식으로 넣어주면 된다. 원룸샵 XX 원룸 {{ price1 }} 만원 XX 원룸 {{ price2 }} 만원 이런식으로 작성하면 아래쪽의 스타일 때문에 위의 h4에 파란색이 적용되고 pr..
https://youtu.be/NONWar0jGLM 이 강의를 보고 따라하기로 했음. 1. node.js 설치 (이미 되어 있음.) 2. 터미널에 npm install -g @vue/cli 입력해서 Vue 3 개발환경 구성 3. Vetur, HTML CSS Support, Vue 3 Snippets 플러그인 설치 4. 프로젝트 폴더 생성 vue create vuedongsan 나는 여기서 보안 오류가 떠서 PowerShell을 관리자 권한으로 실행해서 아래를 입력했다. Set-ExecutionPolicy Unrestricted 이후에 다시 vue create를 하니 제대로 실행이 된다. vue 3 을 선택하여 vuedongsan 프로젝트 폴더를 생성했다. vuedongsan 프로젝트 폴더를 폴더 열기 한..
