๋ฉํ ๋ง ํ ํ๋ก์ ํธ 1์ฃผ์ฐจ ํ๊ณ ์ ๋๋ค๐
CSS๋ง์ผ๋ก hover ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋์ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ๊ตฌํํด๋ณด์์ต๋๋ค๐
์ฒ์์ผ๋ก ์คํ์์ค์ ๊ธฐ์ฌํ ๊ฒฝํ์ ๊ธฐ๋กํด๋ณด์์ต๋๋ค๐ฅณ
'ํ์ ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ' ๋์์ ์ปดํ์ผ๋ฌ, ํ์ ์์คํ , ํ์ ์คํฌ๋ฆฝํธ vs ์๋ฐ์คํฌ๋ฆฝํธ ๋ถ๋ถ์ ์ฝ๊ณ ์ ๋ฆฌํด ๋ณด์์ต๋๋ค.
์๋ฒ์ ๋ฐ์ดํฐ์ input์ value๋ฅผ ๋๊ธฐํํ๋ ค๋ค๊ฐ ์๊ธด ๋ฌธ์ ์ ํด๊ฒฐ ๊ณผ์ ์ ๊ธฐ๋กํ์ต๋๋ค. (๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฐ์ง ์์์ด์)
8-9์ ํ๊ณ ์ ๋๋ค๐ ์ด๋ฒ ๋ฌ์๋ ์ง๋ฌธ์ ์ด์ฌํ ํ์ด์๐โโ๏ธ
ํ์ดํ ํจ์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉํ์ง ์์ ์๊ธด ์ค๋ฅ์ ๋ํด ์ดํด๋ณด์์ต๋๋ค๐ฅ
๋๋๋๋ฆฌ ์ปจํผ๋ฐ์ค์์ ๋ค์ ๋ฐํ๋ค์ ์ ๋ฆฌํด๋ณด์์ต๋๋ค๐
์์ ์ ์ ํฌ๋๊ฐ ์ ๊น ๋ณด์ด๋ ๋ฌธ์ ๋ฅผ optimistic update๋ฅผ ์ ์ฉํ์ฌ ํด๊ฒฐํ์ต๋๋ค๐ค
CRA(Create React App)์ผ๋ก ๋ง๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ Vite๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด๋ณด์์ต๋๋ค ๐พ
kakao ์ฐํธ๋ฒํธ ์๋น์ค API๋ฅผ ์ฌ์ฉํ์ฌ ๋ฆฌ์กํธ๋ก ์ฃผ์์ฐพ๊ธฐ ํผ์ ๋ง๋ค์ด๋ณด์์ต๋๋ค๐
staleํ ์ํฉ์ ๊ฒฝํํ๋ฉฐ stale์ ๊ฐ๋ ๊ณผ ์์๋ฅผ ์์๋ณด์์ต๋๋ค ๐
์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๋ฉฐ useState์ setter ํจ์ ์์น๋ฅผ ๋ฐ๊พผ ๋ด์ฉ์ ๋๋ค ๐จ
2023๋ 7์ ํ๊ณ ์ ๋๋ค๐ณ ์ด๋ฒ ๋ฌ์๋ ์ฒ์์ผ๋ก ๋ฉด์ ์ ๊ฒฝํํ์ด์!
์ velog์ ์ด ์กฐํ์๋ฅผ ํ์ธํด๋ณด์์ต๋๋ค๐ฅณ
์ปดํจํฐ ์์ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ํ ์ ์๋ ํด์ฆ์ฑ๐ฎ
๊ณต๋ถํ๋ ํจํด์ ์ธ์งํ๊ณ , ๋ณํ์ํจ ๊ฒฝํ์ ๋ํ ๊ธ์ ๋๋ค. 2023๋ 5์ ํ๊ณ ๋ฅผ ํฌํจํฉ๋๋ค๐
useEffect Hook๊ณผ useState Hook, ๊ทธ๋ฆฌ๊ณ async/await๋ก API๋ฅผ ํธ์ถํ๋ ๋ฐฉ๋ฒ์ ๋ค๋ฃน๋๋ค๐
Context API๋ฅผ ํ์ฉํ ๋ฆฌํฉํ ๋ง๐ฅ