Spring Boot와 Angular를 활용한 웹 애플리케이션 개발

Spring Boot와 Angular를 활용한 웹 애플리케이션 개발

Overview

Spring Boot와 Angular를 활용하여 웹 애플리케이션을 구축하는 것은 개발자들에게 견고한 프론트엔드와 백엔드 솔루션을 제공하는 훌륭한 방법입니다. Spring Boot는 Java 기반의 백엔드 프레임워크로, 애플리케이션을 쉽고 빠르게 개발할 수 있게 도와주며, Angular는 TypeScript를 사용하는 프론트엔드 프레임워크로, 동적이고 반응성이 뛰어난 사용자 인터페이스를 만들 수 있습니다. 이 두 기술을 결합하면, 모던 웹 애플리케이션의 요구사항을 충족하는 강력한 스택이 형성됩니다.

1. 프로젝트 설정

1.1 Spring Boot 설정

Spring Boot 프로젝트를 설정하기 위해서는 Spring Initializr를 사용할 수 있습니다. 다음 단계를 따라 진행해 보세요.

1. Spring Initializr에 접속합니다.
2. 필요한 정보를 입력합니다:

• Project: Maven Project
• Language: Java
• Spring Boot: 최신 버전 선택
• Project Metadata: Group, Artifact, Name, Description 등 입력
• Dependencies: Spring Web, Spring Data JPA, H2 Database 등 선택

3. Generate 버튼을 클릭하여 ZIP 파일을 다운로드하고 압축을 풉니다.

1.2 Angular 설정

Angular 프로젝트를 설정하기 위해서는 Angular CLI를 설치해야 합니다. 아래의 명령어를 사용해 Angular CLI를 설치하고 새 프로젝트를 생성합니다.

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

위 명령어로 Angular 애플리케이션이 http://localhost:4200에서 실행됩니다.

2. Spring Boot 백엔드 개발

Spring Boot로 간단한 RESTful API를 만드는 예제를 살펴보겠습니다.

2.1 모델 생성

User 모델 클래스를 만들어 보겠습니다.

@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;
private String email;

// Getters and Setters
}

2.2 리포지토리 생성

JPA를 사용하여 데이터를 저장할 리포지토리를 생성합니다.

public interface UserRepository extends JpaRepository<User, Long> {
}

2.3 서비스 클래스 작성

비즈니스 로직을 처리할 서비스 클래스를 작성합니다.

@Service
public class UserService {
@Autowired
private UserRepository userRepository;

public List<User> getAllUsers() {
return userRepository.findAll();
}

public User createUser(User user) {
return userRepository.save(user);
}
}

2.4 컨트롤러 작성

REST API를 제공하기 위한 컨트롤러를 작성합니다.

@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;

@GetMapping
public List<User> getAllUsers() {
return userService.getAllUsers();
}

@PostMapping
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
}

3. Angular 프론트엔드 개발

이제 Angular 애플리케이션에서 Spring Boot API를 호출하여 데이터를 표시해보겠습니다.

3.1 HttpClientModule 임포트

app.module.ts에 HttpClientModule을 임포트합니다.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // ... 다른 모듈
    ],
})
export class AppModule {}

3.2 서비스 생성

API를 호출할 서비스를 생성합니다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private apiUrl = 'http://localhost:8080/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  addUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}

3.3 컴포넌트 작성

사용자 목록을 표시할 컴포넌트를 작성합니다.

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  template: `
  <h2>User List</h2>
  <ul>
  <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
  </ul>
  `,
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }
}

4. 데이터베이스와의 연동

Spring Boot에서 H2 데이터베이스를 설정하고 데이터 저장 및 조회를 수행합니다. application.properties 파일에 다음과 같은 설정을 추가합니다.

spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

이제 http://localhost:8080/h2-console에 접속하여 데이터베이스 콘솔에 접근할 수 있습니다.

5. 에러 처리 및 디버깅

API 호출 중 에러가 발생할 수 있습니다. 예를 들어, 서버가 다운되었거나 API URL이 잘못된 경우입니다. 다음은 일반적인 에러 처리 코드입니다.

this.userService.getUsers().subscribe({
  next: (data) => {
    this.users = data;
  },
  error: (err) => {
    console.error('API 호출 중 오류 발생', err);
    alert('사용자 목록을 불러오는 데 실패했습니다.');
  }
});

이렇게 하면 API 호출이 실패할 경우 오류 메시지를 콘솔에 기록하고 사용자에게 경고창을 띄울 수 있습니다.

6. 배포

애플리케이션을 배포하기 위해, Spring Boot는 JAR 파일로 패키징할 수 있습니다. mvn clean package 명령어를 사용하여 JAR 파일을 생성한 후, 서버에 배포합니다. Angular 애플리케이션은 ng build --prod 명령어로 빌드한 후 정적 파일을 웹 서버에 배포할 수 있습니다.

참고문서

• Spring Boot Reference Documentation
• Angular Documentation
• H2 Database Engine

위의 내용을 통해 Spring Boot와 Angular를 활용하여 웹 애플리케이션을 개발하는 전반적인 과정을 살펴보았습니다. 이를 바탕으로 여러분의 프로젝트에 적용해 보시기 바랍니다.