Spring Boot와 Angular를 활용한 풀스택 개발

Spring Boot와 Angular를 활용한 풀스택 개발

Overview

Spring Boot와 Angular를 함께 사용하는 풀스택 개발은 현대 웹 애플리케이션 개발에서 매우 인기 있는 조합입니다. 이 조합은 서버 사이드와 클라이언트 사이드를 모두 효율적으로 개발할 수 있는 강력한 도구를 제공합니다. 여기서는 Spring Boot와 Angular를 활용하여 풀스택 애플리케이션을 개발하는 방법을 자세히 설명하겠습니다.

Spring Boot와 Angular의 기본 개념

Spring Boot는 Java 기반의 서버 사이드 프레임워크로, 빠르고 효율적인 웹 애플리케이션 개발을 돕습니다. Spring Boot는 설정이 간편하고, 내장된 웹 서버(예: Tomcat)를 통해 애플리케이션을 쉽게 배포할 수 있습니다.

Angular는 Google에서 개발한 프론트엔드 프레임워크로, 웹 애플리케이션의 사용자 인터페이스(UI)를 개발하는 데 사용됩니다. Angular는 TypeScript로 작성되며, 모듈화된 구조와 강력한 데이터 바인딩 기능을 제공합니다.

이 두 기술을 함께 사용하면 강력한 풀스택 애플리케이션을 구축할 수 있습니다. 서버 사이드는 Spring Boot로, 클라이언트 사이드는 Angular로 개발하게 됩니다.

Spring Boot 프로젝트 설정

1. Spring Boot Initializr 사용하기

Spring Boot 프로젝트를 시작하는 가장 쉬운 방법은 Spring Initializr를 사용하는 것입니다. 이 웹사이트를 통해 필요한 의존성과 설정을 선택하고, 프로젝트를 생성할 수 있습니다.

• Project: Maven Project 또는 Gradle Project
• Language: Java
• Spring Boot: 최신 안정화 버전 선택
• Dependencies: Spring Web, Spring Data JPA, H2 Database 등 필요한 의존성 추가

예를 들어, Spring Web 의존성을 추가하면 RESTful API를 쉽게 개발할 수 있습니다.

2. 프로젝트 생성 및 구조 설명

Spring Boot 프로젝트를 생성하면 기본적인 디렉토리 구조가 제공됩니다.

• src/main/java : Java 소스 코드가 위치하는 디렉토리
• src/main/resources : 설정 파일 (application.properties)과 정적 자원이 위치하는 디렉토리
• src/test/java : 테스트 코드가 위치하는 디렉토리

예를 들어, src/main/java/com/example/demo 디렉토리에 DemoApplication.java라는 클래스가 생성되며, 이는 Spring Boot 애플리케이션의 진입점입니다.

3. RESTful API 개발

Spring Boot로 RESTful API를 개발하려면 @RestController와 @RequestMapping 어노테이션을 사용합니다.

@RestController
@RequestMapping("/api")
public class UserController {

@GetMapping("/users")
public List<User> getUsers() {
// 유저 리스트를 반환하는 로직
}

@PostMapping("/users")
public User createUser(@RequestBody User user) {
// 유저를 생성하는 로직
}
}

이 예제에서는 /api/users 경로로 GET 요청을 보내면 사용자 목록을 반환하고, POST 요청을 보내면 새 사용자를 생성합니다.

Angular 프로젝트 설정

1. Angular CLI 설치

Angular 프로젝트를 시작하려면 Angular CLI(Command Line Interface)를 사용합니다. Node.js와 npm(Node Package Manager)을 먼저 설치한 후, 다음 명령어로 Angular CLI를 설치합니다.

npm install -g @angular/cli

2. 새 Angular 프로젝트 생성

Angular CLI를 사용하여 새 프로젝트를 생성합니다.

ng new my-angular-app

이 명령어는 my-angular-app이라는 새로운 Angular 프로젝트를 생성하고, 기본적인 파일 구조를 제공합니다.

3. Angular 서비스와 컴포넌트 작성

Angular에서는 서비스와 컴포넌트를 사용하여 애플리케이션의 기능과 UI를 개발합니다.

ng generate service user
ng generate component user-list

• user.service.ts 파일에 HTTP 요청을 처리하는 서비스를 작성합니다.

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);
  }
}

• user-list.component.ts 파일에 사용자 목록을 표시하는 컴포넌트를 작성합니다.

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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

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

이 예제에서는 UserService를 사용하여 REST API에서 사용자 목록을 가져오고, UserListComponent에서 이를 표시합니다.

Spring Boot와 Angular 통합

1. CORS 설정

Angular 애플리케이션이 Spring Boot 서버와 통신할 수 있도록 CORS(Cross-Origin Resource Sharing)를 설정해야 합니다. Spring Boot의 WebMvcConfigurer를 구현하여 CORS를 설정합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:4200")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}

2. Angular의 환경 설정

Angular 프로젝트의 src/environments/environment.ts 파일에 API 서버의 URL을 설정합니다.

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080/api'
};

이 설정을 통해 Angular 서비스에서 apiUrl을 참조하여 Spring Boot 서버와 통신할 수 있습니다.

3. 프로젝트 빌드 및 실행

• Spring Boot 서버 실행: IntelliJ IDEA, Eclipse 또는 터미널에서 mvn spring-boot:run 명령어를 사용하여 Spring Boot 애플리케이션을 실행합니다.
• Angular 애플리케이션 실행: 터미널에서 ng serve 명령어를 사용하여 Angular 애플리케이션을 실행합니다. 기본적으로 http://localhost:4200에서 접근할 수 있습니다.

일반적인 문제와 해결 방법

1. CORS 문제

문제: Angular 애플리케이션에서 API 요청을 보낼 때 CORS 오류가 발생합니다.

해결 방법: 위에서 설명한 CORS 설정을 통해 Spring Boot 서버에서 CORS를 허용합니다.

2. 포트 충돌

문제: Spring Boot 서버와 Angular 애플리케이션이 같은 포트를 사용하고 있어 포트 충돌이 발생합니다.

해결 방법: Angular 애플리케이션의 포트를 변경합니다. angular.json 파일에서 serve 옵션을 수정하여 다른 포트를 사용하도록 설정할 수 있습니다.

"architect": {
  "serve": {
    "options": {
      "port": 4300
    }
  }
}

3. API 요청 실패

문제: Angular 애플리케이션에서 API 요청이 실패합니다.

해결 방법: API 서버가 올바르게 실행되고 있는지, API URL이 올바르게 설정되어 있는지 확인합니다. 또한, 네트워크 요청과 응답을 개발자 도구의 네트워크 탭에서 확인하여 문제를 진단합니다.

참고문서

• Spring Boot 공식 문서
• Angular 공식 문서
• Spring Boot CORS 설정

이 가이드를 통해 Spring Boot와 Angular를 활용한 풀스택 애플리케이션 개발의 기본적인 흐름과 주요 설정 방법을 이해할 수 있습니다. 각 단계별로 자세히 설명된 예제와 함께, 실제 프로젝트에서의 문제 해결 방법도 함께 제시하였습니다.