ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Next Step] View 화면과 Database 연결
    Project/Basic Board 2022. 7. 29. 00:04

    View 화면 - Thymeleaf

    책에서는 JSP 를 연결하도록 소개 되어있지만, 나는 Thymeleaf 를 이용해보았다. Thymeleaf 를 세팅하는 것은 간단하다.  build.gradle 에 thymeleaf 라이브러리를 추가해주고, html 의 모든 파일에는 상단에 아래와 같은 코드를 한 줄 추가해준다.

    <html xmlns:th="http://www.thymeleaf.org">

     

    Thymeleaf 의 문법은 아래와 같다. 속성 앞에 꼭 th: 를 붙여주어야 하며, 요청명은 @{} 로 감싸준다.

    <li><a th:href="@{/user/join}" role="button">회원가입</a></li>

     

    tiles 와 같은 header, footer 를 추가하고 싶다면,  build.gradle 에 아래와 같은 라이브러리를 추가해준다. fragment 는 검색하면 자료가 많이 나오므로 작성 방법은 직접 검색해보기 바란다.

    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

     

    여기서 끝이 아니다. Template 을 설정해줬으니 Java 쪽에서 어떤 요청이 들어올 때, 특정 View 화면을 반환하도록 코드를 작성해주어야한다.

    @Controller //요청을 catch
    public class UserController {
    
    	// @GetMapping() 대신 @RequestMapping(value="/join", method = RequestMethod.GET) 라고 해도 무방하다.
    	// 주의!! @RequestMapping 은 @Controller 아래에 있는 어노테이션이기 때문에 반드시 class 에 @Controller 를 달아줘야한다.
    	@GetMapping("/join")
    	public String join() {
            return "user/form"; // directory-name/html-file-name
        }
    }

     

     

    Database - MySQL

    Database 를 사용하여 학습하는 내용은 7장 부터지만 미리 연결해둘 사람은 세팅을 해보자. MySQL Database 를 설치했다면, 몇 가지 필요한 속성을 추가해주도록 하자.  README.md 에 가이드를 적어두었으니 GitHub Repository 에 들어가서 확인하길 바란다.

     

     UserRepository.java 와  User.java  엔티티를 그대로 붙여넣어보자. 그리고 실행!

    혹시라도 아래와 같은 에러를 마주하게 된다면,  build.gradle 에 제대로 추가가 되지 않은 것이니 다시 한 번 확인해보길 바란다.

    Error creating bean with name 'dataSource' defined in class path resource Factory method 'dataSource' threw exception

     

    연결이 무사히 되었다면 제대로 동작하는 지 테스트 코드를 한 번 짜보도록 하자.

    @Autowired
    private UserRepository userRepository;
    
    @Test
    @Commit
    @Transactional
    void test(){
    	//given
    	User user = new User();
    	user.setNickname("nextstep");
    	user.setEmail("email@gmail.com");
    	user.setPassword("7070");
    
    	//when
    	Long savedUserId = userRepository.save(user);
    	User findUser = userRepository.findOne(savedUserId);
    
    	//then
    	Assertions.assertThat(findUser.getId()).isEqualTo(user.getId());
    }

     

    import 해줄 라이브러리는 아래와 같다.

    import com.example.next_step.domain.User; // 직접 만든 Entity 
    import org.junit.jupiter.api.Test; // Test
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.test.annotation.Commit; // Test 코드 데이터 commit
    import org.springframework.transaction.annotation.Transactional; // 영속성 관리

    Test 코드는 디폴트로 Rollback을 해주기 때문에 Database 에 데이터가 들어가는 것까지 테스르 하고 싶다면, @Commit 이나 @Rollback(value = "false") 를 붙여주면 된다. 두 개는 같은 기능이다. @Commit 내부에 @Rollback 이 들어있다. 또한, 영속성 컨택스트는 트랜잭션 내에서 관리 되므로 반드시 @Transactional 을 붙여줘야한다.

     

    테스트를 돌려보고 Database 에서 테이블과 데이터가 잘 조회된다면 성공이다!

     

     

    주의!

    아래와 같은 에러가 발생한다면 예약어를 썼을 확률이 높다. 그래서 나는 Entity 를 만들어줄 때, 테이블명을 User로 하지 않고 Member 로 생성하도록 지정해주었다.

    Caused by: org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "\000d\000a create table [*]user (\000d\000a id bigint not null,\000d\000a email varchar(255),\000d\000a nickname varchar(255),\000d\000a password varchar(255),\000d\000a primary key (id)\000d\000a )"; expected "identifier"; SQL statement:

     

     

    수많은 어노테이션은 지금 신경쓰지 말자. 우선 저렇게 설정해놓고, 데이터가 들어가는 것만 확인해보자. 이상 없이 테스트가 통과한다면 세팅 완료다.

    @Entity
    @Table(name = "member")
    @Getter @Setter
    @NoArgsConstructor
    public class User {
    
        @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id;
        private String nickname;
        private String email;
        private String password;
    
        public User(String nickname, String email, String password) {
            this.nickname = nickname;
            this.email = email;
            this.password = password;
        }
    }

     

     

     

     

     

     

    # 전체 코드 : https://github.com/haema-dev/next_step

     

    GitHub - haema-dev/next_step

    Contribute to haema-dev/next_step development by creating an account on GitHub.

    github.com

     

Designed by Tistory.