๐Ÿฆ Python Online Store ๋งŒ๋“ค๊ธฐ 9ํŽธ - list ์ปค์Šคํ…€ ๋ฐ ์‹ค์ œ ๊ฐ’ ๋ถ€์—ฌ

yohan-record[web]ยท2022๋…„ 8์›” 3์ผ
0

python onlinestore ๊ฐœ๋ฐœ์ผ์ง€

๋ชฉ๋ก ๋ณด๊ธฐ
9/25
post-thumbnail

๐ŸŽˆ Front End Developer ์˜ Back End ๋„์ „๊ธฐ ! ๐ŸŽˆ

์ด ๊ธ€์€ PROJECT LION : ํ˜ธ์ฝ”์น˜ ๊ฐ•์‚ฌ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉฐ ์ฐธ๊ณ ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

์ž‘์—… ์ค‘, ๊ฐœ๋ฐœ๊ณผ์ • ์ •๋ฆฌ ๋ฐ issue๊ฐ€ ๋˜์—ˆ๋˜ ๋ถ€๋ถ„๋“ค์„ ๊ณต์œ  ๋ฐ ๊ธฐ๋กํ•˜๊ณ ์ž ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

1. ์ƒํ’ˆ List

โœ ์ด์ „ ์‹œ๊ฐ„์—์„œ๋Š” db์— ์ €์žฅ๋œ document ์ •๋ณด๋“ค์„ ๋ถˆ๋Ÿฌ์™”๋‹ค๋ฉด, ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ๋ถˆ๋Ÿฌ์˜จ ์ •๋ณด๋“ค์„ ์‹ค์ œ ์˜จ๋ผ์ธ์Šคํ† ์–ด์˜ list ํ˜•ํƒœ๋กœ ๊ตฌ์กฐํ™” ์‹œํ‚จ ํ›„ ์‹ค์ œ ๊ฐ’๋“ค์„ ๋„ฃ์–ด ๋ณด๊ฒ ๋‹ค.

  1. html ๊ตฌ์กฐ ์ž‘์„ฑ(bootstrap ํ™œ์šฉ)
    = ์ด์ „ posting์—์„œ๋„ ์„ค๋ช…ํ–ˆ๋“ฏ์ด ํ•„์ž๊ฐ€ ํ˜„์—…์—์„œ ์‚ฌ์šฉํ•˜๋Š” fe ์—…๋ฌด์— ํฌํ•จ๋˜์–ด ์žˆ๋Š” ๋‚ด์šฉ์ด๊ณ , ๋”ฐ๋กœ ๊ณต๋ถ€ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ ๋„์ถœ๋œ ๊ฒฐ๊ณผ๋ฌผ๋งŒ ๊ธฐ๋กํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.
    ๊ฐ„๋‹จํ•œ ์ˆœ์„œ์ด์ง€๋งŒ, ํ‘œ๊ธฐํ•ด๋ณธ๋‹ค๋ฉด bootstrap demo๋“ค์„ download ๋ฐ›์€ ํ›„ include ๊ฒฝ๋กœ๋งŒ ๋งž์ถฐ์ฃผ๋ฉด demo page์™€ ๋™์ผํ•˜๊ฒŒ ๋ฟŒ๋ ค์ง„๋‹ค.

  1. ๋ฐ˜๋ณต๋ฌธ ์ž‘์„ฑ
    = ๊ฐ™์€ ๊ตฌ์กฐ์˜ list๊ฐ€ ๋ฟŒ๋ ค์ง€๋ฏ€๋กœ, ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐ˜๋ณตํ•  ํ•„์š” ์—†์ด ๋ฐ˜๋ณต๋ฌธ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜์—ฌ db์˜ document ๊ฐœ์ˆ˜๋งŒํผ ๋ฟŒ๋ฆฐ๋‹ค.
    ex) db ๋‚ด๋ถ€์˜ document ๊ฐœ์ˆ˜๊ฐ€ 5๊ฐœ๋ผ๋ฉด, 5๊ฐœ๊ฐ€ ๋™์ผํ•œ ๊ตฌ์กฐ๋กœ ๋ฟŒ๋ ค์ง„๋‹ค.
    ๐Ÿ”– for๋ฌธ์„ ์—ด์–ด์คฌ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ ๋‹ซ๋Š” ์ฝ”๋“œ๋„ ํ•„์š”ํ•˜๋‹ค. ๋นผ๋จน์ง€ ์•Š๋„๋ก ์ฃผ์˜ !!

  1. db ์‹ค์ œ data๊ฐ’ ๋ฟŒ๋ฆฌ๊ธฐ
    = img๋ฅผ upload ํ•˜๊ณ  ๋‚œ ํ›„, ์ €์žฅ๋œ ์œ„์น˜์™€ ์ฃผ์†Œ๋ฅผ MongoDB์— ์ €์žฅํ•ด ๋‘์—ˆ๋Š”๋ฐ, product ๋‚ด๋ถ€์˜ thumbnail_img, name, price ๊ฐ’์„ ํ˜ธ์ถœ์‹œ์ผœ ์‹ค์ œ data๋ฅผ ์ถœ๋ ฅ์‹œํ‚จ๋‹ค.

  1. ๊ณตํ†ต์š”์†Œ include
    = ๊ฐ page๋ณ„๋กœ html์„ ์ •์˜ํ•˜๋Š” ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€ header๋“ค์€ ๊ฐ™๊ธฐ ๋•Œ๋ฌธ์—, ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐ˜๋ณตํ•ด์„œ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ํšจ์œจ์ด ๋–จ์–ด์ง„๋‹ค.
    ๊ทธ๋Ÿฌ๋ฏ€๋กœ, include๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•œํŽ˜์ด์ง€์— ๊ณตํ†ต๋œ ๋‚ด์šฉ์„ ๋„ฃ์–ด๋‘๊ณ , ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ž‘์—…ํ•ด ๋ณด๊ฒ ๋‹ค.
    = base.html file์„ ์ƒ์„ฑ ํ›„, ๊ณตํ†ต๋œ ๋ถ€๋ถ„์ด ์•„๋‹Œ contents ์˜์—ญ ์œ„์น˜์— block content ์š”์†Œ๋ฅผ ํ•˜๋‚˜ ์ƒ์„ฑํ•ด ์ค€๋‹ค. ์ฆ‰, ๊ฐ ํŽ˜์ด์ง€๋งˆ๋‹ค ๋ฐ”๋€Œ๋Š” contents ์š”์†Œ๊ฐ€ ๋“ค์–ด์˜จ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
    = base.html (๊ณตํ†ต๋œ ์š”์†Œ๊ฐ€ ํฌํ•จ๋œ file) ์„ extend ์‹œ์ผœ์ค€ ํ›„, ๊ฐ page๋งˆ๋‹ค ๋ฐ”๋€Œ๋Š” contents ์˜์—ญ์„ block content๋กœ ์—ด๊ณ  ๋‹ซ์€ ํ›„ ๊ทธ ์•ˆ์— ๊ฐ ํŽ˜์ด์ง€์˜ ๊ณ ์œ  ๋‚ด์šฉ์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋์ด๋‹ค.

  1. ๊ฒฐ๊ณผ๋ฌผ
    = extend๋ฅผ ์‹œํ‚จ ํ›„, ์ƒ๋‹จ ๋ฉ”๋‰ด์— ํ˜„์žฌ ์ƒ์„ฑ๋œ file์ธ ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ๋ฐ ์ƒํ’ˆ๋“ฑ๋ก ๋ฉ”๋‰ด๋ฅผ ๊ตฌ์„ฑํ•ด๋‘์—ˆ๋‹ค.
    ์ž‘์—…๋ฌผ์ด ๋„์ถœ๋œ ํ›„, ์ถ”ํ›„์— ๋””ํ…Œ์ผํ•˜๊ฒŒ ์Šคํƒ€์ผ ์ž‘์—…์ด ๋“ค์–ด๊ฐˆ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿ˜Ž

๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ์—์„œ ์ƒํ’ˆ์„ ์‚ญ์ œํ•˜๋Š” API๋ฅผ ์ƒ์„ฑํ•ด ๋ณด๊ฒ ๋‹ค.

profile
๐Ÿฑโ€๐Ÿ Front End Developer

0๊ฐœ์˜ ๋Œ“๊ธ€