스프링 부트 : 리액트와 Hilla 사용 방법

Spring Boot와 React 위에서 깨끗하고 유지보수 가능한 비즈니스 앱을 개발하고, Hilla 프레임워크를 사용하여 보다 빠르게 실행할 수 있습니다.

많은 풀스택 개발자들에게 Spring Boot와 React의 결합은 동적 비즈니스 애플리케이션을 구축하는 데 중요한 요소가 되었습니다. 하지만 강력하기는 하지만 이 페어링에는 여러 가지 문제가 있습니다. 유형 관련 오류부터 협업 장애물에 이르기까지 개발자들은 종종 일상적인 문제의 미로를 탐색하게 됩니다.

이 환경을 단순화하는 것을 목표로 하는 프레임워크인 Hilla를 입력합니다. 아직 Hilla가 레이더를 통과하지 않았다면 이 기사는 Spring Boot and React를 사용할 때 제공하는 기능과 잠재적으로 개발 프로세스를 간소화할 수 있는 방법에 대한 개요를 제공합니다.

 

 

스프링 부트 : 리액트와 Hilla 사용 방법

 

 

스프링 부츠, 리액트, 힐라

풀스택 개발자에게 백엔드의 자바와 프론트엔드의 리액트(TypeScript)의 결합은 신뢰성과 역동성의 매력적인 조화를 제공합니다. 강력한 타입 시스템으로 유명한 자바는 컴파일 타임에 잠재적인 오류를 잡아내며 데이터가 예측 가능하게 동작하도록 보장합니다. 한편, TypeScript는 자바스크립트 세계에 유사한 타입 안전 계층을 제공하여 리액트의 기능을 강화하고 컴포넌트가 예상대로 데이터를 처리하도록 보장합니다.

그러나 Java와 TypeScript 모두 개별 유형 안전 피난처를 제공하지만, 종종 링크가 누락됩니다. 즉, 이러한 유형 안전이 백엔드에서 프론트엔드까지 일관되게 유지되도록 하는 것입니다. 여기서 Hilla의 이점이 빛을 발하며, 이를 통해 Hilla를 지원합니다

엔드 투 엔드(End-to-End) 유형 안전성

리액트 서비스와 스프링 서비스 간의 직접적인 통신

일관된 데이터 검증 및 유형 안전성

 

 

엔드 투 엔드(End-to-End) 유형 안전성

힐라는 타입 세이프티가 전체 개발 스펙트럼에 걸쳐 있음을 보장함으로써 한 단계 더 나아갔습니다. 개발자들은 API 문서를 읽는 시간을 줄이고 코딩에 더 많은 시간을 할애합니다. 힐라는 자동으로 생성된 타입스크립트 서비스와 데이터 타입을 통해 개발자들이 IDE 내에서 직접 API를 탐색할 수 있게 해줍니다. 이러한 매끄러운 통합은 코드가 프론트엔드든 백엔드든 변경되면 불일치가 컴파일 타임 오류를 유발하여 문제가 조기에 발견되고 수정되도록 보장합니다.

 

 

리액트 서비스와 스프링 서비스 간의 직접적인 통신

힐라를 사용하면 엔드포인트를 관리하거나 복잡한 쿼리를 해독하는 번거로운 과정은 과거의 일이 됩니다. 개발자는 리액트 클라이언트에서 스프링 부트 서비스를 직접 호출하여 필요한 것을 정확하게 받을 수 있습니다. 이는 힐라의 @BrowserCallable 주석을 사용하여 브라우저에서 스프링 @Service를 사용할 수 있도록 함으로써 달성됩니다. 이 직접 통신은 데이터 교환을 간소화하여 불필요한 오버헤드 없이 프론트엔드가 정확히 원하는 것을 얻도록 보장합니다. 먼저 @BrowserCallable 주석을 Spring Service에 추가합니다:

@BrowserCallable 
@Service
public class CustomerService {
    public List<Customer> getCustomers() {
        // Fetch customers from DB or API
    }
}

 

​

이 주석을 기반으로 힐라는 프론트엔드에서 타입 검사 가능한 방식으로 자바 백엔드를 호출할 수 있는 TypeScript 유형과 클라이언트를 자동으로 생성합니다(REST 엔드포인트를 선언할 필요가 없음):

function CustomerList() {
    // Customer type is automatically generated by Hilla
    const [customers, setCustomers] = useState<Customer[]>([]);

    useEffect(() => {
      CustomerService.getCustomers().then(setCustomers);
    }, []);

    return (
      <ComboBox items={customers} ></ComboBox>
    )
}

 

 

일관된 데이터 검증 및 유형 안전성

힐라의 두드러진 특징 중 하나는 스택 전체에서 데이터 유효성 검사 일관성을 유지할 수 있다는 점입니다. 힐라는 백엔드에서 데이터 유효성 검사 규칙을 한 번 정의함으로써 프론트엔드에 대한 TypeScript 유효성 검사를 자동으로 생성합니다. 이를 통해 개발자 생산성이 향상될 뿐만 아니라 데이터가 어디에서 처리되는지에 관계없이 일관성을 유지할 수 있습니다.

예를 들어, 필드가 Java에서 @NotBlank로 표시된 경우 Hilla는 이 데이터가 React 프론트엔드에서 처리될 때 동일한 유효성 검사가 적용되도록 합니다.

public class Customer {

    @NotBlank(message = "Name is mandatory")
    private String name;

    @NotBlank(message = "Email is mandatory")
    @Email
    private String email;
  
    // Getters and setters

}

 

 

힐라우스 폼 후크는 생성된 TypeScript 모델을 사용하여 폼 필드에 유효성 검사 규칙을 적용합니다.

function CustomerForm() {

    const {model, field, read, submit} = useForm(CustomerModel, {
        onSubmit: CustomerService.saveCustomer
    });

    return (
    <div>
      <TextField label="Name" {...field(model.name)} />
      <EmailField label="Email" {...field(model.email)} />
      <Button onClick={submit}>Save</Button>
    </div>
    )
}

 

배터리 및 가드레일 포함

Hilla는 사전 구축된 툴을 제공하고, 실시간 기능을 강화하며, 보안의 우선순위를 정하고, 장기적인 적응성을 보장함으로써 전체 스택 개발을 간소화합니다.

이 프레임워크는 데이터 집약적인 애플리케이션을 위해 특별히 설계된 미리 구축된 UI 구성 요소 세트를 제공합니다. 이 구성 요소는 데이터 그리드 및 양식에서부터 다양한 선택 구성 요소 및 편집기에 이르기까지 다양합니다. 또한 실시간 기능을 구현하려는 사용자를 위해 힐라는 반응형 엔드포인트를 지원하여 프로세스를 단순화하여 수동 웹소켓 관리가 필요 없습니다. 힐라의 또 다른 주목할 만한 측면은 보안 통합입니다. 기본적으로 스프링 시큐리티와 연결되어 데이터 교환을 보호하기 위한 강력한 액세스 제어 메커니즘을 제공합니다. 프레임워크의 상태 비저장 설계는 사용자 요구가 증가함에 따라 애플리케이션이 효율적으로 유지되도록 보장합니다.

Hilla의 설계 접근 방식은 현재 개발 프로세스를 간소화할 뿐만 아니라 앱의 미래를 보장합니다. 모든 구성 요소가 원활하게 통합되어 업데이트가 가능하며, 특히 한 버전에서 다른 버전으로 간단하고 번거롭지 않습니다.

 

결론적으로

Spring Boot and React에서 풀스택 개발의 복잡성을 탐색하는 것은 복잡할 수 있습니다. 이 기사에서는 Hilla가 이러한 많은 문제를 어떻게 완화할 수 있는지를 강조했습니다. 원활한 유형의 안전 보장부터 실시간 통합을 단순화하고 보안을 강화하는 것까지 포괄적인 솔루션으로 눈에 띕니다. 기술 환경이 발전함에 따라 애플리케이션의 적응력을 유지하고 업데이트를 쉽게 유지할 수 있도록 미래 지향적인 설계를 통해 보장합니다.

스프링 부트 앤 리액트(Spring Boot and React)의 세계에 몰두하는 사람들에게 힐라를 고려하는 것은 올바른 방향으로 나아가는 한 걸음일 수 있습니다. 그것은 단순한 틀 이상의 것이며, 능률적이고 미래에 대비한 발전으로 가는 길입니다.