๐ Front End Developer ์ Back End ๋์ ๊ธฐ ! ๐
์ด ๊ธ์ PROJECT LION : ํธ์ฝ์น ๊ฐ์ฌ๋์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ฐธ๊ณ ํ ๊ธ์ ๋๋ค.
์์ ์ค, ๊ฐ๋ฐ๊ณผ์ ์ ๋ฆฌ ๋ฐ issue๊ฐ ๋์๋ ๋ถ๋ถ๋ค์ ๊ณต์ ๋ฐ ๊ธฐ๋กํ๊ณ ์ ์์ฑํ๊ฒ ๋์์ต๋๋ค.
โ ์ด์ ์๊ฐ์์๋ db์ ์ ์ฅ๋ document ์ ๋ณด๋ค์ ๋ถ๋ฌ์๋ค๋ฉด, ์ด๋ฒ ์๊ฐ์๋ ๋ถ๋ฌ์จ ์ ๋ณด๋ค์ ์ค์ ์จ๋ผ์ธ์คํ ์ด์ list ํํ๋ก ๊ตฌ์กฐํ ์ํจ ํ ์ค์ ๊ฐ๋ค์ ๋ฃ์ด ๋ณด๊ฒ ๋ค.
- html ๊ตฌ์กฐ ์์ฑ(bootstrap ํ์ฉ)
= ์ด์ posting์์๋ ์ค๋ช ํ๋ฏ์ด ํ์๊ฐ ํ์ ์์ ์ฌ์ฉํ๋ fe ์ ๋ฌด์ ํฌํจ๋์ด ์๋ ๋ด์ฉ์ด๊ณ , ๋ฐ๋ก ๊ณต๋ถํ ํ์๊ฐ ์๋ค๊ณ ํ๋จํ์ฌ ๋์ถ๋ ๊ฒฐ๊ณผ๋ฌผ๋ง ๊ธฐ๋กํ๋๋ก ํ๊ฒ ๋ค.
๊ฐ๋จํ ์์์ด์ง๋ง, ํ๊ธฐํด๋ณธ๋ค๋ฉด bootstrap demo๋ค์ download ๋ฐ์ ํ include ๊ฒฝ๋ก๋ง ๋ง์ถฐ์ฃผ๋ฉด demo page์ ๋์ผํ๊ฒ ๋ฟ๋ ค์ง๋ค.
- ๋ฐ๋ณต๋ฌธ ์์ฑ
= ๊ฐ์ ๊ตฌ์กฐ์ list๊ฐ ๋ฟ๋ ค์ง๋ฏ๋ก, ์ฌ๋ฌ๋ฒ ๋ฐ๋ณตํ ํ์ ์์ด ๋ฐ๋ณต๋ฌธ์ผ๋ก ์ฒ๋ฆฌํ์ฌ db์ document ๊ฐ์๋งํผ ๋ฟ๋ฆฐ๋ค.
ex) db ๋ด๋ถ์ document ๊ฐ์๊ฐ 5๊ฐ๋ผ๋ฉด, 5๊ฐ๊ฐ ๋์ผํ ๊ตฌ์กฐ๋ก ๋ฟ๋ ค์ง๋ค.
๐ for๋ฌธ์ ์ด์ด์คฌ๋ค๋ฉด ๋ฐ๋์ ๋ซ๋ ์ฝ๋๋ ํ์ํ๋ค. ๋นผ๋จน์ง ์๋๋ก ์ฃผ์ !!
- db ์ค์ data๊ฐ ๋ฟ๋ฆฌ๊ธฐ
= img๋ฅผ upload ํ๊ณ ๋ ํ, ์ ์ฅ๋ ์์น์ ์ฃผ์๋ฅผ MongoDB์ ์ ์ฅํด ๋์๋๋ฐ, product ๋ด๋ถ์ thumbnail_img, name, price ๊ฐ์ ํธ์ถ์์ผ ์ค์ data๋ฅผ ์ถ๋ ฅ์ํจ๋ค.
- ๊ณตํต์์ include
= ๊ฐ page๋ณ๋ก html์ ์ ์ํ๋ ๊ธฐ๋ณธ ๊ตฌ์กฐ์ header๋ค์ ๊ฐ๊ธฐ ๋๋ฌธ์, ์ฌ๋ฌ๋ฒ ๋ฐ๋ณตํด์ ์ฌ์ฌ์ฉํ๊ธฐ์๋ ํจ์จ์ด ๋จ์ด์ง๋ค.
๊ทธ๋ฌ๋ฏ๋ก, include๋ฅผ ์ฌ์ฉํ์ฌ ํํ์ด์ง์ ๊ณตํต๋ ๋ด์ฉ์ ๋ฃ์ด๋๊ณ , ํธ์ถํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์์ ํด ๋ณด๊ฒ ๋ค.
= base.html file์ ์์ฑ ํ, ๊ณตํต๋ ๋ถ๋ถ์ด ์๋ contents ์์ญ ์์น์ block content ์์๋ฅผ ํ๋ ์์ฑํด ์ค๋ค. ์ฆ, ๊ฐ ํ์ด์ง๋ง๋ค ๋ฐ๋๋ contents ์์๊ฐ ๋ค์ด์จ๋ค๋ ์๋ฏธ์ด๋ค.
= base.html (๊ณตํต๋ ์์๊ฐ ํฌํจ๋ file) ์ extend ์์ผ์ค ํ, ๊ฐ page๋ง๋ค ๋ฐ๋๋ contents ์์ญ์ block content๋ก ์ด๊ณ ๋ซ์ ํ ๊ทธ ์์ ๊ฐ ํ์ด์ง์ ๊ณ ์ ๋ด์ฉ์ ๋ฃ์ด์ฃผ๋ฉด ๋์ด๋ค.
- ๊ฒฐ๊ณผ๋ฌผ
= extend๋ฅผ ์ํจ ํ, ์๋จ ๋ฉ๋ด์ ํ์ฌ ์์ฑ๋ file์ธ ์ํ ๋ฆฌ์คํธ ๋ฐ ์ํ๋ฑ๋ก ๋ฉ๋ด๋ฅผ ๊ตฌ์ฑํด๋์๋ค.
์์ ๋ฌผ์ด ๋์ถ๋ ํ, ์ถํ์ ๋ํ ์ผํ๊ฒ ์คํ์ผ ์์ ์ด ๋ค์ด๊ฐ ๊ฒ ๊ฐ๋ค. ๐
๋ค์ ์๊ฐ์๋ ์ํ ๋ฆฌ์คํธ์์ ์ํ์ ์ญ์ ํ๋ API๋ฅผ ์์ฑํด ๋ณด๊ฒ ๋ค.