Flash of Unstyled Content(FOUC) 현상 해결

먼저 기능을 설명하자면 표시하고자하는 파일은 각각 데이터 파일과 첨부 파일로 나뉜다.

이때 첨부파일이 존재하면 첨부파일 영역을 조건부로 렌더링한다.

 

 

페이지 최초 접근 시에 첨부 파일이 존재하지 않으면 해당 영역들을 .hide()로 숨기고 첨부파일이 존재하면 해당 파일에 대한 정보를 dom 요소에 표시하도록 구현하였다.

이때 문제점은 dom 요소를 모두 그리고나서 자바스크립트를 통해 판별하여 ui를 수정하기 때문에 초기에 DOM 요소가 렌더링되었다가 JavaScript 실행 후 숨겨지는 과정에서 잠깐 보여지는 현상(FOUC)이 발생한다.

이를 해결해보자.

Solution

가장 간단한 방법은 화면에 표시하는 순서를 바꿔주면 된다.

즉, 그렸다가 숨기는게 아닌 숨겼다가 그리면 된다.

현재 코드

                // 이미 공개된 데이터일 경우 열람 신청 버튼 비활성화
                if(detailData.is_public !== 'Y'){
                        $(".btn_data").hide();
                }
                $(".category").text(category);
                // 기타 파일일 때 ui 예외처리
                if(detailData.item_kind === "table" || detailData.item_kind === "etc"){
                    $(".main_data_file").hide();
                }

                // 데이터 공개여부 처리
                if(detailData.is_public == 'N'){
                    if(detailData.access_request_status !== "APPROVED"){
                        $(".overlay-forbidden").addClass("on");
                    }
                    
                }

                //데이터 열람 신청 활성여부
                if(detailData.access_request_status === "APPROVED" || detailData.access_request_status === "APPLIED")
                {
                    //열람 신청 버튼 비활성화
                    $(".btn_data").hide();
                }

현재 코드는 기본적으로 이미 DomTree를 통해 그려진 요소에 대하여 특정 조건일 때 숨기도록 구현하였다.

따라서 페인팅이 끝나고 난 후 화면에 요소가 보이게되고 자바스크립트가 실행되면서 해당 요소가 가려진다.

이를 해결하기 위해 먼저 화면에 보이지 않도록 css를 입힌 후 특정 조건에 맞춰 화면에 보이도록 수정한다.

$(".btn_data").removeClass("hidden"); // 현재 환경은 제이쿼리를 사용한다.

.hidden {
  display: none !important;
}

제이쿼리 환경에서 이러한 문제를 해결하기 위해 .hidden class를 만들어 특정 조건에서 hidden 클래스를 삽입 또는 삭제하도록한다.

해결된 코드

데이터파일

 

 

 

<%-- 데이터 비공개 설정시 on 클래스 붙이기 --%>

비공개 설정으로 열람이 불가능합니다.

아래 열람 신청을 하신 후, 담당자 승인에 따라 열람 하실 수 있습니다.

첨부파일

 

	// 이미 공개된 데이터일 경우 열람 신청 버튼 비활성화
	if(detailData.is_public === 'Y'){
	$(".btn_data").addClass("hidden");
	} else {
	$(".btn_data").removeClass("hidden");
	}
	$(".category").text(category);
	// 기타 파일일 때 ui 예외처리
	if(detailData.item_kind === "table" || detailData.item_kind === "etc"){
	$(".main_data_file").addClass("hidden");
	} else {
	$(".main_data_file").removeClass("hidden");
	}
	// 데이터 공개여부 처리
	if(detailData.is_public === 'N'){
	if(detailData.access_request_status !== "APPROVED"){
	$(".overlay-forbidden").removeClass("hidden").addClass("on");
	}
	}
	
	//데이터 열람 신청 활성여부
	if(detailData.access_request_status === "APPROVED" || detailData.access_request_status === "APPLIED"){
	$(".btn_data").addClass("hidden");
	}
	if(attach_number > 0){
	$(".attach_file").removeClass("hidden");
	}

조건부로 렌더링되어야하는 요소에 hidden 클래스를 붙이고 표시해야할 때 removeClass를 통해 hidden 클래스를 제거하는 방식으로 구현했다.

이렇게 수정하여 불필요한 요소가 표시되었다 사라지는대신 표시되어야할 때만 표시되도록 수정하였다.