Yestoday-2
๐จ ํ๋ก์ ํธ ์ผ์ง
์ ๋ณด ์ ๋ฌ๋ณด๋จ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๊ฒช์ ์ ๋ค, ๋๋ ์ ๋ค์ ๊ธฐ๋กํ ์ผ์ง
Project
: Yestoday(account book)
๊ธฐํ๋ถํฐ ์์ํด๋ณด๋ ํ๋ก์ ํธ!!! ์ด๋ฒ ํ๋ก์ ํธ๋ ๊ฐ๊ณ๋ถ ์น์ฑ์ ๋ง๋ค๊ธฐ๋ก ๊ฒฐ์ ํ๋ค.
๋ค๋ง, ์ด๋ฏธ ์ํ ์ดํ์ ํตํด ์ด๋์ ๋ ๊ฐ๊ณ๋ถ ์ญํ ์ ํ๋ ์์ธํ ๊ธฐ๋ฅ๋ค์ด ์ ๊ณต๋๊ธฐ์ ์๋ก์ด ๊ธฐํ์ ์๊ฐํด๋ณด์๋ค.
๊ฐ๋ตํ ์ปจ์
์ ๋ค์๊ณผ ๊ฐ๋ค.
- ์ ์ ๋ ์ค๋
๋์ ํ ์๋น ๊ธ์ก
์ ์ค์ ํ๋ค. ์๋น ์ ํด๋น ๊ธ์ก๊ณผ ๋ด์ฉ์ ์ ๋ ฅํ๋ค. - ๋ฉ์ธ ํ๋ฉด์๋
์ด์
์์ค๋
์ ๋ํ ์ ๋ณด๊ฐ ๋์จ๋ค. ์ด์
๋ฅผ ํด๋ฆญํ๋ฉด ์ต๊ทผ 1๋ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์บ๋ฆฐ๋ ๋ทฐ๋ก ๋ณผ ์ ์๋ค.
์ฒ์ ํผ๊ทธ๋ง๋ก ๊ฐ๋จํ๊ฒ ๋์์ธ์ ๋ง๋ค์ด๋ณด์๋ค.
๐ฆพ ํ๋ก์ ํธ ๋ชฉํ
- MVC ํจํด ๋ฐ ์ต์ ๋ฒ ํจํด
- ๋ผ์ฐํฐ ๊ตฌํ
- ๊ผญ๊ผญ๊ผญ ์ ์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์์ฑํด์ผํ๊ณ ์ด๋ป๊ฒ ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ ์ง ๋ฏธ๋ฆฌ ์๊ฐํ๊ณ ์์ฑํ๋๋ก ํ์
- ๊ฐ๋ฅํ๋ฉด ๋ค์ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์๋ํด๋ณด์
- ์์ฌ ๋ ๋ถ๋ ค์ Jest๋ฅผ ์ด์ฉํ์ฌ ํ ์คํธ ์ฝ๋๊น์ง ์์ฑํด๋ณด๊ธฐ
- ์์ฌ ๋ถ๋ฆด ์ ์๋ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด์
๐ MV*ํจํด๊ณผ ์ต์ ๋ฒ ํจํด ๊ทธ๋ฆฌ๊ณ ํด๋ ๊ตฌ์กฐ
๊ฐ๋ ์ฐธ๊ณ ์ฐธ๊ณ
ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ ์ ์ ํ๊ฒฝ์ ์ธํ
ํ๊ณ ์ ์ด์ ์์ํด๋ณผ๊น?!
ํจ๊ธฐ๋กญ๊ฒ ์์ ์ฌ๋ ธ์ผ๋, MV* ํจํด์ด๋ ์ต์ ๋ฒ ํจํด์ ์๊ฒ ๋๋ฐโฆ
๊ทธ๋์ ์ด์ ํ๋ก์ ํธ๋ฅผ ์ํ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋ ์ด๋ป๊ฒ ์ง์ผํ์ง?
๋จธ๋ฆฌ๋ก๋ ๊ฐ๋ ์ด ์ดํด๊ฐ ๋๋๋ฐ, ์ด๊ฑธ ์ฝ๋๋ก ์ด๋ป๊ฒ ๋ น์ฌ๋ด์ผํ์ง
ํโฆ ํนํ ์์ ๋ฌธ์ ๋ค์ ๋๊ฐ ํด๊ฒฐํด์ค ์ ์๋ ๊ฒ๋ ์๋๊ณ ๊ตฌ๊ธ๋งํ๋ค๊ณ ๋ฑ ์ง๊ธ ๋ด ํ๋ก์ ํธ์ ๋ง๊ฒ ์ ๋ต์ด ๋์จ๋ ๊ฒ๋ ์๋๋ผ์, ์ ๋ง ๋ง์ด ํค๋งธ๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก ์ผ๋จ์ MVC ํจํด, ์ต์ ๋ฒ ํจํด์ ๊ณ ๋ คํ์ฌ ์๋์ ๊ฐ์ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ์งฐ๋ค.
- interfaces: ์ต์ ๋ฒ ํจํด์ ์ ์ฉํ๊ธฐ ์ํด ์ต์ ๋ฒ ํจํด์์ observable ๋ชจ๋์ ๋ํ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค์ด ์ฃผ์๋ค.
export default class Observable {
constructor() {
this._observers = new Set();
}
subscribe(observer) {
this._observers.add(observer);
}
unsubscribe(observer) {
this._observers = [...this._observers].filter((subscriber) => subscriber !== observer);
}
notify(data) {
// ์ฌ๊ธฐ์ subscriber๋ ํจ์
this._observers.forEach((subscriber) => subscriber(data));
}
}
-
models: ๋ชจ๋ธ์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ์์ญ์ผ๋ก ์์ observable ๋ชจ๋์ ์์ํ๋ฉฐ ๊ฐ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ด๋นํ๋ค.
- ChallengeMoney.model.js: ๋์ ๊ธ์ก์ ๊ดํ ๋ฐ์ดํฐ ๋ด๋น
- SpendItem.model.js: ์๋น ํ๋ชฉ(์ด๋ฆ + ๊ธ์ก)์ ๊ดํ ๋ฐ์ดํฐ ๋ด๋น
- Date.model.js: ๋ ์ง์ ๋ํ ๋ฐ์ดํฐ ๋ด๋น
-
views: ์์ model ๋ชจ๋๋ค์ ํ์ฉํ์ฌ ๋ค์ํ view๋ฅผ ๊ฐ๋๋ค. ์ด ๋, ํ์ด์ง ๋ณ๋ก ๋๋์ด์ ํด๋๋ฅผ ๊ตฌ์ฑํ๊ณ ๋ค์ํ view๋ฅผ ๋ง๋ค์๋ค.
- app.js: ์นํ entry์ด๊ธฐ๋ ํ๋ฉด์ ๋ชจ๋ ๋ชจ๋๋ค์ ๊ฐ์ ธ์ ์ต์ข ๋ก์ง์ ๋ด๋นํ ํ์ผ
์ฌ์ค ์ ๋ง ๋ณ ๊ฑฐ ์๋ ์ ์๋ ๋ด์ฉ์ด๊ณ , ํ๋ ธ์ ์๋(?) ์์ง๋ง ์ ๋ง ํน์๋ผ๋ ํน์ฌ๋ผ๋ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ์ ์์ ํด๋ ๊ตฌ์กฐ์ ๋ํ ๊ฐ์ด ์ค์ง ์๋ ๋ถ๋คํํ ๋์์ด ๋๋ฉด ์ข๊ฒ ๋ค.