[무작정 따라하기 1탄] Spring Boot로 나만의 TODO 리스트 만들기 1편 - 프로젝트 구성

무작정 따라 하기 1탄 나만의 TODO리스트 만들기 1편👩‍💻

안녕하세요!

무작정 따라하기 1탄에서는 Spring boot, Java를 활용하여 간단한 나만의 TODO리스트 애플리케이션을 만들어보겠습니다.
프로젝트를 따라하면서 막히는 부분이나 어려운 부분이 있다면 댓글로 남겨주시면 답변드리겠습니다.

목표

• 할 일을 추가하고, 조회하고, 수정하고, 삭제할 수 있는 TODO 리스트 애플리케이션 구현
• Spring Boot, HTML, CSS, JavaScript를 활용하여 간단한 웹 인터페이스 제공

1. 컴퓨터 환경 구성 ( Java 설치 및 IntelliJ 설치 )

자바(Java) 설치와 IntelliJ 설치의 경우 아래 이전 글을 참고해서 따라 해 주시면 금방 따라 하실 수 있습니다!

- 자바 설치하기 : 10분만에 자바 설치하기
- IntelliJ 설치하기 : 10분 만에 인텔리제이 설치하기

2. 프로젝트 설정

컴퓨터 환경 구성이 완료되었다면, 이제 Spring Boot 프로젝트를 새로 만들어보도록 하겠습니다.
https://start.spring.io/ (Spring Initializr)에 접속하여 다음과 같이 설정합니다.

Project : Gradle - Groovy 
Language : Java
Spring Boot : 3.3.3 (변경될 수 있습니다. Spring Initializer 접속 시 기본 적용되어 있는 버전으로 진행하셔도 무관합니다)
Group : com.example
Artifact : todo
Name : todo
Package name : com.example.todo
Packaging : Jar
Java : 17

Dependenies에는 Add Dependencies를 통해 [ Spring Web, Spring Data JPA, H2 Database ]를 추가해주세요.
이후 Generate를 눌러 ZIP파일을 다운로드한 후, 압축을 풀고 IDE에서 프로젝트를 엽니다.

3. 프로젝트 구조 설명

프로젝트를 열면 기본적인 디렉터리 구조가 생성되어 있습니다. 각 디렉터리의 역할은 다음과 같습니다

• src/main/java: 애플리케이션의 Java 코드가 저장되는 위치입니다. 여기에는 엔티티, 리포지토리, 서비스, 컨트롤러 등이 포함됩니다.
• src/main/resources: 애플리케이션의 리소스 파일이 위치하는 곳입니다. 여기에는 HTML, CSS, JavaScript 파일과 애플리케이션 설정 파일이 포함됩니다. (웹 화면에 관련된 리소스가 존재)
• src/test/java: 테스트 코드가 위치하는 디렉터리입니다. 이곳에 단위 테스트와 통합 테스트를 작성하게 됩니다.

프로젝트를 열게 되면 아래와 같은 구조로 생성되어 있는 것을 볼 수 있습니다.

todo
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── todo
│   │   │               └── TodoApplication.java      // 메인파일 
│   │   └── resources
│   │       ├── static                                   // 정적 파일 (CSS, JS 등)
│   │       └── templates                                // HTML 템플릿
│   │       └── application.properties                   // 애플리케이션 설정파일
└── build.gradle                                          // Gradle 설정 파일

여기서 src/main/java/com/example/todo 폴더 안에
- Todo.java
- TodoRepository.java
- TodoController.java 파일을
src/main/resources/templates 폴더 안에
- index.html 파일을 생성해 주겠습니다. 
생성한 후에는 아래와 같은 구조로 나오게 됩니다.

todo
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── todo
│   │   │               ├── Todo.java               // 엔티티 클래스
│   │   │               ├── TodoRepository.java     // 리포지토리 인터페이스
│   │   │               └── TodoController.java      // 컨트롤러 클래스
│   │   │               └── TodoApplication.java      // 메인파일 
│   │   └── resources
│   │       ├── static                                   // 정적 파일 (CSS, JS 등)
│   │       └── templates                                // HTML 템플릿
│   │           └── index.html                          // 메인 HTML 페이지
└── build.gradle                                          // Gradle 설정 파일

* 파일생성법 : todo 폴더에서 오른쪽클릭 -> New -> File을 클릭 후 ex) Todo.java 작성 후 엔터

 

이로써 기본적인 프로젝트 구성이 완료되었습니다. 다음 편부터는 실질적인 코드 작성으로 TODO 리스트를 구현해 보도록 하겠습니다.

 

* 간단 설정 오류 해결법  *

1. Module JDK is not defined

오른쪽 Setup SDK를 눌러 Java 17을 선택해 주시면 됩니다.

2. 코끼리!

코끼리

오른쪽 위에 해당 코끼리 모양이 떠있다면 클릭해 주세요!
코끼리 모양을 클릭한 후에 아래와 같은 오류가 발생한다면 따라 해주세요.
( A Problem Occurred configuring root project 'todo' )

File -> Settings에 접속하여

Build, Execution, Deployment -> Build Tools -> Gradle을 클릭합니다
아래 빨간색으로 선택되어 있는 Gradle JVM 부분을 선택해서 17로 선택 후 Apply -> OK를 눌러줍니다

이후 다시 한번 코끼리 모양을 눌러 Gradle을 


3. SDK 설정

File -> Project Structure에 접속해서 

Project Structure

SDK 부분이 NO SDK로 되어있다면 아래와 같이 설정해 줍니다.

Project Structure -> Project