https://web.dev/fast/#optimize-your-images ๋ฅผ ์ฐธ๊ณ ํ์ฌ ์์ฝํ ๋ธ๋ก๊ทธ ๊ธ์ ๋๋ค.* ๋์ ์๋น์ค์ ์๋๋ UX์ ์ํฅ์ ๋ฏธ์น๊ณ , UX๋ ๊ณง ์ฌ์ฉ์์ ์ ์ ์ ๊ฒฐ์ ํ๋ค. ์๋น์ค ์๋ ๊ฐ์ ์๋ ๋ค์ํ ์ต์ ํ๊ฐ ํ์ํ๋ฐ, ์ด๋ฒ์๋ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ดํด๋ณด์. ์ด๋ฏธ์ง ์ข ๋ฅ ์ด๋ฏธ์ง๋ 2๊ฐ์ง ์ข ๋ฅ๋ก ๊ตฌ๋ถํ ์ ์๋ค. vector ์ด๋ฏธ์ง raster ์ด๋ฏธ์ง vector ์ด๋ฏธ์ง๋ ์ , ์ , ๋ฉด ๋ฑ์ ๋ฒกํฐ์ ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ํํํ๋ ๋ฐฉ์์ด๋ฉฐ, ๊ฐ๋จํ ๊ธฐํํ ๋ชจ์ (๋ก๊ณ , ๊ธ์, ์์ด์ฝ ๋ฑ)์ ๋ํ๋ด๋ ๋ฐ์ ์ ํฉํ๋ค. vector ์ด๋ฏธ์ง๋ ์ฌ์ด์ฆ์ ๋ฐ๋ฅธ ๊นจ์ง ์์ด ์ด๋ฏธ์ง๋ฅผ ์ ๋ฌํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ง๋ง, ํํํด์ผ ํ๋ ๋ชจ์์ด ๋ณต์กํ ๊ฒฝ์ฐ ๋ฐ์ดํฐ ์์ด ๋ง์์ง๋ค๋ ๋จ์ ์ด ์๋ค. rast..
์ธ์ฆ ๋ฐฉ์ 1. API key๋ฅผ ํตํ ์ธ์ฆ ๊ณผ์ user๊ฐ login ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ค. Client๋ ์ด๋ฏธ Server์ ๋ฑ๋กํ API key๋ฅผ ๊ฐ์ง๊ณ ์๋ค. Client๋ user๊ฐ ์ ๋ ฅํ Login ์ ๋ณด๋ฅผ ๋ฐ์์ API key์ ํจ๊ป Login API๋ฅผ ์์ฒญํ๋ค. Server๋ API key๋ฅผ ํตํด ํด๋น Client๊ฐ ๋ฑ๋ก๋์ด์๋ ์ง๋ฅผ ๊ฒ์ฌํ๋ค. Sever๋ Login ์ ๋ณด๋ฅผ ํตํด ํด๋น User๊ฐ API๋ฅผ ์ฌ์ฉํ ์ ์๋ ์ง๋ฅผ ๊ฒ์ฌํ๋ค. ๋จ์ API key๋ ๋ชจ๋ Client๋ค์ด ๊ณตํต์ผ๋ก ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ ธ์ถ๋๋ฉด ์ ์ฒด API๊ฐ ๋ ธ์ถ๋๋ค. API key๋ ์๊ฐ์ด ๋ฌด์ ํ์ด๊ณ ํ ๋ฒ ๋ ธ์ถ๋๋ฉด API key ๋ณ๊ฒฝ ์ ๊น์ง ๊ณ์ ๋ ธ์ถ๋๋ค. 2. API Token์ ํตํ ์ธ์ฆ ๊ณผ์ user๊ฐ login ์ ๋ณด๋ฅผ ์ ..
๊ธฐ์กด์ ์ํคํ ์ฒ ๊ธฐ์กด์ ์ํคํ ์ฒ๋ Monolitic ์ํคํ ์ฒ๋ก ํ๋์ ์ฝ๋ ๋ฒ ์ด์ค์ ํ๋์ ๋ฐฐํฌ ์ฃผ๊ธฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ ์ํคํ ์ฒ๋ฅผ ๋ปํ๋ค. ์๋น์ค ๋ณ๋ก ๋๋์ด์ ธ์์ง ์์ผ๋ฉฐ ํ๋์ ์๋น์ค๋ฅผ ๊ฐฑ์ ํ์ฌ ๋ฐฐํฌํ๊ณ ์ ํ๋ฉด ๋ชจ๋ ์๋น์ค๊ฐ ๋ค์ ๋ฐฐํฌ ๋๋ค. MSA ์ฅ์ ๊ฐ๋จํ๋ค. ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ๋ค. MSA ๋จ์ ๋น๋ ์๊ฐ, ํ ์คํธ ์๊ฐ, ๋ฐฐํฌ ์๊ฐ์ด ๋น ๋ฅด๊ฒ ์์นํ๋ค. ํ๋์ ์๋น์ค์ ์ฅ์ ๊ฐ ์ ์ฒด ์๋น์ค๋ก ์ด์ด์ง ์ ์๋ค. ์๋น์ค์ ์ํฅ๋๋ ์ ์ฒด ์์คํ ์ ํ์ ์ด ์ด๋ ต๋ค. MSA ๊ตฌ์กฐ UI layer ๋น์ฆ๋์ค ๋ก์ง layer ๋ฐ์ดํฐ ์ ๊ทผ layer DB Micro Service Architecture MSA๋ ๋ฐฐํฌ ๋จ์๋ฅผ ์๋น์ค ๋ณ๋ก ์ชผ๊ฐ ์ํคํ ์ฒ๋ฅผ ๋ปํ๋ค. ๋น๊ตํ์๋ฉด ์์ ๊ทธ๋ฆผ๊ณผ ๊ฐ๋ค. MSA ํน์ง ๊ฐ ์๋น์ค๋ mono..
Refresh token์ ์ฅ์ ๋ณธ์ธ์ ์๋ API ์์ฒญ ์ ๋งค๋ฒ Access Token์ ๋ฐ๊ธํ๋ ์์ผ๋ก API๋ฅผ ๊ตฌ์ฑํ์๋๋ฐ, ์ด๋ ๊ฒ ๊ตฌ์ฑํ ๊ฒฝ์ฐ ์ฌ์ฉ์๊ฐ ๋ง์์ง ์๋ก ์์คํ ๋ถํ๊ฐ ์ฆ๊ฐํ๋ค. ๋ฐ๋ผ์ Refresh Token์ ๋ฐ๊ธํ๋ ๊ฒ์ด ๋ซ๋ค. ๋ํ, refresh token์ด ์์ ๊ฒฝ์ฐ access token์ ์ ํจ ์๊ฐ์ ์งง๊ฒ ํ์ฌ ํ์ทจ ์ ๋น ๋ฅด๊ฒ ๋ฌดํจํ ์ํฌ ์ ์๋ค. Refresh token์ ๋์ Access Token์ ํตํด User๊ฐ request๋ฅผ ๋ณด๋ด๊ณ , ์ ํจ ์๊ฐ์ด ๋ง๋ฃ ๋์๋ค๋ ์๋ต์ ๋ฐ๋๋ค. User๋ Access Token๊ณ ํจ๊ป Refresh Token์ ์๋ฒ๋ก ๋ณด๋ธ๋ค. Refresh Token์ด ์ ํจํ๋ค๋ฉด ์ ํจ์๊ฐ์ด ๊ฐฑ์ ๋ Access Token์ด ์๋ก ๋ฐ๊ธ๋์ด User..
token์ cookie์ ์ ์ฅํ ์๋, Web Storage์ ์ ์ฅํ ์๋, Client ์์ฒด์ ์ ์ฅํ ์๋ ์๋ค. Cookie ์ฟ ํค๋ ์๋ฒ๊ฐ ๋ณด๋ธ ๋ฐ์ดํฐ๋ฅผ ์ต๋ 4KB๊น์ง ์ ์ฅ ๊ฐ๋ฅํ๋ค. ํด๋ผ์ด์ธํธ์์ Credential ์์ฑ์ผ๋ก ํ์ฉํ๋ฉด ์๋ฒ์์ ์ ๊ทผ ๊ฐ๋ฅํ๋ค. HTTP Request ์ ์๋์ผ๋ก ํฌํจ๋์ด ์๋ฒ์ ์ฟ ํค ์ ๋ณด๋ฅผ ์ ๊ณต ๊ฐ๋ฅํ๋ค. HttpOnly ์ค์ ์ ์ด์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ ์ดํ ์ ์๋๋ก ๋ง๋ค ์ ์๋ค. Web Storage Session Storage ์๋ฒ์์ ์ ๊ทผํ ์ ์๋ค. ์ธ์ ์ด ์ข ๋ฃ๋๋ฉด ๋ชจ๋ ์ญ์ ๋๋ค. 5~10MB์ ํฌ๊ธฐ๋ฅผ ๊ฐ๋๋ค. Local Storage ์๋ฒ์์ ์ ๊ทผํ ์ ์๋ค. ๋ฐ ์๊ตฌ์ ์ผ๋ก ์ ์ฅํ ์ ์๋ค. 5~10MB์ ํฌ๊ธฐ๋ฅผ ๊ฐ๋๋ค. Client Side ํด๋ผ์ด์ธํธ ..
๊ฐ๋ ์ ๋ฆฌ ๋ด๊ฐ ์ ๊ณตํ๋ ์๋น์ค๋ฅผ Client, ๋ค๋ฅธ ์๋น์ค๋ฅผ Resource Server, ๋ ์๋น์ค๋ฅผ ๋ชจ๋ ์ด์ฉํ๋ ์ฌ์ฉ์๋ฅผ Resource Owner๋ผ๊ณ ์ ์ํ๋ค. ์ถ๊ฐ์ ์ผ๋ก Resource Server์์ ์ธ์ฆ์ ๋ด๋นํ๋ ์๋ฒ๋ฅผ ๋ฐ๋ก Authorization Server๋ผ๊ณ ํ๋ค. ์ด๋ ๊ฒ ์ฐํฉํด์ ์ธ์ฆ์ฒด๊ณ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ federated Identity๋ผ๊ณ ๋ถ๋ฅธ๋ค. ๋ฐฐ๊ฒฝ Client๊ฐ Resource Server(google, facebook ๋ฑ)์ ์๋ Resource Owner์ ๊ณ์ ์ ์ ์ํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ด ์์๊น? Resource Server์ ๋ํ Resource Owner์ id, pw๋ฅผ ์ ๊ณต๋ฐ์ผ๋ฉด ๋ ์ข๊ฒ ์ง๋ง ๋ณด์ ์ ๋ขฐ ๋ฌธ์ ๊ฐ ์๋ค. ๋ฐ๋ผ์ oAuth๊ฐ ๋์๋ค. oAuth๋ฅผ ..
React-query : fetch, cache, synchronize, update(for server state)์ ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๊ณต์์ฌ์ดํธ React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com ๋ฐฐ๊ฒฝ server state ์ฌ์ฉ ์ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ์ ์ ๋ค์๊ณผ ๊ฐ๋ค. caching deduping(๋ฐ์ดํฐ ์ค๋ณต ์ ๊ฑฐ) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..
query๊ฐ ์ค๋ ๋์๋ค๋ ๊ฒ์ ํ๋จํ๊ณ ๋ค์ fetchํด์ฌ ๋, queryClient.invalidateQueries ํจ์๋ฅผ ์ฌ์ฉํ๋ค. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..
Comment