인프런 커뮤니티 질문&답변
작성한 질문수
FOUC 관련 질문입니다!
해결된 질문
작성
·
89
·
수정됨
1
안녕하세요 범쌤! 🙂
프로젝트 리팩토링 중에 FOUC 문제가 있어서 다시 강의를 확인했는데, 범쌤은 각 css파일과 js파일에 코드를 작성했더라구요. 하지만 저는 해결이 안돼서 head태그에 아래와 같이 넣었더니 잘 되었습니다..
<head>
<title>Main</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.no-fouc {
visibility: hidden;
}
</style>
<script>
document.documentElement.classList.add('no-fouc');
window.addEventListener('DOMContentLoaded', () => {
document.documentElement.classList.remove('no-fouc');
gsap.from('body', { opacity: 0, autoAlpha: 0 });
});
</script>
<script type="module" src="/src/pages/main.js"></script>
</head>제가 범쌤처럼 비슷하게 작성하니까 fouc해결이 안되더라구요ㅠ 혹시 아래 코드에서 문제점이 있는지 확인해 주실 수 있나요..?
<head>
<title>Main</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="/src/pages/main.js"></script>
</head>@use '@/styles/index' as *;
@use '@/styles/components/popUp' as *;
body {
visibility: hidden;
min-width: 20rem;
background-color: $black;
}import '@/pages/main.scss';
import gsap from 'gsap';
function init() {
gsap.from('body', { autoAlpha: 0});
}
window.addEventListener('DOMContentLoaded', function () {
init();
});아마 코드에 문제가 없다면 아래와 같은 이유들로 fouc가 해결이 안될 수도 있나요?
main.js 파일에서 실행되어야 하는 코드가 많아서?
scss파일에서의 use나 js파일에서의 import가 많아서?
스타일 파일을 Link태그가 아닌 js에서 import로 불러와서..?
코드에도 문제가 없고 이런 이유들도 아니라면..해결이 안되는 이유를 모르겠습니다..
fouc가 심한 페이지들이 많아서 함수로 만들어놓고 import로 함수를 불러와 재사용하고 싶은데 잘 안됩니다ㅠㅠ
답변 1
1
안녕하세요 yooniverse 님 😀
코드를 확인해보니, FOUC의 문제가 아닌 css를 불러오는 시점에서 문제가 발생한것으로 보입니다.
해당 코드에서는(작성하신) scss 파일을 js에서 불러올 경우 html 안에서는 이미 태그가 있고 태그와 다양한 텍스트들을 먼저 화면에 로드한 이후 js 파일이 실행됩니다.
<script type="module" src="/main.js"></script>
type이 module로 되어있을 경우 defer 명령어를 추가한 것 처럼 js파일이 동작하게됩니다.
(모든 dom요소의 렌더링이 끝난 이후 js파일이 실행됩니다.)
그렇게 되면 html이 먼저 웹브라우저에 보이게 되고 이후 js파일이 읽힌 후 css 파일을 불러오니 fouc처럼 보이는 문제가 발생하게 됩니다.
해결 방법은 css파일을 js에서 불러오는게 아닌, html에 추가하여 css파일이 먼저 읽히고 html 컨텐츠가 읽힐 수 있도록 코드를 수정해주시면 됩니다.
이쯤되면 이런 생각이 드실 것 같아요.
"그럼 css는 js에서 불러오면 안되나?"
가능합니다. 하지만 지금은 순수 자바스크립트를 사용한 환경이고 html을 직접 하드코딩으로 넣었기 때문이고, 순수 자바스크립트를 사용한다 하더라도 동적으로 html을 추가하는 web-component api를 사용하시거나 다른 프론트엔드 라이브러리들인 react,svelt,vue같은 도구들을 사용한다면, jsx로 태그를 만들고 이후 스타일이 들어가기 때문에 문제없이 사용할 수 있습니다.
다만 현재는 특수한 환경이기 때문에 이런 문제가 발생했다고 볼 수 있습니다.
감사합니다 :)
https://github.com/Yooniverse42/Vanilla-Project-taing/tree/main/src/pages/taing 입니다!
ㅎㅎ.. 바닐라 프로젝트때 했던 타잉을 리팩토링 하는 중입니다
일단 fouc가 심한 파일을 /src/pages/taing/index.html 입니다!
관련 스타일 파일과 js파일은 taing 폴더 안에 있는 taing.scss, taing.js 입니다 😃