반응형

js 3

[JS] FOIT, FOUT 문제 해결을 위한 웹폰트 최적화 하기

웹폰트 란,웹폰트(Web Fonts)는 웹 디자인에서 더 나은 시각적 경험을 위해 필수적인 요소입니다. 기본 시스템 폰트로만 제한되어 있으면 웹사이트의 디자인 선택폭이 제한되는데, 이는 디자이너와 개발자 모두에게 제한된 경험을 제공하게 됩니다. 웹폰트는 이러한 제한을 극복하고, 웹사이트에 디자인 요소를 추가할 수 있는 강력한 도구입니다.웹폰트 최적화의 필요성하지만, 웹폰트를 사용할 때는 최적화가 필수적입니다. 왜냐하면 웹폰트는 웹페이지의 성능에 영향을 미치는 요소 중 하나이기 때문입니다. 웹폰트를 사용하면 추가적인 리소스가 필요하므로 로딩 속도가 길어져 FOIT, FOUT와 같은 문제가 발생할 수 있어 사용자에게 혼란을 줄 수 있고, 사용자 경험을 저하시킬 수 있습니다.FOIT, FOUT 란,FOIT(F..

Front-End 2024.05.23

[JS] Expected a JavaScript module script but the server responded with a MIME type of "text/html". 에러 해결하기

App.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.라는 에러가 발생했다. 보통 import, export 시 파일 명이나 경로가 잘 못 되었을 경우 발생한다고 한다. 나의 경우에는 index.html 파일에 아래처럼 상대경로인 ./src/App.js 라고 써서 발생했던 문제였다. . 을 지워 절대경로로 바꾸어 주니 에러가 해결되었다!   출처

Front-End 2024.05.12

[JS, CSS, NGINX] Vanilla JS 로 SPA 구현하기

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여, 새로운 프로젝트를 Vanilla JS로 진행해 보기로 했다. 페이지 전환 속도를 감소하여 사용자 경험을 향상시키기 위하여, React처럼 SPA(Single Page Application)로 구현했다.꽤나 어렵고 번거로운 일이었지만, 직접 구현해보며 어떤 식으로 돌아가는지 공부해 볼 수 있었고, 프레임워크나 라이브러리를 쓰며 얼마나 편하게 작업할 수 있었던 것인지 깨달을 수 있었던 유익한 시간이었다. 구현 시 아래 목표들을 달성하기 위해 많은 고민을 하며 진행했다.페이지 이동 시 URL의 경로도 변경될 것URL의 경로가 깔끔할 것뒤로 가기가 가능할 것해당 페이지의 CSS가 적용될 것URL의 경로를 직접 수정하여도 해당 페이지로 이동될 ..

Front-End 2024.05.12
반응형