![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbwFCD5%2FbtrXgYjQI6L%2FVgZk7QXhXxJ1grg0VEOGL1%2Fimg.png)
Today, What I learned? ํ์ ๋ถ์ SOS๋ก!.. ๋ฆฌ๋์ค๋ก ๊ตฌํ๋์ด ์๋ API ๋ถ๋ฌ์ค๋ ๋ก์ง์ redux-toolkit๊ณผ redux-thunk๋ก ๋ฆฌํฉํ ๋ง ํ๋ ๊ณผ์ ์ ๊ฐ์ด ๊ณ ๋ฏผํ๊ฒ ๋์๋ค. ๊ณ ๋ฏผ์ ์๊ฐ์ด ๊ธธ์๋ ์ด์ ๋ ์ฐ๋ฆฌ ํ๋ก์ ํธ๋ ํ์ ์คํฌ๋ฆฝํธ๋ก ๊ตฌ์ฑ๋ ํ๋ก์ ํธ์๊ธฐ ๋๋ฌธ์ด๋ค!.. ํ์ ์คํฌ๋ฆฝํธ์์์ createAsyncThunk API๋ฅผ ๊ฐ์ ธ์ค๋ ๊ณผ์ ์์, ํ์ํ ์ ํ์ ๋งค๊ฐ๋ณ์๊ฐ 3๊ฐ๋ ๋์๊ธฐ ๋๋ฌธ์ ์ข ๋ ์ด๋ ค์ ๋ ๊ฒ ๊ฐ๋ค. ์๋๋ ์์ฑ๋ ๋ก์ง์ด๋ค. payload์ ํด๋นํ๋ ๋ถ๋ถ์ ๊ตฌ์กฐ๋ถํดํ ๋น์ผ๋ก ๊ฐ์ ธ์์ ์ฌ์ฉํ๊ณ ์๋ค. export const getSearchVideos = createAsyncThunk( 'getSearchVideos', async ({ channelId, ord..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyuUVy%2FbtrXaqHCjf2%2FH3ZhXMgegZPAu8WT7r85L1%2Fimg.png)
Today, What I learned? ํ์ด์ด๋ฒ ์ด์ค๋ก ์์ ๋ก๊ทธ์ธ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ ์ค ๊ตฌ๊ธ๊ณผ ๊นํ๋ธ๋ ์ฝ๊ฒ ๋์์ง๋ง, ์ ํ์ ์ ํ ๊ฐ๋ฐ์์ ๋ฑ๋ก์ด ๋์ด์์ด์ผ ํ๊ณ .. ์นด์นด์ค๋ ์นด์นด์ค ์ธ์ฆ ํ ํ์ด์ด๋ฒ ์ด์ค๋ก ๋ณด๋ด์ ํ์ด์ด๋ฒ ์ด์ค์ ํ ํฐ์ ๋ฐ์์ฌ ์ ์๋๋ก ํด์ผ ํ๊ณ .. (์๊ฐ์ด ์ข ๋ ์ฌ์ ๋ก์ธ ๋ ๋์ ํด๋ณด๊ณ ์ถ์) ํธ์ํฐ๋ฅผ ์ถ๊ฐํด ๋ณด์! ์ถ์ด์ ํธ์ํฐ๋ฅผ ์ถ๊ฐํ๋ ๊ณผ์ ์ ๊ธฐ๋กํด ๋ณธ๋ค. ํ์ด์ด๋ฒ ์ด์ค ์ธ์ฆ ๋ถ๋ถ์ ํธ์ํฐ ์ถ๊ฐ ๋จผ์ ํ์ด์ด๋ฒ ์ด์ค ๋ก๊ทธ์ธ ์ ๊ณต์ ์ฒด์์ ํธ์ํฐ๋ฅผ ์ฌ์ฉ์ค์ ์ผ๋ก ์ถ๊ฐํด ์ฃผ๊ธฐ. ์๋ ํ์ด์ด๋ฒ ์ด์ค ๊ณต์ ๋ฌธ์์ ๋ฐ๋ผ ํ๋ํ๋ ํด๊ฐ๋ฉด ๋๋๋ฐ, ์ผ๋จ ์ฌ์ฉํ ์น(ํน์ ์ฑ)์ ํธ์ํฐ ๊ฐ๋ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฑ๋กํด์ฃผ์ด์ผ ํ๋ค. https://firebase.google.com/docs/auth/web/twi..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9jGwq%2FbtrWTK1UEIa%2Fqy7j7j6LVka1ruxWVckTqk%2Fimg.png)
Today, What I learned? ์ด๋ฒ ํ๋ก์ ํธ์์๋ ๋ก๊ทธ์ธ ์ฌ๋ถ์ ๋ฐ๋ผ์ ํค๋๋ฅผ ๋ค๋ฅด๊ฒ ๋ ธ์ถํด์ผ ํ๋ ๊ธฐ๋ฅ์ด ์๋ค. ์ด ๋ถ๋ถ์ ๋ก์ง์ ์ด๋ป๊ฒ ์งค ๊ฒ์ธ ๊ฐ์ ๋ํ ์์ ๊ณ ์ฐฐ... ๊ตฌํํด์ผ ํ๋ ๋ถ๋ถ ๋ก๊ทธ์ธ์ด ๋์ด ์์ง ์๋ค๋ฉด ์๋์ ๊ฐ์ด ๋ก๊ทธ์ธ ๋ฒํผ์ด ๋ณด์ด๋ ํค๋๋ฅผ, ๋ก๊ทธ์ธ์ด ๋์๋ค๋ฉด ๊ฒ์๊ณผ ๋ง์ดํ์ด์ง๋ก ๋ค์ด๊ฐ ์ ์๋ ์์ด์ฝ์ด ์๋ ํค๋๋ฅผ ๋ณด์ฌ์ฃผ์ด์ผ ํ๋ค. ์ฐธ๊ณ ๋ก ์ฐ๋ฆฌ ํ๋ก์ ํธ์์๋ ํ์ด์ด๋ฒ ์ด์ค๋ฅผ ํตํด ๋ก๊ทธ์ธ์ด ์ด๋ฃจ์ด์ง๋ค. ์ฒซ ์๋ ์ฒ์์๋ useState๋ฅผ ์ด์ฉํด์ isLoggedIn ์ด๋ผ๋ boolean ๊ฐ์ ์ํ๋ก ๊ด๋ฆฌ๋ฅผ ํ๋ ค๊ณ ํ๋ค. const [isLoggedIn, setIsLoggedIn] = useState(false); ... useEffect(()=>{ authService.on..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Feg20Go%2FbtrWVK0gUts%2FjVS4HIXFPoyqan1Y68cYhk%2Fimg.png)
Today, What I learned? ํ์ ์คํฌ๋ฆฝํธ๋ก ๊ธฐ์กด ํ๋ก์ ํธ๋ฅผ ๋ฆฌํฉํ ๋งํ๋ ๊ฒ์ด ์๋๋ผ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ณผ์ ์ ๊ธ๋ก ๋จ๊ฒจ๋ณด๋ ค๊ณ ํ๋ค. ํ๋ก์ ํธ ์์ฑ CRA๋ฅผ ํตํด ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค. npx create-react-app ํ๋ก์ ํธ๋ช --template typescript ์ด ๋ --template์ ๊ผญ ๋ฃ์ด์ฃผ์ด์ผ ์ฒ์๋ถํฐ ํ์ ์คํฌ๋ฆฝํธ๋ก ํ์ผ๋ค์ด ์คํ๋๋ค. --template์์ด typescript๋ง ๋ฃ์ ๊ฒฝ์ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ก CRA๊ฐ ๋์ด์ ๋ค์ ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ผ ํ ์ ์๋ค. ์ ์์ ์ผ๋ก ๋ช ๋ น์ด๊ฐ ์คํ๋์๋ค๋ฉด ์ด๋ ๊ฒ ts, tsx๋ก ํ์ผ๋ค์ด ๋ง๋ค์ด์ ธ ์๊ณ , tsconfig.json๊น์ง ๊ธฐ๋ณธ์ ์ผ๋ก ํฌํจ๋์ด ์์ ๊ฒ์ด๋ค. react-app-env.d.ts ? ์ผ๋ฐ์ ์ธ ๋ฆฌ์ก..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnyS7x%2FbtrWIZdSffg%2FRNeHLg132f5TRVk9Zp8gtk%2Fimg.png)
Today, What I learned? ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ตํ๋ฉด์ ์๊ฐ๋ณด๋ค ์ฝ์ง ์์์ ๋ง์ด ๋๋ผ๋ ์ค..! ํนํ ํท๊ฐ๋ฆฌ๋ ๋ช๋ช ๊ฐ๋ ์ ์ข ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค. JS์ TS ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋์ ํ์ . ํ๋ก๊ทธ๋จ์ด ์คํ๋ ๋, ์ฆ ๋ฐํ์์ ๋ณ์์ ํ์ ์ด ๊ฒฐ์ ๋๋ค. ๋ฐ๋๋ก ํ์ ์คํฌ๋ฆฝํธ๋ ์ ์ ํ์ . ์ปดํ์ผ ํ์์ ๋ณ์์ ํ์ ์ด ๊ฒฐ์ ๋๋ค. ์ด๊ฒ์ ์ฆ ํ๋ก์ ํธ๊ฐ ์คํ๋๊ธฐ ์ ์ ๋ฏธ๋ฆฌ IDE์์ ๋ฐ์ํ ์ค๋ฅ๋ฅผ ์ ์ ์๋ค๋ ๊ฒ! any ํ์ any ํ์ ์ ๋ชจ๋ ํ์ ์ ํฌํจํ๋ ํ์ ์ด๋ค. (์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋ ๋ณ์๋ any ํ์ ์ด๋ผ๊ณ ํ ์ ์๋ค.) ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ ํธ๋ฅผ ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ฆฌํฉํ ๋งํ๋ ๊ฒฝ์ฐ ์์๋ก ์ฌ์ฉํ๋ฉฐ ์ ์ง์ ์ผ๋ก ํ์ ์ ์ฐจ์ฐจ ๋ฐ๊ฟ๋๊ฐ ๋ ์ ์ฉํ๋ค. ํ์ง๋ง ๋ชจ๋ ํ์ ์ ํฌํจํ๋ค๊ณ ํด์ ๋ฌด๋ถ๋ณํ๊ฒ ์ฌ์ฉํ๋ฉด ํ์ ์ค..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpkiY7%2FbtrWuO4VNYL%2FXD5epPKWSKjNwsFQvJv8F0%2Fimg.png)
Today What I learned? ์ด์ ์ ์ด์ด ๋ฆฌ๋์ค ํดํท ํฌ๋๋ฆฌ์คํธ๋ฅผ ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๋ฉฐ ํด๊ฒฐํ ๋ง์ ์ค๋ฅ๋ค์ ๊ธฐ๋กํด ๋ณธ๋ค..!! ์ด์ฐ์ด์ฐ ๋ชจ๋ ์๋ฌ๋ฅผ ํด๊ฒฐํ๊ณ ์ ์ ์๋์ด ๋๊ณ ์๋ค.. ๐ฅบ ๐ง ๋ฒํผ ์ปดํฌ๋ํธ์์ ๋ฐ์ํ ์ค๋ฅ ํด๊ฒฐ Type '' is missing the following properites from type ~~ Type '' is missing the following properites from type ~~ ์๋ง ๋ด๋ ๋ฒํผ ์ปดํฌ๋ํธ์ ๋ค๋ฅธ ํจ์ props๊ฐ ์๋ค๋ ์๊ธฐ ๊ฐ๋ค. ๊ธฐ์กด ์ฝ๋๋ ์ ํจ์๋ค ์ค ํ๋๋ง ๋ฃ์ด์ฃผ์ด ๋ฒํผ ์ปดํฌ๋ํธ๋ฅผ ๊ณตํต์ผ๋ก ์ฐ๊ณ ์๋ ์ํ์๊ธฐ ๋๋ฌธ์ ๊ผญ ๋ชจ๋ ํจ์ props๋ฅผ ๋ฐ์ ํ์๊ฐ ์์๋ค. ๊ทธ๋ ๋ค๋ฉด ์ ํ์ ์ผ๋ก ๋ค์ด๊ฐ์ผ ํ๋ ํ์ ์์ฑ์..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl0ejY%2FbtrWw9mr5Mi%2FMIxDPWQoqraP8dZKjnAKp1%2Fimg.png)
Today, What I learned? ์ผ์ฐจ์ ์ผ๋ก ํฌ๋๋ฆฌ์คํธ๋ฅผ redux-toolkit์ผ๋ก ๋ฆฌํฉํ ๋ง ํ ํ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ค์ด๊ฐ๋ฉฐ ๋ง๋๊ฒ ๋ ์ค๋ฅ๋ค์ ๊ธฐ๋กํด๋ณธ๋ค. ์๋ฌ๊ฐ ๊ผฌ๋ฆฌ์ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ ๋ฐ์ํด์ ๋ชจ๋ ์๋ฌ๊ฐ ์์ ํด๊ฒฐ๋ ๊ฒ์ ์๋๊ณ ํ์ฌ ์งํํ์ด๋ค.. ๐ ๋ด์ผ์ฏค์ ๋ค ์์ฑํ๊ธฐ ์์๊น!.. ๐ง useRef()์ focus ๊ด๋ จ ์๋ฌ Property 'focus' does not exist on type 'string' Property 'focus' does not exist on type 'string' useRef()์ ํ์ ์ด ์ ๋๋ก ์ ํด์ ธ์์ง ์์ ๋ฐ์ํ ์๋ฌ.. ์ฐพ์๋ณด๋ useRef๋ฅผ DOM ์กฐ์ ์ฉ๋๋ก ์ฌ์ฉํ๋ ค๋ฉด ์๋์ ๊ฐ์ด HTMLํ๊ทธ๋ฅผ ์ง์ ํด์ค์ผ ํ๋ค๊ณ .. ์ง์ญ๋ณ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcnRqfa%2FbtrWrr79lwa%2FZNswaTG4WWyjeYeokKAiH1%2Fimg.png)
Today, What I learned? ๊ธฐ์กด ํ๋ก์ ํธ์ ํ์ ์คํฌ๋ฆฝํธ ๋ฆฌํฉํ ๋ง์ ์๋ํ๊ธฐ ์์, ํผ์ ํ๋ ํฌ๋๋ฆฌ์คํธ ํ๋ก์ ํธ๋ฅผ ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ฆฌํฉํ ๋ง ํด๋ณด๊ธฐ๋ก ํ๋ค. ๋จผ์ ๊ธฐ์กด ํ๋ก์ ํธ๋ ๋ฆฌ๋์ค์ ๋ผ์ฐํฐ๋ฅผ ์ด์ฉํด์ ํ์ด์ง ์ด๋๊ณผ CRUD๊ฐ ์ ์ฉ๋์ด ์๋ ํฌ๋๋ฆฌ์คํธ์๋ค. ๊ธฐ๋ณธ ๋ฆฌ๋์ค๊ฐ ์ ์ฉ๋์ด ์์๊ธฐ ๋๋ฌธ์ ๋จผ์ redux-toolkit์ผ๋ก ๋ฆฌํฉํ ๋ง ํด์ค ํ ๋ณธ๊ฒฉ์ ์ธ ํ์ ์คํฌ๋ฆฝํธ ์ ์ฉ ์์!.. ํจํค์ง ์ค์นํ๊ธฐ ๋จผ์ ํ์ ์คํฌ๋ฆฝํธ์ ๊ด๋ จ๋ ํจํค์ง๋ค์ ์ค์นํด ์ฃผ์๋ค. ํ์ ์คํฌ๋ฆฝํธ ๊ณต์๋ฌธ์์์ ๋ณด๊ณ ํจํค์ง๋ฅผ ์ค์นํ ํ์, https://www.typescriptlang.org/download How to set up TypeScript Add TypeScript to your project, or instal..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWiTMA%2FbtrWdgmzqfA%2FDpFVeGh269kW3xkgkf3Ub1%2Fimg.png)
Today, What I learned? ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ๋ฎค์ง์ปฌ์ ์์ธ ์ค๋ช ์ด๋ฏธ์ง๊ฐ ์ ๊ณ ํผ์ณ์ง๋ ๋ถ๋ถ์ด ํ์ํ๋ค. collapsible view ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋ ๋ฏํ์ง๋ง, ๊ฐ๋จํ๊ฒ ๊ตฌํํ๊ณ ์ถ์ด์ state๋ฅผ ์ด์ฉํ๋ค. ์ด ๊ณผ์ ์์ ๊ฒช์๋ ์ํ์ฐฉ์ค๋ฅผ ์ ๋ฆฌํด๋ณธ๋ค. ์ ํ, ํผ์นจ ๋ฒํผ ์ ๊ณ ํผ์ณ์ง๋ ๋ถ๋ถ์ ํ์๋ถ์ด state๋ก ์ ๊ตฌํํด ์ฃผ์ จ๋ค. const [isMoreButton, setMoreButton] = useState(false); isMoreButton์ ๋ฐ๋ผ์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ๋ ์์ญ์ด ๋ณด์ด๊ณ ๊ฐ์ถฐ์ง๋๋ก ํ๋ค. {isMoreButton && ( )} ์ฒ์์ ์ ์์ญ์ ๋ฎค์ง์ปฌ ์ ๋ณด ์์ญ ์ปดํฌ๋ํธ ์์ ์์๋๋ฐ, ์ด๋ ๊ฒ ๋ณ๊ฒฝ๋์์ ๋ ์ด๋ฏธ์ง๊ฐ ๋ค๋ฅธ ์์ญ์ ์ด๋ฏธ์ง๊น์ง..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqgUqc%2FbtrV1HpJeZO%2FIAxRHHRLvIR0hjgLQFNCQk%2Fimg.png)
Today, What I learned? ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ์นดํ ๊ณ ๋ฆฌ์ ๋ฐ๋ผ์ React Query์ useQuery๋ฅผ ํตํด ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ถ๋ถ์ ์งํํ๋ฉฐ ์ด๋ค ๋ฐฉ์์ผ๋ก ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์๋์ง ๊ธฐ๋กํด ๋ณธ๋ค. ํผ๊ทธ๋ง ์์ผ๋ก ๋ง๋ค์ด์ผ ํ๋ ๋ถ๋ถ์ด๋ค. ๊ฐ ์ง์ญ์ ํด๋ฆญํ๋ฉด ํด๋น ์ง์ญ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ผ ํ๋ ๋ถ๋ถ! ์ผ๋จ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ๊ฐ ์ง์ญ์ ์ฝ๋๋ฅผ API์ params ๊ฐ์ผ๋ก ๋๊ฒจ์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋์ API ํจ์์์๋ ์๋์ ๊ฐ์ ๋ฐฉ์์ผ๋ก params๋ฅผ ๋ฐ์์ค๊ธฐ๋ก ํ๋ค. export const getLocalPopular = (params) => { const [_, category] = params.queryKey; return fetch( `${BASE_URL}/boxoffice?servic..
Comment