๐Ÿƒโ€โ™‚๏ธ์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 3, 4 ๐Ÿ“ํšŒ๊ณ 

Annyยท2024๋…„ 8์›” 27์ผ
0

ํšŒ๊ณ 

๋ชฉ๋ก ๋ณด๊ธฐ
3/7

๐Ÿƒโ€์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 3

JS ์ค‘๊ธ‰ ์‹œ์ž‘

Event Listner & Handler

  • ๋“œ๋””์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‹œ์ž‘
  • ์ฝ”ํ…Œ๊ฐ€ ์•„๋‹Œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์œ„ํ•ด์„œ ์จ๋ณด๋Š” JS๋Š” ๋˜ ์ฒ˜์Œ์ด๋ผ์„œ ๋“œ๋””์–ด ์ด ์นœ๊ตฌ๊ฐ€ ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€ ์•Œ๊ฒŒ๋จ
  • ๋‘˜ ๋‹ค ๊ฐœ๋…์€ ์‰ฌ์›€. ํ•˜์ง€๋งŒ ๋ง‰์ƒ 100์ค„ ๋„˜์–ด๊ฐ€๋Š” ์ฝ”๋“œ๋ฅผ ์งœ๊ณ  ์žˆ๋‹ค๋ณด๋ฉด ํ—ท๊ฐˆ๋ ค ๋ฏธ์น˜๊ฒ ๋‹ค.
  • quick return์„ ํ™œ์šฉํ•ด์„œ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š”๊ฒƒ ๊นŒ์ง€ ํŒŒ์•…ํ–ˆ์Œ! ํ•˜์ง€๋งŒ ๋ฉ˜ํ† ๋‹˜์ฒ˜๋Ÿผ ์ฝ”๋“œ๋ฅผ ์ด์ผ€์ €์ผ€,,, ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ๋‹ค์–‘ํ•˜๊ฒŒ ์งœ๋Š” ๊ณผ์ •์€ ์ „ ๋ฉ์ฒญํ•ด์„œ ์ž˜ ๋ชป ํ•˜๊ฒ ์–ด์š”,,

Media Query

  • ์–ธ๋œป ๋ณด๊ธฐ์— ๋ณ„๊ฑฐ ์•„๋‹Œ๊ฒƒ ๊ฐ™์•„ ๋ณด์ด์ง€๋งŒ ์‚ฌ์‹ค์ƒ ์ œ์ผ ์‹œ๊ฐ„ ๋งŽ์ด ์žก์•„๋จน์Œ
  • ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์‚ฌ์ด์ฆˆ์— ๋”ฐ๋ผ์„œ ์ด๋ฏธ์ง€๋‚˜ ๋ฒ„ํŠผ์„ visible๊ณผ invisible์„ ์กฐ์ •ํ•˜๋Š”๊ฒŒ ์€๊ทผ ๊ท€์ฐฎ์•˜๋‹ค.
  • ๋ชจ๋ฐ”์ผ QA๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ, chrome ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ์ด ์กฐ์ฐจ ์ •ํ™•ํ•˜์ง€ ์•Š๋‹ค๊ณ  ํ•œ๋‹ค. ์–ด์ฉ์ง€

๐Ÿƒโ€์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 4

API ์š”์ฒญ ์ฃผ๊ณ  ๋ฐ›๊ธฐ

  • JS๋ฅผ ์ด์šฉํ•ด์„œ fetch, axios๋ฅผ ํ™œ์šฉํ•ด์„œ api ์ฃผ๊ณ  ๋ฐ›๊ธฐ๋ฅผ ํ•™์Šตํ•จ
  • ์‚ฌ์‹ค์ƒ ๋‚ด์šฉ ์ž์ฒด๋Š” ๊ฐ€์žฅ ํŒŒ์•…ํ•˜๊ธฐ ์‰ฌ์› ์Œ. ๋‹ค๋งŒ ๊ณ„์† ์—๋Ÿฌ ๋– ์„œ ๋‚˜ ํ˜ผ์ž ํ™”๋‚ด๊ณ  ์ž ๊น ์ฝ”๋“œ ์•ˆ๋ณด๋‹ค๊ฐ€ ์ฟจํƒ€์ž„ ์ฐจ๋ฉด ๋‹ค์‹œ ์ฝ”๋“œ ์น˜๊ธฐ๋ฅผ ๋ฐ˜๋ณตํ•จ.
  • ๋งˆ์ง€๋ง‰ ํ™•์ธํ•˜๊ณ  pr๋งŒ ์˜ฌ๋ฆฌ๋ฉด ๋˜๋Š”๋ฐ ๊ท€์ฐฎ์•„์„œ ๋ฐ๋“œ๋ผ์ธ๊นŒ์ง€ ๋ฏธ๋ฃจ๊ณ  ์žˆ๋‹คใ…Ž...

async์™€ await, promise

  • ์ด๋“ค์˜ ๋™์ž‘ ์ˆœ์„œ๊ฐ€ ์•„์ง๋„ ํ—ท๊ฐˆ๋ฆฐ๋‹ค.
  • ๋ฉ˜ํ† ๋ง ์‹œ๊ฐ„์— ๊ณต์œ  ์ฃผ์‹  ํŒŒ์ผ์„ ๋ณด๊ณ  ์ด๋“ค๋„ scope์— ๋”ฐ๋ผ ์ง„ํ–‰๋˜๋Š” ์ˆœ์„œ๊ฐ€ ๋˜ ๋‹ค๋ฆ„์„ ๋ฐฐ์›€

CallStack(๋™๊ธฐ ์ž‘์—…) -> MicrostackQueue(Promise) -> MacrostackQueue(timer ๋“ฑ๋น„๋™๊ธฐ ์ž‘์—…) ์ˆœ์„œ๋กœ ์ด๋ฃจ์–ด์ง

์ดํ‰

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

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