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

vue에서 라우터 기능이 정말 좋다고 생각했는데 강의에서 메인콤포넌트로 해서 공유했던 방식이 아니라 메인 페이지에 두고 라우터 기능으로 하단만 바뀌게 하는게 훨씬 좋을 것 같아서요. vue라우터 기능을 못쓰면 장고랑 연동할지도 고민이 됩니다. 꼭 답변 부탁드려요. ㅠㅠ

안녕하세요 강사님, 혹시 배포 관련 강의는 따로 제작 안 하셨을까요? 혹시나 있다면 구매해서 학습하고싶어서요..각각 배포하는 게 msa 방식 맞나요?그냥 django 배포방법(주로 docker을 이용하는 것 같습니다..), + vue 배포방법 이용해서 배포하면 될까요? 그리고 nginx 는 웹 서버인데 django 배포시 고려해주어야 하는지요..또, 각각 배포하게 되면 둘을 연결시키는 건 또 따로 해주어야 하는지 궁금합니다..

안녕하세요 강사님, 그러면프론트엔드 서버에서 백엔드 서버로 데이터를 전송할 때는 formdata 를 이용해서 보내주고,백엔드 서버에서 프론트엔드 서버로 json 응답을 반환하는 건가요? ㅠㅠ 개념이 조금 어렵네요......질문이 너무 많아서 죄송합니다 ㅜㅜ

안녕하세요 강사님, 현재 태그를 누르면 포스트 목록 페이지 이동까지 구현을 성공한 상태입니다. (섹션 11에 올려주신 메인메뉴 수정 참고해서요 !)섹션 11 영상이 아니라 앞서 설명해주실 때에는 장고서버에서 설명해주셨어서 (?) 약간 헷갈리는 부분이 있는데,제가 이해하고 있는 게 맞는지 여쭤보고싶어서 질문 드립니다 !!postdetail.vue 에 내용에 의해serverPage(tagname) { console.log("serverPage()...", tagname); location.href = `/my_blog.html?tagname=${tagname}`; }이렇게 태그를 누르면 `/my_blog.html?tagname=${tagname}`; 로 이동하게 해놨는데, (저는 ~/my_blog 에 postlist 컴포넌트를 위치시켜놔서 url 이 저렇습니다 !)이러면 postlist.vue 에서 저 url 을 파싱해서created () { const params = new URL(location).searchParams; // const paramTag = params.get('tagname'); this.tagname = params.get("tagname") this.fetchPostList() },tagname 을 추출하는 것까지는 이해 했습니다 !그 후에 fetchPostList() { console.log("fetchPostList()...", this.tagname); // 메서드 이름을 콘솔에 로깅하여 메서드가 호출되는 것 확인 let getUrl = ''; if (this.tagname) getUrl = `/api/post/list/?tagname=${this.tagname}`; else getUrl = '/api/post/list/'; axios.get(getUrl) // axios를 사용하여 /api/post/list/로 HTTP GET 요청 보내기 .then(res => { // 성공적인 응답의 경우 then 부분 실행 // 서버로부터 받은 응답 데이터 는 res 매개변수 안에 console.log("POST LIST GET RES", res); // 서버 응답을 콘솔에 로깅 this.posts = res.data; // res.data 에 서버에서 받은 데이터가 있을 것 // 이 데이터를 Vue 컴포넌트의 this.posts 데이터 속성에 할당 axios 를 통해 해당 태그에 맞는 데이터를 가져오는 것으로 이해 했습니다. 근데 여기서 getUrl = `/api/post/list/?tagname=${this.tagname}` 부분이 약간 이해가 안되어서요.urlpatterns = [ path('post/list/', views.ApiPostLV.as_view(), name='post_list'), path('post/<int:pk>/', views.ApiPostDV.as_view(), name="post_detail"), path('tag/cloud/', views.ApiTagCloudLV.as_view(), name='tag_cloud'), ]django 에서 api 에 관련된 url 은 이렇게 지정을 해두었는데, post list 에서 특정 포스트를 누르면 해당 포스트의 id를 추출해서 axios 를 통해 요청하는 url은 axios.get(`/api/post/${postId}/`) 이잖아요. 이부분은 위의path('post/<int:pk>/', views.ApiPostDV.as_view(), name="post_detail"), 에서 <int:pk> 에 id 가 들어가는 거로 이해가 됩니다.그런데 태그에 대한 목록 부분은, api/post/list 뒤의 부분은 정의(?)를 안해두었는데, 어떻게 오류없이 저 url 뒤의 태그를 알아서 인식하고 해당 태그에 대한 데이터를 보내주는 것인지 궁금합니다. 감사합니다 :)

안녕하세요 강사님, 강의 보면서 블로그를 만들어보고 있는데, 혹시 이렇게 백엔드와 프론트엔드 서버를 분리 해서 개발해도, 블로그 친구들이나 팔로워 팔로잉 기능들은 django로 구현이 가능한걸까요?

안녕하세요 강사님, 저는 강사님 코드에서 조금씩 수정하여 서버를 띄워보았는데, PostDetail 보여주는 부분에서 계속 오류가 생겨서요,TypeError: Object of type User is not JSON serializable [21/Oct/2023 21:14:51] "GET /api/post/2/ HTTP/1.1" 500 120254이렇게 오류가 뜨는데 왜 이럴까요? ㅠㅠ이전/다음 포스팅 보여주기 전에 포스팅 하나의 상세페이지 띄워주는 것까지는 정상적으로 확인이 됐었습니다.api/views.py# Create your views here. class ApiPostLV(BaseListView): model = Post def get_queryset(self): queryset = super().get_queryset() return queryset.order_by('-create_dt') def render_to_response(self, context, **response_kwargs): qs = context['object_list'] postList = [obj_to_post(obj) for obj in qs] return JsonResponse(data=postList, safe=False, status=200) class ApiPostDV(BaseDetailView): model = Post def render_to_response(self, context, **response_kwargs): obj = context['object'] post = obj_to_post(obj) post['prev'], post['next'] = prev_next_post(obj) return JsonResponse(data=post, safe=True, status=200)api/views_util.pydef obj_to_post(obj): post = dict(vars(obj)) if obj.create_dt: post['create_dt'] = obj.create_dt.strftime('%Y-%m-%d %H:%M') else: post['create_dt'] = '' if obj.modify_dt: post['modify_dt'] = obj.modify_dt.strftime('%Y-%m-%d %H:%M') else: post['modify_dt'] = '' if obj.tags: post['tags'] = [tag.name for tag in obj.tags.all()] else: post['tags'] = [] if obj.owner: post['owner'] = obj.owner.username else: post['owner'] = 'Anonymous' del post['_state'] return post def prev_next_post(obj): try: prevObj = obj.get_prev() prevDict = {'id' : prevObj.id, 'title' : prevObj.title, 'description' : prevObj.description, 'create_dt' : prevObj.create_dt, 'owner' : prevObj.owner} except obj.DoesNotExist as e: prevDict = {} try: nextObj = obj.get_next() nextDict = {'id' : nextObj.id, 'title' : nextObj.title, 'description' : nextObj.description, 'create_dt' : nextObj.create_dt, 'owner' : nextObj.owner} except obj.DoesNotExist as e: nextDict = {} return prevDict, nextDict blog/models.pyclass Post(models.Model): title = models.CharField(verbose_name='TITLE', max_length=50) # verbose_name : 칼럼에 대한 별칭 description = models.CharField('DISCRIPTION', max_length=100, blank=True, help_text='simple description text.') content = models.TextField('CONTENT') create_dt = models.DateTimeField('CREATE DATE', auto_now_add=True) modify_dt = models.DateTimeField('MODIFY DATE', auto_now=True) tags = TaggableManager(blank=True) owner = models.ForeignKey(get_user_model(), on_delete=models.CASCADE, verbose_name='OWNER', blank=True, null=True) def __str__(self): return self.title def get_absolute_url(self): return reverse('blog:post_detail', args=(self.id,)) def get_prev(self): return self.get_previous_by_create_dt() def get_next(self): return self.get_next_by_create_dt()  PostDetail.vue<template> <v-container class="white"> <v-row align="center" justify="center"> <!-- align 속성은 위아래, justify 속성은 좌우 위치 조정 --> <v-col cols="12" lg="10"> <!-- <v-card class="pa-2" outlined tile> --> <h1>{{ post.title }}</h1> <div> <h3>{{ post.description }}</h3> </div> <div> <p style="margin: 5px 0;">작성일자 : {{ post.create_dt }}&nbsp;&nbsp; 최종수정 : {{ post.modify_dt }}</p> <p style="margin: 5px 0;">written by {{ post.owner }}</p> </div> <v-divider></v-divider> <!-- </v-card> --> </v-col> </v-row> <v-row align="start" justify="center"> <v-col cols="12" lg="10"> <!-- <v-card class="pa-2" outlined tile> --> <p style="white-space: pre-wrap;"> {{ post.content }}</p> <div> <strong>TAGS:</strong> <v-chip class="ma-2" outlined v-for="(tag, index) in post.tags" :key="index">{{ tag }}</v-chip> </div> <v-divider></v-divider> <!-- </v-card> --> </v-col> </v-row> <v-row align="center" justify="center"> <v-col cols="12" lg="10"> <v-card class="pa-2" outlined tile> <v-row> <!-- 왼쪽에 다음 글 문구 배치 --> <v-col align="center" cols="2"> <p>이전 글</p> </v-col> <!-- 오른쪽에 다음 글 제목 문구 배치 --> <v-col cols="10"> <div> <h3 v-if="post.prev" @click="fetchPostDetail(post.prev.id)">{{ post.prev.title }}</h3> <p v-if="post.prev" @click="fetchPostDetail(post.prev.id)">{{ post.prev.description }}</p> </div> </v-col> </v-row> </v-card> <v-card class="pa-2" outlined tile> <v-row> <!-- 왼쪽에 다음 글 문구 배치 --> <v-col align="center" cols="2"> <p>다음 글</p> </v-col> <!-- 오른쪽에 다음 글 제목 문구 배치 --> <v-col cols="10"> <div> <h3 v-if="post.next" @click="fetchPostDetail(post.next.id)">{{ post.next.title }}</h3> <p v-if="post.next" @click="fetchPostDetail(post.next.id)">{{ post.next.description }}</p> </div> </v-col> </v-row> </v-card> </v-col> </v-row> </v-container> </template> <script> import axios from "axios"; export default { name: "PostDeatail", data: () => ({ post: {}, }), created() { console.log("created()..."); const postId = 2; this.fetchPostDetail(postId); }, methods: { fetchPostDetail(postId) { console.log("fetchPostDetail()...", postId); axios.get(`/api/post/${postId}/`) .then(res =>{ console.log("POST DETAIL GET RES", res); this.post = res.data; }) .catch(err => { console.log("POST DETAIL GET ERR_RESPONSE", err.response); alert(err.response.status + ' ' + err.response.statusText); }); } } } </script> <style scoped> </style> 계속 다시 코드를 짜보았는데도 어디서 오류가 나는 것인지 모르겠어서요 ㅠㅠ.....감사합니다 .. ㅜㅜ  

modify_dt 가 아니라 아래처럼 create_dt 를 기준으로 이전 이후 나누게 코드 짜도 되나요? def get_prev(self): return self.get_previous_by_create_dt() def get_next(self): return self.get_next_by_create_dt()

안녕하세요 강사님, Post model 구현하는 과정에서from taggit.managers 이 부분이 저는 계속 밑줄이 뜨는데 왜 이러는 걸까요? ㅠㅠ

안녕하세요 강사님, 5:41 부분에서 safe=True 라고 설명해주셨는데, 이 부분이 잘 이해가 안돼서요.list 데이터 전달해주는 위의 메서드에서는 safe=False 로 두셨는데 왜 이렇게 다르게 하는지 잘 모르겠습니다..... ㅠㅠ 구글링으로 찾아봐도 잘 와닿지 않아서 질문 드립니다 ㅜㅜ

안녕하세요 강사님, post list 기능이 정상적으로 작동합니다.그런데 혹시 최신 포스팅을 목록 가장 상단에 위치하게 하고싶은데, 이건 어떤 속성을 건드려야 하나요? (수정된 건 영향을 주지 않고요 !)질문이 너무 많아서 죄송합니다 ㅜㅜ

안녕하세요 강사님, api/view.py 에서 context 변수가 데이터가 전달되는? 딕셔너리 변수인 것은 알겠습니다. 그런데정의를 해주지 않았는데 어떻게 딕셔너리 변수가 되며, object_list 라는 키도 따로 context 변수에 넣어주지 않았는데 어떻게 바로 context['object_list'] 로 qs 변수에 저장할 수 있나요?그리고 object_list 또한 어떻게 Post 모델에서 포스팅 목록을 가져올 수 있는 건지 이해가 안됩니다 ㅠㅠ 이런거는 다큐먼트를 봐야 이해할 수 있을까요? ㅜㅜ

안녕하세요 강사님,6:18 부근에서요, settings.py 에 AUTH_USER_MODEL='account.User' 을 명시해주시는데, Post 모델과 같이 다른 데이터를 받는(?) 모델은 이런 설정을 추가 안해주고, 유저 모델만 이렇게 명시를 해주어야 하는 이유가 있나요?그리고 이렇게 유저 모델 설정을 안해주면 문제가 발생할까요?

안녕하세요 강사님, 말씀해주신대로 버전을 맞추어서 진행해보았더니 (영상에 맞추어 다운그레이드 하였습니다.) 빌드가 성공적으로 되었습니다. 그런데 npm run serve 를 해보니 빈페이지가 나와서요 ㅠㅠ 구글링 해보니 라우터 얘기가 많은데, 이전에 vue 가볍게 따로 공부했을 때 router 설치는 했었지만 이 프로젝트에서는 아직 따로 다루지는 않았는데 이게 관련이 있을 수 있나요?어디서 문제가 생긴지 어떻게 알 수 있을까요? npm run serve 하면 오류가 뜨지는 않습니다.아래는 제 프로젝트 빌드 후 생성된 파일들 입니다.아래는 vue.config.js 코드 입니다.module.exports = { transpileDependencies: [ 'vuetify' ], devServer: { index: 'home.html', proxy: { '^/api': { target: 'http://127.0.0.1:8000', }, '^/admin': { target: 'http://127.0.0.1:8000', } } }, pages: { home: { template: 'public/index.html', entry: 'src/pages/main_home.js', filename: 'home.html', title: 'Home', minify: false, }, my_blog: { template: 'public/index.html', entry: 'src/pages/main_my_blog.js', filename: 'my_blog.html', title: 'My_blog', minify: false, }, post_detail: { template: 'public/index.html', entry: 'src/pages/main_post_detail.js', filename: 'post_detail.html', title: 'Post_detail', minify: false, }, login: { template: 'public/index.html', entry: 'src/pages/main_login.js', filename: 'login.html', title: 'Login', minify: false, }, sign_up: { template: 'public/index.html', entry: 'src/pages/main_sign_up.js', filename: 'sign_up.html', title: 'Sign_up', minify: false, }, }, css: { extract: { ignoreOrder: true }, }, }

섹션 11 vue.config.js 수정 후에 빌드를 하면 아래와 같이 에러가 뜹니다 ㅠㅠ 왜이럴까요.. ㅜㅜㅜㅜ그리고 저는 강사님 수업에서는 안보이는 jsconfig.json 파일이 있는데 이건 지워도 되나요.. ㅜㅜ 너무 어렵네요 C:\VueDjango\frontend>npm run build > frontend@0.1.0 build > vue-cli-service build / Building for production...Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\VueDjango\frontend\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\VueDjango\frontend\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\VueDjango\frontend\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\VueDjango\frontend\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\VueDjango\frontend\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) \ Building for production...C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:114 throw e; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\util\createHash.js:90:53) at NormalModule._initBuildHash (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:401:16) at handleParseError (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:449:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:481:5 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\webpack\lib\NormalModule.js:342:12 at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:186:6 at context.callback (C:\VueDjango\frontend\node_modules\@vue\cli-service\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.callback (C:\VueDjango\frontend\node_modules\thread-loader\dist\index.js:59:5) at done (C:\VueDjango\frontend\node_modules\neo-async\async.js:8069:18) at callback (C:\VueDjango\frontend\node_modules\thread-loader\dist\WorkerPool.js:187:19) at C:\VueDjango\frontend\node_modules\thread-loader\dist\WorkerPool.js:223:13 at done (C:\VueDjango\frontend\node_modules\neo-async\async.js:3667:9) at Socket.onChunk (C:\VueDjango\frontend\node_modules\thread-loader\dist\readBuffer.js:40:9) at Socket.emit (node:events:514:28) at Readable.read (node:internal/streams/readable:539:10) at Socket.read (node:net:750:39) at flow (node:internal/streams/readable:1023:34) at emitReadable_ (node:internal/streams/readable:604:3) at process.processTicksAndRejections (node:internal/process/task_queues:81:21) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.17.1

강사님 안녕하세요, 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는 생각 안하고 진행해도 괜찮을까요?

// 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 프로젝트에서 어떤 역할을 하는 것인지 감이 잘 안옵니다 ㅠㅠ 간략히 설명 부탁드려도 될까요?

안녕하세요 강사님, 열심히 따라서 블로그 제작중인 학생입니다. django 는 강사님 버전에 맞게 설치를 했는데, vue 는 제가 설치했던 버전이 있어서 (5.0.8) 요, 혹시 강사님이 강의에서 설치하신 버전으로 다운그레이드 해야 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.

안녕하세요 강사님.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> 최근에 올려주신 코드를 복붙해봤는데도 잘 안됩니다 ㅜㅜ

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