묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
axios
강사님 안녕하세요, 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 연동 웹 프로그래밍 (실전편)
filemanager webpack plugin
// 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 연동 웹 프로그래밍 (실전편)
vue 버전
안녕하세요 강사님, 열심히 따라서 블로그 제작중인 학생입니다. django 는 강사님 버전에 맞게 설치를 했는데, vue 는 제가 설치했던 버전이 있어서 (5.0.8) 요, 혹시 강사님이 강의에서 설치하신 버전으로 다운그레이드 해야 django 랑 호환에서 문제가 없을까요? 감사합니다 !! :)
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
row 행 클릭 오류
선생님 안녕하세요.태그 클릭 시 관련 게시글만 보여주는 파트까지는 잘 실행되었습니다.그 후, 게시글 클릭 시 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 연동 웹 프로그래밍 (실전편)
post-list.html - test 화면표시
안녕하세요 강사님.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> 최근에 올려주신 코드를 복붙해봤는데도 잘 안됩니다 ㅜㅜ
-
미해결Vuetify Admin Template 만들기 - 기본편 (Based Vue2)
vuetify3 gradient 적용법
안녕하세요, vuetify 강의 정말 잘듣고 있습니다지금 시점에 vuetify3 버전이 출시되어 강의를 보면서 조심씩 수정하며 따라가고 있는데요,도저히 v-navigation-drawer의 이미지에 gradient가 적용이 안되어 질문올립니다,, 분명히 공식문서에도 gradient: string 으로 되어있는데 강의에서 적어주신 방법대로 따라하니 적용이 안됩니다.스타일로 지정을 하니 아이콘 위로 어두워져서 아이콘이 잘 안보이구요ㅜ vuetify3버전에서는 어떻게 적용하면 될까요?
-
해결됨Vue.js - Django 연동 웹 프로그래밍 (실전편)
장고 모델의 ForeignKey 관련 해서
안녕하세요 강사님강의 밖의 주제이긴 한데, 궁금한게 생겨서 질문드립니다. django 모델에서 다른 모델을 만들고 ForeignKey로 연결하면 ( 예를 들어, Post 모델 안에서 owner) 그럼 다수의 Post 테이블은 각 하나의 owner를 가질 수 있잖아요, 그렇다면 예를 들어, 철수 라는 owner 테이블, 민지라는 owner 테이블이 있고, 저는 철수 owner에 속한 Post테이블들을 가져 오고 싶으면 view 에서 queryset = Post.objects.filter(owner__username=철수) 이런 식으로 가져와야 하는건가요?
-
미해결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 연동 웹 프로그래밍 (실전편)
JsonResponse 의 safe에 관해서
안녕하세요 강사님 복습을 하던중 궁금한게 생겨서 질문드립니다. post LV 와 postDV는 둘다 JsonResponse로 리턴하는데, 왜 postLV는 safe가 false 값이고 postDV는 safe가 true 값인지 잘 모르겠습니다. 제 생각에는 둘 다 데이터들 dictionary로 되어 있어서 둘다 safe true가 올 수 있다고 생각했지만, postLV에 safe값을 true로 주니 에러가 나더라구요
-
해결됨Vue.js - Django 연동 웹 프로그래밍 (실전편)
추가영상 Index.html 자세히 알아보기 강의에서
강의에서 나와있는데로 <v-navigation-drawer> 옆에 clipped를 추가하고 <v-app-bar> 옆에 clipped-left를 추가했습니다.그렇게 해도 강의와는 다르게 페이지의 네비게이션 바가 페이지 위 Application 바 밑으로 들어가지 않습니다. 어떤게 문제인지 알려주시면 감사하겠습니다
-
미해결Vuetify Admin Template 만들기 - 기본편 (Based Vue2)
export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류 원인과 해결법 부탁드립니다.
서버 실행시에 이런 오류가 뜨는 이유가 무엇이며 해결법을 알고싶습니다! export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류인데 왜일까요ㅜㅜ>?? 원인:: package.json :: vue 버전 ::
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
강의 Vue-Django 연동 원리 중 vue-cli 시작하기에서
vue add vuetify 명령어로 vuetify를 깔다가 Default로 설치를 하시는데 저는 이렇게 에러가 납니다. 찾아보니 지원을 안해서 그렇다고 하는데요.. 해결방법이 있을까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결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>© 2020</span> </v-footer> </v-app> </template> <script> export default { props: { source: String, }, data: () => ({ drawer: null, }), created: () => { // this.$vuetify.theme.dark = true }, } </script>
-
미해결Vue로 Nodebird SNS 만들기
VueNodeBird - 2-5강 - 8분
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)