๋ชฉ๋กtypescript (2)
๐ค ์์งlog ๐ค
Next.js์์ ์ ๊ณตํ๋ SSR, ํ์ง๋ง ์ฐ๋ฆฌ๋ SSR์์ ์ฌ์ฉํ์ง ๋ชปํ๋ ๊ฐ์ฒด์ธ window ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ ๋๊ฐ ๋ง์ต๋๋ค. ๊ทธ๋ด๋ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ ! 1. typeof ๋ฅผ ์ฌ์ฉ. if(window){...} // window is not definde ์๋ฌ๋ฐ์ if(typeof window !== undefined) {...} // ์ ์๋์ง์์ window์ ํ์ ์ด๊ธฐ๋๋ฌธ์ undefied๊ฐ ๋ฐ์ -> ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์์ต๋๋ค. ๊ฐ๋จํ๊ฒ ์ด๋ฌํ ๋ฐฉ๋ฒ์ผ๋ก window๊ฐ์ฒด๊ฐ ์๋์ง ์ฒดํฌํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. 2. useEffect๋ฅผ ์ฌ์ฉ. useEffect(()=>{ // ์์์ window ๊ฐ์ฒด๋ฅผ ์ฌ์ฉ },[]) useEffect๋ DOMํ์ฑ ํ์ ์คํ์ด ๋๋ hook์ ๋๋ค. ๊ณ ๋ก ๋ธ๋ผ์ฐ์ ๊ฐ์๋ ์๋ฒ์์ ..
์ฌ์ด๋ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์ ํ์ง๋ง๊ณ ์ฐ๋ฆฌ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค์๊ณ ํ์ฌ ๋ด๊ฐ ๋งก๊ฒ๋์๋๋ฐ .. ์ด๋ณด ๊ฐ๋ฐ์ ์ ์ฅ์์๋ ๋ํต ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๊ฒ ๊ณ ์ด๋์ ๋ถํฐ ์ด๋ป๊ฒ ์์ํ๋์ง๋ ๊ฐ์ด ์์์ ์ฌ๊ธฐ์ ๊ธฐ ๊ฒ์ํด๋ณด๊ณ ๋์ด๋ชจ์ ์ ๋ณด๋ก ์์ฑํ๊ฒ ๋์๋ค. ์ด๊ฒ ์ ๋ต์ด๋ผ๊ณ ๋ ํ ์ ์์ง๋ง ๋น์ทํ ์ํฉ์ด์ ๋ถ๋ค์๊ฒ ๋์์ด ๋์์ผ๋ฉด ์ข๊ฒ ๋จ ๐ฅ NPM Package ์์ฑ ๋ถํฐ ๋ฐฐํฌ _์ง์ง์ง์ง์ต์ข ๐ ์ฌ์ด๋ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์ ํ์ง๋ง๊ณ ์ฐ๋ฆฌ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค์๊ณ ํ์ฌ ๋ด๊ฐ ๋งก๊ฒ๋์๋๋ฐ .. ์ด๋ณด ๊ฐ๋ฐ์ ์ ์ฅ์์๋ ๋ํต ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๊ฒ ๊ณ ์ด๋์ ๋ถํฐ ์ด๋ป๊ฒ eun-jii.tistory.com ๐ฉ๐ป๐ป NPM Package๋ฅผ ์์ฑํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋๋ ๊ฑด ๋์ผํ๊ธฐ์ ๊ด๋ จ ๊ธ ์ฐธ๊ณ ๋ฐ๋๋๋ค..