ํผ๋๋ก ๋์๊ฐ๊ธฐ
Dev.toFrontend
์๋ฌธ ์ฝ๊ธฐ
MEVN ์คํ ๊ธฐ๋ฐ์ ์ ์ฐํ NoSQL ์คํค๋ง์ MongoDB Aggregation์ ํ์ฉํ ๋ ์ํผ ๊ฒ์ ์์คํ ๊ตฌ์ถ
Building Recipe-Finder.org: A Full-Stack Journey with Vue, Express, MongoDB, and Vuetify ๐ณ
AI ์์ฝ
Context
์ฌ๋ฃ ๊ธฐ๋ฐ ๋ ์ํผ ๊ฒ์์ ์ ์ฐํ ๋ฐ์ดํฐ ๊ตฌ์กฐ ํ๋ณด์ ๋น ๋ฅธ ํ๋กํ ํ์ดํ ํ์์ฑ ๋๋. ์ ํํ๋์ง ์์ ๋ ์ํผ ๋ฐ์ดํฐ ํน์ฑ์ผ๋ก ์ธํ RDBMS์ ์๊ฒฉํ ์คํค๋ง ์ ์ฝ ํด๊ฒฐ ์๊ตฌ.
Technical Solution
- Recipe ๋ฐ์ดํฐ์ ๊ฐ๋ณ์ ํน์ฑ์ ๋ฐ์ํ MongoDB Document ๊ธฐ๋ฐ์ ์ ์ฐํ ๋ฐ์ดํฐ ๋ชจ๋ธ๋ง ์ค๊ณ
- MongoDB Text Search Index์ $text ์ฐ์ฐ์๋ฅผ ํตํ ํจ์จ์ ์ธ ์ ๋ฌธ ๊ฒ์(Full-text Search) ๊ตฌํ
- Express ๋ด Aggregation Pipeline ๊ตฌ์ถ์ ํตํ ์ฌ์ฉ์ ์ ๋ ฅ ์ฌ๋ฃ์ ๋ ์ํผ ๊ฐ์ ๋งค์นญ ์ค์ฝ์ด๋ง ๋ฐ ์ ๋ ฌ ๋ก์ง ์ฒ๋ฆฌ
- Pinia ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ Axios ๊ธฐ๋ฐ์ ๋น๋๊ธฐ ํต์ ์ ํตํ Client-Server Decoupled ์ํคํ ์ฒ ๊ตฌ์ฑ
- Vuetify์ v-img aspect-ratio ๋ฐ CSS line-clamp ์ ์ฉ์ ํตํ ์ด๊ธฐ์ข ์ด๋ฏธ์ง/ํ ์คํธ ๋ฐ์ดํฐ์ UI ์ผ๊ด์ฑ ํ๋ณด
- Viewport ํฌ๊ธฐ์ ๋ฐ๋ฅธ v-col์ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์์คํ ์ค๊ณ๋ฅผ ํตํ ๋ฉํฐ ๋๋ฐ์ด์ค ๋์
์ค์ฒ ํฌ์ธํธ
- ๋น์ ํ ๋ฐ์ดํฐ ๋ฐ ๊ฐ๋ณ ๋ฆฌ์คํธ(์ฌ๋ฃ, ๋จ๊ณ) ์ฒ๋ฆฌ ์ NoSQL์ Document ๋ชจ๋ธ ๊ฒํ - ๋จ์ ์ผ์น ๊ฒ์์ ํ๊ณ๋ฅผ ๊ทน๋ณตํ๊ธฐ ์ํด DB ๋ ๋ฒจ์ Text Index ๋ฐ Aggregation Pipeline ํ์ฉ - ๋ค์ํ ์์ ํฌ๊ธฐ๋ก ์ธํ ๋ ์ด์์ ๊นจ์ง ๋ฐฉ์ง๋ฅผ ์ํด ์ด๋ฏธ์ง ๋น์จ ๊ฐ์ ๋ฐ ํ ์คํธ ์ ์ญ(Truncation) ์ ๋ต ์๋ฆฝ