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 ๊ธฐ๊ฐ์ด๋ผ์ ์ด๋ ค์์ด ์์ง ์์์ง๋ง
ํ๊ต ์์ ๋ฃ๊ณ ์์ ๋ฐ๋ก ์คํ๋ฆฐํธ ์ง๋๋ฅผ ๋๊ฐ๋ค๋ณด๋
ํ์คํ ํ์์๋ณด๋ค๋ ์ง์ค๋ ฅ์ด ๋จ์ด์ก๋ ๊ฒ ๊ฐ๋ค.
ํ์ง๋ง ๊ทธ๋๋ ํด์ผ์ง...ํ์ดํ