์ง์ง GOD ํ์๋ค ๋๋ถ์ ์ข์ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์๋ค๊ณ ์๊ฐํ๋ค.
๐ 6ํ - 6 can do it (github)
๐ ๋ฉ์ธ ํ๋ก์ ํธ github ๋ฐ๋ก๊ฐ๊ธฐ
๐ ๋ฐฐํฌ ์ฌ์ดํธ ์ฃผ์
ํ๋ฆฌ ํ๋ก์ ํธ์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ค๋ ฅ์ด ๋งค์ฐ ๋ถ์กฑํ๋ค.
์ด๋ฒ ๋ฉ์ธ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ์ ๋ค๋ค ์ค๋ ฅ์ด ๋งค์ฐ ๋ฐ์ด๋ ์ต๋ํ ํผํด ์ฃผ์ง๋ง๊ณ ๋ด๊ฐ ๋งก์ ์
๋ฌด์ ์ต์ ์ ๋คํ์๊ณ ์๊ฐํ๋ค.
์ค๋ ฅ์ฐจ์ด๊ฐ ๋๋ค ๋ณด๋ ์ํตํ ๋ ์ดํด ์ ๋๋๊ฒ ๋ง์๋ค.
๋ด๊ฐ ๊ฐ์ฅ ๊ฐ๋จํ ์์
?์ ๊ฐ์ ธ๊ฐ์์๋ ๋ถ๊ตฌํ๊ณ ์์
์๋๊ฐ ๋๋ ธ๋ค.
๋ค๋ฅธ ๋ถ๋ค 1~2์ผ๋ฉด ๋๋๋๊ฑฐ ๋๋ 2~3์ผ ๊ฑธ๋ ธ๋ค. ๋๋ถ์ ์ด์กฐํจ์ด ์๊ธฐ๊ธฐ๋ ํ๊ณ ๋ฏผํ๋ฅผ ๋ผ์น๋๊ฒ ์๋๊น ์๊ฐ๋ ํ์๋ค.
OAuth axios interceptors๊ฐ ๋ญ๋ฐ...?
ํ์ ๊ณ์ ํํธ๋ฅผ ๋ด๋นํ๊ฒ ๋์๋ค. ํ ๋ฒ๋ ์ํด๋ด์ ํด๋ณธ๊ฒ๋ ์๊ณ ๊ดํ ๋น์ค์ด ํฐ ์์
ํ๋ค๊ฐ ๋ง์น ๊น๋ด ํ ๊ฒ๋ ์์๋ค.
ํ๋... ํ์ ๊ณ์ ์ด ์ด์ฉ๋ฉด ๊ฐ์ฅ ์ค์ํ๊ฒ ์๋๊น ์ถ๊ธฐ๋ ํ๋ค.
axios๋ ์๊ณ ์์์ง๋ง axios interceptors์ ๋ํด ์๋๊ฒ ๋ง์ด ์์๋ค.
๊ฐ๋จํ๊ฒ ๋งํ๋ฉด API ์์ฒญ, ์๋ต์ ๋ฏธ๋ฆฌ ๊ฐ๋ก ์ฑ ์ ์๋ ๋น๋๊ธฐ๋ก ์๋ํ๋ค.
์ด๋ฐ์ ์ง์ง OAuth ์์ฒญ, ์๋ต์์ ๋ง์ด ํค๋งธ๋ค...ใ
ํ์ ๋ถ๊ป 3~4๋ฒ ์ง๋ฌธํ๋๊ฑฐ ๊ฐ๋ค.(๊ฐ์ฌํฉ๋๋ค..ใ )
๊ณต๋ถํ์
https://axios-http.com/kr/docs/interceptors
ํ ํฐ ๋ฐ๊ธ ๋ณด๋ค ํ ํฐ ์ฌ๋ฐ๊ธ์ด ๋ ์ด๋ ค์
ํ ํฐ ์ฌ๋ฐ๊ธ ๋ก์ง ์์ฑํ๋๋ฐ ๋ ์ด๋ ค์ ๋ค.
์๋ง ๊ฑฐ์ ๋ชจ๋ ์์
์ด ๋๋ฌ์ ๋ ์งํํด์ ๊ทธ๋ฐ๊ฒ๋ ์๋๊น ์ถ์๋ค.
๊ฒฐ๊ตญ ๋ด๊ฐ ์ผ๋งค๋ก ์์ฑํ ๋ก์ง์ ์ฌ์ฉํ์ง ์๊ณ ๋ค๋ฅธ ํ์๋ถ์ด ๋ฌธ์ ํด๊ฒฐ์ ํด์ฃผ์
จ๋ค.
๋ด๊ฐ ์์
ํ์ด์ผ ํ๋ ์์ญ์ด์๋๋ฐ ๋ชปํด์... ์ฃ์กํ ๋ง์์ด ๋ค์๋ค.
React Query๊ฐ ๋ญ๋ฐ...?
์ ๋ง ์์ก์ ๋ดค๋ค.
๊ตฌ์กฐ๊ฐ useState, useEffect์ ๋น์ทํด์ ์์ฌํ์์ง๋ง...
์๊ฐ ๋ณด๋ค ์ดํดํ๊ณ ์ ์ฉํ๋๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ ธ๋ค.
fetching, caching, ์๋ฒ ๋ฐ์ดํฐ์์ ๋๊ธฐํ๋ฅผ ์ง์ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ํ๋ค.
๋งํ์๋ฉด useEffect, fethch ๋ฑ์ ์ญํ ์์ ๋ฒ์ ์ด ์๋๊น ์ถ๋ค.
๋ํ useQuery๋ง ์๋ฉด ๋๋์ค ์์์ง๋ง useMutate๋ ์์๋ค...
get, post, patch ๋ฑ ์์ฒญํ๋ ๋ฐฉ์์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ์ ์ฉํ๊ณ ์์ฑํ๋ค.
์ด๋ถ๋ถ์์ ๋ค๋ฅธ ํ์ ๋ถ๋ค์ด ์์ฑํ ๋ด์ฉ์ ๋ณด๊ณ ์ดํดํ๋๋ฐ
์ค๋ ์๊ฐ์ด ๊ฑธ๋ ธ๋ค.
๊ณต๋ถํ์
https://kyounghwan01.github.io/blog/React/react-query/basic/
https://velog.io/@kandy1002/React-Query-ํน-์ฐ์ด๋จน๊ธฐ
TypeScript error ๋๋ฌด ์ด๋ ค์...
ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ ์ฉํ๋ฉด์ ๋ณ์์ ํ์
์ด ๋ช
ํํ๊ณ ๊น๋ํด์ ธ์ ์ข์๋ค.
ํ๋ eslint, prettier์ ๊ฐ์ด ์ฌ์ฉํ๋ค ๋ณด๋ ํญ์ ๋นจ๊ฐ์ค์ด ๋ด๋ค.
์ด๋ฐ์๋ ํ์
์๋ฌ ์ก๋๋ฐ ์์
ํ๋ ์๊ฐ ๋ณด๋ค ๋ ๋ง์ ์๊ฐ์ ํฌ์ํ๊ธฐ๋ํ๊ณ
ํ์๋ถ๋ค๊ป ์์ฒญ๋ ๋ง์ด ํ์๋ค.
๋ํ ์ด๋ฒคํธ, axios ๋ฑ ํ์
์ฒ๋ฆฌ๋ฅผ ๋ค๋ฅด๊ฒ ํด์ผํ๋ ์ ์์ ์ฐพ์๋ณด๊ณ ์ ์ฉ๊น์ง ํ๋๋ฐ
์ด๋ํ ์๊ฐ ํฌ์๋ฅผ ๋ง์ด ํ๋ค.
๊ณต๋ถํ์
https://react.vlpt.us/using-typescript/01-practice.html
์ฝ๋ ๋ฆฌํฉํ ๋ง
์์ฑํ ์ฝ๋๊ฐ ์๋๊ณ ์๋์ง, ์๋ชป ์์ฑํ๊ณ ์๋์ง ์ ์ ์์๋ค.
์์
ํ ์ฝ๋์ ํ์
์คํฌ๋ฆฝํธ, eslint, prettier, ๋น๋ํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ ํ๋๋ฐ
๊ทธ ๋ ์ง์ง.. ๊ฑฐ์ ๋ฆฌํฉํ ๋ง ํด์ฃผ์
จ๋ค.
์ด๋ถ๋ถ ๋ํ ๊ฐ์ฌํ๊ธฐ๋ ํ๊ณ ๋ด๊ฐ ์์ง ๋ง์ด ๋ถ์กฑํ๊ตฌ๋ ์ถ๊ธฐ๋ ํ๋ ๋ถ๋ถ์ด์๋ค.
์ด์ฉ๋ฉด ๋๋ ์ง์ง ์ด์ด ์ข์๋ ์ผ์ด์ค๋ค.
๊ฐ์ด ํ์ด ํ๋ ํ์
จ๋ ๋ถ๊ป ๋จผ์ ๊ฐ์ด ํ์ง ์๊ฒ ๋๋ ์ ์๋ฅผ ์ฃผ์
จ๋ค.
์ ๋ง ๊ฐ์ฌํ๊ณ ํ ํธ์ผ๋ก ๊ฑฑ์ ๋ ๋ง์๋ค.
ํ๋ก ํธ์๋ ํ์ ๋ ํฌํจํด์ 3๋ช
์ธ๋ฐ ์ด์ค 2๋ถ์ด ์ ๋ง ์ํ์
์
๋๋ ๋ฏผํ๊ฐ ๋์ง ์์๊น ๋ผ๋ ์๊ฐ์ ๋ง์ด ํ๊ธฐ๋ ํ๊ณ
๋ฏ๊ฐ๋ฆผ์ด ์ฌํ๋ฐ ์ด๋ฏธ ์๋ก ์๊ณ ์๋ ๋ ๋ถ๊ณผ ์ ์ง๋ผ ์ ์์๊น ๋ผ๋ ์๊ฐ๋ ํ๋ค.
์ด๋ฐ์ ์ํต์ ์ด๋ ค์๋ ์์๋ค.
๋ํ๋ฅผ ํ๋๋ฐ ์ดํดํ ์ ์๋ ๋จ์ด๊ฐ ๋ง์๋ค. ์ด๋ฌํ ์ ๊ณผ
์์
์ ํผ์ ๋ค์ณ์ง๊ณ ์๋ ๋๋์ ๋ถ์๊ฐ ๋ฑ์ผ๋ก ์คํธ๋ ์ค ๋ฐ๊ธฐ๋ ํ๋ค.
๋คํํ๋ ํ์๋ถ๋ค ๋ค ์น์ ํ๊ฒ ์๋ ค์ฃผ์๊ณ ๋์์ ๋ง์ด ์ฃผ์๊ธฐ๋ ํ๋ค.
๋๋ถ์ ๋ด๊ฐ ๋ง์ด ๋ฐ์ ํ ์ ์์๋ ๊ณ๊ธฐ๊ฐ ๋๊ธฐ๋ ํ๋ค.(์งฑ์งฑ ํ์๋ถ๋ค๐)
๋ค๋ง ์์ฌ์ ๋๊ฑด
์ด์ฉ๋ฉด ๋์๊ฒ ์ ์ ํ์
จ๋ ์ด์ ?๊ฐ ๋์์ธ์ด ๋ง์ ๋น์ค์ ์ฐจ์งํ์ ํ
๋ฐ
๋์์ธ์ ์ข ๋ ์ ๋ฝ์ ์ ์์ง ์์์๊น... ๋ผ๋ ์๊ฐ์ด ๋ ๋ค.(์ด์ฉ๋ฉด ์์ฌ..?)
๋ํ ํ๋ฆฌํ๋ก์ ํธ ๋๋๊ณ ์กฐ๊ธ ์ด ์ ์๋ ์๊ฐ์ด ์์๋ค.
๊ทธ ๋ ๋ฏธ๋ฆฌ ํ์ต์ ํ์ง ์์๋ ์ ์ด ์์ฌ์ ๋ค.
๋์๊ฒ ์์ฌ์ ๋ ์ ๋ ๋ง๊ณ ์ข์๋ ์ ๋ ๋ง์๋ 4์ฃผ์๋ค.
๋น๋ก ๋ฉ์ธ ํ๋ก์ ํธ๋ ๋๋ฌ์ง๋ง
ํด๋น ํ๋ก์ ํธ๋ฅผ ๊ฐ์ ํ๊ณ ๋ฆฌํฉํ ๋ง์ ํ ๊ฒ ์ด๋ค.
6 can do it ํ์ ๋ถ๋ค ์ง์ง ์ง์ง ๊ณ ์ํ์ จ์ต๋๋ค!
์ ๋ง ๊ณ ์๋ง์ผ์ จ๊ณ ์ํ์ จ์ด์!!