๋งค์ผ ๋๊ฐ๊ธฐ ์ ์, ๊ธฐ์์ฒญ ๋ ์จ๋ฅผ ๋ณด๋ฉด์ ์ค๋์ ์ด๋ค ์ท์ ์ ์ด์ผ ํ ์ง ๊ณ ๋ฏผํ ์ ์ด ์์ ๊ฒ์ด๋ค! ์ฐ๋ฆฌ๋ ์ง์ญ ๊ธฐ๋ฐ์ ๋ ์จ ๊ณต์ ์ปค๋ฎค๋ํฐ๋ฅผ ๊ฐ๋ฐํ ๊ฒ์ด๋ค.
ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ Git์ผ๋ก ํ์ ํ๊ธฐ ์ํด ์ฐ๋ฆฌ๊ฐ ๊ฒฐ์ ํ ๋ธ๋์น ์ ๋ต์ GitHub flow์ด๋ค!
์ค๋ณต์ ๋ฐฉ์งํ๊ณ ์ฌ์ฌ์ฉ์ฑ์ ๋์ผ ์ ์๋ styled-components ๋ถ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์ ๐จ
๋ฐฑ์๋์ ๊ฐ๋ฐ์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ํ๋ก ํธ์๋๊ฐ API๋ก ์ค์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ฒ๋ผ Mockingํด์ ์์ ์ ์งํํ ์ ์๋๋ก ํ๋ MSW ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง๊ธ ๋ฐ๋ก ์๊ฐํ๊ฒ ๋ค๐คธโโ๏ธ
์ปจํ ์ด๋ ์ฌ์ด์ฆ ๋๋ ๋ฐ์ํ ์ฌ์ด์ฆ์ ๋ฐ๋ผ ์ฌ๋ฌ ์ด๋ฏธ์ง๋ค์ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ๋ค! ๊ทธ๋ฆฌ๊ณ ์ ์ฃผ๋ ๊ฐ๊ณ ์ถ๋ค(?)
ํ๋ก์ ํธ ๋๋ ๋๊น์ง ์์์ ์ผ ์ ๋ถํํด ^^^..
ํ์ด์ง์ ๋ฆฌ์คํธ๊ฐ ์๋ ๋ชจ๋ ๊ณณ์์ ์ฌ์ฉํด์ผ ํ๊ธฐ ๋๋ฌธ์ `Pagination`์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐ๋ก ๋ง๋ค ๊ฒ์ด๋ค.
๊ฐ ์ง์ญ๋ง๋ค ๋ ์จ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด OpenWeather API๋ฅผ ์ฌ์ฉํ์๋ค. ์ฌ๋ฌ ์ง์ญ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ๊ธฐ์ ๊ทธ ๊ณผ์ ์์ ์ฝ์ง์,, ์ข ํ๋ค. ๋์ ๊ฐ์ ์ฌ๋๋ค์ด ํค๋งค์ง ์๋๋ก(?) ๋ฐ์ดํฐ ์ฐ๋ํ๋ ๋ฐฉ๋ฒ์ ์์ฑํ๋ ค๊ณ ํ๋ค!
package.json ์ธ์ CRA ๊ณต์ ํํ์ด์ง์๋ ๋์ ์๋ http-proxy-middleware๊ฐ ์๋ค. ์ฌ๋ฌ ๊ฒฝ๋ก์ proxy ์ค์ ์ ์ปค์คํฐ๋ง์ด์ง ํ ์ ์๋ค.
netlify๊ฐ ํ๋ก์ ์ง์์ ํ ์ ์๋๋ก ์ธํ ์ ํด์ค์ผ ํ๋ค. ๋ฐ๋ผ์ netlify.toml ํ์ผ์ ํตํด proxy๋ฅผ ์ค์ ํ์ฌ api๋ฅผ ์ฒ๋ฆฌํ ๊ฒ์ด๋ค.
"์ค๋ ์ท ๋ญ ์ ์ง..?" ๊ณ ๋ฏผํ์ ์ ์์ผ์ ๊ฐ์? ๋ ์จ๊ฐ ์ด๋ค ์ง์ ๋ฐ๋ผ ๊ฐ๋๊ฑด์ ์ ์ด์ผ ํ ์ง, ๋ฐํ๋ง ์ ์ด์ผ ํ ์ง.. ๊ธฐ์์ฒญ์ ์จ๋๋ ์๋ฟ์ง๊ฐ ์์ฃ ! ๋งค์ผ ๋ ์จ์ ๋ง๋ ์ท์ฐจ๋ฆผ์ ๊ณต์ ํ๋ฉฐ ์์ ๋กญ๊ฒ ๋ํํ๋ ์ปค๋ฎค๋ํฐ, "๋ฐ์ ๋ด๋ด" ์๋น์ค๋ฅผ ๊ฐ๋ฐํ์ต๋๋ค!