๊ณต๋ถ€

1์‹œ๊ฐ„ ๋งŒ์— ๋๋‚ด๋Š” ์ง์žฅ์ธ ํ•„์ˆ˜ ์ฝ”๋”ฉ ์šฉ์–ด ํ•ด์„ค

ellie_e3e 2022. 4. 8. 14:08

 

์ฝ”๋”ฉํ•˜๋Š”-๊ฐœ๋ฐœ์ž
์ถœ์ฒ˜: Unsplash

โ–ท ๊ฐ•์˜๋ช…: 1์‹œ๊ฐ„๋งŒ์— ๋๋‚ด๋Š” ์ง์žฅ์ธ ์ฝ”๋”ฉ ์šฉ์–ด ํ•ด์„ค
โ–ท ๊ฐ•์˜์ž: ์ด๋ฒ”๊ทœ
โ–ท ํ”Œ๋žซํผ: ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
โ–ท ์‹œ์ฒญ ๊ธฐ๊ฐ„: 22.04.07.


 

์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ ์†Œ๊ฐœ ๋ฐ ์•ž์œผ๋กœ ๋ฐฐ์šธ ๊ฒƒ
์šฐ๋ฆฌ๋Š” ์–ด๋–ป๊ฒŒ ์ปดํ“จํ„ฐ์™€ ์†Œํ†ตํ• ๊นŒ
์›น ์„œ๋น„์Šค๋Š” ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ• ๊นŒ
์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ์•ฝ์†, API
๊ฐœ๋ฐœ ์–ธ์–ด์™€ ํ”„๋ ˆ์ž„์›Œํฌ
๋ณต์žกํ•œ ์„œ๋ฒ„ ๊ตฌ์กฐ์™€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค
๊ฐœ๋ฐœ์ž๋“ค์ด ํ˜‘์—…ํ•˜๋Š” ๋ฒ•, git
์ด์ œ ์–ด๋–ป๊ฒŒ ์–ด๋””์„œ๋ถ€ํ„ฐ ๋ฐฐ์›Œ์•ผ ํ•ฉ๋‹ˆ๊นŒ!

 

 

๋‚ด๊ฐ€ ์ฝ”๋”ฉ์— ๊ด€์‹ฌ์„ ๊ฐ€์ง„ ๊ฑด ๊ทธ์ € ๊ถ๊ธˆ์ฆ์ด์—ˆ๋‹ค. ์ด์ œ ์šฐ๋ฆฌ ์ผ์ƒ์ƒํ™œ ์†์—์„œ ๋„ˆ๋ฌด๋‚˜ ๋‹น์—ฐํ•ด์ ธ ๋ฒ„๋ฆฐ ์Šค๋งˆํŠธํฐ ์•ฑ์„ ์‚ฌ์šฉํ•˜๋ฉฐ ์ด ์•ฑ์€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๊ฑด์ง€ ๊ถ๊ธˆํ–ˆ๋‹ค. ๋˜ํ•œ, ์–ด๋ ต๊ฒŒ๋งŒ ๋Š๊ปด์กŒ๋˜ ์ฝ”๋”ฉ์„ ์š”์ฆ˜์€ ์ดˆ๋“ฑํ•™์ƒ ๋•Œ๋ถ€ํ„ฐ ๋ฐฐ์šด๋‹ค๋Š” ์†Œ๋ฆฌ๋ฅผ ๋“ฃ๊ณ  ๊ทธ๋Ÿผ ๋‚˜๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฑฐ ์•„๋‹Œ๊ฐ€.. ๋ผ๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฑฐ๊ธฐ๊นŒ์ง€ ์ผ๋ฟ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๊ฑด ์•„๋‹ˆ์—ˆ๋‹ค. ์ „๊ณต ์ˆ˜์—…์„ ๋“ค์„ ๋•Œ๋งˆ๋‹ค 4์ฐจ ์‚ฐ์—…ํ˜๋ช…์— ๋Œ€ํ•ด ๊ท€์— ๋”ฑ์ง€๊ฐ€ ์•‰๋„๋ก ๋“ค์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ก ์ ์œผ๋กœ ๊ฒ‰ํ•ฅ๊ธฐ๋งŒ ํ•  ๋ฟ ์‹ค์ œ๋กœ ์ธ๊ณต์ง€๋Šฅ, ๋จธ์‹ ๋Ÿฌ๋‹, IOT ๋“ฑ์˜ ๊ธฐ์ˆ ์ด ์–ด๋–ป๊ฒŒ ๋ฐœํ˜„๋˜๋Š”์ง€๋Š” ์•Œ ์ˆ˜ ์—†์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‚œ ๊ทธ์ € ์ด๋Ÿฐ ๊ฒƒ๋“ค์ด ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ด๋ ‡๊ฒŒ ์šฐ๋ฆฌ ์‚ถ์„ ๋ณ€ํ™”์‹œํ‚ค๊ณ  ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ–ˆ๋‹ค.

 

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

 

๊ทธ๋Ÿฌ๋‹ค ์ด ๊ฐ•์˜๋ฅผ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ฐ•์˜ ๋‚ด์šฉ์„ ๋ณด๋‹ˆ ๋”ฑ ๋‚ด๊ฐ€ ์ฐพ๋˜ ๊ฐ•์˜์˜€๊ณ , ์„ ์ฐฉ์ˆœ ๋ฌด๋ฃŒ ์ˆ˜๊ฐ• ์ด๋ฒคํŠธ๋ฅผ ํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ์— ์ฃผ์ €ํ•˜์ง€ ์•Š๊ณ  ์‹ ์ฒญํ–ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋‹ˆ ๋Œ€ํ•™๊ต 2ํ•™๋…„ ๋•Œ, ํ•„์ˆ˜ ๊ต์–‘์œผ๋กœ "์›นํŽ˜์ด์ง€ ์ œ์ž‘๊ณผ ํ™œ์šฉ"์ด๋ผ๋Š” ์ˆ˜์—…์„ ๋“ค์—ˆ๋˜ ๊ฒŒ ์ƒ๊ฐ๋‚ฌ๋‹ค(๊นŒ๋งฃ๊ฒŒ ์žŠ๊ณ  ์žˆ์—ˆ๋‹ค). ๋‹น์‹œ ๊ต์ˆ˜๋‹˜์ด ์ธํ„ฐ๋„ท ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ํ™ˆ ํ™”๋ฉด์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ๋„ ๊ณผ์ •์ด ์žˆ๊ณ  ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฐ๋‹ค ํ•ด์„œ ์‹ ๊ธฐํ–ˆ์—ˆ๋‹ค(์ง€๊ธˆ๊นŒ์ง€ ์ƒ๊ฐ๋‚˜๋Š” ๊ฑธ ๋ณด๋ฉด ์ •๋ง ๊ธฐ์–ต์— ๋‚จ์•˜๋‚˜ ๋ณด๋‹ค). about:blank๋กœ ์„ค์ •ํ•ด๋‘๋ฉด ๋” ๋นจ๋ฆฌ ์ฐฝ์ด ์—ด๋ฆฐ๋‹ค๋Š” ๊ต์ˆ˜๋‹˜ ๋ง์”€์„ ๋“ฃ๊ณ  ์‹ค์ œ๋กœ ํ•œ๋™์•ˆ ๊ทธ๋ ‡๊ฒŒ ์„ค์ •์„ ํ•ด๋‘์—ˆ๋‹ค. (์ง€๊ธˆ์€ ๊ท€์ฐฎ์•„์„œ..๐Ÿ˜…) ์ˆ˜์—… ๋•Œ ๊ฐ„๋‹จํ•œ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ HTML๋กœ๋งŒ ๋งŒ๋“  ๊ฑฐ๋ผ ์ •๋ง ๊ธฐ๋ณธ ๋ผˆ๋Œ€๋งŒ ์žˆ์—ˆ์œผ๋‹ˆ, ๊ทธ๋•Œ๊นŒ์ง€๋งŒ ํ•ด๋„ ์ด๊ฒŒ ๊ธฐ์ดˆ๊ฐ€ ๋˜์–ด ์šฐ๋ฆฌ๊ฐ€ ๋ณด๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ๋ชฐ๋ž๋‹ค. ๊ทธ๋ƒฅ ํ•˜๋ผ๋Š” ๋Œ€๋กœ๋งŒ ๋”ฐ๋ผ ํ–ˆ์„ ๋ฟ์ด๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊ทธ๋•Œ ์•„๋ฌด ์ƒ๊ฐ ์—†์ด ํ˜๋ ค๋“ค์—ˆ๋˜ ๊ฒƒ๋“ค์ด ์–ด๋–ค ์ด์œ ๋กœ ๊ทธ๋žฌ๋Š”์ง€ ๋”ฑ๋”ฑ ๋งž์ถฐ์ ธ์„œ ์‹ ๊ธฐํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ •๋ง ์‰ฝ๊ฒŒ ์˜ˆ์‹œ๋ฅผ ๋“ค์–ด์„œ ์„ค๋ช…ํ•ด ์ฃผ๋‹ˆ๊นŒ ์ดํ•ด๊ฐ€ ์ž˜ ๋ผ์„œ ์ข‹์•˜๋‹ค. ์ •๋ง ์™•์ดˆ๋ณด ๋งž์ถค! ์ง„์งœ ๋‚ด๊ฐ€ ๊ถ๊ธˆํ•ดํ•˜๋˜ ๊ธฐ๋ณธ์ ์ธ ํ‹€์„ ์žก์•„์ฃผ๋Š” ๊ฐ•์˜๋ผ ๋„ˆ๋ฌด ๋งŒ์กฑ์Šค๋Ÿฌ์› ๋‹ค. 

 

  • HTML, CSS, JAVASCRIPT๊ฐ€ ๋ญ ํ•  ๋•Œ ์“ฐ์ด๋Š” ๊ฑด์ง€ - ํ‹ฐ์Šคํ† ๋ฆฌ ์Šคํ‚จ ํŽธ์ง‘์— ์™œ HTML๊ณผ CSS๊ฐ€ ์žˆ๋Š”์ง€ ์•Œ๊ฒŒ ๋จ.
  • ์˜ˆ์ „์— ์ฑ„์šฉ ๊ณผ์ œํ•  ๋•Œ, ๊ฐ•์˜ ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•ด์„œ ํ•˜๋Š” ๊ฒŒ ์žˆ์—ˆ๋‹ค. ์š”์ฆ˜ ๋ญ๊ฐ€ ๋งŽ์ด ์“ฐ์ธ๋‹ค ์ด๋Ÿฐ ๊ฒƒ๋งŒ ์•Œ์•˜๊ณ , ์ •์ž‘ ์–ด๋–ค ํ”„๋ ˆ์ž„์›Œํฌ์ธ์ง€ ๋ชฐ๋ž๋Š”๋ฐ ์•Œ๊ฒŒ ๋จ.
  • ๋งจ๋‚  ์„œ๋ฒ„, ์„œ๋ฒ„ ํ•ด์„œ ๋Œ€์ถฉ ์–ด๋–ค ๊ฑด์ง€ ์•Œ๊ณ ๋Š” ์žˆ์—ˆ์œผ๋‚˜ ์ œ๋Œ€๋กœ ์•Œ๊ฒŒ ๋จ.
  • ๊นƒํ—ˆ๋ธŒ ๋Œ€์ถฉ ๊ฐœ๋ฐœ์ž๋“ค์ด ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์ดํŠธ๋กœ ์•Œ๊ณ  ์žˆ๊ธด ํ–ˆ๋Š”๋ฐ, ๋ญ ํ•˜๋Š” ๊ณณ์ธ์ง€ ์ œ๋Œ€๋กœ ์•Œ๊ฒŒ ๋จ.

→ ์ง„์งœ ๋“ค์–ด๋ณด๊ธฐ๋งŒ ํ–ˆ๋˜ ๊ฒƒ๋“ค ์ œ๋Œ€๋กœ ์•Œ๊ฒŒ ๋ผ์„œ ๊ดœํžˆ ๋ฟŒ๋“ฏ๐Ÿ˜†

 

 

Lesson Learned
  1. ๋‚˜์—๊ฒŒ ํ•„์š”ํ•œ ๊ฒŒ ๋ฌด์—‡์ธ์ง€, ์–ป๊ณ ์ž ํ•˜๋Š” ๊ฒƒ์ด ๋ฌด์—‡์ธ์ง€ ํ™•์‹คํžˆ ์•Œ๊ณ  ๊ฐ•์˜๋ฅผ ์ฐพ์•„์•ผ ์›ํ•˜๋Š” ๊ฒƒ์„ ์–ป์„ ์ˆ˜ ์žˆ์Œ.
  2. ๋ฌด๋ฃŒ๋กœ ๊ฐ„๋‹จํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ•œ ํ›„, ํ• ์ธ ์ฟ ํฐ์ด๋‚˜ ๋‹ค๋ฅธ ๊ฐ•์˜ ๋ง›๋ณด๊ธฐ ์ œ๊ณต → ์‹ ๊ทœ ๊ณ ๊ฐ ์œ ์น˜: ๋‹น์žฅ์€ ์†ํ•ด?๋ผ๊ณ  ์ƒ๊ฐํ• ์ง€๋ผ๋„ ์ด๋ฒคํŠธ๋ฅผ ์ฐธ์—ฌํ•˜๋Š” ์‚ฌ๋žŒ์€ ์ด๋ฏธ ์–ด๋Š ์ •๋„ ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋‹ˆ๊นŒ ๋‚˜์ค‘์—” ์˜คํžˆ๋ ค ๋” ํฐ ์ด๋“์„ ์–ป์„ ์ˆ˜ ์žˆ์„ ๋“ฏ. ์—ญ์‹œ ๋‹น์žฅ๋งŒ ์ƒ๊ฐํ•˜์ง€ ๋ง๊ณ  ๋ฉ€๋ฆฌ ๋ฐ”๋ผ๋ณด๊ธฐ
  3. ๊ณ ๊ฐ๋“ค์ด ์„œ๋น„์Šค๋ฅผ ์„ ํƒํ•˜๋Š” ๊ณผ์ •์„ ํŒŒ์•…ํ•˜๊ณ , ๊ทธ ๊ณผ์ •์—์„œ ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๊ธฐ

 

๋ฐ˜์‘ํ˜•