1์ฃผ์ฐจ ์ผ์ ๋ง๋ฌด๋ฆฌ ๐ฅย Week ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WIL ํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง! ๐ย ์งํํ๋ ์ฌํญ๋ค TOP ๋ญํน ํ์ด์ง ๋ฆฌํฉํ ๋ง ์ด๋ฒคํธ ํ์ ์ฒดํฌ์ฉ api ์ค์ (axios ์ฌ์ฉ) ์น
4์ฃผ์ฐจ ์ผ์ ๋ง๋ฌด๋ฆฌ ๐ฅย Week ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WIL ํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง! ๐ย ์งํํ๋ ์ฌํญ๋ค ๋ธ๋ก๊ทธ์ WIL ์์ฑ ํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ ํ๋ก ํธ ํ์ ์งํ 2ํ ์ฐธ์ฌ TOP ๋ญํน ํ์ด์ง ๋ฆฌํฉํ ๋ง 19+ ์ค๋ฅ ์์ ๋ฐ ์ ์ง๋ณด์ ์ค์๊ฐ ์์์์ ์ชฝ์ง ๋ณด๋ผ ๋ ์๋ณด...
3์ฃผ์ฐจ ์ผ์ ๋ง๋ฌด๋ฆฌ ๐ฅย Week ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WIL ํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง! ๐ย ์งํํ๋ ์ฌํญ๋ค ๋ธ๋ก๊ทธ์ WIL ์์ฑ ํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ ์ด์ฌ๋์ด ์์ฒญํ stream๊ฐ ์ด๋๊ณผ์ ๋ถ์ ๋ฐ ์ค๋ช ํ์ฅ๋์ด ์์ฒญํ ์นดํ ๊ณ ๋ฆฌ 19+์ฒดํฌ ์ ๋์๋ฅผ ํ์ ๋ ์ฐ๋ น์ ํ์ ํ...
2์ฃผ์ฐจ ์ผ์ ๋ง๋ฌด๋ฆฌ ๐ฅย Week ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WIL ํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง! ๐ย ์งํํ๋ ์ฌํญ๋ค ๋ธ๋ก๊ทธ์ WIL ์์ฑ ํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ ํ์ฌ ์ปดํฌ๋ํธ ๋ง์ธ๋๋งต ์๋ฃ(์ด๋์ ๋๋?!) 1์ผ 1์ ๋ก๋(๋ ธ์ ์ ์ ๋ก๋) ๋ ธ์ ์ ๋ ์ ํ๋ ๊ธฐ์ ๋ธ๋ก๊ทธ ๋ฆฌ๋ฉ! Velog...
๐ฅ Week ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WIL ํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง! ๐ ์งํํ๋ ์ฌํญ๋ค ๋ธ๋ก๊ทธ์ WIL ์์ฑ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ 2-15์ฑํฐ ์๋ฃ ํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ ํ์ฌ ์ปดํฌ๋ํธ ๋ง์ธ๋๋งต
ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WILํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง!๋ธ๋ก๊ทธ์ WIL ์์ฑ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ 2-15์ฑํฐ ์๋ฃ ํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ํ์ฌ ์ปดํฌ๋ํธ ๋ง์ธ๋๋งต ์๋ฃ(์ด๋์ ๋๋?!)1์ผ 1์ ๋ก๋(๋ ธ์ ์
ํ ์ฃผ๋ฅผ ๋๋์ ๋ณด๊ณ ์ ๋ WILํ ์ฃผ๋ฅผ ์ด๋ค์์ผ๋ก ๋ณด๋๋์ง! ๋ชฉํ์ค์ ์ ๋๋ฐ๋ก ํ๋์ง! ๋๋ฅผ ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋ ์์ผฐ๋์ง!๋ธ๋ก๊ทธ์ WIL ์์ฑ์นด์นด์ค์ํฌ ์ฐ๋ฝ์ฒ ์ค์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ 1์ผ 3์ฑํฐ Notion ์ ๋ฆฌํ์ฌ ์๋น์ค ๋ฐ ์ฝ๋ ๋ถ์ํญํด99 ํ๊ธฐ๊ธ ์์ฑJavaScr
์์คํ๊ณ ๊ฐ์ ํ์ต๋๋ค. 99์ผ์ด๋ผ๋ ์๊ฐ๋์ ๊ฐ์ ๊ณณ์ ๋ฐ๋ผ๋ณด๋ฉฐ ๋ฌ๋ ค๊ฐ๋ ํ์๋ค์ด ์์คํ๊ณ , ๊ฐ๋ฐ์ ์ํ๊ณ ์ถ์๋ ์ ๋ง์์ด ํฌ๊ฒ ์์ฉ์ ํ๋ฉด์ ๊ฐ๋ฐ์ด ๋ ๊ฐ์ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ํญํด99๋โ 99์ผ ๋์ IT ์ธ์ฌ ์์ฑ์ ์ํ ํ๋ก์ ํธ ๊ธฐํ/๊ฐ๋ฐ ๊ต์ก๊ณผ์ ์ ๋๋ค. ๋ค์
useRef๋ ํน์ DOM์ ์ ํํ ์ ์๊ฒ๋ ํด์ฃผ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง ๋ ์์ ๋๋ค. ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ๋ ๊ฐํน DOM์ ์ง์ ์ ํํด์ ์๋ฆฌ๋จผํธ์ ํฌ๊ธฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ค๋์ง, ์คํฌ๋กค๋ฐ ์์น๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ์ค์ ํด์ผ ๋๋ค๋์ง, ๋๋ ํฌ์ปค์ค๋ฅผ ์ค์ ํด์ค์ผ ํ๋์ง ๋ค์ํ ์ํฉ์ด ์์ต๋๋ค.
ejs๋ Embedded JavaScript์ ์ฝ์๋ก, ์ฝ๊ฒ ๋งํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ด์ฅ๋์ด ์๋ html ํ์ผ์ ๋๋ค.node.js ์ง์์์ ๋ง์ด ์ฌ์ฉํ๋ ํ ํ๋ฆฟ์์ง์ ๋๋ค. ๋ฌธ๋ฒ์ด ๋จ์ํฉ๋๋ค. ejs๋ html ์์์ <% %>๋ฅผ ์ด์ฉํด์ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋
"SWR"์ด๋ผ๋ ์ด๋ฆ์ HTTP RFC 5861์ ์ํด ์๋ ค์ง HTTP ์บ์ ๋ฌดํจ ์ ๋ ฅ์ธ stale-while-revalidate์์ ์ ๋๋์์ต๋๋ค. SWR์ ๋จผ์ ์บ์๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ ํ, fetch ์์ฒญ(์ฌ๊ฒ์ฆ)์ ํ๊ณ , ์ต์ข ์ ์ผ๋ก ์ต์ ํ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋
1xx(์ ๋ณด) : ์์ฒญ์ ๋ฐ์์ผ๋ฉฐ ํ๋ก์ธ์ค๋ฅผ ๊ณ์ ์งํํฉ๋๋ค.2xx(์ฑ๊ณต) : ์์ฒญ์ ์ฑ๊ณต์ ์ผ๋ก ๋ฐ์์ผ๋ฉฐ ์ธ์ํ๊ณ ์์ฉํ์์ต๋๋ค.3xx(๋ฆฌ๋ค์ด๋ ์ ) : ์์ฒญ ์๋ฃ๋ฅผ ์ํด ์ถ๊ฐ ์์ ์กฐ์น๊ฐ ํ์ํฉ๋๋ค.4xx(ํด๋ผ์ด์ธํธ ์ค๋ฅ) : ์์ฒญ์ ๋ฌธ๋ฒ์ด ์๋ชป๋์๊ฑฐ๋ ์์ฒญ์ ์ฒ๋ฆฌํ
SSR(Server Side Rendering)์ ์น ์ฑ์ ๋ ๋น ๋ฅด๊ฒ ํ์ํ๋ ๋งค์ฐ ์ ์ฉํ ๊ธฐ์ ์ด๋ค. ์ด๊ธฐ HTML์ ์๋ฐ ์คํฌ๋ฆฝํธ๊ฐ ํ์ฑ๋๊ธฐ ์ ์ ํ์๋๋ฉฐ ์ฌ์ฉ์๊ฐ ๋ฌด์์ ํญํ ์ง ๊ฒฐ์ ํ ๋ ํธ๋ค๋ฌ๊ฐ ์ค๋น๋๋ค. React์ ์๋ฒ ์ธก ๋ ๋๋ง์ ์ถ๊ฐ ์์ ์ด ํ์ํ๋ฉฐ ์๋ฒ
react-router-dom์ด v5์์ v6์ผ๋ก ์ ๊ทธ๋ ์ด๋ ๋์ง ์กฐ๊ธ ์ง๋ฌ๋ค.v5v6๊ธฐ์กด์ ๋ผ์ฐํธ ๊ฒฝ์ฐ ๊ฒฝ๋ก์ ์๋ถ๋ถ๋ง ์ผ์นํด๋ ์ ๋ถ ๋งค์นญ๋๊ธฐ ๋๋ฌธ์ ์ ํํ ๋ผ์ฐํธ๋ฅผ ์ผ์น์ํค๊ณ ์ exact์ต์ ์ ์ฌ์ฉํ์๋ค. ํ์ง๋ง v6๋ถํฐ exact๊ฐ ๊ธฐ๋ณธ์ผ๋ก ์ ์ฉ์ด ๋์๊ณ , ๋ง์ฝ
\- SSR์ ์ฝ๊ฒ ์ํํ๋๋ก ๋์์ฃผ๋ ํ๋ ์์ํฌ Next.js๋ React์ SSR(Server Side Rendering)์ ์ฝ๊ฒ > ๊ตฌํํ ์ ์๊ฒ ๋์์ฃผ๋ ํ๋ ์์ํฌ์ด๋ค. ๊ทธ๋ ๋ค๊ณ React์์ SSR์ด ๋ถ๊ฐ๋ฅํ๋ค๊ณ ๋ฌป๋๋ค๋ฉด, ๋๋ต์ "React์์๋ ๊ตฌํ ๊ฐ๋ฅ
next.js๋ React๋ก ๋ง๋๋ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง ํ๋ ์์ํฌ์ด๋ค. ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ํจ์ผ๋ก ์ป๋ ์ด๋์ ๋ค์๊ณผ ๊ฐ๋ค. 1\. ํด๋ผ์ด์ธํธ ๋ ๋๋ง์ ๊ฒฝ์ฐ ๋ชจ๋ js ํ์ผ์ ๋ก๋ํ๊ณ ์ฌ์ฉ์๋ ์น์ ๋ณด๊ฒ๋๋ค. ์ด๋๊น์ง ์ฌ์ฉ์๋ ๋ง์ ์๊ฐ์ ๋๊ธฐํด์ผ ํ๋ค.seo ๋ฌธ์ -
Redux๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.๋ฆฌ๋์ค ํน์ง ํ๋์ store๋ฅผ ๊ฐ์ง๋ค.store์ ๋ฐ์ดํฐ๋ ๋ถ๋ณ์ฑ์ ๊ฐ์ง๋ค.action์ ๋ฐ์ดํฐ ๋ฌถ์์ reducer๋ก ๋ณด๋ด๊ณ reducer๋ store๋ฅผ ๊ฐฑ์ ๋ค.Mobx๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค
ํญํด99์ ํจ๊ป ํ์ง 99์ผ์ด ์ง๋ ์ํด๊ฐ ๋ฐ์์๋ค. ์์ ์ ๋๊ธฐ๋ฉด์ ํ์๋ค๊ณผ ๋ชฐ์ ํ ์ ์๋ ์๊ฐ์ด ์ค์ง ์๋๋ค๋ ์ฌ์ค์ ๊ต์ฅํ ์์ํ๋ค. ํ๋ค๊ณ ๊ณ ๋จํด๋ ํ์์ด๋ผ๋ ์กด์ฌ ์์ฒด๊ฐ ๊ฒ๋ํ์ด ์์์๋ ๊ฐ์กฑ์ฒ๋ผ ๋๋ํ๊ณ , ํ์๋ค์๊ฒ ๋ฐฐ์ ๋ ํ๋๋คํ๋ฉฐ ๊ฐ์ ๋ค๊น์ง ์ฌ๋์ ๋ํ
https://kyounghwan01.github.io/blog/React/optimize-performance/code-splitting/#%E1%84%89%E1%85%A5%E1%84%85%E1%85%A9%E1%86%AB
redux-thunk๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ๋ ์ดํ๋ฆฌ์ผ์ด์ ์์ ๋น๋๊ธฐ์์ ์ ์ฌ์ฉํ ๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก redux-thunk๋ฅผ ์ฌ์ฉํ๋ค.thunk์ ์ฅ์ ์ผ๋ก๋ ์ง๊ด์ ์ด๋ฉฐ, ๊ฐ๋จํ๋ค๋ ์ฅ์ ์ด ์๋ค.redux-thunk๋ ๋ฌด์์ ํ๋ ๋ฏธ๋ค์จ์ด์ธ๊ฐ?ํด๋น ๋ฏธ๋ค์จ์ด๋ ๊ฐ์ฒด ๋์ ํจ์