๊ผฌ๋ฆฌ์ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌด๋ ์ํ ์ถ์ฒ
Django REST API + Vue.js ํ์ฉ ๋ฐ์ํ ์น
์งํ ๊ธฐ๊ฐ : 22.05.19 ~ 22.05.26
ํ์ฅ : ๋ฐ์ข ์ (Back-end)
- ๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ด๋ฆฌ
- ์ถ์ฒ ์๊ณ ๋ฆฌ์ฆ ์ค๊ณ
- REST API
ํ์ : ์ด๋๊ทผ (Front-end)
-
AJAX ํต์
-
Vue ์ํ ๊ด๋ฆฌ
-
CSS ์คํ์ผ๋ง
- ์ํ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ์ถ์ฒ ์๋น์ค ๊ตฌ์ฑ
- ์ํ ์ถ์ฒ ์๊ณ ๋ฆฌ์ฆ ๊ตฌ์ฑ
- ์ปค๋ฎค๋ํฐ ์๋น์ค ๊ตฌ์ฑ
- ๋ค์ํ ์ธ์ด์ ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์ฉ ์ค์ ์๋น์ค ์ค๊ณ
- ์๋น์ค ๊ด๋ฆฌ ๋ฐ ์ ์ง๋ณด์
Tools
- VS code
- Chrome
Back-end
- Django wtih Django REST framework
- SQLite3
Front-end
- Vue.js
- Tailwind CSS
-
django
-
django-rest-framework
-
Vue cli
-
Vuex
-
Vue-router
-
Tailwind CSS
Navbar
HomeView
SignupView
- AccountErrorList
LoginView
- AccountErrorList
LogoutView
MovieView
- SearchForm
- SearchMovieList
- MovieCard
- MovieList
- MovieCard
DetailView
- GenreLabel
CommunityView
- ReviewList
ProfileView
- MyMovieList
- MovieCard
- MyReviewList
- ReviewList
ReviewDetailView
- CommentList
- CommentForm
- CommentItem
ReviewCreateView
- ReviewForm
ReviewEditView
- ReviewForm
NotFound404
ํฌ์คํฐ์ ๋ฐฑ๋๋กญ ์ด๋ฏธ์ง ์ ๋ณด๊ฐ ์๋ ํ๊ตญ์ํ DB ์ ์ฅ
์ถ์ฒ ์๊ณ ๋ฆฌ์ฆ์ ์ด์ฉํ์ฌ ์ ์ ์๊ฒ ๋ง์ถค ์ํ 12๊ฐ๋ฅผ ์ถ์ฒํฉ๋๋ค. ์๋ก๊ณ ์นจ์ ํตํด ๋ค๋ฅธ ์ํ ์ถ์ฒ์ ์์ฒญํ ์๋ ์์ต๋๋ค.
์ถ์ฒ ์ํ ์๋์๋ ๋๋คํ 3๊ฐ์ ์ฅ๋ฅด์์ 24๊ฐ์ ์ํ๋ฅผ ์๊ฐํด์ค๋๋ค.
์ ์ชฝ์ <> ๋ฒํผ์ ํด๋ฆญํ์ฌ ํ ์ฅ์ฉ ๋๊ฒจ๋ณผ ์ ์์ผ๋ฉฐ, ๊ฐ์ด๋ฐ . ์ ํด๋ฆญํ๋ฉด ๋ฐ์ํ์ ์ํด ๋ํ๋๋ ์นด๋์ ๊ฐ์๋งํผ ํ ํ์ด์ง์ฉ ๋๊ธธ ์ ์์ต๋๋ค.
๊ฐ ์นด๋ ์ด๋ฏธ์ง๋ ํด๋น ์ํ์ ๋ํ ์ผ ํ์ด์ง๋ก ์ด๋ํ ์ ์๊ฒ ํด์ค๋๋ค.
ํํธ๋ฅผ ๋๋ฅด๋ฉด ๋ด ์ํ์ ๋ฑ๋กํ ์ ์์ต๋๋ค.
์ํ์ ๋ํ ํ์ ์ 0์ ๋ถํฐ 5์ ๊น์ง 0.5์ ๋จ์๋ก ์ ๋ ฅํ ์ ์๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด star-rating์ ํ์ฉํ์ต๋๋ค.
์์ฑ๋ ๋ฆฌ๋ทฐ์์ ํฌ์คํฐ๋ฅผ ํด๋ฆญ ์ ํด๋น ์ํ ์์ธ ํ์ด์ง๋ก ์ด๋ํฉ๋๋ค.
์์ฑํ ๋ฆฌ๋ทฐ๋ ์์ฑ์๋ง ์์ /์ญ์ ํ ์ ์์ต๋๋ค. ์์ ์ ๊ธฐ์กด๊ฐ์ ๊ฐ์ ธ์ ์ ๋ ฅ์ฐฝ์ ๋ฃ์ด์ค๋๋ค.
์ญ์ ์์๋ ๊ฒฝ๊ณ ๋ฉ์์ง๋ฅผ ๋์ ํ ๋ฒ ๋ ํ์ธํฉ๋๋ค.
๊ฐ ์ํ ์์ธ์ ๋ณด์๋ ํด๋น ์ํ์ ์ ์ ๋ค์ ํ์ ์ ํฌํจํ๊ณ ์์ต๋๋ค.
์ปค๋ฎค๋ํฐ ํ์ด์ง์์ ์์ฑ๋ ๋ฆฌ๋ทฐ ๋ชฉ๋ก์ ๋ณผ ์ ์์ต๋๋ค.
๋ฆฌ๋ทฐ ๋ํ ์ผ ํ์ด์ง์์๋ ๋๊ธ์ ๋ฌ ์ ์์ผ๋ฉฐ, ๋๊ธ ์์ฑ์๋ง ์์ /์ญ์ ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
์์ ์์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ํด๋น ์์น์์ ์์ ํ ์ ์์ต๋๋ค.
๋ฆฌ๋ทฐ์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ญ์ ์์๋ ํ์ธ ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
๋ฆฌ๋ทฐ ์์ธํ์ด์ง์์ ๋ฆฌ๋ทฐ์ ๋๊ธ์ ์์ฑ์ผ์&์ต์ข ์์ ์ผ์๊ฐ ํ๊ธฐ๋ฉ๋๋ค.
์ํ ์ถ์ฒ ํ์ด์ง์์ ์ฐ์ธก ์๋จ์ ์ ๋ ฅ์ฐฝ์ ์ด์ฉํ์ฌ DB์ ์ ์ฅ๋ ์ํ๋ฅผ ๊ฒ์ํ ์ ์์ต๋๋ค.
์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ๊ฒ์์ด๋ฅผ ์ญ์ ํ ์ ๊ฒ์ ์ ์ ๊ธฐ์กด ์ํ๋ค์ ๋ณด์ฌ์ค๋๋ค.
์ถ์ฒ ํ์ด์ง์์ ํํธ๋ฅผ ๋๋ฌ ๋ด ์ํ์ ์ถ๊ฐํ ๊ฒฝ์ฐ ํ๋กํ์์ ํด๋น ์ํ๋ค์ ์ดํด๋ณผ ์ ์์ต๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ๋ด๊ฐ ์์ฑํ ๋ฆฌ๋ทฐ ๋ชฉ๋ก๋ ๋ณผ ์ ์์ต๋๋ค.
์นด๋๋ฅผ ํด๋ฆญํ๋ฉด ์ํ ์์ธํ์ด์ง, ๋ฆฌ๋ทฐ๋ฅผ ํด๋ฆญํ๋ฉด ๋ฆฌ๋ทฐ ์์ธ ํ์ด์ง๋ก ์ด๋ํฉ๋๋ค.
ํ์๊ฐ์ ๋๋ ๋ก๊ทธ์ธ ์ ์๋ชป๋ ์ ๋ณด ์์ฒญ ์ ํด๋น ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ถ๋ ฅํ๊ฒ ํ์ต๋๋ค.
๋ก๊ทธ์ธ ๋์ง ์์ ์ฌ์ฉ์๊ฐ ํ์๋ง ์ ๊ทผ ๊ฐ๋ฅํ ํ์ด์ง ์ ๊ทผ ์ ์ ์์ ์ธ ์ ๊ทผ์ ๊ถํ๋ ๋ฉ์์ง๋ฅผ ๋์ ์ต๋๋ค.
์ง์ ํ์ง ์์(๊ฐ๋ฐ์๊ฐ ์๋ํ์ง ์์) ์ฃผ์๋ก ์ ๊ทผ ์๋ ์ ์๋ฆผํ์ด์ง๋ฅผ ๋ฐํํ์์ต๋๋ค.
- ํจ๊ปํ๋ ํ์๊ณผ ํ์ ์ด๋ฃจ๊ณ ์ญํ ์ ๋๋ ์ค๋กฏ์ด ํ๋ก ํธ ์๋ ๊ฐ๋ฐ์๋ก์ ์์ ์ ์งํํ๋ ์ข์ ๊ฒฝํ์ ํ์ต๋๋ค.
- ๋ณธ๊ฒฉ์ ์ธ ๊ฐ๋ฐ์ ์์ ๊ธฐํ๋จ๊ณ์์ REST API ์ค๊ณ๋ฅผ ์ ํด ๋ ๋๋ถ์ ํ์๊ณผ ์๋ก ์ผ๊ตด ๋ถํ๋ ์ผ ์์ด ๋ฐ์ดํฐ๋ฅผ ์ ์ฃผ๊ณ ๋ฐ์ ์ ์์์ต๋๋ค. ์ด๋ค ์์ฒญ์ ๋ณด๋ด๊ณ ์ด๋ค ์๋ต์ ๋ฐ์์ง, ๋ฐ์ดํฐ๋ฒ ์ด์ค ๊ด๋ฆฌ๋ ์ด๋ป๊ฒ ํ ์ง, ์ํ ๊ด๋ฆฌ๋ ์ด๋ป๊ฒ ํ ์ง ๋ฑ๊ณผ ๊ฐ์ ๋ด์ฉ๋ค์ ํ์๊ณผ ์ํตํ๋ฉด์ ํ๋ก์ ํธ๋ฅผ ์ค๊ณํ๋ฉฐ ์์ฌ์ํต์ด ๊ต์ฅํ ์ค์ํ๋ค๋ ๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค.
- ๋ชจ๋ฅด๋ ๊ฒ์ด ์๊ฒจ๋ ์ค์ค๋ก ์ฐพ์๋ณด๋ฉด์ ํด๊ฒฐํ๋ ค ๋ ธ๋ ฅํ์์ต๋๋ค. ์ด๋ฐ ๊ท๋ชจ์ ํ๋ก์ ํธ๋ ์ฒ์์ด๋ผ ์งํํ๋ฉด์ ๋ง์ ์ด๋ ค์์ ๊ฒช์์ง๋ง ๊ทธ๊ฒ์ ํด๊ฒฐํ๋ ๊ณผ์ ์์ ์ฑ์ฅํ๋ ๊ฒ์ ๋๊ผ์ต๋๋ค.
- ์ผ์ฃผ์ผ์ด๋ผ๋ ๊ธฐ๊ฐ๋์ ์ ๊ฐ ์ผ๋งํผ์ ์์ ์ ์ํํ ์ ์๋์ง ์ ํ ๋ชจ๋ฅด๊ณ ์์๊ธฐ๋๋ฌธ์ ๋ค์ํ ๊ธฐ๋ฅ๋ค์ ๋ฃ์ด๋ณด์ํ๋ฉฐ ๋ง์ ์์ฌ์ ๋ถ๋ ธ๋ ๊ฒ์ด ์์ฝ์ต๋๋ค. ์ด๋ฒ์ tailwindcss๋ฅผ ์ด์ฉํ์ฌ css ์์ ์ ํ๋๋ฐ, ์ต์ํ์ง ์์ ํ๋ ์ ์ํฌ๋ผ ์ ์ํ๋๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ ธ์ต๋๋ค. ๊ทธ๋์ ๋ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ๋ค๋ก ๋ฏธ๋ฃจ๊ณ ํ๋ก์ ํธ์ ์ค์ฌ์ด ๋๋ ๋ถ๋ถ๋ค์ ์ ๋์ํ๋๋ก ๋ ธ๋ ฅํ์ต๋๋ค.
- ์ฌ์ฉ์ ์ ์ฅ์์ ๋์ ์ ์๊ฐํด๋ณด๊ณ , ๊ทธ๊ฒ์ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ์ ๊ตฌ์กฐ๋ฅผ ์ค๊ณํ๋ฉฐ ๋๋ฆ ์ฆ๊ฑฐ์์ ๋๊ผ์ต๋๋ค. ํ์ง๋ง ์ญ์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค๋ณด๋ ์๊ฐ์ง ๋ชปํ ๋ถ๋ถ์์ ๋์์ด ์ ์๋๊ธฐ๋ ํ๋ฉฐ ์ ๋ฅผ ๋จน์๊ณ , ๋์ค์๋ ํด๊ฒฐํ๊ธฐ์ ๊ธ๊ธํด์ ์คํ์ผ ๊ฐ์ด๋์ ๋ง๊ฒ ์ฝ๋๋ฅผ ์์ฑํ์ง ๋ชปํ ๊ฒฝ์ฐ๋ ๋ฐ์ํ์ต๋๋ค. ์์ฌ์ ๋ถ๋ฆฌ์ง ๋ง๊ณ ์นจ์ฐฉํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ๊ณ ๋ค์ ํ์ด์ง ๋ณ๋ก ์ด๋ค ๋ฐ์ดํฐ๋ค์ด ํ์ํ์ง, ๊ทธ๊ฒ์ ์ด๋ป๊ฒ ๊ฐ์ ธ์ฌ ๊ฒ์ธ์ง ๋ฑ์ ๊ณ ๋ฏผํ์๊ณ , ์ดํ์๋ ํฐ ์ด๋ ค์ ์์ด ๋ฐ์ดํฐ ์ ๋ฌ์ ํด๋ผ ์ ์์์ต๋๋ค.
- UX ๊ฐ์ ์ ์ํด ๋ ์๊ฐ์ ์ฐ๊ณ ์ถ์ง๋ง ํ๋ก์ ํธ ๊ธฐ๊ฐ์ด ์งง์ ์๊ฐํ๋ ๊ธฐ๋ฅ๋ค์ ์ ๋ถ ๋ง๋ฌด๋ฆฌํ์ง ๋ชปํด ์์ฌ์์ด ๋ง์ด ๋จ์ต๋๋ค. ์ ์๊ฐ๋ณด๋ค ์ปธ๋ ๊ท๋ชจ์ ํ๋ก์ ํธ์๊ณ , ์ฃผ์ด์ง ์๊ฐ๋์ ์ ๊ฐ ์๊ฐํ ๋ชจ๋ ๊ธฐ๋ฅ๋ค์ ๋ด๊ธฐ์๋ ์ ๋ฅ๋ ฅ์ด ๋ถ์กฑํ๋ค๋ ์๊ฐ์ ๋ชปํด ๋ง์ด ํ๋ค์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๋๋ ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ๊ณ๊ธฐ๋ก ์ฌ์ฉ์ ์ ์ฅ์์ ์๊ฐํด๋ณด๋ ๋ฒ๋ ๋ฐฐ์ ๊ณ , ์ด๋ค ์ ๋ค์ ๊ฐ์ ํด๋๊ฐ์ผ ๋ ์ข์ ์๋น์ค๋ฅผ ์ ๊ณตํ ์ ์์ ์ง ์กฐ๊ธ์ด๋๋ง ์ ์ ์์๋ค๊ณ ์๊ฐํฉ๋๋ค.