์ ๋ฒ์ฃผ ๊ธ์์ผ์ ๋์ผ๋ก 4์ฃผ๊ฐ์ ๊ธฐ์ ํ์ ์ด ๋์ด๋ฌ๋ค-! 4์ฃผ๋์ ํ์ฌ์์ ์ค์๊ฐ ์ฑํ ์น ๋ง๋ค์ด๋ณด๋ ๊ณผ์ ๋ฅผ ๋งก์๋๋ฐ, ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋๋ผ๊ณ ๋ฐฐ์ด ๊ฒ๋ค, ๊ทธ๋ฆฌ๊ณ ์ค์ ํ์ ์์ ์ ๋ฌด๊ฐ ์งํ๋๋ ๊ณผ์ ๋ค์ ์์์ ์ง์ผ๋ณด๋ฉฐ ๋ฐฐ์ ๋ ๊ฒ๋ค ๋ค ํ๋ฐ๋์ง ์๊ณ ์ ์ ์ด๋๊ณ ์ ํ
์ค์ฝํ๋ ์๋ณ์๊ฐ ์ ํจํ ๋ฒ์๋ฅผ ๋งํ๋ค. ๋ชจ๋ ์๋ณ์(๋ณ์ ์ด๋ฆ, ํจ์ ์ด๋ฆ, ํด๋์ค ์ด๋ฆ ๋ฑ)๋ ์์ ์ด ์ ์ธ๋ ์์น์ ์ํด ๋ค๋ฅธ ์ฝ๋๊ฐ ์๋ณ์ ์์ ์ ์ฐธ์กฐํ ์ ์๋ ์ ํจ ๋ฒ์๊ฐ ๊ฒฐ์ ๋๋ ๊ฒ. ์๋ณ์๋ฅผ ๊ฒ์ํ ๋ ์ฌ์ฉํ๋ ๊ท์น์ด๋ผ๊ณ ๋ ํจ. ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์ด๋ค
12์ฅ ํจ์ 12.1 ํจ์๋? ๐ง ํ
โ๏ธ ์์ ํ์ : ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ, ๊ฐ์ฒด ํ์ : ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๊ฐโ๏ธ ์์ ๊ฐ์ ๋ณ์์ ํ ๋นํ๋ฉด ๋ณ์(ํ๋ณด๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ)์๋ ์ค์ ๊ฐ์ด ์ ์ฅ ๋๋ค. ๊ฐ์ฒด๋ฅผ ๋ณ์์ ํ ๋นํ๋ฉด ๋ณ์(ํ๋ณด๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ)์๋ ์ฐธ์กฐ ๊ฐ์ด ์ ์ฅโ๏ธ ์์ ๊ฐ์ ๊ฐ๋ ๋ณ์๋ฅผ ๋ค๋ฅธ ๋ณ์์ ํ ๋นํ
git ์์ envํ์ผ ์์ ์ฃผ๊ธฐ์ฐธ๊ณ https://stackoverflow.com/questions/38983153/git-ignore-env-files-not-working
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ตฌ์ฑํ๋ ๊ฑฐ์ "๋ชจ๋ ๊ฒ"์ด ๊ฐ์ฒด. ์์ ๊ฐ์ ์ ์ธํ ๋๋จธ์ง ๊ฐ(ํจ์, ๋ฐฐ์ด, ์ ๊ท ํํ์ ๋ฑ)์ ๋ชจ๋ ๊ฐ์ฒด. 0๊ฐ ์ด์์ ํ๋กํผํฐ๋ก ๊ตฌ์ฑ๋ ์งํฉ์ด๋ฉฐ ํ๋กํผํฐ๋ key์ value๋ก ๊ตฌ์ฑ๋๋ค. ๐ ์์ํ์ ์ ๊ฐ์ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ(immutable va
์์ํ์ - ์ซ์ ํ์ , ๋ฌธ์์ด ํ์ , ๋ถ๋ฆฌ์ธ ํ์ , undefined ํ์ , null ํ์ , symbol ํ์ ๊ฐ์ฒด ํ์ - ๊ฐ์ฒด, ํจ์, ๋ฐฐ์ด ๋ฑ ๐ ์ซ์ ํ์ ์ ๋ชจ๋ ์ค์๋ก ์ฒ๋ฆฌ๋๋ค. ์ ์๋ง ํํํ๊ธฐ ์ํ ๋ฐ์ดํฐ ํ์ ๋ณ๋๋ก ์กด์ฌํ์ง ์์. Infinity(์์
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ ํต์ ๊ธฐ๋ฅ (1999๋ XMLHttpRequest๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅ)๊ตฌ๊ธ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๋น๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ(runtime environment). ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ธ๋ฌ
์(ํํ์ expression)์ด ํ๊ฐ(evaluate)๋์ด ์์ฑ๋ ๊ฒฐ๊ณผ ๐ ์ฐธ๊ณ ) ํ๊ฐ? ์์ ํด์ํด์ ๊ฐ์ ์์ฑํ๊ฑฐ๋ ์ฐธ์กฐํ๋ ๊ฒ.๐ ๊ฐ์ ํน์ง : ๋ฐ์ดํฐ ๊ฐ์ ๊ฐ์ง.๋ฉ๋ชจ๋ฆฌ์ 2์ง์ ์ฆ bit์ ๋์ด๋ก ์ ์ฅ๋๋ค. ์ฌ๋์ด ์ดํดํ ์ ์๋ ๋ฌธ์ ๋๋ ์ฝ์๋ ๊ธฐํธ๋ฅผ
4.1 ๋ณ์๋ ๋ฌด์์ธ๊ฐ? ์ ํ์ํ๊ฐ? ๐ง ๋ณ์๋? > ํ๋์ ๊ฐ์ ์ ์ฅํ๊ธฐ ์ํด ํ๋ณดํ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ ์์ฒด ๋๋ ๊ทธ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์๋ณํ๊ธฐ ์ํ ์ด๋ฆ. ๐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ๊ฐ์ ์ ์ฅํ๊ณ ์ฐธ์กฐํ๋ ๋ฉ์ปค๋์ฆ์ผ๋ก ๊ฐ์ ์์น๋ฅผ ๊ฐ๋ฆฌํค๋ ์์ง์ ์ธ ์ด๋ฆ. ๐ง ๋ณ์๋ ์
2์ฐจ ํ๋ก์ ํธ ๋ ๋ฆฌ๋์ค๋ฅผ ์จ๋จน์ด๋ณด์ง ๋ชปํ ์์ฌ์์ด ์ปธ๋ค. ๐ฅฒ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ํ ๋ ํญ์ state๋ฅผ ๋ด๋ ค์ฃผ๊ณ ๋ ๋ด๋ ค์ฃผ๊ณ , ๋ค์ ์ต์๋จ ๋ถ๋ชจ๋ก ๋์ด์ฌ๋ ค์ฃผ๊ณ ๋ณต์กํ๊ณ ๊ท์ฐฎ์ ์์ ๋ค์ ๋ง์ด ํ๋ค๋ณด๋, ๋ฆฌ๋์ค๋ ํน์ context API๋ฅผ ์ธ ์ค ์๋ค๋ฉด ๋ ํจ์จ์ ์ผ๋ก
ํ๊ฒฝ๋ณ์๋ค ๊ด๋ฆฌํด์ฃผ๋ .envํ์ผ ๋ฐ๋ก๋ง๋ค์ด์ฃผ๋ฉด, api key๋ฑ ๊ฐ์ธ์ ๋ณด๋ฅผ ์ง์ ์ ์ผ๋ก ๋ ธ์ถํ์ง ์๊ณ ํ์ผ ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค. .env๋ ํ์ผ์ ์ต์๋จ ๋ฃจํธ์ ๋ง๋ค์ด์ค ๊ฒ! ๐ ๋ฆฌ์กํธ ๋ด์์๋ REACT_APP์ ์์์ผ๋ก ์ ์ด์ค ๊ฒ๐ const ๋ฑ์ผ๋ก ๋ณ์๋ฅผ ๋ฐ๋ก ์
formData.append๋ฅผ ํ์ฉํด์ ์ด๋ฏธ์ง ์ ๋ก๋ํ๋ ๋ฒ
๊ธฐ์ ํ์ ์์ ๊ทธ๋๊ทธ๋๋๊ณผ ์๋กญ๊ฒ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ฒ ๋์๋ค(!)react, getstream API, firebase๋ฅผ ํ์ฉํ ์ฑํ ์น์ ๋ง๋๋ ํ๋ก์ ํธ์ด๋ค. ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ ๋ฐ๋ก ์๊ธฐ์ firebase๋ฅผ ํ์ฉํ์ฌ ์ธ์ฆ์ธ๊ฐ ํต์ ์ ์งํํ๊ณ , firebase ๋ด์ ์๋
์๋๋ ๊ฒ๋ง ๊ฐ์ 2์ฐจ ํ๋ก์ ํธ๊ฐ ๋์ด ๋ฌ๋ค. ์๊ฐ ์ฐธ ๋น ๋ฅด๋ค. ์ด๋์ 1,2์ฐจ ํ๋ก์ ํธ๊ฐ ๋๋๊ณ ๋ค์์ฃผ๋ฉด ๊ธฐ์ ํ์ ์ด๋ค. ์ด์ฐ๋์๊ฑด, ์ด๋ฒ 2์ฐจ ํ๋ก์ ํธ๋ฅผ ํ๋ฉฐ ๋๊ผ๋ ์ , ๋ฐฐ์ ๋ ์ ๋ฑ ์ง์ํ๊ฒ ์ ์ด๋ด๋ณด๊ณ ์ ํ๋ค. โ๏ธ ๋ฟ์ ํ๋ก์ ํธ ์น์ฌ์ดํธ ์ดฌ์ ๋งํฌ : https
๐ค ๋ค์คํํฐ ๋ก์ง ๊ตฌ์ํ๊ธฐ ์ด๋ฒ 2์ฐจ ํ๋ก์ ํธ์์ ์ฟผ๋ฆฌ์คํธ๋ง ๊ด๋ จํ ๊ธฐ๋ฅ ๊ตฌํ ๋ถ๋ถ์ ๋ด๋นํ๋ค. ๊ทธ ์ค์์๋ ๊ฐ์ฅ ๊ธฐ์ต์ ๋จ์๋ ๋ค์คํํฐ! ๊ตฌ์ํ ๋ก์ง, ์ฝ๋ ๊ณต์ ๊น์ง ํด๋ณด๊ณ ์ ํฉ๋๋ค--! ๐ง ํด๊ฒฐํด์ผํ๋ ๋ฌธ์
์ด๋ฒ 2์ฐจ ํ๋ก์ ํธ์์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์์ ๋ก์ด ์ธ ์ ์์๋ค(!)๋ ์ด์์ ๊ณผ์ ์์ ๊ตฌํํด๋ณด๊ณ ์ถ์๋ ๊ธฐ๋ฅ์ด ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๋ถ๋ถ์ด์๋ค. 1์ฐจ ํ๋ก์ ํธ ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ transformX ์ transition์ ํ์ฉํ๋๋ฐ, ์ด๋ฒ์๋ Styled Comp
๋ ์ปค๋งจ๋๋ค์ ๋ธ๋์น์ ๋ณ๊ฒฝ์ฌํญ์ ๋ค๋ฅธ ๋ธ๋์น์ ํฉ์น๊ธฐ ์ํด ๋ง๋ค์ด์ก๋ค. (But ๋ค๋ฅธ ๋ฐฉ์)โ๏ธMerge : main branch์์ commitํ ์์๋ค feature์ mergeํ ๋ ๊ทธ ์๊ฐ ๊ทธ๋๋ก commit ์ ์ฅ๋๋ค. (History ๊ทธ๋๋ก update๋๋ค)
Custom Hook์ ์ด๋ฆ์ด use๋ก ์์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์์ด๋ค.Custom Hook์ ์ฌ์ฉํ๋ฉด ์ง๊ธ๊น์ง ์ปดํฌ๋ํธ ๋ด๋ถ์ ํ ๋ฉ์ด๋ก ๊ฒฐํฉํ์ฌ ์ฌ์ฉํ๋ State์ Effect๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ๋ถ๋ฆฌํ์ฌ ์ฌ์ฉํ ์ ์๋ค.์์ ๋ง์ Hook์ ๋ง๋ค๋ฉด ์ปดํฌ๋ํธ ๋ก์ง์ ํจ์๋ก
๊ฐ๋ฐ์๋ก์ ์ฝ๋๋ฅผ ์งค ๋ ๊ณ ๋ คํด์ผํ ๊ฐ์ฅ ์ค์ํ ์์ ์ค ํ๋๋ ๋ฐ๋ก '๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ'์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์ง๋ ๊ฒ์ด๋ค. ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ๋ ์ฐ๋ฆฌ์ ์ฝ๋๊ฐ ๋จ์ ๋ณ๋ก ํ๋์ ๊ด์ฌ์ฌ๋ง ๊ฐ๋๋ก ํ๊ณ ๊ทธ ๊ด์ฌ์ฌ์ ๋ํด์๋ง ์ถฉ์คํ ๋์ํ๋๋ก ๋ง๋ค์ด์ผ ํ๋ค๋ ๋ป์ด๋ค.๐ ์ฆ ํ ์ฝ๋ ๋ด