1์ฐจ Project ํ๊ณ ๋ก
๐ 1์ฐจ ํ๋ก์ ํธ output ๋ฐ ์๊ฐ
๋ฐฐํฌ ์๋ฃ : click โก๏ธWETOWN
์ง์ ํด๋ณด๊ธฐ โฌ๏ธ
ํด๋ก ์ฌ์ดํธ : SMTOWN &STORE
ํ ๋ช : WETOWN
ํ๋ก์ ํธ ๋ชฉํ : Wecode์์ ๋ฐฐ์ด๋ด์ฉ์ ํ์ฉํ์ฌ ํด๋ก ์ฌ์ดํธ์ ๊ธฐ๋ฅ๊ฐ๋ฐ ๋ฐ ๋ ์ด์์ ๊ทธ๋ฆฌ๊ธฐ
์งํ๊ธฐ๊ฐ : 2021๋ 12์ 27์ผ ~ 2022๋ 1์ 7์ผ ( total : 14days )
ํ๋ก์ ํธ ์ฐธ์ฌ์ : ์ด์คํ, ๋ฐํ์ค, ์ต์๋น, ํฉํฌ์ค
Position : ๋์ ํฌ์ง์ ์ backend ์์ผ๋ ํํ์๋ฅผ ๊ฑฐ์ณ ๋์จ database tables์ ์๊ฐ ์๊ฐ๋ณด๋ค ์ ์๊ณ ํด๋ผ์ด์ธํธ๋ก ๋ณด๋ด์ค์ผ ํ API ๋ํ ๋ช๊ฐ์ง ์์๊ธฐ์ front๋ ๊ฒธํ๊ฒ ๋์๋ค.
- ๊ธฐ์ ์คํ -
BackEnd ๊ธฐ์ ์คํ
- Page & API -
๋ฐํ์ค
์ต์๋น
ํฉํฌ์ค
๐งโ๐ป Backend (WETOWN)
const productFilter = async (
category,
is_subcategory,
subcategory,
sortMethod
) => {
return await prisma.$queryRaw`
SELECT
products.id,
eng_name,
price,
is_new,
sale_rate,
categories.name as cate_name,
subcategories.name as subcate_name,
url
FROM
products
JOIN
categories on category_id = categories.id
JOIN
images on products.id = images.product_id
JOIN
subcategories on subcategories.id = subcategory_id
WHERE
if(${is_subcategory},
categories.name = ${category} and subcategories.name = ${subcategory} and images.is_main = true,
categories.name = ${category} and images.is_main = true)
ORDER BY
case WHEN ${sortMethod} = 1 then created_at end ASC,
case WHEN ${sortMethod} = 2 then eng_name end ASC,
case WHEN ${sortMethod} = 3 then price end ASC,
case WHEN ${sortMethod} = 4 then price end DESC;
`;
};
์๋๋ API ์ฃผ์๋ฅผ category, subcategory ๊ฐ๊ฐ ์ฌ์ฉํ์๋๋ฐ ๋ฉํ ๋์ด ํ๋๋ก ํฉ์ณ๋ณด๋ผ๊ณ ํ์๋ค.
๊ทธ๋์ subcategory๊ฐ๊ณผ sortMethod๊ฐ์ Query String์ผ๋ก ๋ฐ์๊ณ category๊ฐ์ Path Variable๋ก ๋ฐ์๋ค.
subcategory๊ฐ์ ์ ๋ฌด์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ์ ์ฃผ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฌ๋ฆฌํ์๊ณ
order by์ case๋ฌธ์ ์ฃผ์ด sortMethod๊ฐ์ ๋ฐ๋ผ ์ ๋ ฌ๊ธฐ์ค์ ์ฃผ์๋ค.
์ฒ์์ ๋ฐฉ๋ํ ์์ ์ฝ๋๊ฐ ๋ฆฌํฉํ ๋ง ํ ํ ์ค์ด๋ ๊ฒ์ ๋ณด๋ ๋ฟ๋ฏํ๋ค.
๐งโ๐ป Front (WETOWN)
DB์ carts ํ ์ด๋ธ์ ์ ์ฅ๋์ด์๋ ๊ฐ ์ํ์ ์๋์ fetchํจ์๋ก ๋ถ๋ฌ์ฌ๋
map์ ๋๋ ค productQuantity state์ ๋ด์ ๋ณด๊ดํ๋ค.
CartList ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋ button์ ํด๋ฆญ์์ ์ํ์ ์๋์ด ๊ฐ๋ณ์ ์ผ๋ก ๋ฐ๋์ด์ผํ๋๋ฐ
์ด๋ productQuantity๋ฅผ Spread Opertor๋ฅผ ํตํด ๋ ํผ๋ฐ์ค๋ฅผ ๋์ด copyํ์ฌ ํด๋น ์ธ๋ฑ์ค๋ฒ์งธ์ ๊ฐ๋ง ๋ฐ๊พธ์ด set์ํจ๋ค
๐ง ํ์ Git & Github
Communication ์คํ
๐น ์ฝ๋๋ฆฌ๋ทฐ๋ฅผ ๋ฐ์ผ๋ฉฐ ๋ด๊ฐ ๋ชฐ๋๋๊ฒ๋ค, ๊น๋นกํ๋๊ฒ๋ค ๋ฑ ๋ค์ํ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ์ ์ ๊ทธ๋ ์ด๋ ๋๋ code๋ฅผ ๋ง๋ณผ์์๋ค.
๐น ๋์๋ ๋ค๋ฅธ์๊ฐ์ ๊ฐ๊ณ ์ง ์๋ก์ด code๋ฅผ ๊ฒฝํํ ์ ์๋ค.
๐น ์๊ฐ์ฝ์์ ์์งํค๋๊ฒ์ด ์ ๋ง ์ค์ํ๊ณ ๊ทธ ์ฌ๋์ ๋ํ ์ ๋ขฐ๋๋ฅผ ๊ฒฐ์ ์ง๋๋ค๋ ๊ฒ์ ๋๋ผ๊ฒ๋์๋ค.
๐น ๋ด ์ฝ๋๋ฅผ ๋ด๊ฐ ๋ฆฌ๋ทฐํ๋ฉฐ ์ด๋๋ถ๋ถ์ ์ดํด๊ฐ ์๋๊ณ ์ด๋๋ถ๋ถ์ ์ด๋ ต๋ค๋๊ฒ์ ์๊ฒ๋๊ณ ์ฝ๋๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ์ง๋๊ฒ ๋ณด๋ค ๋จ๋ค์ด ๋ดค์๋ ์ดํดํ๊ธฐ ์ฝ๊ฒ ์ฐ๊ฒ ๋์๋ค.
๐ง ํ๊ณ
ํ์ ๋ชจ๋ ํ๋ก์ ํธ ๊ฒฝํ์ด ์ ๋ฌดํ๊ธฐ ๋๋ฌธ์ ์ด๋ฐ์ ๊ณ ์์ ์ข ํ์๋ค.
ํ์ง๋ง ํ์๋ถ๋ค์ด ๋ชจ๋ ์จํํ ์ฑ๊ฒฉ์ ๊ฐ์ง๊ณ ๊ณ์ ํ์ธ์ง ๋ถ์๊ธฐ ๋งํผ์ ์ข์๊ณ
๋ค๋ฅธํ๋ค์ ๋นํด ์๊ฒฌ์ถฉ๋๋ ๊ฑฐ์ ์์๋ค.
( ์ฒซ ํ๋ก์ ํธ๋ผ ์์ฌ๋ถ๋ฆฌ์ง๋ง๊ณ ๊ธฐ๋ณธ์๋ง ์ถฉ์คํ์๋ผ๋ ์๊ฐ์ผ๋ก ํ์๋ฅผ ํด์ ๊ทธ๋ฐ๊ฐ? )
๋ชจ๋๋ค ์ํด์ฃผ์๊ณ ๋ฌธ์ ์์ด ์งํ๋๊ณ ์์๋ค.
ํ์ง๋ง ๊ทธ ์๊ฐ์ด ํํ์ด ๋์ด์์๊นโฆ
back์ ์ฝ๋๊ฐ ๊น๋ํ๊ฒ ์์ง์ ธ์ ๊ณง ๋ฐ๋ก ์ปค๋ฐ, ํธ์ฌ๋ฅผ ํ์์ง๋ง
front๋ ์ฝ๋๊ฐ ๋๋ฝ๊ณ ์์๋ณด๊ธฐ ํ๋ค๊ฒ ๊ฐ์ ๋ด์ ์์ ์ฝ๊ฐ์ ๋ฆฌํฉํ ๋ง์ ๊ฑฐ์น๊ณ ์ปค๋ฐ์ ํ๋ค๋๊ฒ
ํ๋ฃจ..์ดํ..์ผ์ฃผ์ผ์ด ์ง๋๋๋ก ํ๋ฒ๋ ์ปค๋ฐ์ ํ์ง ์๊ณ ์์๋ ๊ฒ์ด๋ค.
๊ทธ์ ์์ผ ๋ด๊ฐํ๊ฒ์ ํธ์ํ๊ธฐ ์ํด develop ๋ธ๋์น์์ pull์ ๋ฐ์๋๋ฐ ์ถฉ๋์ด ๋ฌ๊ณ
pull, branch ๋ฑ Git์ ๋ํด ์ ๋๋ก๋ ์์ง๋ฅผ ๋ชปํ๊ณ ์๋ ๋๋ ์ด๊ฒ์ ๊ฒ ์๋ํด๋ณด๋ค
์ผ์ฃผ์ผ์น์ ํ์ผ์ด ํต์งธ๋ก ์ฌ๋ผ์ง๊ฒ ๋์๋ค..
๋์์ด ์บ์บํด์ก๊ณ ํ์ค์ ๋ฐ์๋ค์ด๊ธฐ ์ด๋ ค์ ์ง๋ง
ํ์๋ค์๊ฒ ๋๋ฌด ๋ฏธ์ํ ๋ง์์ ์ด์ธ์ ์ธ ์คํผ๋๋ก ๋ค์ ๊ทธ๋ฆฌ๊ธฐ ์์ํ๋ค.
๋ฐฑ์ ํ์ผ์ ํ์์ฑ์ ๋ผ์ ๋ฆฌ๊ฒ ๋๊ผ๊ณ ๊ฒฐ๊ตญ ๊ทธ ๋ ๋ฐค์ ์์ ๋๊ฐ์ด ๋ค์ ๊ตฌํํด๋๋ค.
๊ทผ๋ฐ ์คํ๋ ค ์ค์๋ฅผ ํ๊ณ ๋๋ ์ข์์ ๋ค์ด ๋ ๋ง์ด ํ์๋์๋ค.
๊ทธ ๋ ์ดํ ๊ธฐ๋ฅ๋จ์๋ก ์ปค๋ฐ์ ๋ฌด์กฐ๊ฑดํ์๊ณ ๋ ธํธ๋ถ์ ๋ซ๊ธฐ์ ์๋ backupํ์ผ์ ๋ง๋ค์ด ๋๋๊ฒ์ด ์ต๊ดํ ๋์๋ค.
๋ํ ์์ด ๋นจ๋ฆฌ์ง๊ฒ ๋์๊ณ Git์ ๋ํด ์ ๋๋ก ์์ง๊ฐ ๋์๋ค. ( ๋ชจ๋ฅผ๋ ์ ์คํ๊ฒ ๋์ฒํ๋๊ฑด ๋ค )
์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํตํด ์ ๋ง ๋ง์๊ฒ์ ์ป๊ฒ๋์๊ณ
ํจ๊ปํ ํ์ค๋, ์๋น๋, ํฌ์ค๋ ๋ชจ๋ ์ํด์ฃผ์ ์ ๊ณ ๋ง์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค