- ํฌ์ผ๋ชฌ ๋ฆฌ์คํธ๋ฅผ ํ์ธํ๊ณ ์นด๋ ํด๋ฆญ ์ ์ํ๋ ํฌ์ผ๋ชฌ์ ์ ๋ณด๋ฅผ ์ ์ ์์ต๋๋ค.
์์ ๊ธฐ๊ฐ :
23.09 - ์งํ ์ค๋ฐฐํฌ ๋งํฌ :
๋งํฌFigma ๊ตฌ์๋ :
๋์์ธ ์์Stack
: Vite, React, TypeScript, React Query, Redux Toolkit, Styled Components
ํฌ์ผ๋ชฌ API๋ฅผ ์๊ฒ๋์ด ์์
์ ์งํํ๊ฒ ๋์์ต๋๋ค.
React Query
๋ ๋ฌผ๋ก ๋ฌดํ ์คํฌ๋กค๋ง, ๋คํฌ๋ชจ๋, axios๋ฅผ ๊ณต๋ถํ๊ธฐ ์ํด ์ ์ํ๊ฒ ๋์์ต๋๋ค.
- ํฌ์ผ๋ชฌ์ 20๊ฐ์ฉ ํ์ธํ ์ ์์ต๋๋ค.
- ์คํฌ๋กคํ ๊ฒฝ์ฐ 20๊ฐ์ฉ ํฌ์ผ๋ชฌ์ ํ์ธํ ์ ์์ต๋๋ค.
- ํน์ ํฌ์ผ๋ชฌ ํด๋ฆญ ์ ํฌ์ผ๋ชฌ ์ ๋ณด๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
- ๋คํฌ๋ชจ๋/๋ผ์ดํธ๋ชจ๋๋ก ํ์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.
- ์ฐพ๊ณ ์ถ์ ํฌ์ผ๋ชฌ์ ๊ฒ์ํ ์ ์์ต๋๋ค.
- ์ต์ ํ๋ฅผ ์ํ ์ฝ๋ ์คํ๋ฆฌํ
- ํ์ด์ง ์ด๋ ๊ตฌ๊ฐ์
Lazy
,Suspense
์ฌ์ฉ
- ํ์ด์ง ์ด๋ ๊ตฌ๊ฐ์
- ์ด๋ฏธ์ง ํ๊ทธ์
loading='lazy'
์ถ๊ฐํด ๋ทฐํฌํธ์ ๋ณด์ด์ง ์๋ ์ด๋ฏธ์ง ๋ก๋ฉ ์ง์ฐ - ์นด๋ ์ปดํฌ๋ํธ์ ํฌ์ผ๋ชฌ ๋ฐ์ดํฐ๊ฐ ์์ ๊ฒฝ์ฐ
์ค์ผ๋ ํค
๋ณด์ด๋๋ก ์์ - Redux Toolkit,
localStorage
๋ฅผ ํ์ฉํด ๋คํฌ๋ชจ๋/๋ผ์ดํธ๋ชจ๋ ๊ตฌํ- ์ฌ์ฉ์์๊ฒ ๋คํฌ๋ชจ๋/๋ผ์ดํธ๋ชจ๋ ์ ๊ณต
- ์๋ก๊ณ ์นจํด๋ ํ ๋ง๊ฐ ์ ์ง๋๋ฏ๋ก์จ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์
- Axios, useQuery๋ฅผ ํ์ฉํด ํฌ์ผ๋ชฌ ๋ฐ์ดํฐ ๋ถ๋ฌ์ค๊ธฐ
scrollHeight
,scrollTop
,clientHeight
์์๋ฅผ ํ์ฉํด ๋ฌดํ ์คํฌ๋กค ๊ตฌํURLSearchParams
๋ฉ์๋๋ฅผ ํ์ฉํด ๊ฒ์ ํ์ด์ง ๊ตฌํ- ๊ฒ์ ๊ธฐ๋ก์ด ์์ ๊ฒฝ์ฐ Nothingํ๋ฉด ํ์
๋ฌธ์ ์ :
ํฌ์ผ๋ชฌ ๋ฐ์ดํฐ ๋ฆฌ์คํธ๋ฅผ ์ ๋ฐ์ดํธ ํ๋ useEffect๊ฐ ์ด๊ธฐ ๋ ๋๋ง์ 1๋ฒ๋ง ํธ์ถ๋์ด์ผ ํ๋๋ฐ 3๋ฒ ํธ์ถ ๋๋ ์ด์ํด๊ฒฐ ๋ฐฉ์ :
์ด๊ธฐ ๋ ๋๋ง ์ ๋ชจ์ผ๋ชฌ ๋ฆฌ์คํธ๊ฐ ๋น ๋ฐฐ์ด๋ก ๋ค์ด์ค๋๋ฐ ์ด ๋ useEffect๊ฐ 2๋ฒ ํธ์ถ๋๋ ์ด์๋ฅผ ํ์ธ, useEffect์ ํฌ์ผ๋ชฌ ๋ฐ์ดํฐ ๋ฆฌ์คํธ๊ฐ ์์ ๊ฒฝ์ฐ์๋ง ์คํํ๋๋ก ์์ .
useEffect(() => {
const eventScroll = () => {
const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight) {
upDatePokemon();
}
};
if (pokemonList.length > 0) {
window.addEventListener('scroll', eventScroll);
return () => {
window.removeEventListener('scroll', eventScroll);
};
}
}, [pokemonList]);
- ๊ฒ์ ๊ธฐ๋ฅ
- ํํฐ๋ง ๊ธฐ๋ฅ
- ๋ฐ์ํ
- ๋ง์ดํ์ด์ง
- ๊ฐ๋จํ ๋ก๊ทธ์ธ
- ๋ถ๋งํฌ ๊ธฐ๋ฅ
- ํ๊ตญ์ด, ์์ด ์ง์
- ํ๊ตญ์ด ๊ฒ์ ๊ฐ๋ฅํ๋๋ก ํ๊ธฐ
- ์ด๋ฏธ์ง ๋ก๋ฉ ์ ๋๊น ํ์ ๊ฐ์ ํ๊ธฐ
- ๋ํ ์ผ ํ๋ฉด ์ ์ฉ ๋๋ฆผ ํ์ ๊ฐ์ ํ๊ธฐ
[๊ธฐ๋ฅ] ๋คํฌ๋ชจ๋ ๊ตฌํํ๊ธฐ
[๊ธฐ๋ฅ] ๊ฒ์ ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ
[์ด์] useEffect ๋ถํ์ํ ํธ์ถ ๋ง๊ธฐ
[์ด์] ๋ถํ์ํ ๋ ๋๋ง ๋ง๊ธฐ
Dark Mode | Dark Mode Detail |
---|---|
- ๋คํฌ ๋ชจ๋์ ํ๋ฉด | - ๋คํฌ ๋ชจ๋์ ํ๋ฉด |
init: ์ด๊ธฐ ์ธํ
์ ํ์ ๊ฒฝ์ฐ
setup: ํด๋ ํน์ ์ ์ฒด์ ์ธ ๊ตฌ์กฐ์ ๋ณ๊ฒฝ์ด ์์ ๊ฒฝ์ฐ
feat: ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๊ฒฝ์ฐ
fix: ๋ฒ๊ทธ๋ฅผ ๊ณ ์น ๊ฒฝ์ฐ
docs: ๋ฌธ์๋ฅผ ์์ ํ ๊ฒฝ์ฐ
style: ์ฝ๋ ํฌ๋งท ๋ณ๊ฒฝ, ์ธ๋ฏธ ์ฝ๋ก ๋๋ฝ, ์ฝ๋ ์์ ์ด ์๋ ๊ฒฝ์ฐ
refactor: ํ๋ก๋์
์ฝ๋ ๋ฆฌํฉํ ๋ง
test: ํ
์คํธ ์ถ๊ฐ, ํ
์คํธ ๋ฆฌํฉํ ๋ง (์ฝ๋ ๋ณ๊ฒฝ X)
chore: ๋น๋ ํ
์คํธ ์
๋ฐ์ดํธ, ํจํค์ง ๋งค๋์ ๋ฅผ ์ค์ ํ๋ ๊ฒฝ์ฐ (์ฝ๋ ๋ณ๊ฒฝ X)
design: CSS ๋ฑ ์ฌ์ฉ์ UI ๋์์ธ ๋ณ๊ฒฝ
comment: ํ์ํ ์ฃผ์ ์ถ๊ฐ ๋ฐ ๋ณ๊ฒฝ
rename: ํ์ผ ํน์ ํด๋๋ช
์ ์์ ํ๋ ๊ฒฝ์ฐ
remove: ์ฌ์ฉํ์ง ์๋ ํ์ผ ํน์ ํด๋๋ฅผ ์ญ์ ํ๋ ๊ฒฝ์ฐ