[์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 7์ฃผ์ฐจ ํšŒ๊ณ ๋ก

2025. 9. 7. 16:56ยท๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™/์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ
๋”๋ณด๊ธฐ

01. 7์ฃผ ์ฐจ (9/2 ~ 9/6)

โœ… 7์ฃผ์ฐจ ์ง„ํ–‰

React ์›น ๊ฐœ๋ฐœ ์‹œ์ž‘ํ•˜๊ธฐ
React๋กœ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ
์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๋ฌธ์ œ ํ’€์ด
๋ฐ์ผ๋ฆฌ ํŒ€ ๋ฏธํŒ…
์œ„ํด๋ฆฌ ํŽ˜์ดํผ ์ž‘์„ฑ
๋ฉ˜ํ† ๋ง
๋ณด์ถฉํ•™์Šต

๐Ÿ‘€ ํ›„๊ธฐ

๊ฐ•์˜ - React ์›น ๊ฐœ๋ฐœ ์‹œ์ž‘ํ•˜๊ธฐ

์ €๋ฒˆ ์ฃผ๋ถ€ํ„ฐ ๋“ฃ๊ธฐ ์‹œ์ž‘ํ–ˆ๋˜ ๋ฆฌ์•กํŠธ ์›น ๊ฐœ๋ฐœ ์‹œ์ž‘ํ•˜๊ธฐ ๊ฐ•์˜๋ฅผ ๋ชจ๋‘ ๋“ค์—ˆ๋‹ค.

useState ์œ„์ฃผ์˜ ๋‚ด์šฉ์ด์—ˆ๊ณ , ๋งˆ์ง€๋ง‰์—๋Š” S3๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•๊นŒ์ง€ ๋‹ค๋ค˜๋‹ค.

 

๋‹ค๋งŒ ๋‚ด๊ฐ€ ์˜ˆ์ „์— AWS๋ฅผ ๊ฐ€์ž…ํ•ด ๋‘์–ด์„œ ๋ฐ”๋กœ ์œ ๋ฃŒ๋กœ ์ „ํ™˜๋˜๋Š” ๋ฐ”๋žŒ์—

์ง์ ‘ ์‹ค์Šต์„ ๋”ฐ๋ผํ•ด๋ณผ ์ˆ˜๋Š” ์—†์—ˆ์ง€๋งŒ ๊ฐ•์˜ ๋‚ด์šฉ์„ ๋ณด๋ฉด์„œ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ •๋ฆฌ๋งŒ ํ–ˆ๋‹ค.

๋‚˜์ค‘์— ์‹ค์ œ๋กœ ๋ฐฐํฌํ•  ์ผ์ด ์ƒ๊ธฐ๋ฉด ๊ผญ ํ™œ์šฉํ•ด ๋ด์•ผ๊ฒ ๋‹ค.

 

๊ฐ•์˜ - React๋กœ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ

React๋กœ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ ๊ฐ•์˜์—์„œ๋Š” ์ œ๊ณตํ•ด ์ค€ ์‹ค์Šต์šฉ API ์ฃผ์†Œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ 

์ •๋ ฌ๊ณผ ํŽ˜์ด์ง€ ๋„ค์ด์…˜, ์—๋Ÿฌ, ๋กœ๋”ฉ ์ฒ˜๋ฆฌ๋ฅผ ๋‹ค๋ค˜๋‹ค.

 

์•„์ง ๋‹ค ๊ฐ•์˜๋ฅผ ๋“ฃ์ง€ ๋ชปํ•ด์„œ ์ด์–ด์ง€๋Š” ๋‚ด์šฉ์€ ๋‹ค์Œ ์ฃผ์— ๊ณ„์† ์ˆ˜๊ฐ•ํ•  ์˜ˆ์ •์ด๋‹ค.

 

์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๋ฌธ์ œ ํ’€์ด

์ด๋ฒˆ ์ฃผ์—๋„ ์–ด๊น€์—†์ด ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๋ฌธ์ œ๋ฅผ ํ’€์—ˆ๋‹ค.

์ด๋ฒˆ์— ๊นƒํ—ˆ๋ธŒ์— ๋ฐฑ์ค€ ๋ฑƒ์ง€๋„ ์ถ”๊ฐ€ํ–ˆ๋Š”๋ฐ, ๊ฒฝํ—˜์น˜๊ฐ€ ์ฐจ๋Š” ๊ฑธ ๋ณด๋‹ˆ๊นŒ ๊ดœํžˆ ๋” ์—ด์‹ฌํžˆ ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

์•„์ง์€ ๋ธŒ๋ก ์ฆˆ 5์ด์ง€๋งŒ, ์•ž์œผ๋กœ ๋” ์—ด์‹ฌํžˆ ํ•ด์„œ ์ฐจ๊ทผ์ฐจ๊ทผ ์˜ฌ๋ผ๊ฐ€์•ผ๊ฒ ๋‹ค.

 

๋ฌธ์ œ๋ฅผ ํ’€๋ฉด์„œ ๋А๋‚€ ์ ์€ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ’€๊ธฐ ํŽธํ•˜๊ฒŒ ์ž˜ ์„ธํŒ…๋˜์–ด ์žˆ์–ด์„œ ํŽธํ•œ๋ฐ

๋ฐฑ์ค€์€ Node.js๋กœ ํ’€์ดํ•ด์•ผ ํ•ด์„œ ์•„์ง ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ถ€๋ถ„๋“ค์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

๊ฒŒ๋‹ค๊ฐ€ ๋ช‡๋ช‡ ๋ฌธ์ œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ

/dev/stdin์„ 0์œผ๋กœ ๋ฐ”๊ฟ”์„œ ํ’€์–ด์•ผ ํ•œ๋‹ค๋“ ์ง€ ๋ญ”์ง€ ๋ชจ๋ฅผ ๋ถ€๋ถ„๋“ค์ด ์žˆ์–ด์„œ

์•„ ๊ทธ๋ž˜์„œ ๋‹ค๋“ค ํŒŒ์ด์ฌ์œผ๋กœ ํ‘ธ๋Š” ๊ฑด๊ฐ€๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค๊ธฐ๋„ ํ–ˆ๋‹ค.

 

๋ฐ์ผ๋ฆฌ ํŒ€ ๋ฏธํŒ…

์ด๋ฒˆ ์ฃผ๋ถ€ํ„ฐ ํŒŒํŠธ 2๊ฐ€ ์‹œ์ž‘๋˜๋ฉด์„œ ์ƒˆ๋กœ์šด ํŒ€์›๋“ค๊ณผ ํŒ€ ๋ฏธํŒ…์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์ด์ „์— ํ•ด๋ดค๋˜ ๋•๋ถ„์ธ์ง€ ๋งจ ์ฒ˜์Œ์— ์‹œ์ž‘ํ•  ๋•Œ๋ณด๋‹ค๋Š” ํŒ€ ๋ฏธํŒ…์— ๊ธˆ๋ฐฉ ์ ์‘ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

 

์ด๋ฒˆ ํŒ€ ๋ฏธํŒ…์—์„œ notebookLM์ด๋ผ๋Š” ํˆด์„ ํŒ€์›๋ถ„๊ป˜์„œ ์•Œ๋ ค์ฃผ์…”์„œ ์‚ฌ์šฉํ•ด ๋ดค๋Š”๋ฐ

๋„ˆ๋ฌด ์œ ์šฉํ•ด์„œ ์•ž์œผ๋กœ๋„ ์ž์ฃผ ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค.

 

์œ„ํด๋ฆฌ ํŽ˜์ดํผ

์ด๋ฒˆ ์ฃผ ์œ„ํด๋ฆฌ ํŽ˜์ดํผ๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹๊ณผ AJAX์˜€๋‹ค.

https://cocoding420.tistory.com/82

 

[JavaScript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹

โฑ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ (setTimeout)// 1๋ฒˆlet num = 1;// 2๋ฒˆsetTimeout(() => { num = 2;}, 0);// 3๋ฒˆnum = 3;console.log(num);์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด console.log(num)์€ ๋ฌด์—‡์„ ์ถœ๋ ฅํ• ๊นŒ?console.log(num) // 3๊ฒฐ๊ณผ๋Š” 3์ด ์ถœ๋ ฅ

cocoding420.tistory.com

https://cocoding420.tistory.com/83

 

[Javascript] AJAX ์•Œ์•„๋ณด๊ธฐ

๐Ÿง AJAX๋ž€?AJAX๋Š” Asynchronous JavaScript and XML์˜ ์•ฝ์ž๋กœ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์„œ๋ฒ„์™€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ๋Šฅ์„ ๋งํ•œ๋‹ค.AJAX๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ œ๊ณตํ•˜๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ๋™์ž‘ํ•œ๋‹ค

cocoding420.tistory.com

๋น„๋™๊ธฐ ํ•จ์ˆ˜์˜ ์ž‘๋™ ์ˆœ์„œ๋ฅผ ์ •๋ฆฌํ•˜๋ฉด์„œ ์ฐธ๊ณ ํ•œ ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ๋Š”๋ฐ

๊ทธ ์‚ฌ์ดํŠธ๋ฅผ ๊ณ„์† ๋ณด๋‹ค ๋ณด๋‹ˆ ํ™•์‹คํžˆ ์ดํ•ดํ•˜๋Š”๋ฐ ํฐ ๋„์›€์ด ๋˜์—ˆ๋‹ค.

 

AJAX ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ์ด๋ก ๊ณผ ์‹ค์ œ ํ™œ์šฉ ๋ฐฉ์‹์„ ์ค‘์‹ฌ์œผ๋กœ ์ •๋ฆฌํ–ˆ๊ณ 

ํŠนํžˆ ์ง€๊ธˆ์€ axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋“ค์–ด์„œ axios ์˜ˆ์ œ๋ฅผ ์ค‘์‹ฌ์œผ๋กœ ์ •๋ฆฌํ–ˆ๋‹ค.

 

๋ฉ˜ํ† ๋ง

์ด๋ฒˆ ์ฃผ๋ถ€ํ„ฐ ์ƒˆ๋กœ์šด ๋ฉ˜ํ† ๋‹˜๊ณผ ๋ฉ˜ํ† ๋ง์„ ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

์ด์ „ ๋ฉ˜ํ† ๋ง์—์„œ๋Š” ์งˆ๋ฌธ ์œ„์ฃผ๋กœ ์ง„ํ–‰๋˜์—ˆ๋Š”๋ฐ

์ด๋ฒˆ ๋ฉ˜ํ† ๋ง์—์„œ๋Š” ์งˆ๋ฌธ์ด ๋๋‚˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ ๋‹ค์ด๋ธŒ ๋‚ด์šฉ์„ ์„ค๋ช…ํ•ด ์ฃผ์…จ๋‹ค.

 

์‚ฌ์‹ค ๋”ฅ ๋‹ค์ด๋ธŒ ์ฑ…์„ ์‚ฌ๋‘๊ณ  ๊ทธ ๋‘๊บผ์šด ๋ถ„๋Ÿ‰ ๋•Œ๋ฌธ์— ๋ฐฉ์น˜๋ฅผ ๋งŽ์ด ํ–ˆ์—ˆ๋Š”๋ฐ

์ด๋ฒˆ ๊ธฐํšŒ์— ์ฝ์œผ๋ฉด์„œ ๋ฉ˜ํ† ๋ง์—์„œ ์„ค๋ช…๊นŒ์ง€ ๋“ค์œผ๋‹ˆ ์ข€ ๋” ์ดํ•ด๊ฐ€ ์ž˜๋˜๊ณ  ๋„์›€์ด ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

 

๋ณด์ถฉํ•™์Šต

์ด๋ฒˆ ์ฃผ ๋ณด์ถฉ ํ•™์Šต์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ถˆ๋ณ€์„ฑ, ์–•์€ ๋ณต์‚ฌ, ๋น„๋™๊ธฐ ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ค˜๋‹ค.

์œ„ํด๋ฆฌ ํŽ˜์ดํผ ์ฃผ์ œ์™€ ๊ฒน์น˜๋Š” ๋ถ€๋ถ„์ด ๋งŽ์•„์„œ ๋ณต์Šตํ•˜๋Š” ๋А๋‚Œ์œผ๋กœ ์ •๋ฆฌํ•ด ๋ณผ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

 

ํŠนํžˆ ๋ถˆ๋ณ€์„ฑ ๊ด€๋ จํ•ด์„œ immer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถ”์ฒœํ•ด ์ฃผ์…จ๋Š”๋ฐ

๋‚˜์ค‘์— ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ ๊ผญ ํ™œ์šฉํ•ด ๋ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

์ผ์ผ์ด ์–•์€ ๋ณต์‚ฌ๋ฅผ ํ•ด์ฃผ์ง€ ์•Š์•„๋„ ๋ผ์„œ ์ƒ๋‹นํžˆ ์œ ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค.

 

02. ๋งˆ๋ฌด๋ฆฌ + TMI

์˜ˆ์ „์— ๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ๋ฐฐ์› ์„ ๋•Œ๋Š” ์‚ฌ์‹ค ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ 

์–ด๋–ป๊ฒŒ๋“  ๋™์ž‘ํ•˜๊ฒŒ๋งŒ ๋งŒ๋“ค์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

์•ฝ๊ฐ„ ์˜ˆ์ „ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์ด๋Ÿฐ ๋А๋‚Œ...

 

ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ๊ทธ๋ž˜๋„ ์–ด๋А ์ •๋„ ์ดํ•ดํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋‹ˆ๊นŒ

ํ™•์‹คํžˆ ๋” ์žฌ๋ฐŒ๊ฒŒ ๋А๊ปด์ง€๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ์ด๋ฒˆ ์ฃผ ๋“œ๋””์–ด ์›์น˜ ์•Š์€ ๊ฐœ๊ฐ•์„ ํ•ด์„œ..๐Ÿฅน

ํ•™๊ต์™€ ์Šคํ”„๋ฆฐํŠธ๋ฅผ ์ฒ˜์Œ์œผ๋กœ ๋ณ‘ํ–‰ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. 

 

์ด๋ฒˆ ์ฃผ๋Š” OT ๊ธฐ๊ฐ„์ด๋ผ์„œ ์–ด๋ ค์›€์ด ์žˆ์ง„ ์•Š์•˜์ง€๋งŒ

ํ•™๊ต ์ˆ˜์—… ๋“ฃ๊ณ ์™€์„œ ๋ฐ”๋กœ ์Šคํ”„๋ฆฐํŠธ ์ง„๋„๋ฅผ ๋‚˜๊ฐ€๋‹ค๋ณด๋‹ˆ

ํ™•์‹คํžˆ ํ‰์ƒ์‹œ๋ณด๋‹ค๋Š” ์ง‘์ค‘๋ ฅ์ด ๋–จ์–ด์กŒ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

 

ํ•˜์ง€๋งŒ ๊ทธ๋ž˜๋„ ํ•ด์•ผ์ง€...ํŒŒ์ดํŒ…

 

 

728x90
'๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™/์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 6์ฃผ์ฐจ ํšŒ๊ณ ๋ก
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 4 ํ›„๊ธฐ
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 5์ฃผ์ฐจ ํšŒ๊ณ ๋ก
  • [์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 3 ํ›„๊ธฐ
_์ด์•Ž
_์ด์•Ž
๊ณต๋ถ€ ๊ธฐ๋ก ๋ธ”๋กœ๊ทธ
  • _์ด์•Ž
    ๊ณต๋ถ€
    _์ด์•Ž
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • โœ๏ธ ๋ชจ๋“  ๊ธ€ (50) N
      • ๐Ÿ“š ํ”„๋ก ํŠธ์—”๋“œ (36) N
        • React (9) N
        • HTML_CSS (9)
        • Javascript (13)
        • git_github (4)
        • Web (1)
      • ๐Ÿ‘€ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™ (10)
        • ์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ 19๊ธฐ (10)
      • โš™๏ธ etc. (4)
  • ๋งํฌ

    • ๐Ÿ‘‹ GitHub
    • ๐Ÿง ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๊ธฐ๋ก
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
  • ์ธ๊ธฐ ๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.4
_์ด์•Ž
[์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE 19๊ธฐ] 7์ฃผ์ฐจ ํšŒ๊ณ ๋ก
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”