반응형 분류 전체보기405 [Vue3] Module not found: Error: Can't resolve '@fullcalendar/daygrid, interaction' (FullCalendar.js) 1. 문제발생 2. 원인찾기 3. 문제해결 1. 문제발생 작업중인 프로젝트의 데이터 바인딩 시 calendar 형태로 표현해야된다고 해서 FullCalendar.js vue 버전을 찾아 install 을 했습니다. https://fullcalendar.io/docs/vue Vue Component - Docs | FullCalendar FullCalendar seamlessly integrates with the Vue JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This package is released under an MIT licens.. 2023. 5. 9. [Vue] 뷰 router 4버전 설치 및 사용_ nested routes (5) 뷰.js 에서 사용하기 뷰의 router.js 의 children 에 array로 적어주면 사용가능 const routes = [ { path: "/detail/:id", component: DetailContent, children:[ { path: "info", component:InfoPage }, { path: "post", component:PostPage }, ] }, ]; 주소/detail/10/info 주소/detail/100000/post 이런 주소 사용 가능😃 nested routes nested routes 가 뭐냐면 하위 URL 경로를 가지는 라우트를 구성하는 것 티스토리 글쓰고있는 주소인데 주소/어쩌고/어쩌고 이렇게 되어있음 어쩌고~~ 가 하위 url 경로임 끗 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_ url parameter (4) 뷰js 에서 사용하기 뷰의 router.js 의 path 에 /detail/:id 꼴로 적어주면 url parameter 를 사용할 수 있음 const routes = [ { path: "/detail/:id", component: DetailContent, }, ]; + /detail/:id/:id2/:id3 이렇게 파라미터 여러개 전달 가능 https://gallery-k.tistory.com/408 [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 .. 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_라우터 주요 태그 종류 (3) https://router.vuejs.org/guide/ vue-router 4 참고... 주요기능 1. router-view 2. router-link 홈 리스트페이지 3. named views 여러개 컴포넌트를 보여줄 때 /list 방문 시 여러 컴포넌트들을 한번에 보여줄 수 있음 + 등등....😗 redirect 도 있음 찾아보면 나옴 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 $router.go(1) 앞으로 한페이지 이동 $router.go(-1) 뒤로가기 한번 (-2는 두번) 제목 2. route $route: 현재 URL 정보가 담겨있음 $route.params: 현재 URL 정보의 파라미터 (여러개 존재할 수 있음) $route.params.id: 현재 URL 정보의 id 파라미터 {{블로그글[$route.params.id].title}} 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용 (1) 1. 설치npm install vue-router@4 yarn add vue-router@4 2. main.js 에 라우터 세팅import router from './router' // 원래 여기서 라우터를 설정을 하는데 // 코드가 기니까 router 파일을 따로 만들어서 import 한다. createApp(App).use(router).mount('#app') 3. router.js 만들기import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/list", component: DetailList.vue, }, ]; const router = createRouter({ history: createWeb.. 2023. 4. 1. [Vue] 뷰에서 bootstrap 설치 (5버전) https://getbootstrap.com/ 사이트 접속 vue 프로젝트 경로에 다음 명령어로 bootstrap 5 설치 npm i bootstrap@5.3.0-alpha1 main.js 에 다음 파일 import import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 2023. 4. 1. [Vue] 뷰 component 사용법 및 정리 컴포넌트화 시키면 좋은 거 다른 곳에서 쓸거 같을 때 (재사용해야될 때) 라우터화 시킬 때 (라이브러리) html 이 너무 복잡하고 길 때 순서 💜 자식 1. 컴포넌트화 시킬 자식 파일 만들기 이름은 multiword 로 짓기 (DetailModal.vue ◀◀ 이런 식으로) 2. 자식컴포넌트 name key : 자식컴포넌트 이름 value export default { name:'DetailModal', // 생략 } 💜 부모 1. 부모컴포넌트에 import 시켜주기 // templete 태그 밖에다가 해준다. import DetailModal from './DetailModal.vue'; 2. 부모컴포넌트 components key : 자식컴포넌트 이름 value export default { com.. 2023. 4. 1. [Vue] 뷰 lifeCycle 정리 1. lifeCycle 단계 - vue 의 lifeCycle 은 타 spa 들의 lifeCycle 과 같다.🙄 create 단계 ⬇⬇ mount 단계 ⬇⬇ 컴포넌트 생성 ⬇⬇ update 단계 ⬇⬇ unmount 단계 2. lifeCycle 단계 특징 create 단계 : 데이터만 존재하는 단계 mount 단계 : template 안에 있는 애들을 html 로 바꿔줌 컴포넌트 생성 : index.html 에 장착함 update 단계 : 컴포넌트 수정 단계 unmount 단계 : 페이지 닫을 때 + 😃 data 가 변하면 html 은 실시간 재랜더링 => 컴포넌트가 실시간 재랜더링됨 3. lifeCycle 메소드 beforeCreate() created() beforeMount() mounted() bef.. 2023. 4. 1. [Vue] transition 이벤트 (동적 class, Transition 태그) 뷰로 서서히 뭔가가 바뀌는 이벤트를 줄 수 있는 방법이 두가지가 있습니다. 1. 동적 class 넣기 2. Transition 태그 사용 동적 class 넣는거는 정통적인 css 디자인 방법이구요 Transition 태그는 뷰 만의 방법인데 진짜 편해여 1. 동적 class 넣기 css 로 애니메이션을 주는 방법인데 일단 시작과 끝 애니메이션 css 를 만들어놓고 시작 css 는 처음부터 할당, 끝 css 는 원할 때 할당해줍니다. 2. Transition 태그 사용 근데 뷰에는 더 쉽게 애니메이션을 구현할 수 있습니다. 시작 시 처음: .class명-enter-from 시작 시 transform: .class명-enter-active 시작 시 끝: .class명-enter-to 끝날 시 처음: .cla.. 2023. 3. 19. [Vue] 뷰에서 if else 쓰기 (v-if, v-else-if, v-else) 1. v-if 문법 조건식이 참일 때만 html 보여줌 닫기 2. v-else-if: 조건식을 연달아서 두개 세개 사용 v-else: v-if,v-else-if 에 적은 조건식이 참이 아닐 경우 실행 안녕하세요 안녕하세요2 안녕하세요2 2023. 3. 19. [Vue] 뷰에서 함수 사용 (method) 전체 증가 숫자들 증가 숫자 : {{숫자들[0]}} 총 누른 횟수 : {{숫자}} 1. 함수사용 v-on:click="함수이름" 또는 @click="함수이름" 2. 함수 선언 함수 선언은 methods 안에 해야됨 2023. 3. 19. [Vue] 뷰에서 for 문 쓰기 {{ a }} 2023. 3. 19. [Vue] 뷰.js 기본 틀 React 를 공부했을 때 제일 의아했던 부분이 라이브러리 치고 자유도가 생각보다 높다는 거였습니다. 근데 Vue 를 배울때는 역시 라이브러리구나 라는 생각이 들더라구요 (엄청난 제약들....🙄) + Visual Studio Code 에서 Vetur 설치 시 < 하고 tab 누르면 기본 틀을 만들어줍니다. 2023. 3. 19. [Vue] Visual Studio Code 에서 첫 환경설정 & 기본세팅 (window) vue 설치 (전역 cmd) /*둘 중 하나로 설치 (yarn 이 좀 더 안정적)*/ npm install -g @vue/cli yarn global add @vue/cli vue 프로젝트 설치 vue create 프로젝트명 VSC 부가기능 설치 Extension 이동 후 Vetur, Vue 3 snippets, HTML CSS Support 세개 설치 2023. 3. 18. 이전 1 2 3 4 5 6 7 8 ··· 27 다음 반응형
