TodoList 만들기

𝐝𝐚𝐭𝐚𝐛𝐚𝐬𝐞
/
𝐬𝐩𝐫𝐢𝐧𝐠 𝐛𝐨𝐨𝐭 𝐝𝐚𝐭𝐚𝐛𝐚𝐬𝐞
/스프링 부트 프로젝트
/
TodoList 만들기
Search
Duplicate
Share
TodoList 만들기
태그
Spring
MySQL
Why TodoList?
인프런 기초 강의를 듣고 아 이제 본격적으로 뭔가를 해볼까? 했는데 배운것을 어떻게 써야할지 도저히 감이 오지 않았다. 그래서 떠오른 생각,, 클론코딩을 해보자  
그렇게 초보자들이 많이 만들어본다는 TodoList 를 만들어 보았다.
 참고 영상 링크
준비물
나는 웹개발자 과정을 수강하면서 롬복, MySQL JDBC connector, 톰캣 등이 설치 된 상태였다. 안했을 경우, 미리 설치해주자
준비과정
 먼저 아래 페이지에 들어가서 아래와 같이 입력해준다.
Spring Initializr
Initializr generates spring boot project with just what you need to start quickly!
https://start.spring.io/
•
project : Gradle - Groovy
•
Language : Java
•
Spring Boot : 2.7.8
•
Dependencies 
◦
Lombok
◦
Spring Web
◦
MySQL Driver
◦
Spring Boot DevTools
◦
Spring Data JPA
◦
Thymeleaf
 Zip 파일을 풀고, 적절한 directory 에 package 를 이동한다.
 인텔리제이에서 builde.gradle 파일을 열어야한다.
build.gradle 파일 설정
강사님과 똑같이 버전을 2.7.3 으로 낮춰주었다.
 build.gradle 파일을 수정했다면 항상 이 버튼을 눌러서 필요한 것들을 
다시 다운 받을 수 있게 해주자.
build.gradle
plugins {
	id 'java'
	id 'org.springframework.boot' version '2.7.3'
	id 'io.spring.dependency-management' version '1.0.13.RELEASE'
}

group = 'cloneCoding'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'mysql:mysql-connector-java'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
	useJUnitPlatform()
}
Java
복사
application.properties
이 파일은 스프링부트가 application 을 구동할 때 자동으로 로딩하는 파일이다.
강의에서는 이 파일을 application.yml 로 바꿔주었다.
 .properties 와 .yml 의 차이
.properties
•
resource 디렉토리 하위에 자동으로 생성되는 파일이다.
•
.properties 파일의 포맷은 name=value 형식이다.
application.yml
•
properties 파일과 달리 계층 구조 형식으로 값을 지정할 수 있고, prefix의 중복 제거가 가능하다.
 계층 구조 형식
•
.yml 파일을 사용하기 위해서는 SnakeYAML 라이브러리가 포함되어야 하고, 일반적으로 spring-boot-starter의 의존성은 기본적으로 제공해준다.
application.yml
 Spring Data Source 설정 - MySQL DB 접속 정보 설정
spring:
  datasource:
      url: jdbc:mysql://127.0.0.1:3306/[스키마 이름]?serverTimezone=Asia/Seoul
      username: [ID]
      password: [비밀번호]
      driver-class-name: com.mysql.jdbc.Driver

  jpa:
    hibernate:
      ddl-auto: update
    properties:
        hibernate:
          show_sql: true
          format_sql: true
Java
복사
 com.mysql.jdbc.Driver 못찾는 경우
•
mysql jdbc connetor 를 설치했고, 라이브러리를 프로젝트에 끌어왔는지 확인
•
끌어왔는데도 인식하지못한다면 build.gradle 파일을 다시 build 해보기
(필자는 이렇게 했을 때 해결이 되었다.)
디렉토리 / 패키지 설명
 controller
화면단과 비즈니스 모델을 연결해주는 역할을 한다.
 domain
DB 처리용으로 테이블 컬럼과 완전 동일한 객체의 클래스를 관리하는 package.
 repository
JPA 에서 Repository 인터페이스를 생성 한 후에 JpaRepository<entity, 기본키 타입> 을 상속받으면 자동적으로 Create, Read, Update, Delete 가 생성된다.
controller
 @GetMapping 과 @PostMapping : 🧙🏻‍♀️ @GetMapping 과 @PostMapping 
package cloneCoding.todoList.controller;

import cloneCoding.todoList.domain.TodoDataBase;
import cloneCoding.todoList.repository.TodoRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

// Spring MVC : 브라우저와 서버가 통신을 하기 위한 기술
@Controller
@RequiredArgsConstructor
public class TodoListController {

    private final TodoRepository todoRepository;

    @GetMapping("/")
    // 받은 값을 넘겨줄때는 모델이라는 객체가 필요하다
    public String index(Model model) {
        List<TodoDataBase> todoDataBaseList = todoRepository.findAll();
        // todo 라는 변수에 리스트의 값을 저장할 것이다.
				 model.addAttribute("todo", todoDataBaseList);
        // 이 값을 todo.html 에 리턴할 것이다.
				 return "todo"; 
    }

    @PostMapping("/addTodo")
    public String addTodo(@RequestParam("todoList") String todo) {
        // database 에 저장한다.
        // entity 객체
        TodoDataBase todoData = new TodoDataBase();
				 // 만든 인스턴스에 todo 에서 받은 값을 입력해준다.
        todoData.setTodo(todo);
				 // toddrepository 에 저장
        todoRepository.save(todoData);
        return "redirect:/";
    }
}
Java
복사
TodoDataBase
packagecloneCoding.todoList.domain;

importcom.sun.istack.NotNull;
importlombok.AllArgsConstructor;
importlombok.Getter;
importlombok.NoArgsConstructor;
importlombok.Setter;

importjavax.persistence.*;

@Entity(name = "TodoDB")//device info entity
@Table(name = "todoList")//device info
@AllArgsConstructor
@NoArgsConstructor
@Setter
@Getter
public classTodoDataBase{
@Id
    @GeneratedValue(strategy =GenerationType.IDENTITY)
    privateLongid;

@NotNull
privateStringtodo;
}
Java
복사
TodoRepository
package cloneCoding.todoList.repository;

import cloneCoding.todoList.domain.TodoDataBase;
import org.springframework.data.jpa.repository.JpaRepository;

// entity 를 이용하여 입력, 수정, 삭제를 도와주는 interface 이다.
public interface TodoRepository extends JpaRepository<TodoDataBase, Long> {

}
Java
복사
Todo.html
 아직 배우는 단계이니 말이 이상해도 양해 부탁 드립니다.
<!doctypehtml>
<htmllang="ko">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <metahttp-equiv="X-UA-Compatible"content="ie=edge">
    <title>MyFirstTodoList</title>
</head>
<body>
    <h1>Todo List</h1>
<!--    todoList 에 text 형식으로 값을 넣고 submit 을 누르면 Todoo 값을 post 형식으로 /addTodo 에 넣어주겠다 라는 뜻이다.-->
<formmethod="post"action="/addTodo">
        <inputtype="text"name="todoList" />
        <inputtype="submit"value="Add Todo" />
    </form>
    <h1>
        <url>
							<!-- controller 에서 todo 라는 자원을 받아 todo 라는 이름으로 내보낼것 -->
            <lith:each="todo : ${todo}">
									<!-- todo 의 값을 읽어들일 것이다. -->
                <spanth:text="${todo.todo}"></span>
            </li>
        </url>
    </h1>
</body>
</html>
HTML
복사
완성본