๐๋ฌธ๋ฒ ์ค ์นดํ ๋ฉ๋ด ์ฑ ๋๋ฆด๐
๊ธฐ์ด๊น์ง ๋ซ์ด๋ณด๊ณ ์ฒ์ฅ๊น์ง ์์๋ณด์
โ๏ธ
๐ป ์ฌ์ฉ๋ฒ
lerna์ yarn์ด ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค!
โ๏ธ ํ์ ์์ ์ค์น
# lerna๋ฅผ globalํ๊ฒ ์ค์น
npm install -g lerna
# yarn์ globalํ๊ฒ ์ค์น
npm install -g yarn
โ๏ธ ํ๋ก์ ํธ ํด๋ก & ์ข
์์ฑ ์ค์น
# cloning project
git clone https://github.com/FECrash/Menu-Management-App.git
# move to project
cd Menu-Management-App
# installation
yarn bootstrap
โ๏ธ ์์ํ๊ธฐ
# build
yarn @id:build
# test
yarn @id:test
# front start
yarn @id:front
# backend & frontend start
yarn @id:start
- ์์ : ํ๋ก์ ํธ๋ช
์ ์๋์ผ๋ก ์๋ฌธ์ ์นํ๋ฉ๋๋ค. ๋ฐ๋ผ์ ๋๋ฌธ์๋ฅผ ๋ฐ๋์ ์๋ฌธ์๋ก ๋ฐ๊พธ๊ณ ์งํํด์ฃผ์ธ์.
yarn inseong-so:build yarn inseong-so:test yarn inseong-so:front yarn inseong-so:start
๐จ ํ๋ก์ธ์ค๊ฐ ์ด์์์ ๋
yarn taskkill
โ ๊ฐ์
ํ๋ก ํธ์๋ ๋๋ฆด ๋ค์ด(Front-end Drill Down)
๊ธฐ๋ณธ๊ธฐ์ ์ถฉ์คํด์ง๊ธฐ ์ํด ๋์ผํ ํ๊ฒฝ์์ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ์ฑ์ ๊ตฌํํ๋ ์ ์ฅ์์ ๋๋ค.
- ์ธ์ด : JavaScript / Typescript
- ํ ์คํธ : Jest / Cypress
- ๋น๋ : Webpack / Vite
- ์คํ์ผ : CSS / Sass / CSS in JS
๐น ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ ๋ฒ
์ค ์๊ตฌ์ฌํญ, ์์ธํ๋ณด๊ธฐ!!๐
JS ๋ฌธ๋ฒ ์ค ์นดํ๋ฉ๋ด ์ฑ
Vanilla JS๋ก ๊ตฌํ ํ๋ ์ํ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ ์นดํ๋ฉ๋ด ์ฑ
โ๏ธ ์ฝ๋๋ฆฌ๋ทฐ ๋ชจ์ - Black Coffee
'ํ๋ฅญํ ์์ฌ์ํต์ ๋ธ๋์ปคํผ์ฒ๋ผ ์๊ทน์ ์ด๋ฉฐ, ํ์ ์ ๋ค๊ธฐ๊ฐ ์ด๋ ต๋ค'.
A.M. ๋ฆฐ๋๋ฒ๊ทธ(๋ฏธ๊ตญ์ ์๊ฐ, ์ํ๊ฐ) -
๋ธ๋์ปคํผ์ฒ๋ผ ์๋ก๋ฅผ ์๊ทนํด์ฃผ๊ณ , ๋๊ธฐ๋ถ์ฌ ํด์ฃผ๋ฉฐ, ๊ทธ ์ฑ์ฅ๊ณผ์ ์ผ๋ก ์ธํด ์๋ฏธ์๋ ๊ฐ์น๋ฅผ ๋ง๋ค์ด๋ด๊ณ ์ ํ๋
๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ
๐ฅ Projects!
๐ฏ step1 ์๊ตฌ์ฌํญ - ๋ ์กฐ์๊ณผ ์ด๋ฒคํธ ํธ๋ค๋ง์ผ๋ก ๋ฉ๋ด ๊ด๋ฆฌํ๊ธฐ
- ์์คํ๋ ์ ๋ฉ๋ด์ ์๋ก์ด ๋ฉ๋ด๋ฅผ ํ์ธ ๋ฒํผ ๋๋ ์ํฐํค ์
๋ ฅ์ผ๋ก ์ถ๊ฐํ๋ค.
- ๋ฉ๋ด๊ฐ ์ถ๊ฐ๋๊ณ ๋๋ฉด, input์ ๋น ๊ฐ์ผ๋ก ์ด๊ธฐํํ๋ค.
- ์ฌ์ฉ์ ์ ๋ ฅ๊ฐ์ด ๋น ๊ฐ์ด๋ผ๋ฉด ์ถ๊ฐ๋์ง ์๋๋ค.
- ๋ฉ๋ด์ ์์ ๋ฒํผ์ ๋๋ฌ ๋ฉ๋ด ์ด๋ฆ ์์ ํ ์ ์๋ค.
- ๋ฉ๋ด ์์ ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋
prompt
์ธํฐํ์ด์ค๋ฅผ ํ์ฉํ๋ค.
- ๋ฉ๋ด ์์ ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋
- ๋ฉ๋ด ์ญ์ ๋ฒํผ์ ์ด์ฉํ์ฌ ๋ฉ๋ด ์ญ์ ํ ์ ์๋ค.
- ๋ฉ๋ด ์ญ์ ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋
confirm
์ธํฐํ์ด์ค๋ฅผ ํ์ฉํ๋ค.
- ๋ฉ๋ด ์ญ์ ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋
- ์ด ๋ฉ๋ด ๊ฐฏ์๋ฅผ countํ์ฌ ์๋จ์ ๋ณด์ฌ์ค๋ค.
- ์ถ๊ฐ๋๋ ๋ฉ๋ด์ ์๋ ๋งํฌ์
์
<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>
์์ ์ฝ์ ํด์ผ ํ๋ค.
<li class="menu-list-item d-flex items-center py-2">
<span class="w-100 pl-2 menu-name">${name}</span>
<button
type="button"
class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
>
์์
</button>
<button
type="button"
class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
>
์ญ์
</button>
</li>
๐ฏ step2 ์๊ตฌ์ฌํญ - ์ํ ๊ด๋ฆฌ๋ก ๋ฉ๋ด ๊ด๋ฆฌํ๊ธฐ
- localStorage์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ฌ ์๋ก๊ณ ์นจํด๋ ๋ฐ์ดํฐ๊ฐ ๋จ์์๊ฒ ํ๋ค.
- ์์คํ๋ ์, ํ๋ผํธ์น๋
ธ, ๋ธ๋ ๋๋, ํฐ๋ฐ๋, ๋์ ํธ ๊ฐ๊ฐ์ ์ข
๋ฅ๋ณ๋ก ๋ฉ๋ดํ์ ๊ด๋ฆฌํ ์ ์๊ฒ ๋ง๋ ๋ค.
- ํ์ด์ง์ ์ต์ด๋ก ์ ๊ทผํ ๋๋ ์์คํ๋ ์ ๋ฉ๋ด๊ฐ ๋จผ์ ๋ณด์ด๊ฒ ํ๋ค.
- ํ์ ์ํ์ธ ๊ฒฝ์ฐ๋ฅผ ๋ณด์ฌ์ค ์ ์๊ฒ, ํ์ ๋ฒํผ์ ์ถ๊ฐํ๊ณ
sold-out
class๋ฅผ ์ถ๊ฐํ์ฌ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ค. - ํ์ ์ํ ๋ฉ๋ด์ ๋งํฌ์
<li class="menu-list-item d-flex items-center py-2">
<span class="w-100 pl-2 menu-name sold-out">${name}</span>
<button
type="button"
class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
>
ํ์
</button>
<button
type="button"
class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
>
์์
</button>
<button
type="button"
class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
>
์ญ์
</button>
</li>
๐ฏ step3 ์๊ตฌ์ฌํญ - ์๋ฒ์์ ํต์ ์ ํตํด ๋ฉ๋ด ๊ด๋ฆฌํ๊ธฐ
- ๋งํฌ์ ์๋ ์น ์๋ฒ ์ ์ฅ์๋ฅผ cloneํ์ฌ ๋ก์ปฌ์์ ์น ์๋ฒ๋ฅผ ์คํ์ํจ๋ค.
- ์น ์๋ฒ๋ฅผ ๋์์ ์ค์ ์๋ฒ์ ๋ฐ์ดํฐ์ ๋ณ๊ฒฝ์ ์ ์ฅํ๋ ํํ๋ก ๋ฆฌํฉํฐ๋งํ๋ค.
- localStorage์ ์ ์ฅํ๋ ๋ก์ง์ ์ง์ด๋ค.
- fetch ๋น๋๊ธฐ api๋ฅผ ์ฌ์ฉํ๋ ๋ถ๋ถ์ async await์ ์ฌ์ฉํ์ฌ ๊ตฌํํ๋ค.
- API ํต์ ์ด ์คํจํ๋ ๊ฒฝ์ฐ์ ๋ํด ์ฌ์ฉ์๊ฐ ์ ์ ์๊ฒ alert์ผ๋ก ์์ธ์ฒ๋ฆฌ๋ฅผ ์งํํ๋ค.
- ์ค๋ณต๋๋ ๋ฉ๋ด๋ ์ถ๊ฐํ ์ ์๋ค.
๐ API
baseUrl
http://localhost:3000
๋ฉ๋ด ์์ฑํ๊ธฐ
method | uri |
---|---|
POST | /api/category/:category/menu |
{
requestBody: {
"name": "string"
},
response: {
"id": "string",
"name": "string",
"isSoldOut": Boolean
}
}
์นดํ ๊ณ ๋ฆฌ๋ณ ๋ฉ๋ด๋ฆฌ์คํธ ๋ถ๋ฌ์ค๊ธฐ
method | uri |
---|---|
GET | /api/category/:category/menu |
{
response: [
{
id: "string",
name: "string",
isSoldOut: Boolean,
},
];
}
๋ฉ๋ด ์ด๋ฆ ์์ ํ๊ธฐ
method | uri |
---|---|
PUT | /api/category/:category/menu/:menuId |
{
requestBody: {
"name": "string"
},
response: {
"id": "string",
"name": "string",
"isSoldOut": Boolean
}
}
๋ฉ๋ด ํ์ ์ฒ๋ฆฌํ๊ธฐ
method | uri |
---|---|
PUT | /api/category/:category/menu/:menuId/soldout |
{
response: {
"id": "string",
"name": "string",
"isSoldOut": Boolean
}
}
๋ฉ๋ด ์ญ์ ํ๊ธฐ
method | uri |
---|---|
DELETE | /api/category/:category/menu/:menuId |
์๋ต ๋ฐ์ดํฐ ์์
โ๏ธ Before Started
๋ก์ปฌ์์ ์๋ฒ ๋์์ ์์ฝ๊ฒ static resources ๋ณ๊ฒฝ ๋ฐ ํ์ธํ๋ ๋ฐฉ๋ฒ
๋ก์ปฌ์์ ์น์๋ฒ๋ฅผ ๋์ html, css, js ๋ฑ์ ์ค์๊ฐ์ผ๋ก ์์ฝ๊ฒ ํ
์คํธํด ๋ณผ ์ ์์ต๋๋ค. ์ด๋ฅผ ์ํด์๋ ์ฐ์ npm์ด ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค. ๊ตฌ๊ธ์ npm install
์ด๋ ํค์๋๋ก ๊ฐ์์ ์ด์์ฒด์ ์ ๋ง๊ฒ๋ npm์ ์ค์นํด์ฃผ์ธ์. ์ดํ ์๋์ ๋ช
๋ น์ด๋ฅผ ํตํด ์ค์๊ฐ์ผ๋ก ์นํ์ด์ง๋ฅผ ํ
์คํธํด๋ณผ ์ ์์ต๋๋ค.
npm install -g live-server
์คํ์ ์๋์ ์ปค๋งจ๋๋ก ํ ์ ์์ต๋๋ค.
live-server ํด๋๋ช
๐ป Code Review
์๋ ๋งํฌ๋ค์ ์๋ ๋ฆฌ๋ทฐ ๊ฐ์ด๋๋ฅผ ๋ณด๊ณ , ์ข์ ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฌธํ๋ฅผ ๋ง๋ค์ด ๋๊ฐ๋ ค๊ณ ํฉ๋๋ค.
๐๐ผ Contributing
๋ง์ฝ ๋ฏธ์ ์ํ ์ค์ ๊ฐ์ ์ฌํญ์ด ํ์ํ๋ค๋ฉด, ์ธ์ ๋ ์์ ๋กญ๊ฒ PR์ ๋ณด๋ด์ฃผ์ธ์.
๐ Bug Report
๋ฒ๊ทธ๋ฅผ ๋ฐ๊ฒฌํ๋ค๋ฉด, Issues์ ๋ฑ๋กํด์ฃผ์ธ์.
๐ License
This project is MIT licensed.