📅 2024년 01월 08일

38일차: CORS, CSR, SSR

간단한 Spring Project생성, CORS

Spring Initializr 다운로드

build.gradle 수정

plugins {
	id 'java'
	id 'org.springframework.boot' version '2.7.11'
	id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}
group = 'com.example'
version = '0.0.1-SNAPSHOT'
java {
	sourceCompatibility = '11'
}
repositories {
	mavenCentral()
}
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
	useJUnitPlatform()
}

CorsConfig.java 파일 생성, CORS 해결

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void  addCorsMappings(CorsRegistry corsRegistry){
        corsRegistry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

• CORS란
  Cross-Origin Resource Sharing의 약자로 웹 애플리케이션 간의 리소스 공유를 관리하기 위한 보안 메커니즘으로 스크립트가 로드된 출처와 요청이 보내지는 출처가 동일해야만 데이터에 접근할 수 있다. 다른 출처의 리소스에 대한 요청은 보안상의 이유로 브라우저에 의해 차단된다.
  

CSR

Client-Side Rendering (CSR - 클라이언트 사이드 렌더링)

• 클라이언트 측에서 렌더링되는 방식
• 초기 페이지 로드 시 서버로부터 HTML, CSS, JavaScript 파일 등 기본적인 리소스를 받은 후, 클라이언트(브라우저)에서 JavaScript를 사용하여 동적으로 데이터를 가져와 화면을 렌더링
• 빠른 초기 로드 속도
• 초기 로드 이후에는 데이터를 기다려야 할 수 있다.
• 사용자와의 상호작용이 빠르고 부드럽다.

SSR

Server-Side Rendering (SSR - 서버 사이드 렌더링)

• SSR은 서버 측에서 렌더링되는 방식
• 서버에서 HTML을 동적으로 생성하여 완전한 HTML 페이지를 클라이언트에 제공
• 초기 페이지 로딩 속도가 빠르다. 사용자는 완전한 페이지를 더 빨리 볼 수 있다.
• 많은 요청을 처리할 때 서버 부하가 높아질 수 있다.
• 사용자에게 렌더링된 페이지를 보여주기까지 일부 시간이 소요될 수 있다.

github 실습 내용