inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

axios

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

강사님 안녕하세요, filemanager plugin 버전 때문에 문의 드렸던 학생입니다. 말씀해주신대로 섹션 11 보면서 장고랑 연동하고자 하는데요, 그전에 섹션 4 강의 보며 post detail 같은 뷰 페이지 몇개를 만든 후에, 섹션 5 들어가기 전에 섹션11 보면서 진행중입니다. 그런데 npm list 했을 때 C:\VueDjango\frontend>npm list frontend @0.1.0 C:\VueDjango\frontend ├── @babel/core@7.22.20 ├── @babel/eslint-parser@7.22.15 ├── @vue/cli-plugin-babel@5.0.8 ├── @vue/cli-plugin-eslint@5.0.8 ├── @vue/cli-service@5.0.8 ├── core-js@3.32.2 ├── eslint-plugin-vue@8.7.1 ├── eslint@7.32.0 ├── sass-loader@10.4.1 ├── sass@1.32.13 ├── vue-cli-plugin-vuetify@2.5.8 ├── vue-template-compiler@2.7.14 ├── vue@2.7.14 ├── vuetify-loader@1.9.2 └── vuetify@2.7.1 이렇게 axios 가 안 뜹니다. 아마 섹션 5 진행 전이라 이런 것 같은데, 이런 경우에는 섹션 5 진행 후에 하는 게 좋을까요? 아니면 우선 axios는 생각 안하고 진행해도 괜찮을까요?

  • vue.js
  • django
  • vuetify
kwonjiwoo 댓글 1 좋아요 0 조회수 279

filemanager webpack plugin

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

// webpack.config.js: const FileManagerPlugin = require('filemanager-webpack-plugin'); export default { // ...rest of the config plugins: [ new FileManagerPlugin({ events: { onEnd: { copy: [ { source: '/path/fromfile.txt', destination: '/path/tofile.txt' }, { source: '/path/**/*.js', destination: '/path' }, ], move: [ { source: '/path/from', destination: '/path/to' }, { source: '/path/fromfile.txt', destination: '/path/tofile.txt' }, ], delete: ['/path/to/file.txt', '/path/to/directory/'], mkdir: ['/path/to/directory/', '/another/directory/'], archive: [ { source: '/path/from', destination: '/path/to.zip' }, { source: '/path/**/*.js', destination: '/path/to.zip' }, { source: '/path/fromfile.txt', destination: '/path/to.zip' }, { source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar' }, { source: '/path/fromfile.txt', destination: '/path/to.tar.gz', format: 'tar', options: { gzip: true, gzipOptions: { level: 1, }, globOptions: { // https://github.com/Yqnn/node-readdir-glob#options dot: true, }, }, }, ], }, }, }), ], }; https://github.com/gregnb/filemanager-webpack-plugin 다른 분 답변에서 알려주신 깃허브 링크에서 copy 해온 코드인데요, 현재는 또 다른 코드로 업데이트? 가 된 것 같습니다. 강사님께서 강의에서 진행하신 코드와 다른 부분이 많아서, 정확히 어떻게 코드를 넣어야할지 모르겠어서요 ㅠㅠ 그리고 정확히 이 filemanager webpack plugin 과 웹팩이 저희 vue-django 프로젝트에서 어떤 역할을 하는 것인지 감이 잘 안옵니다 ㅠㅠ 간략히 설명 부탁드려도 될까요?

  • vue.js
  • django
  • vuetify
kwonjiwoo 댓글 2 좋아요 0 조회수 389

vue 버전

해결됨

Vue.js - Django 연동 웹 프로그래밍 (실전편)

안녕하세요 강사님, 열심히 따라서 블로그 제작중인 학생입니다. django 는 강사님 버전에 맞게 설치를 했는데, vue 는 제가 설치했던 버전이 있어서 (5.0.8) 요, 혹시 강사님이 강의에서 설치하신 버전으로 다운그레이드 해야 django 랑 호환에서 문제가 없을까요? 감사합니다 !! :)

  • vue.js
  • django
  • vuetify
kwonjiwoo 댓글 2 좋아요 0 조회수 332

row 행 클릭 오류

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

선생님 안녕하세요. 태그 클릭 시 관련 게시글만 보여주는 파트까지는 잘 실행되었습니다. 그 후, 게시글 클릭 시 detail 로 넘어가는 부분에서 오류가 발생했습니다. 혹시 오타가 있는가 해서 복사-붙여넣기를 해봤지만 계속 오류가 발생합니다. Page not found (404) Request Method:GETRequest URL: http://localhost:8000/blog/post/undefined/ Using the URLconf defined in mysite.urls , Django tried these URL patterns, in this order: admin/ [name='home'] blog/ post/list/ [name='post_list'] blog/ post/<int:pk>/ [name='post_detail'] api/ The current path, blog/post/undefined/ , didn’t match any of these. You’re seeing this error because you have DEBUG = True in your Django settings file. Change that to False , and Django will display a standard 404 page.

  • vue.js
  • django
  • vuetify
RNpfmfnpr 댓글 2 좋아요 0 조회수 448

post-list.html - test 화면표시

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

안녕하세요 강사님. vuetify 3 사용중이며, 테이블이 표시가 안돼서 문의 남깁니다. <template> <v-data-table :headers="headers" :items="posts" :sort-by="name" class="elevation-1" items-per-page="5"> <template v-slot:top> <v-toolbar flat> <v-toolbar-title>Post List</v-toolbar-title> <v-divider class="mx-4" inset vertical></v-divider> <v-spacer></v-spacer> <v-dialog v-model="dialog" max-width="500px"> <template v-slot:activator="{ props }"> <v-btn color="primary" dark class="mb-2" v-bind="props"> New Post </v-btn> </template> <v-card> <v-card-title> <span class="text-h5">{{ formTitle }}</span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue-darken-1" variant="text" @click="close"> Cancel </v-btn> <v-btn color="blue-darken-1" variant="text" @click="save"> Save </v-btn> </v-card-actions> </v-card> </v-dialog> <v-dialog v-model="dialogDelete" max-width="500px"> <v-card> <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue-darken-1" variant="text" @click="closeDelete">Cancel</v-btn> <v-btn color="blue-darken-1" variant="text" @click="deleteItemConfirm">OK</v-btn> <v-spacer></v-spacer> </v-card-actions> </v-card> </v-dialog> </v-toolbar> </template> <template v-slot:[`item.actions`]="{ item }"> <v-icon size="small" class="me-2" @click="editItem(item.raw)"> mdi-pencil </v-icon> <v-icon size="small" @click="deleteItem(item.raw)"> mdi-delete </v-icon> </template> <template v-slot:no-data> <v-btn color="primary" @click="initialize"> Reset </v-btn> </template> </v-data-table> </template> <script> export default { data: () => ({ dialog: false, dialogDelete: false, headers: [ { title: 'ID', align: 'start', sortable: false, key: 'name', }, { title: '제 목', key: 'calories' }, { title: '요 약', key: 'fat' }, { title: '수정일', key: 'carbs' }, { title: '작성자', key: 'protein' }, { title: 'Actions', key: 'actions', sortable: false }, ], posts: [], editedIndex: -1, editedItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, }, defaultItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, }, }), computed: { formTitle() { return this.editedIndex === -1 ? 'New Item' : 'Edit Item' }, }, watch: { dialog(val) { val || this.close() }, dialogDelete(val) { val || this.closeDelete() }, }, created() { this.initialize() }, methods: { initialize() { this.posts = [ { name: 1, calories: 'Django 3.0 Released', fat: '2019년 12월 장고 3.0 버전 팔표함.', carbs: '2020-07-13', protein: 'shkim', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, }, ] }, editItem(item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialog = true }, deleteItem(item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialogDelete = true }, deleteItemConfirm() { this.desserts.splice(this.editedIndex, 1) this.closeDelete() }, close() { this.dialog = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, closeDelete() { this.dialogDelete = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, save() { if (this.editedIndex > -1) { Object.assign(this.posts[this.editedIndex], this.editedItem) } else { this.posts.push(this.editedItem) } this.close() }, }, } </script> 최근에 올려주신 코드를 복붙해봤는데도 잘 안됩니다 ㅜㅜ

  • vue.js
  • django
  • vuetify
RNpfmfnpr 댓글 1 좋아요 0 조회수 410

vuetify3 gradient 적용법

미해결

Vuetify Admin Template 만들기 - 기본편 (Based Vue2)

안녕하세요, vuetify 강의 정말 잘듣고 있습니다 지금 시점에 vuetify3 버전이 출시되어 강의를 보면서 조심씩 수정하며 따라가고 있는데요, 도저히 v-navigation-drawer의 이미지에 gradient가 적용이 안되어 질문올립니다,, 분명히 공식문서에도 gradient: string 으로 되어있는데 강의에서 적어주신 방법대로 따라하니 적용이 안됩니다. 스타일로 지정을 하니 아이콘 위로 어두워져서 아이콘이 잘 안보이구요ㅜ vuetify3버전에서는 어떻게 적용하면 될까요?

  • vue.js
  • vuetify
dalki7711 댓글 1 좋아요 0 조회수 863

장고 모델의 ForeignKey 관련 해서

해결됨

Vue.js - Django 연동 웹 프로그래밍 (실전편)

안녕하세요 강사님 강의 밖의 주제이긴 한데, 궁금한게 생겨서 질문드립니다. django 모델에서 다른 모델을 만들고 ForeignKey로 연결하면 ( 예를 들어, Post 모델 안에서 owner) 그럼 다수의 Post 테이블은 각 하나의 owner를 가질 수 있잖아요, 그렇다면 예를 들어, 철수 라는 owner 테이블, 민지라는 owner 테이블이 있고, 저는 철수 owner에 속한 Post테이블들을 가져 오고 싶으면 view 에서 queryset = Post.objects.filter(owner__username=철수) 이런 식으로 가져와야 하는건가요?

  • vue.js
  • django
  • vuetify
rlawlsgus125 댓글 1 좋아요 0 조회수 288

비밀번호 변경기능 만들기에서 비밀번호 변경은 되는데 에러가 나요

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

비밀번호 변경 후에 에러 팝업이 계속 나와서 내용을 확인해봤는데 장고에서 아래와 같은 메시지가 나와요. 변경 비밀번호로 로그인도 되는 것으로 봐서는 변경까지는 되는데 후 처리가 있는 것 같습니다. 어떤 문제가 있는지 확인해 주실 수 있을까요? NoReverseMatch at /api/pwdchg/ Reverse for 'password_change_done' not found. 'password_change_done' is not a valid view function or pattern name. Request Method:POSTRequest URL: http://127.0.0.1:8000/api/pwdchg/Django Version:4.2Exception Type:NoReverseMatchException Value: Reverse for 'password_change_done' not found. 'password_change_done' is not a valid view function or pattern name.

  • vue.js
  • django
  • vuetify
회사 댓글 1 좋아요 0 조회수 357

JsonResponse 의 safe에 관해서

해결됨

Vue.js - Django 연동 웹 프로그래밍 (실전편)

안녕하세요 강사님 복습을 하던중 궁금한게 생겨서 질문드립니다. post LV 와 postDV는 둘다 JsonResponse로 리턴하는데, 왜 postLV는 safe가 false 값이고 postDV는 safe가 true 값인지 잘 모르겠습니다. 제 생각에는 둘 다 데이터들 dictionary로 되어 있어서 둘다 safe true가 올 수 있다고 생각했지만, postLV에 safe값을 true로 주니 에러가 나더라구요

  • vue.js
  • django
  • vuetify
rlawlsgus125 댓글 1 좋아요 0 조회수 609

추가영상 Index.html 자세히 알아보기 강의에서

해결됨

Vue.js - Django 연동 웹 프로그래밍 (실전편)

강의에서 나와있는데로 <v-navigation-drawer> 옆에 clipped를 추가하고 <v-app-bar> 옆에 clipped-left를 추가했습니다. 그렇게 해도 강의와는 다르게 페이지의 네비게이션 바가 페이지 위 Application 바 밑으로 들어가지 않습니다. 어떤게 문제인지 알려주시면 감사하겠습니다

  • vue.js
  • django
  • vuetify
rlawlsgus125 댓글 2 좋아요 0 조회수 418

export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류 원인과 해결법 부탁드립니다.

미해결

Vuetify Admin Template 만들기 - 기본편 (Based Vue2)

서버 실행시에 이런 오류가 뜨는 이유가 무엇이며 해결법을 알고싶습니다! export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류인데 왜일까요ㅜㅜ>?? 원인:: package.json :: vue 버전 ::

  • vuetify
  • vue
  • vuejs
  • Vuetify
민_지 댓글 2 좋아요 0 조회수 1093

강의 Vue-Django 연동 원리 중 vue-cli 시작하기에서

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

vue add vuetify 명령어로 vuetify를 깔다가 Default로 설치를 하시는데 저는 이렇게 에러가 납니다. 찾아보니 지원을 안해서 그렇다고 하는데요.. 해결방법이 있을까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • vuetify
  • django
  • vuejs
  • Vuetify
pearlzzi 댓글 2 좋아요 0 조회수 371

이 수업을 듣는 후대를 위해서

미해결

Vue.js - Django 연동 웹 프로그래밍 (실전편)

강사님이 알려주신 vuetify의 최신버전에서는 themo를 회원가입해서 다운로드 받게 만들어져있어서, 함부로 공유해도 될지 모르곘지만 코드를 공유할까 합니다. 참고로 black mode로 안됩니다. 그래도 강의 하는데 무리가 없을 겁니다. <template> <v-app id="inspire"> <v-navigation-drawer v-model="drawer" app clipped > <v-list dense> <v-list-item link> <v-list-item-action> <v-icon>mdi-view-dashboard</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>dashboard</v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item link> <v-list-item-action> <v-icon>mdi-cog</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>Settings</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> <v-app-bar app clipped-left > <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-toolbar-title>Application</v-toolbar-title> </v-app-bar> <v-main> <v-container class="fill-height" fluid > <v-row align="center" justify="center" > <v-col class="shrink"> <v-tooltip right> <template v-slot:activator="{ on }"> <v-btn :href="source" icon large target="_blank" v-on="on" > <v-icon large>mdi-code-tags</v-icon> </v-btn> </template> <span>Source</span> </v-tooltip> </v-col> </v-row> </v-container> </v-main> <v-footer app> <span>&copy; 2020</span> </v-footer> </v-app> </template> <script> export default { props: { source: String, }, data: () => ({ drawer: null, }), created: () => { // this.$vuetify.theme.dark = true }, } </script>

  • vuetify
  • django
  • vuejs
  • Vuetify
달사 댓글 2 좋아요 2 조회수 415

VueNodeBird - 2-5강 - 8분

미해결

Vue로 Nodebird SNS 만들기

PostCard.vue 에서 <template> <div> 코드들 </div> </template> 를 <template> <v-app> 코드들 </v-app> </template> 로 쳤는데 index.vue 에서 v-for(반복)이 안되고 1개만 나오더라구용.. 1. 대충 v-app 이 한번만 들어갈 수 있어서 그런 것 같은데 맞나요?? 2. v-app 은 그럼 component 에서는 안쓰나요?? 3. v-app 안에 무조건 써야하는 것 아닌가요?? (vuetify)

  • vue
  • vuetify
  • ssr
  • vuejs
  • template
  • nodejs
  • aws
  • mysql
  • vuex
yongsoocho 댓글 1 좋아요 0 조회수 236

인기 태그

인프런 TOP Writers

주간 인기글