useRef๋ DOM ์ ์ ํํ๋ ์ฉ๋ ์ธ์๋ ๋ค๋ฅธ ์ฉ๋๊ฐ ํ ๊ฐ์ง ๋ ์๋ค. => ์ปดํฌ๋ํธ ์์์ ์กฐํ ๋ฐ ์์ ํ ์ ์๋ ๋ณ์๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ useRef ๋ก ๊ด๋ฆฌํ๋ ๋ณ์๋ ๊ฐ์ด ๋ฐ๋๋ค๊ณ ํด์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋์ง ์๋๋ค. ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์์ ์ํ๋ ์ํ๋ฅผ ๋ฐ๊พธ
์๋ฐ์คํฌ๋ฆฝํธ์ JS์ XML์ X๋ฅผ ํฉ์น ๋ง๋ก,JS ์ฝ๋ ๋ด๋ถ์ ํ๊ทธ ๊ธฐ๋ฐ์ HTML ๊ตฌ๋ฌธ์ ๋ฐ๋ก ์จ์React ์๋ฆฌ๋จผํธ๋ฅผ ์ ์ํ๊ฒ ํด์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฅ ๋ฌธ๋ฒ์ด๋ค.์ฌ์ฉํ๊ธฐ ๋ณต์กํ ์๋ฐ์คํฌ๋ฆฝํธ์ createElement ๊ฐ๋ ์ ๊ฐ์ํํ์๋ค.๊น๋ํ๊ณ ๊ฐ๋ ์ฑ์ด ์ข๋ค. (
FunctionComponent ํ์ ์ ์ค์๋งReact + Typescript ์กฐํฉ์ผ๋ก ๊ฐ๋ฐ ์ ์ฌ์ฉํ๋ ํ์ ์ค ํ๋ํจ์ํ ์ปดํฌ๋ํธ ์ฌ์ฉ ์ ํ์ ์ ์ธ์ ์ธ ์ ์๋๋ก React์์ ์ ๊ณตํ๋ ํ์ ํด๋์คํ ์ปดํฌ๋ํธ์์ ํจ์ํ ์ปดํฌ๋ํธ๋ก ๋์ด์ค๋ฉด์ ์ฐ๊ฒ ๋ ํ์ ์ธ๋ฐ, ์ฌ
React์์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ ๊ฐํธํ๊ฒ ํด์ฃผ๋ ํ๋ ์์ํฌNext.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฒ ์ธก์์ React์ฝ๋๋ฅผ ์คํํ๋ค.React.js๋ฅผ ์๋ฒ ์ธก์์ pre-renderingํ์ฌ html์ ์์ฑํ๊ณ , ๋ธ๋ผ์ฐ์ ์๊ฒ ๋ณด๋ด์ค๋ค.๊ทธ ํ ๋ธ๋ผ์ฐ์ ์์ React๋ฅผ
Next.js๋ 'public' ๋๋ ํ ๋ฆฌ์ ์ฌ๋ฌ๊ฐ์ง ์ ์ ํ์ผ์ ๋ณด๊ดํ๊ณ <Image> ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๊บผ๋ด์ฌ ์ ์๋ค.public ํด๋ ๋ด๋ถ์ ์ด๋ฏธ์ง ํ์ผ(์: jpeg ํ์ผ)์ ๋ฃ์ด์ฃผ๊ณ public ํด๋์ ์ ์ฅ๋ ํ์ผ์ ์ด๋ฆ๊ณผ pages ํด๋์ ์ ์ฅ๋ ํ์ผ์ ์ด
์ต๊ทผ ๋ค์ํ ๋ชจ๋ฐ์ผ ์ฅ๋น๋ฅผ ์ฌ์ฉ โ ๋ค์ํ ํด๋ผ์ด์ธํธ๋ฅผ ๊ณ ๋ คํด์ผ ํจ โ ํนํ๋ ์ฒ๋ฆฌ๋ฅผ ์ํ API ์กฐํฉ์ด๋ ์ฒ๋ฆฌ ํ์์ด๋ฅผ ์ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ผ๋ก BFF(Backend for Frontend) ํจํด์ด ์กด์ฌBFF ํจํด์ API ๊ฒ์ดํธ์จ์ด์ ๊ฐ์ ์ง์ ์ ์ ํ๋๋ก ๋์ง ์๊ณ ํ๋ก
Svelte๋ ์ธํฐ๋ํฐ๋ธ ์น ์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ํด์ด๋ค.2021๋ stackoverflow ๊ฐ๋ฐ์ ์ค๋ฌธ์กฐ์ฌ'๊ฐ์ฅ ๋ง์ด ์ฌ๋๋ฐ๋ ์น ํ๋ ์์ํฌ'์์ 1์๋ฅผ ์ฐจ์งํ๋ค.Svelte๊ฐ ๋ฌด์์ด๊ณ ์ด๋ป๊ฒ ๋์ํ๋์ง๋ฆฌ์กํธ์ ๋ฌด์์ด ๋ค๋ฅธ์ง์ด๋ป๊ฒ ๋ฆฌ์กํธ๋ณด๋ค ๋ ๋น ๋ฅธ์ง์ ๊ฐ๋ฐ์๋ค์๊ฒ ์ดํ
์ถ์ฒ: ๋ ธ๋ง๋์ฝ๋ - ๊ฐ๋ฐ์๋ผ๋ฉด ์์์ผ ํ๋ Big O์๊ณ ๋ฆฌ์ฆ์ ์๋๋ ์ปดํจํฐ ํ๋์จ์ด ์์ฒด์์ ์๋์๋ ๋ณ๊ฐ๋ก๊ทธ๋ณด๋ค๋ โ์๋ฃ๊น์ง ๊ฑธ๋ฆฌ๋ ์ ์ฐจ์ ์โ๋ก ์ ์๋๋ค.์๋ฅผ ๋ค์ด, ๊ฐ์ ์์ ์ ์ํํ๋ ๋ฐ 5๊ฐ์ ์คํ ์ด ๊ฑธ๋ฆฌ๋ ์๊ณ ๋ฆฌ์ฆ์ด 10๊ฐ ์คํ ์ด ๊ฑธ๋ฆฌ๋ ์๊ณ ๋ฆฌ์ฆ๋ณด๋ค ์ฐ์
Test-Driven Developmentํ ์คํธ ์ฝ๋๋ฅผ ๋จผ์ ๋ง๋ค๊ณ , ์ค์ ํ๋ก๋์ ์ฝ๋๋ฅผ ๋์ค์ ๋ง๋๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ์ค๊ณ ๋ฐ ์ค์ ๊ฐ๋ฐ์ ๋จผ์ ํ๊ณ ์ดํ์ ํ ์คํธ ์ฝ๋ ์์ฏใ ํ ์คํธ ์ฝ๋๋ฅผ ๊ฐ์ฅ ๋จผ์ ์์ฑํ ํ์ ์ค๊ณ๋ฅผ ํ๊ณ ์ดํ์ ๊ฐ๋ฐ ์งํ์ถ์ฒ: ํ ์ฝํก - ํผ์นด์ TDD
'๋ฆฌ์กํธ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง'์ ๊ฒ์ํ๋ฉด์ '์ฃ์ง ์ต์คํ๋ก๋ฌ ์ฐจ์ด'๋ฅผ ์ฐพ์๋ณด๋ค๊ฐ ๋ฐ๊ฒฌํ ๊ธฐ์ฌ์ด๋ค. ์ฝ์ผ๋ฉด์ ์ค์ํ ๋ถ๋ถ์ ๊ตต์ ๊ธ์จ๋ก ์ฒ๋ฆฌํด๋ณด์๋ค. ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ(IE)๋ ์ฌํด 6์ 15์ผ์๋ก ์ฌ๋ผ์ง์ง๋ง ์ฃ์ง์์ ํธํ ๋ชจ๋๋ 2029๋ ๊น์ง ์ง์ํ๋ค๊ณ ํ๋ค. ์..๐ฑ
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋ฉด ๋ฌด์กฐ๊ฑด ์ฑ ์์ง๊ณ ์ ๊ฒฝ์จ์ผ ํ๋ ๋ถ๋ถํ๋ก์ ํธ ๊ธฐ๊ฐ ๋์ ๊ฐ์ฅ ๋ง์ง๋ง ์ฏค์ ํ๋ ๋จ๊ณ๊ต์ฅํ ๊ท์ฐฎ์ง๋ง ๊ผผ๊ผผํ๊ฒ ๋ด์ผ ํ๋ ๋ถ๋ถ์น ์ฌ์ดํธ ๋๋ ์น์ฑ์ด ์ด๋ ๋ธ๋ผ์ฐ์ ๋ ๋๋ฐ์ด์ค์ด๋ ์๊ด ์์ด์ํ๋ ๊ฒฐ๊ณผ๋ฌผ์ด ๋์ค๋๋ก ํ์ธํ๊ณ ์์ ํ๋ ๋จ๊ณIE, ํฌ๋กฌ, ์ฌํ๋ฆฌ
SCSS๋ SASS 3๋ฒ์งธ ๋ฒ์ ์์ ์ถ๊ฐ๋ ๊ฒ์ผ๋กSASS์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ง์ํ๋ฉด์ CSS ๊ตฌ๋ฌธ๊ณผ ์์ ํ ํธํ๋๋๋ก ๋ง๋ค์ด์ก๋ค.์ค์ฒฉ์ ํตํด ๋ถ๋ชจ ์์๋ฅผ ๋ฐ๋ณต ๊ธฐ์ ํ์ง ์๊ณ ์ฌ์ฉํ ์ ์๋ค.$๋ฅผ ์์ ๋ถ์ธ ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ๊ณตํต๋ ์์ฑ์ ์ฌํ์ฉํ ์ ์๋ค.@mixin์ผ๋ก ํจ
์ด๋ค ์ด์์ฒด์ ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ์ฌ๋ํ๋์ ์์ค๋ก ๋ง๋ค์ด์ง ๋๋ฑํ ์์ค์ ์ ๋ณด์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋๋ก,์ฆ ํ๋ซํผ๊ณผ ์๊ด์์ด ๊ฐ์ ์ปจํ ์ธ ๋ฅผ ๋ณผ ์ ์๋๋ก ๋ง๋ ์น์์ ํ์ค์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ธฐ์ ์ด์, ์น ๊ฐ๋ฐ์๋ค ์ฌ์ด์ ๊ท์น์๋ฏธ๋ฅผ ๊ฐ์ง ์๋งจํฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋งํฌ์ ์ ํ๋ค.๋ค์ํ
ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ JWT ํ ํฐ ์ธ์ฆ ์ ์ฐจ์๋ AccessToken, RefreshToken, AccessToken ๋ง๋ฃ์๊ฐ ๋ฑ ์ฌ๋ฌ ๊ฐ๋ ์ด ์ฌ์ฉ๋๋ค.ํ์ง๋ง ์ด๋ฒ ํฌ์คํธ์์๋, ์ฒ์๋ถํฐ ์ ์ฒด ๊ณผ์ ์ ๋ณด์ง ์๊ณ ๊ธฐ๋ณธ ๋จ๊ณ์์๋ถํฐ ์ฐจ์ฐจ ์ด์ ๋ถ์ฌ๋ณด๊ธฐ๋ก ํ๋ค.๋จผ์ , Re
์น ์ฌ์ดํธ์ ๋ํ ๊ฒ์์์ง ๋ก๋ด๋ค์ ์ ๊ทผ์ ์กฐ์ ํด์ฃผ๊ณ ์ ์ดํ๋ฉฐ,๋ก๋ด๋ค์๊ฒ ์น ์ฌ์ดํธ์ ์ฌ์ดํธ๋งต์ด ์ด๋ ์๋์ง ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ค.์ฃผ์: ์ฌ๊ธฐ์์ ์ฌ์ดํธ ๋งต์ ์์ง ๋ก๋ด์ ์ํ XML ์ฌ์ดํธ ๋งต์ด๋ฉฐ, ์น ์ฌ์ดํธ์ ๋ฉ๋ด ์ ์ฒด๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ฌ์ดํธ ๋งต์ ์๋ฏธํ๋ ๊ฒ์ ์๋ro
๋ณดํต ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฑ์ ๊ฐ๋ฐํ๋ค๊ณ ํ๋ฉด ๋ฆฌ์กํธ, ์ต๊ทค๋ฌ, ๋ทฐ ๋ฑ์ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ SPA๋ฅผ ๊ฐ๋ฐํ๊ฒ ๋๋ค.SPA๋ Single Page Application์ ์ฝ์๋ก,ํ๋์ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๋งํ๋ค.SPA๋ก ๋ง๋ค์ด์ง ์ฌ์ดํธ๋ฅผ ์ด์ฉํ ๋ ํค๋๋ ๊ณ
ํน์ ์์น์์ ๋ฐ์ํ ์ด๋ฒคํธ๊ฐ ์ต์์ ์์๊น์ง ์ฌ๋ผ๊ฐ๋ฉฐ ์ฐ์์ผ๋ก ๋ฐ์ํ๋ ํ์์ ์๋ฏธํ๋ค.์ธ ๊ฐ์ div ํ๊ทธ์ ๋ชจ๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ๊ณ ํด๋ฆญ ์ logEvent ํจ์๋ฅผ ์คํํ๋ ์ฝ๋์ด๋ค.์ตํ์ ์์์ธ <div class="three"></div>๋ฅผ ํด๋ฆญ
์ถ์ฒ: ์ฝ๋ฉ์ ํ ๋ฆฌ์กํธ ๊ฐ์ข์๋ฐ์คํฌ๋ฆฝํธ๋ ์ผ๋ฐ์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ๋๊ธฐ์ (synchronous)์ผ๋ก ์ฒ๋ฆฌ๋๋ค.์ด ๋ง์ ์ฝ๋๊ฐ ์์ค๋ถํฐ ์ฐจ๋ก๋ก ์คํ๋๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค.ํ์ง๋ง ํน์ ํจ์๋ค์ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ๋น๋๊ธฐ์ (asynchronous)์ผ๋ก ์คํ ๊ฐ๋ฅํ๋ค.์ค๋ ์ดํด๋ณผ
์ถ์ฒ: ํ๋ก ํธ์๋ 3์ฃผ์ฐจ ์์ (Core Javascript 1)ํ์ฌ ์คํ ์ค์ธ ์ฝ๋๊ฐ ๋๋์ผ ๋ค์ ์ฝ๋๋ฅผ ์คํ= ํ์ฌ ์คํ ์ค์ธ task๊ฐ ์ข ๋ฃํ ๋๊น์ง ๋ค์ task๋ ๋๊ธฐ์ฅ์ : ์ฝ๋ ์คํ ์์๊ฐ ๋ณด์ฅ๋๋ค.๋จ์ : ํ์ฌ ์คํ ์ค์ธ task๊ฐ ๋๋ ๋๊น์ง ๋ค์ task
๊นํ๋ธ ์ ์ฅ์์๋ฌธ/ํ๊ธ, ๋ธ๋๋๋ช /์ ํ๋ช ์ ๊ณ ๋ คํ์ฌ ์ฌ์ฉ์๊ฐ ์ํ๋ ์์์ ๋ฅผ ๋ณด๋ค ์ฝ๊ฒ ์ฐพ์ ์ ์๋๋ก ์ค๊ณํ๋ค.๊ฒ์ ์ฑ๋ฅ์ ์ต์ ํํ๋ค.์ด๋ฒ ๊ณผ์ ๋ฅผ ํ๋ฉฐ debounce๋ฅผ ์ ์ฉํด๋ณด์๋ค. ๊ฒ์์ฐฝ์ ์ ๋ ฅ์ ํ๋ฉด ์ ๋ ฅํ๋ ๊ธ์๋ง๋ค(ํ๊ธ์ ์ด์ฑ, ์ค์ฑ, ์ข ์ฑ ๋ชจ๋) ๋ ๋๋ง์ด