01. 6์ฃผ์ฐจ (8/25 ~ 8/30)
โ 6์ฃผ์ฐจ ์งํ
๋น๋๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฆฌํ์คํธ ๋ณด๋ด๊ธฐ
React ์น ๊ฐ๋ฐ ์์ํ๊ธฐ
์คํ๋ฆฐํธ ๋ฏธ์ 4
์ฝ๋ฉ ํ ์คํธ ๋ฌธ์ ํ์ด
๋ฐ์ผ๋ฆฌ ํ ๋ฏธํ
์ํด๋ฆฌ ํ์ดํผ ์์ฑ
๋ฉํ ๋ง
๋ณด์ถฉํ์ต
๐ ํ๊ธฐ
๊ฐ์ - ๋น๋๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ
Promise ๊ฐ์ฒด, async/await, then ๋ฉ์๋ ์ฌ์ฉ๋ฒ ๋ฑ์ ๋ํด ํ์ตํ๋ค.
๊ฐ์๋ฅผ ํตํด ๋น๋๊ธฐ ์คํ ํ๋ฆ์ ๋ํด ์ด๋์ ๋ ์ดํดํ ์ ์์๊ณ ,
๋ณ๋ ฌ ์ฒ๋ฆฌ์ ๊ฐ์ด ํท๊ฐ๋ ธ๋ ๋ถ๋ถ๋ค์ ๋ฉํ ๋ง์ ํตํด ๋ณด์ํ ์ ์์๋ค.
๊ฐ์ - ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฆฌํ์คํธ ๋ณด๋ด๊ธฐ
AJAX ๊ฐ๋ ๊ณผ fetch(), axios ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ํ์ตํ๋ค.
์์ ์ axios๋ฅผ ์ฌ์ฉํด๋ณธ ๊ฒฝํ์ด ์์์ง๋ง,
๋น์์๋ fetch์ ๋น๊ตํ์ ๋ ์ด๋ค ์ด์ ์ด ์๋์ง ์ ๋ชฐ๋์๋ค.
์ด๋ฒ์ ๋ค์ axios ์ฌ์ฉ๋ฒ์ ์ตํ๋ฉด์ fetch๋ณด๋ค ์ด๋ค ์ ์์ ๋ ํธ๋ฆฌํ์ง ์ ์ ์์๊ณ ,
์ ๊ทธ๋์ ์์ ์ axios๋ฅผ ์ฌ์ฉํ๋๊ฒ ๋ ์ข๋ค๋ผ๊ณ ๋ฐฐ์ด๊ฑฐ๊ตฌ๋ ํ๊ณ ๊นจ๋ฌ์์ ์ป์๋ ๊ฒ ๊ฐ๋ค.
๊ฐ์ - React ์น ๊ฐ๋ฐ ์์ํ๊ธฐ
์ด๋ฒ ์ฃผ ํ๋ฐ๋ถํฐ React ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์์ํ๋ค.
์์ ์ ๋ฐฐ์ธ ๋๋ CRA๋ก ์์ํ๋๋ฐ,
์ด์ ๋ CRA๊ฐ deprecated(์๊ฐ๐..)๋๋ฉด์ vite๋ก ๊ธฐ์ด ์ธํ ์ ์งํํ๋ค.
์์ง ๋ง์ ๊ฐ์๋ฅผ ๋ฃ์ง ์์์ง๋ง ๋ฆฌ์กํธ ๊ธฐ์ด ๊ฐ๋ ์ ๋ค์ ํ์ตํ ์ ์์ด ์ ์ฉํ๋ค.
์คํ๋ฆฐํธ ๋ฏธ์ 4
์ด๋ฒ ์ฃผ์๋ ์คํ๋ฆฐํธ ๋ฏธ์ ์ ์งํํ๋ค.
์์ธํ ๋ฏธ์ ํ๊ธฐ๋ ๋ณ๋๋ก ์ ๋ก๋ ํ๋ค.
https://cocoding420.tistory.com/80
[์ฝ๋์ ์คํ๋ฆฐํธ FE 19๊ธฐ] ์คํ๋ฆฐํธ ๋ฏธ์ 4 ํ๊ธฐ
๐ ์คํ๋ฆฐํธ ๋ฏธ์ ์ฃผ์ ๋ฏธ์ 4๋ ๊ธฐ์กด ๋ฏธ์ ์์ ์์ ํ ๋ก๊ทธ์ธ, ํ์๊ฐ์ ํ์ด์ง์์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด์ ํผ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ด ์ฃผ์ ์๋ค. ๐ ์คํ๋ฆฐํธ ๋ฏธ์ ์งํ ๊ณผ์ ๐ฅ๏ธ ์ด์
cocoding420.tistory.com
์ฝ๋ฉ ํ ์คํธ ๋ฌธ์ ํ์ด
์ ๋ฒ ์ฃผ๋ถํฐ ๊พธ์คํ ์ฝ๋ฉ ํ ์คํธ ๋ฌธ์ ๋ฅผ ํ๊ณ ์๋ค.
์ด์ ์๊ณ ์๋ ๋ฉ์๋๋ ์ ํ์ฉํ๊ณ ์๋ ๊ฒ ๊ฐ์๋ฐ,
์ฌ์น์ฐ์ฐ์ผ๋ก ์ถฉ๋ถํ ํ ์ ์๋ ๋ฌธ์ ๋ฅผ
๋ฌธ์์ด์ด๋ ๋ฐฐ์ด ๋ฉ์๋๋ก ํ๊ณ ์๋ ๊ฒฝ์ฐ๊ฐ ์์ด
๊ทธ ๋ถ๋ถ์ ๋ณด์์ด ํ์ํ๋ค๊ณ ๋๊ผ๋ค.
๋ฐ์ผ๋ฆฌ ํ ๋ฏธํ , ์ํด๋ฆฌ ํ์ดํผ
์ด๋ฒ ์ฃผ ์ํด๋ฆฌ ํ์ดํผ ์ฃผ์ ๋ this ํค์๋์ ๋ ์์ปฌ ์ค์ฝํ์๋ค.
https://cocoding420.tistory.com/78
[JavaScript] this ํค์๋ ์ ๋ฆฌ
์๋ฐ์คํฌ๋ฆฝํธ์์ this๋ ํท๊ฐ๋ฆฌ๊ธฐ ์ฌ์ด ํค์๋์ด๋ค.์ ์ฌ์ฉํ๋์ง, ๋ฌด์์ ๊ฐ๋ฆฌํค๋์ง ์ดํดํ๊ธฐ๊ฐ ์ด๋ ต๋ค.์ด๋ฒ๊ธ์์๋ this์ ๋ํด ๊ฐ๋ ๋ถํฐ ๋ฐ์ธ๋ฉ ๊ท์น๊น์ง ์ ๋ฆฌํ ๊ฒ์ด๋ค. ๐ ํท๊ฐ๋ฆฌ๋ ์ฉ
cocoding420.tistory.com
https://cocoding420.tistory.com/79
[JavaScript] ๋ ์์ปฌ ์ค์ฝํ(Lexical scope) ์์๋ณด๊ธฐ
์ด๋ฒ ๊ธ์์๋ ๋ ์์ปฌ ์ค์ฝํ๊ฐ ๋ฌด์์ด๊ณ ,์๋ฐ์คํฌ๋ฆฝํธ์์ ์ด๋ป๊ฒ ๋์ํ๋์ง ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค. ๐ง ์ค์ฝํ๋ ๋ฌด์์ผ๊น?์ค์ฝํ(Scope)๋ ๋ณ์๋ ํจ์์ ์ ๊ทผํ ์ ์๋ ์ ํจ ๋ฒ์๋ฅผ ์๋ฏธํ๋ค.
cocoding420.tistory.com
this๋ ์ ๋ฆฌํ๋ฉด์ ์ด๋ ์ ๋ ์ดํดํ ๊ฒ ๊ฐ์๋ฐ,
๋ ์์ปฌ ์ค์ฝํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋์๊ณผ ๊น๊ฒ ์ฐ๊ด๋ ๊ฐ๋ ์ด๊ณ
ํด๋ก์ ์๋ ์ด์ด์ ธ ์์ด์ ๋ ์ด๋ ต๊ฒ ๋๊ปด์ก๋ค.
์์ง ์์ ํ ์ดํดํ์ง ๋ชปํ ๊ฒ ๊ฐ์์ ์ข ๋ ๊ณต๋ถ๊ฐ ํ์ํ ๊ฒ ๊ฐ๋ค.
ํํธ 1 ์ข ๋ฃ์ ํจ๊ป ํ ๋ฏธํ ๋ ์ด๋ฒ ์ฃผ๋ก ๋ง๋ฌด๋ฆฌ ๋์๋ค.
์ด์ ๋ ํ์๋ค๊ณผ ํธํด์ง๊ณ ์ ์์ด ๋ ์ํ๋ผ ์์ฌ์์ด ์์ง๋ง๐ฅฒ
์๋ก์ด ํ์์๋ ์ด์ฌํ ํด๋ด์ผ๊ฒ ๋ค.
๋ฉํ ๋ง
์ด๋ฒ ์ฃผ์ฐจ ๋ฉํ ๋ง์์๋ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๊ถ๊ธํ๋ ๋ถ๋ถ์ด๋ ํ์์ ๊ถ๊ธํ๋ ๋ถ๋ถ์ ์ง๋ฌธ ๋๋ ธ๋ค.
ํ์คํ ๊ฐ์์์๋ ์ ์ ์๋ ์ค๋ฌด์ ์ธ ์ด์ผ๊ธฐ๋ฅผ ๋ค์ ์ ์์ด์ ๋ง์ ๋์์ด ๋์๋ ๊ฒ ๊ฐ๋ค.
ํนํ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ก ์ ์ธ ๋ถ๋ถ(์๋ ๋ฐฉ์, ๊ฐ๋ ๋ฑ)์ ๊น๊ฒ ๋ค๋ฃจ์ง ์๋๋ฐ,
๋ฉํ ๋ง์ ํตํด ๋ณด์ํ ์ ์์ด์ ์ข์๋ค.
์์ฝ์ง๋ง ๋ฉํ ๋ง๋ ์ด๋ฒ ์ฃผ์ฐจ๋ฅผ ๋์ผ๋ก ๋ฉํ ๋์ด ๋ฐ๋๊ฒ ๋๋ค.
์์ผ๋ก ๋ง๋๊ฒ ๋ ์๋ก์ด ๋ฉํ ๋๊ป๋ ๊พธ์คํ ์ง๋ฌธํ๋ฉด์ ๋ฐฐ์๋๊ฐ์ผํ ๊ฒ ๊ฐ๋ค.
๋ณด์ถฉํ์ต
์๋ฐ์คํฌ๋ฆฝํธ ES6 ๋ฌธ๋ฒ๋ค์ ๋ค์ ์ง์ด์ฃผ์ จ๋ค.
๊ฐ์์ ์ฐ๊ฒฐ๋ ๋ด์ฉ์ ๋ณด์ถฉํ์ต์์ ๋ฐ๋ณตํด ๋ค์ผ๋ ๋ณต์ต์ด ๋์๊ณ ,
์ง๋ฌธ์ ๋ตํ ๋๋ ์ต๋ํ ์๋ ๋ฒ์์์ ์ ๊ทน์ ์ผ๋ก ์ฐธ์ฌํ๋ ค๊ณ ํ๋ค.
์ฌ์ค ๋ช ๋ฒ ๋ ๋๋ตํ ์ ์์๋๋ฐ ํ์ด๋ฐ์ ๋์ณ ๋งํ์ง ๋ชปํ ์ ๋ ์์๋ค.
๋ค์์๋ ์ข ๋ ์ ๊ทน์ ์ผ๋ก ์ํ ์ ์๊ฒ ๋ ธ๋ ฅํด๋ด์ผํ ๊ฒ ๊ฐ๋ค.
02. ๋ง๋ฌด๋ฆฌ + TMI
์ค๋์ ์คํ๋ฆฐํธ ํด์ผ์ด๋ผ ๋ณต์ต์ ํ๋ฉด์ ๋ฆ๊ฒ ํ๊ณ ๋ก์ ์์ฑํ๋ค.
์ฌ์ค ํ๊ณ ๋ก ์ฐ๋ ๊ฒ ์ ์ผ ์ด๋ ต๋ค.
์ผ๊ธฐ๋ ์ ์ฐ์ง ์๋ ํธ์ด๋ผ ๋ณต์ต๋ณด๋ค ํ๊ณ ๋ก ์ ๋ ๋ฐ ์๊ฐ์ด ๋ ๊ฑธ๋ฆฌ๋ ๊ฒ ๊ฐ๋ค.
๊ทธ๋๋ ์ด๋ ๊ฒ ๋จ๊ฒจ๋๋ฉด ๋ด๊ฐ ์ด๋ ์ด๋ฐ๊ฑธ ๋ฐฐ์ ๊ตฌ๋ ์ด๋ฐ ๊ณ ๋ฏผ์ ํ์๊ตฌ๋ ํ๋ฉด์
๋์์ด ๋ ๊ฑฐ๋ผ ๋ฏฟ๊ณ ๋๋ฆ ์ด์ฌํ ๊ธฐ๋กํ๊ณ ์๋ค.
TMI์ง๋ง ์ด๋ฒ ์ฃผ๋ถํฐ ๋งํ๊ธฐ ๊ฐ๊ฐ์ ํ๋ค.๐จ
๋งํ๊ธฐ๋ผ์ 8ํ์ ์ ๋๋ง ์๊ฐํ๋ฉด ๋์ด์ ํฌ๊ฒ ๋ถ๋ด์ ์์ ๊ฒ ๊ฐ์ง๋ง
๋ ์ํ๊ธฐ๊ฐ์ด๋ ๊ณผ์ ์ ์ถ ๊ธฐ๊ฐ๋๋ ์ ์ ์์ ์ ์์ผ๋ ์กฐ์ฌํด์ผํ ๊ฒ ๊ฐ๋ค.
๊ทธ๋๋ ํ๊ต ์์ ๋ณด๋ค๋ ์คํ๋ฆฐํธ ๊ณผ์ ์ ์ง์คํ๊ณ ์ถ์ด์
์ํ ๋น์ค์ ์ ์ ๊ณผ๋ชฉ ์์ฃผ๋ก ์๊ฐ์ ์ฒญ์ ํ๊ธด ํ๋ค...ใ
์๋ฌดํผ ์์ผ๋ก ์ผ์ ๊ด๋ฆฌ ์ํด์ ์ง๋ ๋ฐ๋ฆฌ์ง ์๊ณ
๊พธ์คํ๊ฒ ํ์ตํ ์ ์๋๋ก ๋ ธ๋ ฅํด์ผํ ๊ฒ ๊ฐ๋ค. (์ ๋ฐ)