๐จ Dev_FE
[ CSS ] CSS ๋ชจ๋ฐ์ผ Transition ๊ฐ์
# Reference aproid blog - CSS Transition ์ฑ๋ฅ ์ต์ ํ by aproid https://aproid.github.io/2019/03/21/transition-optimize/ CSS Transition ์ฑ๋ฅ ์ต์ ํ — Aproid CSS3์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ค ํ๋์ธ Transition, ํ์ง๋ง ๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ Transition ์ฌ์ฉ์ ์ฃผ์์ ์ ์์ง ๋ชปํ๊ณ ์ฌ์ฉํ์ฌ ๋ชจ๋ฐ์ผ๊ฐ์ ์ฑ๋ฅ์ด ์ข์ง ๋ชปํ ๊ธฐ๊ธฐ์์ ๋ถ๋๋ฌ์ด ํจ๊ณผ๋ฅผ ๋ณด์ง ๋ชปํ๋ ๊ฒฝ์ฐ๊ฐ ์ aproid.github.io yceffort blog - CSS ์ฑ๋ฅ ํฅ์์ํค๊ธฐ https://yceffort.kr/2021/03/improve-css-performance#css%EB%8A%94-%EC%96%B4%EB%96%BB%EA%..
[ JS ] ๋ฌธ์์ด๋ด์ ํน์ ๋ฌธ์์ด ๋ชจ๋ ๋์นํ๊ธฐ
0. ๊ฐ์ js๋ก ํ๋ก์ ํธ ์งํ ์ค ์ต๊ทผ์ ์๋กญ๊ฒ ์ ๋ฐ์ดํธ๋ ๋ฌธ์์ด ๋ฉ์๋๋ฅผ ๊ณต๋ถํ๊ณ ์ ์ฉํ๊ณ ์ ์ด ๊ธ์ ์์ฑํจ 1. ํ์ต๋ชฉ์ ๋ฌธ์์ด์์ ํน์ ๋ฌธ์์ด์ ๋ชจ๋ ๋์นํ๋ ๋ค์ํ ๋ฉ์๋ ํ์ธ ์ค์ ์์ ํ์ฉ ๊ฐ๋ฅํ ๋ค์ํ ๋ฌธ์์ด ์นํ๋ฒ ํ์ต 2. ํ์ต๋ด์ฉ js์๋ prototype์ ํตํด ์ง์ ๋ ๋ค์ํ ๋ฉ์๋๋ค์ด ์กด์ฌํฉ๋๋ค. ์ด ๋ฉ์๋๋ฅผ ํตํด ์ด๋ ต๊ฒ ๊ตฌ์ฑํด์ผ ํ ์ฝ๋๋ค์ ๊ฐ๋จํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ๋ง์ฝ ๋ฌธ์์ด์์ ํน์ ๋ฌธ์๋ฅผ ์ฐพ๊ณ ์ ํ๋ค๋ฉด, ์ฐ๋ฆฐ ๋จ์ํ indexOf ๋ผ๋ ๋ฉ์๋๋ฅผ ํตํด ๋ฌธ์ ๋ด ํน์ ๋ฌธ์์ ์์น๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์์ต๋๋ค. "abcdefg".indexOf(c) // 2 ํ์ง๋ง indexOf ๋ฉ์๋๊ฐ ์๋ค๋ฉด? function findIndexOfChar ( base_string, characte..
[ JS ] 1. ์ปดํ์ผ
js๋ฅผ ๊ณต๋ถํ๋ฉฐ ๋๋ ์์ง์ ์ปดํ์ผ ๊ณผ์ ์ ์์์ผ ํ๋ ์ด์ (์์ฑ์ ํผ์ ): 1. ์์ฑ์์ ์ Chrome V8์ด ์ธ๊ณ์ ์ผ๋ก ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ js์์ง์ด๋ฉฐ, V8 ๋ฟ ์๋๋ผ ๋ค๋ฅธ ์์ง๋ค๋ ํด๋น ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค. 2. ์์ง์ ๋ด๋ถ ํ๋ก์ธ์ค๋ฅผ ์์๋ณด๋ฉฐ this๋ js์ ์ธ์ด์ ํน์ฑ์ ์ดํดํ๋ ๊ฒ์ ๋์์ด ๋ ์ ์์ต๋๋ค. 0. ???: js๋ ์ปดํ์ผ ํ์์๋ ์ธ์ด์ธ๋ฐ์? ๊ธ์ ์์ํ๊ธฐ์ , ์๋ก ์ ๊ฐ๋ ์ ๊ทผ๊ฐํ์ฌ ๋ง์ ํ์๋ฉด js๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด๋ผ ์ปดํ์ผ์ด ํ์ ์์ต๋๋ค..๋ง ์๋ ํฅ์ ๋ฑ์ ๋ชฉ์ ์ ์ํด js์์ง ๋ด์์ ์ผ๋ถ ์ปดํ์ผ ๊ณผ์ ์ด ์๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ํนํ ์ต๊ทผ ๋ค์ ์ฌ์ฉ๋๋ Chrome v8์์ง์ด ๊ทธ ์์์ ๋๋ค. ๋ฐ๋ผ์ js๋ ์ ํ์ ์ผ๋ก ์ปดํ์ผํ๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด์ ๋๋ค. Chrome V8์์ง..
[ vanilla js ] Web Worker API (๊ฐ๋ ํธ)
*Reference: https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API Web Workers API - Web API | MDN ์น ์์ปค(Web worker)๋ ์คํฌ๋ฆฝํธ ์ฐ์ฐ์ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์ฃผ ์คํ ์ค๋ ๋์ ๋ถ๋ฆฌ๋ ๋ณ๋์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋์์ ์คํํ ์ ์๋ ๊ธฐ์ ์ ๋๋ค. ์น ์์ปค๋ฅผ ํตํด ๋ฌด๊ฑฐ์ด ์์ ์ ๋ถ๋ฆฌ๋ ์ค๋ ๋์์ developer.mozilla.org Web Worker API ์นํ์ด์ง์์ ์คํ์ค์ธ ์ฃผ ์ค๋ ๋์ ๋ณ๊ฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋์์ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋ ๊ธฐ์ ๋ณ๊ฐ์ ์ค๋ ๋์์ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ฏ๋ก ๋ฌด๊ฑฐ์ด ์์ ์ผ๋ก ์ธํ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ง์ฐ ๋ฑ์ ๋ฐฉ์งํ ์ ์์. *์ฃผ์ 1) window์ ์ผ๋ถ ๋ฉ์๋ ์ฌ์ฉ ๋ถ๊ฐ (https:/..