7월 26일 - 크로스 브라우징

Yullgiii·2024년 7월 29일
0

크로스 브라우징

크로스 브라우징은 웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 즉, 브라우저의 렌더링 엔진이 다른 경우에도 웹 사이트가 정상적으로 작동하도록 하는 기술이다. 웹 사이트를 어떤 환경에서도 비슷하게 만들어 이상없이 작동되게 하는 것이 목표다. 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 방법을 말한다.

웹 성능과 관련된 Issue 정리

1. 네트워크 요청에 빠르게 응답하자

  • 3xx 리다이렉트를 피할 것
  • meta-refresh 사용 금지
  • CDN(content delivery network)을 사용할 것
  • 동시 커넥션 수를 최소화할 것
  • 커넥션을 재활용할 것

2. 자원을 최소한의 크기로 내려받자

  • gzip 압축을 사용할 것
  • HTML5 App cache를 활용할 것
  • 자원을 캐시 가능하게 할 것
  • 조건 요청을 보낼 것

3. 효율적인 마크업 구조를 구축하자

  • 레거시 IE 모드는 http 헤더를 사용할 것
  • @import의 사용을 피할 것
  • inline 스타일과 embedded 스타일은 피할 것
  • 사용하는 스타일만 CSS에 포함할 것
  • 중복되는 코드를 최소화할 것
  • 단일 프레임워크를 사용할 것
  • Third Party 스크립트를 삽입하지 말 것

4. 미디어 사용을 개선하자

  • 이미지 스프라이트를 사용할 것
  • 실제 이미지 해상도를 사용할 것
  • CSS3를 활용할 것
  • 작은 크기의 이미지는 DataURL을 사용할 것
  • 비디오의 미리보기 이미지를 만들 것

5. 빠른 자바스크립트 코드를 작성하자

  • 코드를 최소화할 것
  • 필요할 때만 스크립트를 가져올 것: flag 사용
  • DOM에 대한 접근을 최소화할 것
  • 다수의 엘리먼트를 찾을 때는 selector API를 사용할 것
  • 마크업의 변경은 한번에 할 것: temp 변수를 활용
  • DOM의 크기를 작게 유지할 것
  • 내장 JSON 메서드를 사용할 것

6. 애플리케이션의 작동원리를 알고 있자

  • Timer 사용에 유의할 것
  • requestAnimationFrame을 사용할 것
  • 활성화될 때를 알고 있을 것

예제

다음은 네트워크 요청 최적화를 위해 gzip 압축을 사용하는 간단한 예제다.

// Java Spring Boot Gzip Compression 설정 예제
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.CommonsRequestLoggingFilter;
import org.springframework.web.filter.CommonsRequestLoggingFilter;

@Configuration
public class WebConfig {

    @Bean
    public FilterRegistrationBean<CommonsRequestLoggingFilter> loggingFilter(){
        FilterRegistrationBean<CommonsRequestLoggingFilter> registrationBean = new FilterRegistrationBean<>();
        CommonsRequestLoggingFilter loggingFilter = new CommonsRequestLoggingFilter();
        loggingFilter.setIncludeClientInfo(true);
        loggingFilter.setIncludeQueryString(true);
        loggingFilter.setIncludePayload(true);
        registrationBean.setFilter(loggingFilter);
        return registrationBean;
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true)
                        .maxAge(3600);
            }
        };
    }
}

이 예제는 Spring Boot 애플리케이션에서 네트워크 요청 최적화를 위한 gzip 압축 설정을 포함한 것이다.

So...

크로스 브라우징은 다양한 환경에서 웹 페이지가 정상적으로 작동하도록 하는 중요한 기술이다. 이를 통해 웹 페이지의 호환성을 높이고 사용자 경험을 향상시킬 수 있다. 또한, 웹 성능 최적화를 통해 빠르고 효율적인 웹 애플리케이션을 구축할 수 있다.

profile
개발이란 무엇인가..를 공부하는 거북이의 성장일기 🐢

0개의 댓글