TIL

[WIL] 4์ฃผ์ฐจ ํšŒ๊ณ 

lado 2021. 8. 30. 09:12

๐Ÿ“ ์ด๋ฒˆ ์ฃผ์— ํ•˜๊ณ ์ž ํ–ˆ๋˜ ๊ฒƒ

  • [JavaScript] ๊ฐ„๋‹จํ•œ Todo app ๊ตฌํ˜„ ๊ณผ์ œ
  • [JavaScript] ๋…ธ์…˜ ํด๋ก ์ฝ”๋”ฉ ํ”„๋กœ์ ํŠธ
  • [JavaScript] ์‹คํ–‰์ฝ˜ํ…์ŠคํŠธ ES5 ๋ฒ„์ „ ๋ฐœํ‘œ
  • [JavaScript] XMLHttpRequest, Promise, async, await, fetch, history api ๊ฐ•์˜ ๋ณต์Šต
  • [์ฝ”๋“œ ๋ฆฌ๋ทฐ] ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณผ์ œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ

 


๐ŸŽฏ ์ด๋ฒˆ ์ฃผ์— ์™„๋ฃŒํ•œ ๊ฒƒ

  • ์นญ์ฐฌํ•  ๊ฒƒ
    • ๊ณผ์ œ๋ฅผ ์Šค์Šค๋กœ ์ดํ•ดํ•œ ์ฝ”๋“œ๋กœ(!!) ์ œ ์‹œ๊ฐ„์— ์ œ์ถœํ•œ ๊ฒƒ
    • ๋ชจ๋ฅด๋Š” ๊ฒƒ์€ ํŒ€์›๋“คํ•œํ…Œ ๋ฌผ์–ด๋ณด๋ฉด์„œ ์ตœ๋Œ€ํ•œ ๊ฐ•์˜๋ฅผ ๋ณด์ง€ ์•Š๊ณ  ํ˜ผ์ž ๊ตฌํ˜„ํ•˜๋ ค๊ณ  ํ•œ ๊ฒƒ
    • ์‹คํ–‰์ฝ˜ํ…์ŠคํŠธ๋ฅผ ์–ด๋А ์ •๋„๋Š” ์ดํ•ดํ•œ ๊ฒƒ
    • Promise, async, await๊นŒ์ง€๋Š” ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๋ฉฐ ๊ฐ•์˜๋ฅผ ๋ณต์Šตํ•œ ๊ฒƒ
    • ๊ฐ•์˜ ๋“ฃ๊ณ  ์ฝ”๋“œ๋Š” ๋‹ค์‹œ ํ˜ผ์ž ์งœ๋ณด๋Š” ์‹์œผ๋กœ ๊ณต๋ถ€ํ•ด์„œ ์ตœ๋Œ€ํ•œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ๊ณต๋ถ€ํ•œ ๊ฒƒ
    • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ž˜ ์ดํ•ดํ•œ ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ๋” ์œ ์˜๋ฏธํ•œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•œ ๊ฒƒ

 

  • ์•„์‰ฌ์› ๋˜ ๊ฒƒ
    • ๊ฐ•์˜ ๋ณต์Šต์„ ๋๋‚ด์ง€ ๋ชปํ•œ ๊ฒƒ
    • ์•„์ง ๋…ธ์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ
    • ์‹คํ–‰์ฝ˜ํ…์ŠคํŠธ ๊ฐœ๋…์—์„œ ์•„์ง๋„ ๊ถ๊ธˆํ•œ ๋ถ€๋ถ„์ด ๋งŽ์€๋ฐ ์ œ๋Œ€๋กœ ์ •๋ฆฌํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ
    • ์‹ค์ œ ๊ณต๋ถ€ํ•˜๋Š” ์‹œ๊ฐ„์ด ๋ณ„๋กœ ์•ˆ ๋˜๋Š” ๊ฒƒ

 


๐Ÿ“š ๋‹ค์Œ ์ฃผ์— ํ•  ๊ฒƒ

  • [๊ฐœ์ธ ํ”„๋กœ์ ํŠธ] ๋…ธ์…˜ ํด๋กœ๋‹ ํ”„๋กœ์ ํŠธ ์™„์„ฑ
  • [๊ฐ•์˜] ์•„์ง ๋ชป ๋“ค์€ ๊ฐ•์˜ ์™„๊ฐ•ํ•˜๊ธฐ 
  • [์ฝ”๋“œ ๋ฆฌ๋ทฐ] Todo app ๊ณผ์ œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ
  • [์ฝ”๋”ฉํ…Œ์ŠคํŠธ] ์™„๋ฃŒ ๋ชปํ•œ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์‹ค์Šต ๋๋‚ด๊ธฐ
  • [Javascript] ์‹คํ–‰์ฝ˜ํ…์ŠคํŠธ ES6 ๋ฒ„์ „ ๊ฐœ๋… ์ •๋ฆฌ

 


๐ŸŽ‡ Reflection

  • ์ผ์š”์ผ์˜ ๊ฐ์ƒ
    • fetch๋ž‘ history api๊นŒ์ง€ ๋‹ค ๋๋‚ด์ž ํ–ˆ๋˜ ๋‹ค์ง์€ ๋ฌผ๊ฑฐํ’ˆ์ด ๋˜์—ˆ๊ณ ... XMLHttpRequest๋กœ GET ํ†ต์‹ ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ Promise, async, await์œผ๋กœ ๋ฆฌํŒฉํ† ๋งํ•ด๋ณด๋ฉด์„œ ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์ดํ•ดํ•œ ๊ฒƒ์œผ๋กœ ๋งŒ์กฑํ•ด์•ผ๊ฒ ๋‹ค.
    • ์ง„์งœ ์ชฝํŒ”๋ฆฐ ๋ง์ด์ง€๋งŒ ๊ทธ๋™์•ˆ async๋ž‘ await์„ ๋Œ€์ฒด ์–ด๋””์— ๋ถ™์—ฌ์•ผ ํ•˜๋Š” ๊ฑด์ง€ ๋ชฐ๋ž๋‹ค. ๊ทธ๋ƒฅ ๋Œ€์ถฉ ์•„๋ฌด๋ฐ๋‚˜ ๋ถ™์˜€๋Š”๋ฐ(;;;) ์ด๋ฒˆ ๊ธฐํšŒ์— ์•Œ๊ฒŒ ๋๋‹ค.
    • ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์ด์šฉํ•ด์„œ todolist ๋ชฉ๋ก๊ณผ ๊ฐ todo์— ์—ฐ๊ฒฐ๋œ ๋Œ“๊ธ€ ๋ชฉ๋ก์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์—ฐ์Šต์„ ํ–ˆ๋Š”๋ฐ ์•„์ง๋„ ์„œ๋กœ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ๋•Œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผํ•˜๋Š”์ง€ ์ž˜ ์ดํ•ด๋ฅผ ๋ชปํ•œ ๊ฒƒ ๊ฐ™๋‹ค. ๋” ์—ฐ์Šตํ•ด๋ด์•ผ ํ• ๋“ฏ.
    • ์›”์š”์ผ ์ฝ”์–ดํƒ€์ž„ ์‹œ์ž‘ ์ „๊นŒ์ง€ fetch๋ฅผ ๋‹ค ๋ณต์Šตํ•˜๊ณ .. ๊ฐ€๋Šฅํ•˜๋ฉด history api๋„ ๋“ฃ๊ณ ... ๊ฐ€๋Šฅํ•˜๋ฉด todo app ๊ฐ•์˜๊นŒ์ง€... (๋ถˆ๊ฐ€๋Šฅ)
    • ๋ฐฑ๋งŒ๋…„ ๋งŒ์— 30๋ถ„ ๊ฑท๊ธฐ ์šด๋™์„ ํ–ˆ๋‹ค. ์ž์„ธ ๊ต์ •์„ ์œ„ํ•ด์„œ ์—„์ง€์†๊ฐ€๋ฝ์„ ์œ„๋กœ ๊ฐ€๊ฒŒ ํ•˜๊ณ  ํŒ”์„ ์•ž๋’ค๋กœ ์ตœ๋Œ€ํ•œ ํฌ๊ฒŒ ํ”๋“ค๋ฉฐ ๊ฑธ์—ˆ๋”๋‹ˆ ๋‹ค๋ฆฌ๋ณด๋‹ค ํŒ”์ด ์•„ํ”„๋‹ค...
    • ์ž ์ž๋ฆฌ์— ๋ˆ„์›Œ์„œ ๋ณ„์˜๋ณ„ ์ƒ๊ฐ์„ ํ•˜๋‹ค๊ฐ€ ๋‚˜๋Š” ๋™๊ฒฝ์ด๋ผ๋Š” ๊ฐ์ •์„ ์งˆํˆฌ๋กœ ํ‘œ์ถœํ•˜๋Š” ์‚ฌ๋žŒ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๊ทธ๊ฑธ๋กœ ์“ธ๋ฐ์—†๋Š” ๊ฐ์ •์„ ๋งŽ์ด ์†Œ๋น„ํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ์ •๋ง ๋‚˜๋กœ ์‚ด๊ธฐ ํ”ผ๊ณคํ•˜๋‹ค. ๋‚จ์ด ์ž˜ํ•˜๋Š” ๊ฑด ์ง„์‹ฌ์œผ๋กœ ์นญ์ฐฌํ•ด์ฃผ๊ณ  ๋‚˜๋„ ๋ณธ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ ๋…ธ๋ ฅํ•˜๋Š” ๊ทธ๋Ÿฐ ์ฟจํ•œ ์ธ๊ฐ„์ด ๋  ์ˆ˜๋Š” ์—†๋Š” ๊ฒƒ์ธ๊ฐ€?

 

  • Todo app ๊ณผ์ œ์— ๋Œ€ํ•œ ๊ฐ์ƒ 
    • ์–ด์ œ TIL์— ๊ฑฐ์˜ ์ ์—ˆ๋‹ค.

 

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

 

  • ๊ฐ•์˜๋ฅผ ์ œ๋•Œ ์ œ๋•Œ ๋“ฃ์ž
    • ๊ฐ•์˜๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜๋ฉด์„œ ๋“ค์œผ๋ ค๊ณ  ํ•˜๋‹ค ๋ณด๋‹ˆ๊นŒ ์ œ ์ง„๋„๋ฅผ ๋ชป ๋”ฐ๋ผ ๊ฐ€๊ฒŒ ๋๋‹ค. (์ˆ˜์š”์ผ๊นŒ์ง€ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ž‘ ์‹คํ–‰์ฝ˜ํ…์ŠคํŠธ ๊ณต๋ถ€๋งŒ ํ–ˆ๋˜ ๊ฒƒ๋„ ํ•œ ๋ชซ ํ–ˆ๋‹ค...) ์ง„๋„๋ฅผ ๋ฐ€๋ฆฌ๋‹ˆ๊นŒ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์˜ฌ๋ฆฌ๋Š” ์งˆ๋ฌธ ๋‚ด์šฉ์„ ์ „ํ˜€ ์ดํ•ด ๋ชปํ•˜๊ฒŒ ๋๋‹ค(ใ… ใ… ) ์–ผ๋ฅธ ๊ฐ•์˜ ๋‹ค ๋ณต์Šตํ•˜๊ณ  ๋‹ค์Œ๋ถ€ํ„ด ์ง„์งœ ์ œ๋•Œ ์ œ๋•Œ ๋“ฃ๋„๋ก ํ•˜์ž...

 

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

'TIL' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[TIL] 20210904  (0) 2021.09.05
[TIL] 20210903  (2) 2021.09.03
[TIL] 20210828  (2) 2021.08.29
[TIL] 20210826  (2) 2021.08.27
[WIL] 20210820 3์ฃผ์ฐจ ํšŒ๊ณ   (8) 2021.08.20