Vaadin은 자바 기반의 오픈 소스 UI 프레임워크로, 웹 애플리케이션을 구축하기 위한 다양한 기능을 제공합니다. 이 예제는 Vaadin의 모든 주요 기능을 활용하여 간단한 프로젝트를 만드는 방법을 보여줄 것입니다.

프로젝트 개요

이 예제는 간단한 할일 관리 웹 애플리케이션을 구축하는 것을 목표로 합니다. 사용자는 할 일을 추가하고, 수정하고, 삭제할 수 있으며, 완료한 일을 체크할 수 있습니다.

프로젝트 설정

1. Java 개발 환경을 설치합니다.
2. Maven을 사용하여 프로젝트를 생성합니다:

   mvn archetype:generate -DgroupId=com.example -DartifactId=todo-app -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false
   

3. 생성된 프로젝트 디렉터리로 이동합니다:

   cd todo-app
   

4. pom.xml 파일에서 Vaadin 의존성을 추가합니다:

   <dependencies>
       <dependency>
           <groupId>com.vaadin</groupId>
           <artifactId>vaadin-spring-boot-starter</artifactId>
           <version>14.5.3</version>
       </dependency>
   </dependencies>
   

UI 구현

1. TodoUI.java 파일을 생성하고, 다음 내용을 추가합니다:

   @SpringComponent
   @UIScope
   public class TodoUI extends UI {
   
       @Autowired
       private TodoService todoService;
   
       @Override
       protected void init(VaadinRequest request) {
           VerticalLayout layout = new VerticalLayout();
   
           TextField taskField = new TextField("Task");
           Button addButton = new Button("Add");
           Grid<Task> taskGrid = new Grid<>(Task.class);
   
           addButton.addClickListener(e -> {
               Task task = new Task(taskField.getValue());
               todoService.addTask(task);
               updateTaskGrid(taskGrid);
               taskField.clear();
           });
   
           layout.addComponents(taskField, addButton, taskGrid);
           setContent(layout);
              
           updateTaskGrid(taskGrid);
       }
   
       private void updateTaskGrid(Grid<Task> taskGrid) {
           List<Task> tasks = todoService.getTasks();
           taskGrid.setItems(tasks);
       }
   }
   

2. Task.java 파일을 생성하고, 다음 내용을 추가합니다:

   public class Task {
   
       private String name;
       private boolean completed;
   
       // 생성자, getter, setter 생략
   
   }
   

3. TodoService.java 파일을 생성하고, 다음 내용을 추가합니다:

   @Service
   public class TodoService {
   
       private List<Task> tasks = new ArrayList<>();
   
       public void addTask(Task task) {
           tasks.add(task);
       }
   
       public List<Task> getTasks() {
           return tasks;
       }
   }
   

실행

1. 터미널에서 다음 명령어를 실행하여 애플리케이션을 실행합니다:

   mvn spring-boot:run
   

2. 웹 브라우저에서 http://localhost:8080에 접속하여 애플리케이션을 확인합니다.

결론

이 예제에서는 Vaadin을 사용하여 간단한 할일 관리 애플리케이션을 구축하는 방법을 살펴보았습니다. Vaadin의 다양한 기능을 활용하여 웹 애플리케이션을 구축할 수 있으며, 이를 바탕으로 더 복잡한 프로젝트를 구현할 수도 있습니다.

참고 자료

• Vaadin 공식 문서: https://vaadin.com/docs
• Vaadin GitHub 저장소: https://github.com/vaadin
• Spring Boot 공식 문서: https://spring.io/projects/spring-boot
• Maven 공식 사이트: https://maven.apache.org/