Model들을 Join 시키는건 매우 필수적입니다.
다른 데이터와 연관 관계가 하나도 없는 모델만 만들면 재미가 없기 때문입니다.
1:N 만큼 쉬운 Join 방법은 없습니다.
간단하게 N 에 해당하는 모델에 1의 id를 Foreign Key로 넣어주면 되기 때문에 그냥 model 의 field에 ForeignKey를 넣어주면 끝입니다.
하나의 글에는 여러개의 댓글이 달릴 수 있기 때문에 1:N에서 Comment가 N에 해당합니다.
N에 해당하는 Comment에 ForeignKey를 설정해줍니다.
그리고 다시 한 번 마이그레이션을 해주 seed를 이용하여 데이터를 채워주도록 합니다.
다시 한 번 데이터를 확인해보면 다음가 같이 나오는 걸 볼 수 있습니다.
뭐가 변한거냐구요? 네. 변한게 없는게 맞습니다.
왜냐면 저희는 Comment안에만 ForeignKey로 Article과 연동을 시켜주었기 때문입니다.
그럼 Article에서 Comment를 어떻게 볼 수 있느냐!!
fields에 없으면 추가를 시켜주면 됩니다.
근데 나는 이렇게 보기가 싫다, 해당하는 comment의 정보를 보고싶다! 할 수 있습니다.
그럴려면 그것도 Json 타입으로 만들어야 한다는 생각이 들었다면 굿
serializer를 또 만들어야겠구나 생각하였다면 베스트입니다.
바로 CommentSerializer를 사용해서 comment를 serialize해주고, 그 값으로 comment_set을 다시 가져옵니다.
이제 정말 원하던 형태의 JSON이 나오기 시작했습니다.
다음번엔, 이렇게 잘 만들어진 data들을 Vue에서 가져와 사용해볼 수 있도록 해보겠습니다.
사실 요샌 Vue가 너무 재미있기 때문에 Django일기 얼추 다 쓴거 같아서 얼른 Vue로 다시 넘어가고 싶다라는 생각이 컸습니다.
Vue에서 django의 데이터들을 가져와서 게시판도 만들어보고 오늘 배웠던 Vue router도 얼른 써보도록 해야겠습니다.
그럼 Vue에서 저 URL로 요청을 하면 바로 데이터를 가져올 수 있는거 아닐까요? 당장 해보도록 합시다
기존의 vscode를 냅두고 새로운 vscode를 열었습니다.
이제 여기서 vue를 만들어 빨리 저 JSON파일들을 사용해보도록 합시다.
자 vue를 가지고 왔습니다.
article과 comment를 가져와볼건데요 article은 한 곳이 아닌 여러 컴포넌트에서 쓸 것이 뻔하기 때문에 가져올 때 미리 state에 담아주도록 하겠습니다.
vuex 의 actions에서 axios를 통해 데이터를 요청하고
App.vue 컴포넌트가 create될 때, 바로 데이터를 가져올 수 있도록 하겠습니다.
vuex의 actions에서 axios로 데이터를 가져오고
App.vue에서 created로 함수를 실행해줍니다.
vuex의 actions 함수를 사용하는 방법은 ? this.$store.dispatch("함수이름") !!
이렇게 하면 쨘!!
제대로 URL에 접근은 하였지만 CORS 에러가 뜨고 맙니다.
다음 번에는 CORS 에러를 해결하고 vue에서 정말 django의 데이터들을 사용해보도록 하겠습니다