묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
formdata 와 json responser
안녕하세요 강사님, 그러면프론트엔드 서버에서 백엔드 서버로 데이터를 전송할 때는 formdata 를 이용해서 보내주고,백엔드 서버에서 프론트엔드 서버로 json 응답을 반환하는 건가요? ㅠㅠ 개념이 조금 어렵네요......질문이 너무 많아서 죄송합니다 ㅜㅜ
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
axios url 질문이 있습니다
안녕하세요 강사님, 현재 태그를 누르면 포스트 목록 페이지 이동까지 구현을 성공한 상태입니다. (섹션 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 뒤의 태그를 알아서 인식하고 해당 태그에 대한 데이터를 보내주는 것인지 궁금합니다. 감사합니다 :)
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
14강 에러문의 드립니다!
<template v-for="(_, name) in $slots" :key="name"> 여기 부분에서 _ 이 부분에 배열 요소 구조 파괴 패턴이 필요합니다.ts(1181), 문제 보기 (<Alt>+F8) 빠른 수정을 사용할 수 없음 이 에러가 나거든요??근데 또 실행은 잘 되는데, 빨간색 줄이 여간 신경이 쓰여서...ㅎㅎㅎ; 문의드립니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios에 값을 보낼때 { ...data } 하는 이유
axios의 post, put에 data를 보낼 때{ ...data }로 보내는 이유를 알려주실 수 있을까요?v-model의 값을 바로 보내면 어떤 불이익이 있을 수 있나요?
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
라우트(view파일.vue) 관리
사이트를 개발하다보면화면수가 당연히 많아 질텐데요그에따라 등록되는 컴포넌트 (router 개수)가 늘어(등록)나면그만큼 index.js 파일에는import homewiew1 from /path /homewiew1 .vueimport abcwiew2 from /path/homewiew2 .vueimport defwiew 3from /path/homewiew3 .vueimport zzzwiew f4rom /path/homewiew4.... 계속.... (화면수가 늘어나면 아주 많이 생기면 ㅎㅎㅎ그때마다파일 라인수가 몇백줄..아니 몇천줄....몇만줄이 퇼텐테..( 설마 몇만줄은 ㅎㅎㅎ)ex: 라우터(component) 100개 .... 늘어나는 component를 특별히 관리하는 방법이있는지요? - (..따로 파일이나 폴더로 분리 한다던지...index.js(main.js)라는 파일은 원래 라우터(component)를 등록하는 파일인지. ....ㅎㅎ ) - index.js 라인수가 당연히 증가const routes = [{path: '/'compoennt: hellovew;},path: '/'compoennt: hellovew;},... 등록 늘어나는라우터(화면 componet) 등록/관리는 방법을 여쭤 봅니다. 이상하네.... 전에 질문드렸는데...ㅠㅠ;; 삭제가 ... 없어 졌습니다.설명이 부족하면 다시 작성 하겠습니다. (죄송합니다.)짱^^ 코딩님... 설명 좀...ㅠㅠ;
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
modalTitle.value = title; 에서 title은 어디서 받아오는거죠?
이렇게 작성하고<div class="col-3 text-muted">제목 :</div> <div class="col-9">{{ modalTitle }}</div> 이렇게 작성했는데요,const modalTitle = ref(''); const openModal = ({ title }) => { show.value = true; modalTitle.value = title; };(content, createdAt은 생략했어요)openModal에서 받아오는 title이어디서 나오는 건지 모르겠어요.정상적으로 작동은 되는데 저 부분이 이해가 안돼서요..title 같은 data들은 fetchPosts() 에서 받아올 때 posts에 넣었으니modalTitle.value = posts.value.title 이어야 할 것 같은데 왜 이렇게 작성하면 오류가 나고 title만 작성해야 title 데이터가 잘 들어오는건가요..??
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
게시판 UI 만들기
UI 화면 만들기 편을 보면서 궁금한 점이 생겼습니다. 다름이 아니오라..궁금한 점:route 로 구현 (setting)하면서 화면을 만들고 이동을하고 있는데요... (당근?)그러면 ... 보여줄 화면이 많을때... 아주 많을때는 ... 어떻게 처리를 하는지 ( 소스 관리)지요...... 파일로 처리를 하나? ? (제 생각에는 ..다른 방법이...궁금)URL에 따라 뿜빠이(^^)를 하는지.. 열강중에 궁금한 점이 .... ??? 화면(본수)이 정말 많을때 ..어떻게 처리를 하는지.... index.js import ... 화면1.vue;import ... 화면2vue;import ... 화면3.vue;import ... 화면4.vue;import ... 화면5.vue;import ... 화면6.vue;,,import ... 화면N.vue;화면(100개 (이상? ㅋㅋㅋ) ... 이럴때 말이줘... 화면 100개: 화면당 ***.vue 파일 100개?... (이건 아닌듯..)(암튼..화면 겁내 많음..... ) URL_listView.vue 같이URL 정보를 다른 파일을 따로 만들어 처리를 해야 하는지?(아무래도 ...이방법이...흐음...)...짱~ 코딩님... 질문 마치겠습니다.
-
미해결PWA 시작하기 - 웹 기술로 앱을 만들자
깃 레포지토리 권한 요청드립니다.
인프런 아이디 : akakss225@hanwha.com인프런 이메일 : akakss225@hanwha.com깃헙 아이디 : akakss225@naver.com깃헙 Username : Alarm Song
-
미해결Vue 3 시작하기
후속강의는 언제 나올 예정인가요?
궁금합니다!
-
미해결Vuetify Admin Template 만들기 - 기본편 (Based Vue2)
궁금합니다 … ㅠ
저 현재 뷰 기반에 vuetify 를 사용해 v-data-~ 를 사용해 그리드를 그리고있거든요 . 그리드 안에 헤더는 th 로 해서 너비지정하여 그리고있는데 이게 안에데이터에따라 자꾸 너비가 고정되지 않고 변해네여 ㅠ 혹시해결방법이있을까요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
state 와 v-model에 대해서 질문이 있습니다.
강의 내용 TodoInput.vue 파일 중<input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">부분에 v-model="newTodoItem" 을 사용하였습니다.이는 data 속성에 사용되었는데<input v-model="newTodoItem">computed:{ ...mapState(['newTodoItem'])}다음과 같은 느낌으로 v-model은 왜 state를 사용하지 않는 이유가 따로 있는지 궁금합니다!개인적으로 실험해봤을 때는 readonly로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
영상에 나오는 사이트가 궁금합니다.
안녕하세요수업 잘 보고 있습니다.수업 중간중간에 예시 소스 올려져있는 사이트가 있는데 정보를 찾을수가 없어서 문의글 남겨드립니다.감사합니다.
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
질문
안녕하세요 강사님, 강의 보면서 블로그를 만들어보고 있는데, 혹시 이렇게 백엔드와 프론트엔드 서버를 분리 해서 개발해도, 블로그 친구들이나 팔로워 팔로잉 기능들은 django로 구현이 가능한걸까요?
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
글쓰기 생성날짜 date.now() 오류
게시글 목록 보시면 시간정보가 화면과 같습니다.(당연히 db.json 에도 똑같 저장 되고요)type 문제인지 의심스럽고... 튼. 모르겠네요 ㅡㅡ;;; 코딩님.. { "title": "555", "content": "444", "createdAt": 1698000915492, "id": 13 }, { "title": "jjj", "content": "jj", "createdAt": 1698000930032, "id": 14 }, { "title": "글쓰기", "content": "글쓰기 내용", "createdAt": 1698032034496, "id": 15 } -- db.json --
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
상세질문: Date.now() : not working
<template> <div> <h2>게시글 등록</h2> <hr class="my-4" /> <form @submit.prevent="save"> <div class="mb-3"> <label for="title" class="form-label">제목</label> <input v-model="form.title" type="text" class="form-control" id="title" /> </div> <div class="mb-3"> <label for="content" class="form-label">내용</label> <textarea v-model="form.content" class="form-control" id="content" rows="3" ></textarea> </div> <div class="pt-4"> <buttont type="button" class="btn btn-outline-dark me-2" @click="goListPage" >목록</buttont > <button class="btn btn-primary">저장</button> </div> </form> </div> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { createPost } from '@/api/posts'; const router = useRouter(); const form = ref({ title: null, content: null, }); const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } }; const goListPage = () => router.push({ name: 'PostList' }); </script> <style lang="scss" scoped></style>index.js 에서는 { path: '/posts', name: 'PostList', component: PostListView, },.. 로 정의 했고요 api/posts.js export function createPost(data) { return axios.post('http://localhost:5000/posts', data); }※ PostCreateView.vue 에서 save 함수는 const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } };위 전체 소스 중 위 부분입니다. 크게 복잡한 내용이 아니라고 생각되고 있는데 ..코딩님 위에 내용 보시고 혹시 더 확인하고 싶은 부분이 있으시면 말씀해 주세요.확인 하고 다시 질문 드리겠습니다.번거롭게 해드려 죄송하네요. 감사합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Date.now() is Not working!!
글쓰기 작성 중const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } }; Date.now() 함수가 날짜 값이 입력이 되질 않습니다.타입? 을 생각해야 하나...이유가 뭔질 모르겠네요.질문 드립니다. 흐음... 이번엔.... input v-model="params.title_like" title_like 가 동작을 안하네요...ㅎㅎㅎjson 자료 역시 찾아 보고... 흐음... 질문2 드립니다.
-
미해결vue.js 실전 프로젝트(트위터 클론)
쪽지에서 메세지를 쓰면 상대방에게 즉시 나타나게 하려면 어떻게 해야 할까요?
쪽지에서 메세지를 쓰면 쪽지를 받는 상대방은 이름을 선택해 주어야 새로운 메시지가 나타나네요.메시지를 쓰면 상대방에게 즉시 나타나게 하려면 어떻게 해야 할까요?
-
미해결Vue.js - 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 }} 최종수정 : {{ 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> 계속 다시 코드를 짜보았는데도 어디서 오류가 나는 것인지 모르겠어서요 ㅠㅠ.....감사합니다 .. ㅜㅜ
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
Post model
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()
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
VSCode jsconfig.json
안녕하세요 강의 잘 듣고 있습니다.아주 융통성 없이 따라해보는 습관이 있는지 Vigte,EsLint, pritier 설치 강의를 보면서그대로 따라해보고 있습니다.질문내은 [강의 화면] 3분 화면 쯤 jsonconfig.json만드든 내용중 '교안에 있는 이러한 내용을 복사해서 ..' 라는 말씀을 하시면서화면이 나오는데 영상에 나오는 VSCode jsconfig.json 디렉토리에 jsonconfig.json 파일이 있으면...blsh blsh...이 부분이 보이질 않습니다. ※ https://code.visualstudio.com/docs/languages/jsconfig이리로 가서 복사를 하라는 뜻인지...교안이 구버전(?)인지 코딩님... 설명 부탁드려요