2024.05.16 ~ 2024.05.23
- Vue 3.4.27
- Pinia 2.1.7
- Django 4.2.13
- Sqlite3 3.21.0
- HTML/CSS/JavaScript
๐ฆsrc
โฃ ๐assets
โ โฃ ๐arrow-left-circle.svg
โ โฃ ๐box-arrow-in-right.svg
โ โฃ ๐caret-down-square.svg
โ โฃ ๐coin.svg
โ โฃ ๐disneyplus.svg
โ โฃ ๐main-img.png
โ โฃ ๐movie-repeat.svg
โ โฃ ๐netflix.svg
โ โฃ ๐person-add.svg
โ โฃ ๐recommend-rewrite.svg
โ โ ๐watcha.svg
โฃ ๐components
โ โฃ ๐common
โ โ โฃ ๐MovieNavbar.vue
โ โ โ ๐OTTNavbar.vue
โ โฃ ๐movies
โ โ โฃ ๐MovieCard.vue
โ โ โฃ ๐MovieDetailInfo.vue
โ โ โฃ ๐MovieRecommend.vue
โ โ โ ๐Recommend.vue
โ โ ๐otts
โ โ โฃ ๐MyPartyCard.vue
โ โ โฃ ๐MyPartyCreated.vue
โ โ โฃ ๐MyPartyJoined.vue
โ โ โ ๐PartyCard.vue
โฃ ๐router
โ โ ๐index.js
โฃ ๐stores
โ โ ๐movie.js
โฃ ๐views
โ โฃ ๐AIRecommendView.vue
โ โฃ ๐HomeView.vue
โ โฃ ๐LoginView.vue
โ โฃ ๐MovieDetailView.vue
โ โฃ ๐MyPageView.vue
โ โฃ ๐OTTHomeView.vue
โ โฃ ๐PartyCreateView.vue
โ โฃ ๐PartyJoinView.vue
โ โ ๐SignupView.vue
โฃ ๐App.vue
โ ๐main.js
์ด๋ฆ | ์ญํ |
---|---|
FE : ๊น๋ฏผ์ฃผ |
|
BE : ๊น์ ๋ฏผ |
|
- ์ค๋ฌธ์ ํตํด ์ ํธํ๋ ์ฅ๋ฅด, ๊ฐ๋ , ๋ฐฐ์ฐ ์ ๋ณด๋ฅผ ํ์ ํ๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ์ํ ์ถ์ฒ
- ์ถ์ฒ๋ ์ํ๋ฅผ ์์ฒญํ ์ ์๋ OTT ํ๋ซํผ์ ๋ํ ์ ๋ณด ์ ๊ณต
- OTT ๊ณ์ ๊ณต์ ๋ฅผ ํตํด ์ถ์ฒ ๋ฐ์ ์ํ๋ฅผ ๋ณด๋ค ์ ๋ ดํ๊ฒ ๋ณผ ์ ์๋ ๊ธฐํ ์ ๊ณต
[Account]
- ํ ํฐ ๊ธฐ๋ฐ ์ธ์ฆ ์์คํ
- Token ๋ชจ๋ธ ์ปค์คํ ์ ํตํ ์ ํจ ๊ธฐ๊ฐ ์ค์
- https ๋ฐ refresh token ์ ์ฉ์ ํตํ ๋ณด์ ๊ฐํ
[OTT]
- OTT ๊ณ์ ๊ณต์ ์๋น์ค CRUD
[Recommendation]
- ์ทจํฅ ์ค๋ฌธ ๊ธฐ๋ฐ ์ํ ์ถ์ฒ ๊ธฐ๋ฅ
- ๊ธฐ ์ถ์ฒ ์ํ ๋ชฉ๋ก ๋ฐํ ์ค๋ณต ์ถ์ฒ ๋ฐฉ์ง
- ๋์ ์ฟผ๋ฆฌ ์์ฑ์ ํตํ ์ํ ํํฐ๋ง ์ฝ๋ ๋จ์ํ
- Open AI API, TMDB API ๋ฅผ ํ์ฉํ ์ํ ์ถ์ฒ ๋ฐ DB ํ์ฅ
[Development]
- ์ํฉ์ ๋ง๋ status code ๋ฐ response data ์๋ต
- ์์ธ ์ฒ๋ฆฌ๋ฅผ ํตํด ์์์น ๋ชปํ ์ํฉ์๋ ์๋น์ค ์ด์ฉ์ ๋ฌธ์ ๊ฐ ์๋๋ก ๊ตฌํ
- Pinia ๋ฐ Local Storage ๋ฅผ ํ์ฉํ ์ํ ๊ด๋ฆฌ
- SPA ๊ตฌํ ๋ฐ ํ์ฅ์ฑ์ ์ปดํฌ๋ํธ ๊ตฌ์กฐํ
- ์ค๋ณต ๋ก์ง ํจ์ํ๋ฅผ ํตํ ์ ์ง๋ณด์ ํธ์์ฑ ์ฆ๋
[Search]
- ๋ ๋ฒค์ํ์ธ ๊ฑฐ๋ฆฌ ๊ธฐ๋ฐ DB ๊ฒ์
- DB์ ์กด์ฌํ๋ ๊ฐ ๋ฐํ์ผ๋ก ์ ์ ์ ๋ ฅ๊ฐ ์๋์์ฑ
- ์ทจํฅ ๊ธฐ๋ฐ ์ํ ์ถ์ฒ ์๊ณ ๋ฆฌ์ฆ์
ํํฐ๋ง
์ ๊ธฐ๋ฐํฉ๋๋ค. - ์ ์ ๊ฐ ์ ๋ ฅํ '์ต๊ทผ ์ฌ๋ฏธ์๊ฒ ๋ณธ ์ํ'๋ก๋ถํฐ '์ฅ๋ฅด, ๊ฐ๋ , ๋ฐฐ์ฐ' ์ ๋ณด๋ฅผ ์ถ์ถํ๊ณ ์ถ๊ฐ ์ ํ ์ ๋ ฅ ์ฌํญ์ด ์๋ ๊ฒฝ์ฐ ์ด๋ฅผ ํฌํจ์ํต๋๋ค.
- ์ถ์ถํ ์ ๋ณด์ DB ์ ์ ์ฅ๋ ์ ๋ณด๋ฅผ ๋น๊ตํด
๋ ๋ฒค์ํ์ธ ๊ฑฐ๋ฆฌ
๊ฐ ๊ฐ์ฅ ์งง์ ๋์์ด ์ ์ ๊ฐ ์ ๋ ฅํ ์ ๋ณด์ ๋์์ด๋ผ๊ณ ํ๋จํฉ๋๋ค. - ๊ฒฐ๊ณผ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก (์ฅ๋ฅด, ๊ฐ๋ , ๋ฐฐ์ฐ) => (์ฅ๋ฅด, ๊ฐ๋ ) => (์ฅ๋ฅด, ๋ฐฐ์ฐ) => (์ฅ๋ฅด) ์์ผ๋ก ์กฐ๊ฑด์ ๋ง์กฑํ๋ ์ํ๋ฅผ ์กฐํํฉ๋๋ค.
- ์กฐํ ๊ฒฐ๊ณผ๊ฐ 5๊ฐ๊ฐ ๋๋ ์๊ฐ ์ถ๊ฐ ํ์์ ํ์ง ์๊ณ ์ถ์ฒ ์ํ๋ฅผ ๋ฐํํฉ๋๋ค.
- ์ด๋ฏธ ์ถ์ฒ ๋ฐ์ ์ํ๊ฐ ์๋ ๊ฒฝ์ฐ ํด๋น ์ํ๋ ์ ์ธํ๊ณ ์กฐํํ์ฌ ์ค๋ณต ์ถ์ฒ์ ๋ฐฉ์งํฉ๋๋ค.
๋ ๋น๊ต๊ตฐ์ ์ฝ์
, ์ญ์ , ๊ต์ฒด ์ฐ์ฐ์ ๋ํ ๋น์ฉ์ ๊ณ์ฐํ์ฌ ์ฐ์ฐ ๋น์ฉ์ด ๋์ ์๋ก ๋ค๋ฅด๋ค๊ณ ํ๋จํ๋ ๋ฐฉ๋ฒ
์ผ๋ฐ์ ์ผ๋ก ์ํ ์ ๋ชฉ, ์ ํธํ๋ ๊ฐ๋
, ๋ฐฐ์ฐ ๋ฑ์ ์ ๋ณด๋ ์
๋ ฅ ์ DB ์ ์ ์ฅ๋ ๋ฌธ์์ด๊ณผ ์์ฃผ ๊ทผ์ํ ์ค์ฐจ๊ฐ ์กด์ฌํ ๊ฐ๋ฅ์ฑ์ด ๋์ผ๋ฏ๋ก ๋ ๋ฒค์ํ์ธ ๊ฑฐ๋ฆฌ๋ฅผ ์ด์ฉํ๋ฉด ์ฌ๋ฐ๋ฅธ ์กฐํ๊ฐ ๊ฐ๋ฅํ ๊ฒ์ด๋ผ ์๊ฐํ์ฌ ์ ์ฉ
Open AI API
๋ฅผ ํ์ฉํ ์ํ ์ถ์ฒ- ์ ์ ๊ฐ ์ ๋ ฅํ ์ฟผ๋ฆฌ์ ์์ฒด ์ ์ํ ํ๋กฌํํธ๋ฅผ ์ ์ฉํด ์ํ ์ ๋ชฉ์ ๋ฆฌ์คํธ ํํ๋ก ๋ฐ๊ณ , TMDB API ๋ฅผ ์ด์ฉํด ์ํ์ ID ๋ฐ ์์ธ ์ ๋ณด๋ฅผ ์กฐํํฉ๋๋ค.
- ํ์ฌ ์์ฒด DB ์ ์ ์ฅ๋์ด ์์ง ์์ ์ํ์ธ ๊ฒฝ์ฐ DB ์ ์ ์ฅ ํ ๋ฐํํ๊ณ , ์ ์ฅ๋์ด ์๋ ๊ฒฝ์ฐ DB ์์ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ด ๋ฐํํฉ๋๋ค.
- ์ด๋ฅผ ํตํด AI ๊ธฐ๋ฐ ์ถ์ฒ์ ๋ฌผ๋ก ์๋น์ค ์ด์์ ์ง์ํ ์๋ก ์์ฒด DB ๋ฅผ ํ์ฅํ ์ ์์ต๋๋ค.
git clone [GITHUB_URL]
# django ํ๋ก์ ํธ(backend) ๋ก ์ด๋ ํ
pip install -r requirements.txt
// vue ํ๋ก์ ํธ(front/movie-recommend) ๋ก ์ด๋ ํ
npm install
django ํ๋ก์ ํธ(backend) ๋ฐ๋ก ์๋์ .env ํ์ผ์ ์์ฑํ๊ณ ์๋์ ๊ฐ์ด ์์ฑํฉ๋๋ค.
OPEN_AI_API_KEY='your_open_ai_api_key'
TMDB_API_TOKEN='your_tmdb_api_token'
# django ํ๋ก์ ํธ(backend) ๋ก ์ด๋ ํ
python manage.py makemigrations
python manage.py migrate
python manage.py loaddata data.json
# django ํ๋ก์ ํธ(backend) ๋ก ์ด๋ ํ
python manage.py runserver
// vue ํ๋ก์ ํธ(front/movie-recommend) ๋ก ์ด๋ ํ
npm run dev
ํ๋ก ํธ์๋์ ๋ฐฑ์๋์ ํต์ ์ ํตํด ๋ฐ์ดํฐ๋ฅผ ์ํ๋ ํํ๋ก ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ๋ฒ์ ์ดํดํ ์ ์์์ต๋๋ค. ํนํ API ๋ช
์ธ์๋ฅผ ํ์ฉํ์ฌ ์์ฒญ๊ณผ ์๋ต์ ํ์ํ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ์๋ก ์ํตํ๊ณ ์๋ค๋ ๊ฒ์ ๋๊ผ์ต๋๋ค.
๋ฐฑ์๋ ์ธก์์ ๋ณด๋ด์ฃผ๋ ์ํ์ฝ๋๋ฅผ ๊ทธ์ ๋์์ด๋ ์๋ฌ ํ์ธ์ฉ์ ๋์ด์ ๋ด๋ถ ๋์์์๋ ํ์ฉํ ์ ์๋ค๋ ๊ฒ์ ์๊ฒ ๋์์ต๋๋ค.
ํ๋ก ํธ์๋๋ฅผ ํผ์ ๋ด๋นํ์ฌ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค๋ณด๋ ์๊ฐ ์์ ๋๋ด์ผํ๋ค๋ ์๋ฐ๊ฐ์ ์์์ง๋ง ํ๋ ํ๋์ฉ ํด๊ฒฐํด๋๊ฐ๋ค๋ ๋ง์์ผ๋ก ์์ฑํ ์ ์์์ต๋๋ค.
์ํ ์ฝ๋์ ์๋ฌ๋ฉ์์ง๋ฅผ ๋ณด๋ฉด์ ์๋ฌ ๋ํ ํ๋์ฉ ํด๊ฒฐํด๋๊ฐ๊ณ , ํ์
ํ๋ฉฐ ์ฑ์ทจ๊ฐ์ ๋๋ ์ ์๋ ์๊ฐ์ด์์ต๋๋ค. ๊ฐ๋ฐ์ ํ๋ฉด์ ์ด๋ค ์ ์ ๋ ๊ผผ๊ผผํ๊ฒ ์ ๊ฒฝ์ฐ๊ณ , ์ด๋ค ๋ถ๋ถ์ ๋ํด ๊ณ ๋ฏผํด์ผํ๋์ง ์์ผ๋ฅผ ๋ํ ์ ์์์ต๋๋ค.
API ์๋ฒ๋ฅผ ์ค๊ณํ๊ณ ๊ตฌ์ถํ๋ฉด์ ์ฑ๊ณต์ ์ผ๋ก ๋ก์ง์ ์ํํ๋ ์ํฉ ๋ฟ๋ง ์๋๋ผ ์ฌ๋ฌ ์์ธ ์ํฉ๋ค์ ๋ํด ๊ณ ๋ คํ๊ณ ๊ฐ ์ํฉ์ ๋ง๋ ์๋ต์ ํ๋ ๊ฒ์ ์ค์์ฑ์ ๋ฐฐ์ธ ์ ์๋ ํ๋ก์ ํธ์์ต๋๋ค.
ํนํ ํํฐ ์ฐธ์ฌ์ ๊ฐ์ด ๋์ผํ 400 code ๋๋ผ๋ ์ด๋ฏธ ์ฐธ์ฌํ๊ณ ์๋ ํํฐ๋ผ์ ์ฐธ์ฌ๊ฐ ์ด๋ฃจ์ด์ง์ง ์์ ๊ฑด์ง, ํํฐ์ ์ธ์์ด ๊ฐ๋ ์ฐจ์ ์ฐธ์ฌ๊ฐ ์ด๋ฃจ์ด์ง์ง ์์ ๊ฑด์ง ๋ฑ์ ๊ตฌ๋ถํ์ฌ response data ๋ฅผ ๊ตฌ์ฑํ์์ต๋๋ค.
์ด๋ฅผ ํตํด ์ ์ ์
์ฅ์์ ํ์ฌ ๋ด๊ฐ ์ด๋ค ๋ฌธ์ ์ ๋ด์ฐฉํ ์ํฉ์ธ์ง๋ฅผ ์ธ์งํ ์ ์๊ฒ ํ์ฌ ์ ์ ๊ฐ ์๋น์ค๋ฅผ ์ด์ฉํ๋ ๋ฐ ์ด๋ ค์์ ๋์ด์ค ์ ์๋ค๋ ์ ์ ๋ฐฐ์ ์ต๋๋ค.
props ๋ ์์ ์ปดํฌ๋ํธ์์ ํ์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ๋ ์ฌ์ฉํ๋ ์ต์
์
๋๋ค.
vue ์ ๋ฐ์ดํฐ ํ๋ฆ์ ์์์ ์๋๋ก ํ๋ฅด๊ธฐ ๋๋ฌธ์ ํ์ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ state ๋ฅผ ์ง์ ์ฐธ์กฐํ ์ ์์ต๋๋ค.
๋ฐ๋ผ์ props ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๊ณ props ํตํด state ๊ฐ ์ ๋ฌ๋๋ฉด ์ ๋ฌ ๋ฐ์ ์ปดํฌ๋ํธ์ ์์ฑ์ด ๋ฉ๋๋ค.
pinia ๋ ์ ์ญ ์ํ ๋ฟ๋ง ์๋๋ผ ๊ฐ๋ณ ์ปดํฌ๋ํธ์์๋ง ํ์ํ ๋ก์ปฌ ์ํ๋ ๊ด๋ฆฌํ ์ ์์ผ๋ฉฐ ์ปดํฌ๋ํธ ๊ฐ ์ํ ๊ณต์ ๋ฅผ ์ฝ๊ฒ ํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
pinia ๋ Vue 3 ์ reactive ํจ์๋ฅผ ์ฌ์ฉํด ์ํ๋ฅผ ๊ด๋ฆฌํ๋๋ฐ ์ด๋ฅผ ํตํด ์ํ ๋ณํ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ถ์ ํ๊ณ ๋ฐ์ํ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ์ฑ๋ฅ ์ต์ ํ์ ์ฉ์ดํฉ๋๋ค.
Q. ํํฐ๋ง ์ฟผ๋ฆฌ๋ฅผ ๋ง๋๋ ๋ถ๋ถ์์ Q ๊ฐ์ฒด๋ฅผ ์ด์ฉํ๋ค. QuerySet ์ filter ๋ฅผ ํตํด์๋ ํํฐ๋ง์ด ๊ฐ๋ฅํ๋ฐ Q ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํด์ ํํฐ๋ง ์ฟผ๋ฆฌ๋ฅผ ๋ง๋ ์ด์ ๊ฐ ๋ฌด์์ธ๊ฐ์?
Q ๊ฐ์ฒด๋ฅผ ์ด์ฉํ๋ฉด ํํฐ๋ง ์กฐ๊ฑด์ ์
๋ ฅ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ํํฐ๋ง ์ฟผ๋ฆฌ๋ฅผ ๋ง๋ค ์ ์์ด ์ฝ๋๊ฐ ๊ฐ๊ฒฐํด์ง๊ณ ์ด๋ก ์ธํด ์ ์ง๋ณด์๋ ๋ณด๋ค ํธ๋ฆฌํด์ง๋ค๊ณ ์๊ฐํ์ต๋๋ค.
ํ์ฌ ํํฐ๋ง ์กฐ๊ฑด์ ์ฅ๋ฅด, ๊ฐ๋
, ๋ฐฐ์ฐ 3๊ฐ์ง์ธ๋ฐ ๊ฐ ์์์ ์
๋ ฅ ์ฌ๋ถ์ ๋ฐ๋ผ ์ด 8๊ฐ์ง ๊ฒฝ์ฐ์ ์๊ฐ ๋์ฌ ์ ์์ต๋๋ค.
๋์ ์ผ๋ก ์ฟผ๋ฆฌ๋ฅผ ๋ง๋ค์ง ์๊ฒ ๋๋ฉด ๋ชจ๋ ์ผ์ด์ค์ ๋ํ ๋ถ๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํ๋ฏ๋ก if-elif-else ๋ฌธ์ด ๋จ๋ฐ๋์ด ์ฝ๋๊ฐ ๋ณต์กํด์ง ๊ฐ๋ฅ์ฑ์ด ์๊ณ , ํํฐ๋ง ์์๊ฐ ์ถ๊ฐ๋๋ ๊ฒฝ์ฐ ๊ธฐํ๊ธ์์ ์ผ๋ก ์ฝ๋์ ๋ณต์ก๋๊ฐ ๋์์ง ์ ์๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๋ฐ๋ฉด Q ๊ฐ์ฒด๋ฅผ ์ด์ฉํ์ฌ ์
๋ ฅ์ด ์กด์ฌํ ๋๋ง ํํฐ๋ง ์ฟผ๋ฆฌ์ ์ถ๊ฐํ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ํํฐ๋ง ์์๊ฐ ์ฆ๊ฐํ๋๋ผ๋ ์์ฝ๊ฒ ์ด๋ฅผ ๊ตฌํํ ์ ์๋ ์ฅ์ ์ด ์๋ค๊ณ ์๊ฐํ์ต๋๋ค.