๐ Front End Developer ์ Back End ๋์ ๊ธฐ ! ๐
์ด ๊ธ์ PROJECT LION : ํธ์ฝ์น ๊ฐ์ฌ๋์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ฐธ๊ณ ํ ๊ธ์ ๋๋ค.
์์ ์ค, ๊ฐ๋ฐ๊ณผ์ ์ ๋ฆฌ ๋ฐ issue๊ฐ ๋์๋ ๋ถ๋ถ๋ค์ ๊ณต์ ๋ฐ ๊ธฐ๋กํ๊ณ ์ ์์ฑํ๊ฒ ๋์์ต๋๋ค.
โ ์ํ ์์ธํ์ด์ง๋ ์์ ๊ณผ ๋ง์ด ๋ค๋ฅด์ง ์๋ค.
์ํ ์ ๋ณด ์์ ํ์ด์ง๋ ํน์ ์ํ์ ๊ณ ์ ๋ฒํธ(id) ๋ฅผ ์ฃผ์๋ก ๋ฐ์์ MongoDB์์ ํด๋นํ๋ document ์ ๋ณด๋ฅผ ๊ฐ์ ธ์์ product.html ๊ณผ ํจ๊ป ๋ฐํํด ์ฃผ์๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก, ์ํ์ ๋ณด๋ฅผ html ์ ๋๊ฒจ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ฏ๋ก ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์์ ๊ฒ์ด๋ผ๊ณ ํ๋จํ๋ค. (ํ๋จ์ด ๋ง๊ธธ ๐
)
- ์ํ ์์ธ ์ ๋ณด ํ์ด์ง API ์์ฑ
= find_one method๋ฅผ ํตํ์ฌ product_id๋ฅผ ๊ฐ์ ธ์จ๋ค.
๐ id๊ฐ ๋ค์ด๊ฐ๋ฉด _id๊ฐ ๊ฐ์ document ๋ฅผ ๊ฐ์ ธ์์ return ํด์ฃผ๊ณ (/modles/product.py)
์ ๋ณด๊ฐ ๋ถ๋ฌ์ ์ง๊ฒ ๋๋ ๊ฒ์ด๋ค.
๊ทธ ํ return template์ product.html file์ ์์ฑํ๋ค.
- html file ๊ตฌ์กฐ ๋ณ๊ฒฝ ๋ฐ style ์์ (bootstrap)
= ํด๋น bootstrap ๋ด์ฉ์ ์์ ์๋ ๋ค๋ค์ผ๋ฏ๋ก ๋ฐ๋ก ์ ๋ฆฌํด์ ์ฌ๋ฆฌ์ง ์๊ฒ ๋ค.
์ฝ๊ฒ ์ค๋ช ํ์๋ฉด bootstrap์ card demo๋ฅผ ๊ฐ์ง๊ณ ๋ถ์ฌ๋ฃ์ ๋ค, data ๊ฐ๋ง db์์ ๋ก๊ฒจ์ ์ฃผ๋ฉด ๋์ด๋ค. ๐
๐ list page ์์๋ view ํ์ด์ง๋ก ๋งํฌ ์ด๋์ด ๋์ด์ผ ํ๋ฏ๋ก, href ๊ฐ์ href="/products/{{product['_id']}}/detail" detail ๋ก ์ด๋๋๋๋ก ์ค์ ํ๋ค.
๋๋์ด CRUD๊ฐ ๊ฐ๋ฅํ ์ํ ํ์ด์ง๊ฐ ๋์ด ๋ฌ๋ค!
๋ฐํ์ ๋ ๊ฐ์ถฐ์ง ์ํ์ธ๋ฐ,
ํ์๊ฐ์
๋ฐ ๋ก๊ทธ์ธ๋ ์๋์ด ๋์ด์ผํ๊ณ ,
๊ถํ์ ๋ง๊ฒ ๊ด๋ฆฌ์๋ง ์ํ์ ์ญ์ , ์์ ๋ฐ ๋ฑ๋ก์ ํ ์ ์์ด์ผํ๋ฉฐ,
PG์ฌ ๊ฒฐ์ ๋ ์ถ๊ฐํ์ฌ์ผ ํ๊ณ ,
์ฌ์ดํธ ๋ฐฐํฌ๋ ๋จ์์๋ค. ๐๐
ํ์์ ํด๋ณด๊ณ ์ถ์๋ ์์
๋ฌผ์ธ๋ฐ, ๊ฐ๊ฐ ์ ์ ์์
ํ ์ ์๊ฒ ๋์ด ํ๋ณตํ๋ค ๐
(ํ์ฌ์์๋ ์ฝ๋ฉํ๊ณ ํด๊ทผํ๊ณ ๋ ์ฝ๋ฉํ๋ ค๋ ์์ด ์์ข๊ธด ํ์ง๋ง ์ฌ๋ฏธ๋ ์๋ค ใ
ใ
)
3์งธ์ฃผ๋ถํฐ ์์๋๋ ๋๊ธฐ์ค์ธ ์ฌ์ด๋ํ๋ก์ ํธ์ ์ผ์ ์ ๋ง์ถ๊ธฐ ์ํด์๋ ๋ค์์ฃผ๊น์ง๋ ๋๋ด์ผ ํ์ง ์์๊น ์ถ๋ค.
์ค๋ฅ๊ฐ ๋ฐ์ํ๋๋ผ๋ ๋นจ๋ฆฌ ์ฒ๋ฆฌํด์ ๋ฌด์ฌํ ์๋ฃํ๊ณ ์ถ๋ค.
๋ค์ ์๊ฐ์๋ member์ชฝ ํ์๊ฐ์ ๋ฐ ๋ก๊ทธ์ธ์ ๊ตฌํํด ๋ณด๊ฒ ๋ค !!