์์ํ๊ฒ ํ์ฅ๊ฐ์ด ๋๊ปด์ง๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ
๋ฌด์์ ์ฝ๋ฉ์ ์์ํด ์ผํ๋ชฐ ์๋น์ค ์ ์๊น์ง! ๐ฉณ
ํ๋์ ์๋น์ค๋ฅผ
์์ฑํ๊ธฐ๊น์ง์ ์ฌ์ ๐ข
๋ณธ ๊ฐ์๋ ์๊ฐ์๋ค๊ณผ ํจ๊ป ๋ผ์ด๋ธ๋ก ์งํ๋ ๊ฐ์๋ก, ๋น์ฅ ํ์ํ ๋ด์ฉ๋ง์ ๋น ๋ฅด๊ฒ ์ฐพ์๋ด์ด ์ ์ฉํฉ๋๋ค.
๊ฐ๋ฐ ๊ณผ์ ์์ ์ฒํ๊ฒ ๋๋ ๋ค์ํ ๋ฌธ์ ์ํฉ๋ค์ ๊ณ ๋ฏผํ๊ณ ํด๊ฒฐํด๋๊ฐ๋ ๊ณผ์ ์ ์ฌ๊ณผ์์ด ๋ณด์ฌ๋๋ฆฝ๋๋ค.
์ด ๊ฐ์๋ฅผ ํตํด ๋ฌด์์ ์ฝ๋ฉ์ ์์ํด๋ ์ด๋ป๊ฒ๋ ์์ฑํด๋ผ ์ ์๋ค๋ ๊ฒ์ ๋ณด์ฌ๋๋ฆฌ๊ณ ์ถ์ต๋๋ค.
์ด๋ก์จ ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค์ด๋ณด๋ ๊ฒ์ ์ด๋ ค์์ ๊ฒช๋ ์ทจ์ค์ ๋๋ ์ฃผ๋์ด ๋ถ๋ค๊ป ์ฉ๊ธฐ๋ฅผ ๋๋ฆฌ๊ณ ์ ํฉ๋๋ค.
์ ์ฒด ์ฝ๋๋ ๊นํ์ ๊ณต๊ฐ๋์ด ์์ผ๋ ์ฐธ๊ณ ํด์ฃผ์ธ์!
"๋ฆฌ์กํธ ํ์ต์ ํ์ง๋ง ๋ง์ ํผ์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ค๊ณ ํ๋ ๋ง๋งํด์.
๋จ๋ค์ ์ด๋ป๊ฒ ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ํ๊ณ ์๋์ง๋ ๊ถ๊ธํด์."
-ํ๋ก ํธ์๋ ์ทจ์
์ค๋น์-
"๋ฐฑ์๋ ์ชฝ ์ง์์ด ์ ํ ์์ด ๊ฐ๋ฐ์ ์๊ฐ๋ง ํด๋ ๋ง๋งํ๊ณ ,
ํ๋ก์ ํธ ์งํ์ ํ๊ณ๋ฅผ ๋๊ปด์."
-์ฃผ๋์ด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์-
"์ฝ๋ฉํ๋ค ๋งํ์ ๋ ์ด๋ป๊ฒ ์ฒ๋ฆฌํด์ผ ํ ์ง ๋ชฐ๋ผ ์ฉ์ฉ๋งค์.
์ถ๊ฐ์ ์ผ๋ก GraphQL๊ณผ BFF๋ฅผ ์ฐ์ตํด๋ณด๊ณ ์ถ์ด์."
-ํ๋ก ํธ์๋ ๊ฐ๋ฐ์-
๋ผ์ด๋ธ์ฝ๋ฉ์์
๋งค์ผ ํ๋์ฉ ๋ฐฐ์์ ๐ฅ
1์ผ์ฐจ
- ํด๋ผ์ด์ธํธ ํ๊ฒฝ์ธํ
(vite), ๋ผ์ฐํฐ ์ฒ๋ฆฌ
- ์ํ๋ชฉ๋ก ๋ฐ ์์ธํ์ด์ง ์์ฑ
- React Query ์บ์์ ์ฑ
- GNB ์์ฑ
2์ผ์ฐจ
- Mock Service Worker ๋์
- ์ํ๋ชฉ๋ก ๋ฐ ์ฅ๋ฐ๊ตฌ๋ mock API ์์ฑ
- ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง ์์ฑ
3์ผ์ฐจ
- ์ฅ๋ฐ๊ตฌ๋ API ์ ์ฉ
- invalidateQueries vs. ๋๊ด์ ์
๋ฐ์ดํธ
- ์ฅ๋ฐ๊ตฌ๋ ์ญ์ ๋ฐ ์ ํํ๊ธฐ ๊ธฐ๋ฅ ๊ตฌํ
4์ผ์ฐจ
- ์ฅ๋ฐ๊ตฌ๋ ์ํ๊ด๋ฆฌ (recoil)
- ๊ฒฐ์ ํ์ด์ง
5์ผ์ฐจ
- ๋ชจ๋
ธ๋ ํฌ ๋์
(yarn workspace)
- ์๋ฒํ๊ฒฝ์ค์
- schema ๋ฐ resolver ์ ์
6์ผ์ฐจ
- json DB ์์ฑ
- ์๋ฒ ๋ณ๊ฒฝ์ฌํญ ํด๋ผ์ด์ธํธ์ ๋ฐ์
7์ผ์ฐจ
- ๋ฌดํ์คํฌ๋กค- ์๋ฒ ์์
- useInfiniteQuery
- intersectionObserver
8์ผ์ฐจ
- ์ด๋๋ฏผ API ์์ฑ
- ์ด๋๋ฏผ ํ์ด์ง- ๋ชฉ๋ก, ์ํ ์ถ๊ฐ, ์์ , ์ญ์ ๊ธฐ๋ฅ ๊ตฌํ
10์ผ์ฐจ
- Firebase ์ ์ฉ ๋ง๋ฌด๋ฆฌ ๋ฐ ๋ฐฐํฌ
๐ 10์ผ ๋์ ์ง์ ๋ถ๋ชํ๋ฉฐ ๋ฐฐ์ฐ๋ ์ฝ๋ฉ์ผ๋ก ์ผํ๋ชฐ ์๋น์ค๋ฅผ ์ ์ํด๋ด
๋๋ค.
๊ฐ์๋ฅผ ๋ค ๋ค์ ํ
์๊ฐ์์ ๋ชจ์ต ๐
์ค์ค๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ์ ์ถฉ๋ถํ ์ง์์ ์ต๋ํ ์ ์์ต๋๋ค.
ํ๋ก์ ํธ ์งํ๊ณผ์ ์์ ๋ง๋๋ ๋ค์ํ ๋ฌธ์ ์ํฉ์ ํด๊ฒฐํ ํ์ด ์๊น๋๋ค.
์ค๋ฌด ๊ฒฝ๋ ฅ 9๋
์ฐจ์ ๋ค์ํ ๋
ธํ์ฐ๋ฅผ ์๋์์ด ๋๋ ๋๋ฆด๊ฒ์.
์ผ๋จ ๋ฌด์์ ํ๋ก์ ํธ๋ฅผ ์์ํด์ ๋ฌธ์ ์ํฉ์ ๋ถ๋ชํ ๋๋ง๋ค
๊ฒ์, ๋๋ฒ๊น
๋ฐ ์จ๊ฐ ์ถ์ธก์ ์ด๋์ํ์ฌ ์ด๋ป๊ฒ๋ ํด๊ฒฐํด๋๊ฐ๋ ๋ฒ์ ์๋ ค๋๋ฆฝ๋๋ค.
Q&A ๐ฌ
Q. ๊ฐ์ ์๊ฐ์ด ๊ฐ๋ฅํ ์์ค์ด ๊ถ๊ธํด์.
๋ณธ ๊ฐ์์์๋ ๋ฆฌ์กํธ๋ ํ์
์คํฌ๋ฆฝํธ์ ๋ํ ๊ธฐ๋ณธ์ง์์ ๋ณ๋๋ก ๋ค๋ฃจ์ง ์๊ธฐ์ ์ด๋ ์ ๋ ํ์ต์ด ๋์ด์๋ ์ํ์ฌ์ผ ์ํํ ์๊ฐ์ด ๊ฐ๋ฅํ ๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ง๋ง ๊ทธ ๋ฐ์ ๋ค๋ฅธ ์ง์๋ค๊น์ง ์๊ตฌ๋๋ ์ ๋๋ ์๋๋ฉฐ, ๋ฌด์์ ๋ฃ๊ณ ์๊ฐํ๋ฉฐ ๋ฐ๋ผํ์๋ค๋ณด๋ฉด ์์ฐ์ค๋ฝ๊ฒ ์ต๋ํ์ค ์ ์์ด์.
Q. ์ด๋ก ๋ ๊ฐ์ ๋ด์ฉ ์ค ํฌํจ๋์ด ์๋์?
์ค๊ฐ์ค๊ฐ ํ๋ก์ ํธ ์งํ์ ํ์ํ ๋งํผ์ ์ง์์ ์๋ ค๋๋ฆฌ๊ฑฐ๋, ์์ ์ดฌ์ ์ ์ฐธ์ฌํ๋ ๋ฉค๋ฒ๋ถ๋ค์ ์ง๋ฌธ์ ์ค์๊ฐ์ผ๋ก ๋ต๋ณ์ ๋๋ฆฌ๋ ๋ด์ฉ๋ค์ด ํฌํจ๋์ด ์์ต๋๋ค. ๊ทธ ์ด์์ ์์ธํ ์ด๋ก ์ค๋ช
์ ์๊ธฐ ๋๋ฌธ์ ์ฐธ๊ณ ํด์ฃผ์ธ์!
Q. ์ด ๊ฐ์ ๋ด์ฉ์ด ํฌํธํด๋ฆฌ์ค๋ก ์ ํฉํ๊ฐ์?
์คํ์ผ๋ง์ ์ต์ํ์ผ๋ก ์ค์ด๊ณ ๊ฐ๋ฐ์๋ง ์ง์คํ๊ณ ์ ํ๊ธฐ ๋๋ฌธ์ ๋ณธ ๊ฐ์ ๋ด์ฉ๋ง์ผ๋ก๋ ํฌํธํด๋ฆฌ์ค๋ก ์ผ์๋งํผ์ ํ๋ฆฌํฐ๋ฅผ ์ป๊ธฐ๋ ํ๋ญ๋๋ค. ๋ค๋ง, ๋ณธ ๊ฐ์๋ฅผ ํตํด์ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ์ ์ถฉ๋ถํ ๋
ธํ์ฐ๋ฅผ ์ป์ด๊ฐ์ค ์ ์์ผ๋ฆฌ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
Q. ํน๋ณํ ์ค๋นํด์ผํ๋ ์ค์ต ํ๊ฒฝ์ด ์๋์?
๊ฐ์์์๋ MacOS๋ฅผ ๋ฐํ์ผ๋ก ์์
์ ์งํํ์ง๋ง OS์ ๊ฒฝ์ฐ ์๋์ฐ ํ๊ฒฝ์์ ๋ฐ์ํ๋ ๋ฌธ์ ์ ๋ํด์๋ ์ด๋ ์ ๋ ๋์์ฑ
์ ๋ํ ์๊ฐ๋ฅผ ํด๋์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ IDE๋ VSCode๋ฅผ ์ฌ์ฉํ๋๋ฐ, ๊ทธ ์ธ ๋ค๋ฅธ ๊ฐ๋ฐ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์
๋ ์ ํ ๋ฌด๋ฐฉํฉ๋๋ค.
์ง์๊ณต์ ์์
๋ค๋ฅธ ๊ฐ์๊ฐ ๊ถ๊ธํ๋ค๋ฉด? ๐โโ๏ธ
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ์ด๊ธ (ํด๋ฆญ)
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ์ค๊ธ (ํด๋ฆญ)
Javascript ES6+ ์ ๋๋ก ์์๋ณด๊ธฐ - ๋ณด๋์ค (ํด๋ฆญ)