[CodeLion] Day2 ๊ธฐ๋ก ๐Ÿฆ

์ˆฉ๋”ฉยท2022๋…„ 3์›” 29์ผ
1
post-thumbnail

๐Ÿ’ฅ ๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ์—์„œ์˜ DAY2

โญ๏ธ ์ž๊ธฐ๊ฐ๊ด€ํ™”๋ฅผ ํ•˜์ž โญ๏ธ

โ€œ๋›ฐ์–ด๋‚œ ์„ ์ˆ˜์™€ ๋ณดํ†ต ์„ ์ˆ˜์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?โ€
โ€์ง€๋ฃจํ•จ์„ ๊ฒฌ๋””๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งค์ผ๋งค์ผ ํ›ˆ๋ จํ•˜๋‹ค ๋ณด๋ฉด ์–ด๋Š ์‹œ์  ์ง€๋ฃจํ•ด์ง‘๋‹ˆ๋‹ค. ๋ณดํ†ต ์„ ์ˆ˜๋Š” ์ด ์ง€๋ฃจํ•จ์„ ์ด๊ธฐ์ง€ ๋ชปํ•˜๊ณ  ํ›ˆ๋ จ์„ ์†Œํ˜ํžˆ ํ•˜๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.โ€

<์•„์ฃผ ์ž‘์€ ์Šต๊ด€์˜ ํž˜, ๋น„์ฆˆ๋‹ˆ์Šค๋ถ์Šค, ์ œ์ž„์Šค ํด๋ฆฌ์–ด, 2019>

ํ™€๋กœ ๋…ํ•™์„ ํ•  ๋•Œ ๊ฐ€์žฅ ํž˜๋“ค์—ˆ๋˜ ์ ์ด ํ˜ผ์ž ๊ณต๋ถ€ํ•œ๋‹ค๋Š” ์™ธ๋กœ์›€๊ณผ ๋งค์ผ ๋ฐ˜๋ณต๋˜๋Š” ๋ฃจํ‹ด๊ณผ ๊ณต๋ถ€์— ์ง€๋ฃจํ•ด์ง€๊ธฐ ์‹œ์ž‘ํ–ˆ์—ˆ๋‹ค๋Š” ๊ฒƒ.

๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ์— ๋“ค์–ด์™€ ๋‚˜์™€ ๊ฐ™์€ ๋ชฉํ‘œ๋ฅผ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค๊ณผ ํ•จ๊ป˜ ๊ณต๋ถ€ํ•˜๊ณ  ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„๋Š” ๊ฒƒ ? ์ด๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋ฒŒ์จ ์‹ ์ด๋‚˜๋Š” ENFP ,,,
์ž ์ด์ œ ๋ณดํ†ต ์„ ์ˆ˜๊ฐ€ ๋˜์ง€ ๋ง๊ณ  ๋›ฐ์–ด๋‚œ ์„ ์ˆ˜๊ฐ€ ๋˜๋„๋ก ํ™”์ดํŒ…์„ ํ•˜์ž๐Ÿ’ช

์˜ค๋Š˜์€ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์˜ ์ดํ˜ธ์ค€ ๋Œ€ํ‘œ๋‹˜๊ป˜์„œ ์ˆ˜์—…์„ ํ•ด ์ฃผ์…จ๊ณ  ์•„์ฃผ ํ˜„์‹ค์ ์ธ ์กฐ์–ธ์„ ํ•ด์ฃผ์…จ๋‹ค!

ํ•  ์ˆ˜ ์žˆ๋‹ค ์ƒ๊ฐํ•˜๋‚˜์š”? ํ•˜๋ฒ„๋“œ ์ƒ์œ„ 1%์˜ ๋น„๋ฐ€(์ •์ฃผ์˜, ํ•œ๊ตญ๊ฒฝ์ œ์‹ ๋ฌธ, 2018)์—๋Š” ์ด๋Ÿฐ ์–˜๊ธฐ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค. ํ•˜๋ฒ„๋“œ์˜ ์ปค๋ฆฌํ˜๋Ÿผ์„ ๊ฐ€์ ธ๋‹ค๊ฐ€ ๋‚จ์ผ๋ฆฌ๋…ธ์ด์ฃผ ํ•™์ƒ์—๊ฒŒ ๊ทธ๋Œ€๋กœ ์ ์šฉ์‹œ์ผฐ์„ ๋•Œ ์ข‹์€ ์„ฑ๊ณผ๋ฅผ ๊ฑท์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒ๋ฉด ์•„๋ฌด๋ฆฌ ์ข‹์€ ์ปค๋ฆฌํ˜๋Ÿผ์ด ์žˆ๋”๋ผ๋„ ์†Œํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์—ญ๋Ÿ‰์ด ๋‹ค ๋‹ค๋ฅด๋‹ˆ๊น์š”! ๊ทธ๋ž˜์„œ ๋‚จ์ผ๋ฆฌ๋…ธ์ด์ฃผ ํ•™์ƒ๋“ค์—๊ฒŒ ํ•œ ๊ณผ๋ชฉ๋งŒ ํ•œ ํ•™๊ธฐ ๊ฐ€๋ฅด์ณ๋ณด๋‹ˆ ์ข‹์€ ์„ฑ๊ณผ๋ฅผ ๊ฑท์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ๋‚ด์šฉ์„ ํ†ตํ•ด ์•Œ ์ˆ˜ ์žˆ๋Š” ๊ฒฐ๋ก ์œผ๋กœ ,,

  • ์šฐ๋ฆฌ๋Š” ์ปด๊ณต์—์„œ์˜ 4๋…„์„ ๋ฐฐ์šฐ์ง€ ์•Š์•˜์ง€๋งŒ ํ•œ ๊ณผ๋ชฉ(ํ”„๋ก ํŠธ์—”๋“œ)๋งŒ ํŒŒ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ์˜ ๋…ธ๋ ฅ์— ๋”ฐ๋ผ ์–ป์–ด๊ฐ€๋Š” ์–‘์ด ๋‹ฌ๋ผ์งˆ ๊ฒƒ์ด๋‹ค.
  • ์ฒ˜์Œ ๊ณต๋ถ€ํ–ˆ๋˜ ์–‘์˜ ์ฐจ์ด๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์—ฐ๋ด‰์ด๋‚˜ ์Šต๋“์˜ ์ฐจ์ด๋Š” ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค!
  • ์ด๋Ÿฐ๊ฑด ์ธ์ •ํ•˜๊ณ  ์ž๊ธฐ๊ฐ๊ด€ํ™” ํ•˜๊ธฐ!

โญ๏ธ ๊ณต๋ถ€ ๋ฐฉ๋ฒ•

1. ์กฐ๊ธ‰ํ•ดํ•˜์ง€ ๋ง์ž๋ผ๊ณ ์š”~

์ฝ”๋”ฉ์€ ์–ด๋ ต๋‹ค ..

  • ๋‚˜์˜ ์†๋„์— ๋งž๊ฒŒ ์†Œํ™”์‹œํ‚ค๋ฉด์„œ ํ•˜์ž. ์กฐ๊ธ‰ํ•ดํ•˜๋ฉด ๋ถ€๋Ÿฌ์ง€๊ธฐ ์‹ญ์ƒ. ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๊ธฐ ๋งˆ๋ จ
  • 1๋งŒ ์‹œ๊ฐ„์˜ ๋ฒ•์น™

2. ๊ณต๋ถ€ํ•˜๋Š”๊ฑธ ์ž๋ž‘ํ•˜์ž

  • ๊นƒํ—™ ๋“ฑ์„ ํ™œ์šฉ . ์ง„๋„๋ฅผ ๋‚˜์•„๊ฐ€๊ณ  ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๋ฆฌ๋ฉฐ ๋™๊ธฐ๋ถ€์—ฌ๋ฐ›๊ธฐ
  • ๋ฏธ๋ผํด๋ชจ๋‹๊ณผ ๊ฐ™์€ ์ฑŒ๋ฆฐ์ง€
  • ํฌํด์ด ๋  ์ •๋„์˜ ๊นƒํ—™ ๊ด€๋ฆฌ

3. ํƒ€์ดํ•‘ ์น˜๋Š” ๊ฒƒ์ด ๋‚˜์˜ ๊ฒƒ

์ดํ•ด๋ฅผ ์ „ํ˜€ ๋ชปํ–ˆ๋Š”๋ฐ ํƒ€์ž ์—ฐ์Šต๋งŒ ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒƒ
-> ๋ฉ˜ํ† ์—๊ฒŒ ์ด์•ผ๊ธฐ ํ•˜๊ณ  ์†”๋ฃจ์…˜ ์ฐพ๊ธฐ

4. ๋ชฐ์ž…ํ•  ๋•Œ ๋ฏธ๋ž˜์— ๋Œ€ํ•œ ๋‘๋ ค์›€ ๋‚ด๋ ค๋†“๊ธฐ

  • ๋‘๋ ค์›€๊ฐ–๊ณ  ์‹œ์ž‘ํ•˜๋ฉด ๋‘๋ ค์›€์— ์—๋„ˆ์ง€๋ฅผ ๋บ๊น€
  • ์ง€๊ธˆ ๋‚˜์˜ ์—๋„ˆ์ง€๋ฅผ ์„ฑ์žฅํ•˜๋Š” ์—๋„ˆ์ง€๋กœ ๋ฐ”๊พธ๊ธฐ
  • ๋‘๋ ค์›€์„ ๊ตฌ์ฒด์ ์ธ ๊ธ€๋กœ ํ’€๊ฑฐ๋‚˜ ๋กœ์ง์„ ์‹œ๊ฐํ™”ํ•˜๊ฑฐ๋‚˜ ํ˜„์žฌ ํ•˜๊ณ ์žˆ๋Š” ๊ณต๋ถ€๊ฐ€ ์–ด๋Š ๋ถ€๋ถ„์— ํ•ด๋‹นํ•˜๋Š”์ง€ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋‘๋ ค์›€์€ ์‚ฌ๋ผ์ง„๋‹ค.

5. ์ž์‹ ์žˆ๋Š” ๋ถ„์•ผ๋Š” ์Šคํ‚ต

๋‚ด๊ฐ€ ์•Œ๊ณ ์žˆ๋Š” ์ง€์‹์ด ์–ด์ค‘๊ฐ„ํ•˜๋ฉด ๋“ฃ๊ธฐ
๋ฉํ•˜๊ฒŒ ๋“ฃ๊ณ ์žˆ๋‹ค? ๊นจ์šฐ์นจ์ด ์—†๋‹ค? ๊ทธ๋Ÿผ ๋ญ”๊ฐ€ ์ž˜๋ชป ๋˜๊ณ ์žˆ๋Š”๊ฒƒ..
HTML CSS ์ž์‹  ์žˆ๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ˆ์Šต -> ๋ฏธ๋ฆฌ ํ•ด๋‘๋ฉด ์ข‹์„๋“ฏ !
JS ๋ฅผ ์•Œ์•„์•ผ React ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ณต๋ถ€ํ•ด์•ผํ•จ

โญ๏ธ ๋ฏธ์…˜

  1. 1์ผ1์ปค๋ฐ‹
    • ์–‘๋ณด๋‹ค๋Š” ์งˆ. ? ์–‘๋„ ์–‘์ด๊ณ  ์งˆ๋„ ์งˆ์ด๋‹ค!
    • ์งˆ์„ ๋†’์ด๊ธฐ ์œ„ํ•œ ๋…ธ๋ ฅ์—๋งŒ ์ง‘์ค‘ํ•œ๋‹ค ํ•˜๋”๋ผ๋„ ๋งค์ผ ํ›Œ๋ฅญํ•œ ์ฝ”๋“œ๋ฅผ ์ž๋Š” ๊ฒƒ์€ ๋งค์šฐ ์–ด๋ ค์šด ์ผ!
  2. ๋ณ„๋„์˜ ์‹œ๊ฐ„์„ ๋‚ด์„œ ํ•˜๋Š” ๊ณผ์ œ๋ณด๋‹ค๋Š” ํ•จ๊ป˜ ํ’€์–ด๊ฐ€๋Š” ๊ณผ์ œ
  3. ๊ฐ€๋Šฅํ•˜๋ฉด ํฌํด๋  ๋ฏธ์…˜๋“ค๋กœ ๊ตฌ์„ฑ

โญ๏ธ ๊ณต๋ถ€ ๋ฃจํ‹ด

  • 5์‹œ๊ฐ„ ์ˆ˜์—…
  • 3์‹œ๊ฐ„ ๋ณต์Šต ๋ฐ ์งˆ๋ฌธ , ๊ณผ์ œ

๋‚ด๊ฐ€ ๊ฐˆ ๊ธธ์„ ๋ณด์ž => ๋กœ๋“œ๋งต

๊ฐœ๋ฐœ์ž ์ „์ฒด ๋กœ๋“œ๋งต , ํ”„๋ก ํŠธ์—”๋“œ ๋กœ๋“œ๋งต ๋ณด๋ฉด์„œ ๋‚ด๊ฐ€ ์–ด๋””์— ์žˆ๋Š”์ง€ ์ข…์ข… ๋ณด๊ธฐ

๋ฐ์ดํ„ฐ๋ถ„์„(Chart.js/apexchart/canvas ๋“ฑ)๊ณผ ๋ฐฑ์—”๋“œ(node.js/firebase/mongoDB)์— ๋Œ€ํ•ด์„œ๋„ ์•Œ ํ•„์š”๊ฐ€ ์žˆ๋Š”๋ฐ ๊ณต๋ถ€๋ฅผ ํ•˜๊ธด ํ•  ๊ฑฐ์ง€๋งŒ ๊ฒฝํ—˜์ด ์žˆ๋Š”์ง€ ์ •๋„๋งŒ ํ• ๊ฑฐ๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ๊ณต๋ถ€๋ฅผ ๋” ํ•ด์•ผํ•œ๋‹ค.
์ •๋ณด๋ณด์•ˆ์— ๋Œ€ํ•ด์„œ๋„ ๋ฐฐ์šธ ๊ฒƒ. ์ด๋Ÿฐ๊ฑธ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ดํ‚น๋‹นํ•˜์ง€ ์•Š์Œ.

๋…ธ์…˜์— ๋‚˜์ค‘์— ๊ฐ€๊ณ ์‹ถ์€ ๊ธฐ์—…๊ณผ ํ•„์š” ์Šคํƒ๋“ค์„ ์ญ‰ ๋‚˜์—ดํ•˜๊ณ  ์ •๋ฆฌํ•ด๋ณด์ž
๊ธฐ์—…์—์„œ ์›ํ•˜๋Š” ์Šคํƒ์„ ๊ณต๋ถ€ํ•˜๋ฉด ๋จ.

์ฝ”๋”ฉํ…Œ์ŠคํŠธ

๊ตฌํ˜„ํ…Œ์ŠคํŠธ / ์ฝ”๋”ฉํ…Œ์ŠคํŠธ
๋‹จ๊ธฐ๊ฐ„์— ๋˜๋Š”๊ฒŒ ์•„๋‹˜! ์ฒœ์ฒœํžˆ ์˜ค๋ž˜ ๊ณต๋ถ€ํ•ด์•ผํ•จ

Visual Studio

https://www.youtube.com/watch?v=NIrY9zShBtk
์˜์ƒ ์ฐธ๊ณ ํ•˜๊ธฐ!
IDE ์™€ Textediting ์˜ ์ฐจ์ด์•Œ๊ธฐ!

profile
Front-End Developer โœจ

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