공부/FE8 [Vite] Vite 알아보기 근래에 Vite에 대해 이런저런 추천을 받기도 했고, 실제로 Vite로 된 프로젝트를 경험해본고로 상당한 인상을 받았기에... Vite에 대해 알아보고자 한다.Vite란?※ 발음은 '비트'다! 공식 사이트에서 친절하게 발음 예시도 제공해준다. 빠른 개발 환경을 위한 프론트엔드 툴 기존에 오랜 시간 사용되던 Webpack 등의 번들러의 문제점은 무겁고 느리다는 것이다.특히 프로젝트의 규모가 커질수록 이런 문제가 더더욱 두드러진다.이는 곧 개발상의 불편함을 야기한다.번들러 (Bundler): 웹의 이런저런 소스들(JS 코드, CSS 같은 asset들)을 브라우저가 사용할 수 있는 정적인 파일들로 만들어주는 도구. 위의 문제를 해결하기 위해, 브라우저가 지원하는 ES Modules + 네이티브 언어로 된 도.. 2024. 7. 14. [웹 기본 쌓기] 렌더링, 리플로우/리페인트 근래 이런저런 자료를 접하며 부족했던 기본 지식을 쌓고 있다. 특히 개발할 때 MDN 문서를 자주 참고하며 도움을 얻는 편이었는데, 이 MDN에 좋은 문서들이 많아 시간 날 때 조금씩 읽는 중. 이미 문서로 나와있는 내용이지만 블로그에 남기며 한 번 더 복습을 하게 되므로... 읽은 것을 백업 겸 가볍게 끄적인 내용을 적는다. 렌더링은 어떻게 될까? (중요 렌더링 경로, Critical Rendering Path) 중요 렌더링 경로 : 렌더링 과정을 일컫는 말(정확히는, 브라우저가 HTML, CSS, JS를 화면상의 픽셀로 변환하는 단계). 브라우저는 요청을 통해 웹페이지에 대한 정보를 받아서 아래와 같은 과정을 거친다. 1. HTML을 분석한다(이때 분석을 파싱이라고 함). 분석한 HTML을 가지고 D.. 2024. 1. 10. 이전 1 2 다음