/momentum

momentum clone

Primary LanguageJavaScript

Momentum ๐Ÿ“†

๐Ÿ’ก The purpose of a project

JavaScript๋ฅผ ์ด์šฉํ•˜์—ฌ ๋™์ ์ธ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ์กฐ๊ธˆ ๋” ์žฌ๋ฐŒ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ JavaScript๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜์˜€๊ณ  Momentum Clone Coding์„ ์ง„ํ–‰์˜€๋‹ค.

1๏ธโƒฃ Idea

JavaScript๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ•์˜๋ฅผ ์ฐพ์•„๋ณด๋˜ ์ค‘, Momentum Clone Coding ๊ฐ•์˜๋ฅผ ๋ณด๊ฒŒ ๋˜์—ˆ๊ณ , ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผํ•˜๋ฉฐ ๊ณต๋ถ€ํ•˜๊ธฐ๋กœ ํ•˜์˜€๋‹ค.

2๏ธโƒฃ Technology stack

3๏ธโƒฃ Trouble

๐Ÿ”“ JavaScript์— ๋Œ€ํ•œ ์ดํ•ด
๐Ÿ”‘ HTML, CSS์™€๋Š” ๋‹ฌ๋ฆฌ JavaScript๋ผ๋Š” ์–ธ์–ด๋Š” ์ง๊ด€์ ์ด์ง€ ์•Š์•˜๊ณ , ํ•™์Šต์ด ํ•„์š”ํ–ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ–ˆ์œผ๋ฉด, ์™„์„ฑ์€ ์–ด๋ ต์ง€ ์•Š์•˜๊ฒ ์ง€๋งŒ, JavaScript์˜ ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ•˜์—ฌ ๊ฐ•์˜๋ฅผ ๋ณด๊ธฐ์ „ JavaScript๋ฅผ ๋จผ์ € ๊ณต๋ถ€ํ•ด์•ผ ๊ฒ ๋‹ค๋Š” ๊ฒฐ๋ก ์„ ๋‚ด๋ ธ๋‹ค.

๐Ÿ”“ ํ˜ผ์ž๋งŒ์˜ ํ”„๋กœ์ ํŠธ
๐Ÿ”‘ ์ฝ”๋“œ๋ฅผ ์™„์„ฑํ•˜๊ณ , ํ˜ผ์ž์„œ ๊ฐ•์˜์— ๋‚˜์˜จ๊ฒƒ๊ณผ ๊ฐ™์€ Logic๋“ค์„ ๊ตฌ์ƒํ•  ์ˆ˜์žˆ๋Š”์ง€ ๊ฑฑ์ •์ด ๋˜์—ˆ๋‹ค. ๊ฐ•์˜์— ๋“ค์–ด๊ฐ„ Logic๋“ค์ด ๊ทธ๋ฆฌ ๋งŽ์ง€๋Š” ์•Š์•˜์ง€๋งŒ JavaScript์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ•œ ์ƒํƒœ์ด๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง„๋‹ค๊ณ  ๊ฒฐ๋ก ์„ ๋‚ด๋ ธ๊ณ , JavaScript๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด ํ•ด๊ฒฐ๋  ๋ฌธ์ œ๋ผ๊ณ  ๊ฒฐ๋ก ์„ ๋‚ด๋ ธ๋‹ค.

4๏ธโƒฃ What I learned

JavaScript์™€ ์ข€๋” ์ต์ˆ™ํ•ด์ง€๊ณ , ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์‹ถ์–ดํ”„๋กœ์ ํŠธ์— ์ถ”๊ฐ€์ ์œผ๋กœ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค.
momentum
ํƒ€์ž๋กœ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด์„œ ์Šค์Šค๋กœ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ• ์ง€ ๊ณ ๋ฏผํ•œ ๊ฒฝํ—˜์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค. ๋˜ํ•œ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์€ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ๊ณ ๋ฏผํ•˜๋ฉด์„œ ์–ด๋–ค๊ฒƒ ๋“ค์„ ๊ณต๋ถ€ํ•ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผํ•  ์ˆ˜์žˆ์—ˆ๋‹ค.

OpenAPI๋ฅผ ์ฒ˜์Œ์œผ๋กœ ์‚ฌ์šฉํ•ด๋ดค๋‹ค. OpenAPI๋งŒ ์‚ฌ์šฉํ•ด๋„ ์ข€๋” ํ€„๋ฆฌํ‹ฐ ๋†’์€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๊ณ , API๋ฅผ ํ˜ผ์ž์„œ ๋งŒ๋“ค ์ˆ˜์žˆ๋‹ค๋ฉด ์žฌ๋ฐŒ์„๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
API๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์•Œ์•„๋ณด๋‹ˆ BackEnd๋ฅผ ๊ณต๋ถ€ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ์ข€๋” JavaScript๋ฅผ ๊ณต๋ถ€ํ•œ ๋’ค BackEnd์™€ ๊ด€๋ จ๋œ ๊ณต๋ถ€๋„ ํ•ด๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค.