[블로그 만들기] 6. 게시글 목록보기 기능 만들기 (1)

MVC 패턴과 OM(Object Mapping) 객체 매핑

mmmmmm02

Sep 28, 2024

Contents

6. 게시글 목록보기 기능 만들기 6-1. href 수정하기 6-2. 더미 데이터 만들기 6-3. 게시글 목록보기 기능 만들기

6. 게시글 목록보기 기능 만들기

게시글 쓰기 화면이 완성되었다면, 게시글 목록보기 화면도 만들어보자.

6-1. href 수정하기

먼저 아래의 mustache 파일들의 하이퍼링크 href 를 하나씩 수정하자.

header.mustache 파일에서 ‘Metacoding’ 로고를 눌렀을 때, 이동하는 하이퍼링크 설정/수정하기

그리고 이동한 list.mustache 파일에서 상세보기를 눌렀을 때, 이동할 하이퍼링크도 수정하기.

detail.mustache 파일에도 html 주소로 되어있던 것을 바꾼다.

html 주소로 되어있는 것들을 순서대로 하나씩 바꾼다.

6-2. 더미 데이터 만들기

이것이 게시글 목록보기 화면.

게시글 목록보기 화면에 뜨는 값을 내가 넣은 데이터로 바꿔볼 테다.

더미 데이터 파일 만들기

더미 데이터를 넣어서 게시글 목록보기 화면에서 더미 데이터들이 화면에 출력 되도록 해보자.

resource 폴더에 data.sql 파일을 만든다.

데이터 초기화 시, 보통은 data.sql, schema.sql 두 개를 만들어서 사용한다.

schema.sql 에는 DDL 코드를(테이블 생성코드)넣고, CREATE, ALTER..


// 예시 
CREATE TABLE users (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(100) NOT NULL
);

data.sql 에는 초기 데이터를 삽입하는 코드를 넣는다.


// 예시 
INSERT INTO users (username, password) VALUES ('user1', 'pass1');
INSERT INTO users (username, password) VALUES ('user2', 'pass2');

우리는 왜 schema.sql 를 만들지 않았는가?

→ 하이버네이트(Hibernate) 덕에 Entity 가 자동으로 create 되기 때문이다. Yay!

(application.properties 에서 spring.jpa.hibernate.ddl-auto 를 설정 했었다.)

하이버네이트를 사용하면 엔티티 클래스를 기반으로 자동으로 데이터베이스 스키마를 생성할 수 있기 때문에, schema.sql 파일을 만들지 않아도 된다.

💡

내가 MyBatis 나 순수 Jdbc 를 하고있다면, 정석대로 schema.sql 을 따로 파일 2 개로 만들어야 한다.

아래와 같이 data.sql 파일에 더미를 만든다.

application.properties 에 더미 파일인 db/data.sql 을 연결한다.

하고 실행하면 에러가 뜰 것이다.

오류는 항상 위에서 부터 봐야 한다. 콘솔 로그는 stack trace 이기 때문에, 위의 원인만 찾으면 밑의 내용을 볼 필요가 없다.

💡

Bean = 객체 BeanCreationException → Bean이 안만들어졌다는 에러

내용에서 확인 되는 ‘db/data.sql’ 위치에서 data scripts 를 찾을 수 없다는 말..

classpath: 를 써줘야 resource 폴더에 도달한다. 이건 문법이다.


spring.sql.init.data-locations=classpath:db/data.sql

위와 같이 수정하고 재실행 했을 때, 이번에는 다른 에러가 뜬다.

Board_tb 테이블을 찾을 수 없다는 내용.

순서는 위의 create 가 먼저 실행되게 하여야 한다.

하이버네이트 세팅에 아래와 같이 하나 더 넣어줘야 에러가 해결된다.

지금까지의 application 설정은 아래와 같다.


# 1. UTF-8
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
# 2. H2
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:test
spring.datasource.username=sa
# 3. Hibernate
spring.jpa.hibernate.ddl-auto=create
spring.jpa.show-sql=true
spring.jpa.defer-datasource-initialization=true
# 4. Dummy
spring.sql.init.data-locations=classpath:db/data.sql

더미 데이터를 만드는 이유

협업 할 때, 각자 mysql 에 만들어서 진행하게 되면, 서로 보는 데이터가 다르기 때문에 협업이 힘들기 때문 TT

ex. 한 명이 ‘회원가입’ 개발하고 한 명이 ‘로그인’ 을 개발한다면, 로그인 개발자가 ‘회원가입’ 기능이 완성될 때까지 기다릴 순 없지 않은가!

→ 기능을 독립적으로 만들 수 있어야 한다. 회원가입 안해도 회원 데이터를 DB 에 더미로 넣어 놓으면 로그인 기능을 독립적으로 만들 수 있다.

더미만 있으면, 테스트 시간이 짧아진다.

💡

모든 프로그램은 독립적으로 만들 수 있어야 한다. 그게 아니라면 협업이 안된다.

H2 데이터베이스 세팅 확인

아래는 테이블 세팅 할 때 넣은 application.properties 의 H2 데이터베이스 세팅 부분이다.

위의 세팅은 메모리에 저장되고, 아래는 하드에 저장되는 세팅으로, 아래와 같이 하면 안됨! 주의.

6-3. 게시글 목록보기 기능 만들기

게시글 쓰기에 이어 두번째 기능을 만들어보자.

DB 에 있는 더미데이터를 불러와서 화면에 출력해보자.

MVC (Model View Controller) 패턴

Hibernate는 JPA(Java Persistence API)의 구현체로, EntityManager 인터페이스를 구현하여 데이터베이스에서 데이터를 가져오고 이를 자바 객체로 변환하는 역할을 한다.

브라우저 → Controller → Repository → Hibernate(가 EntityManager를 구현함) → DB

브라우저 ← Controller(Model) ← Repository(Model) ← EM 에서 Board 객체로 만들어서 리턴 ← DB

Board 객체로 응답한다.

Board 객체를 Model 이라 한다.

클라이언트는 보통 웹브라우저이다.

최종적으로 Controller 가 해줘야 하는 일은

→ HTML 페이지를 만들고, 필요한 데이터를 model 에 바인딩 한다. 이 과정은 템플릿 엔진을 통해 이루어진다.

대표적인 템플릿 엔진이 jsp 와 mustache 이다. (여기서는 mustache 템플릿 엔진 사용)

이렇게 생성된 HTML 은 단순 그림(정적 페이지)이 아니라, 그림에 Mdoel 데이터를 끼워넣어 동적으로 내용을 구성할 수 있다. 이때 데이터를 표시하는 부분을 뷰(View) 라고 한다.

Model 은 응답되는 데이터로, 이러한 구조를 MVC(Model, View, Controller) 패턴이라 한다.

DB 에 넣어 둔 더미데이터를 SELECT 하는 쿼리를 만들어서 그게 잘 작동하는지부터 보자.

Repository 부터 만든다.

1) Repository 에 메서드 만들기

em 을 통해 DB 에 접근할 거고, 이제는 데이터를 SELECT 불러오기 해야 하니 메서드 명을 findAll() 로 넣어준다.

insert 할 때와 동일하게 NativeQuery 문 사용.


 public void findAll() {
        Query query = em.createNativeQuery("select * from board_tb order by id desc", Board.class);
    }

마지막에 Board.class 를 붙여서 오브젝트 매핑(OM)을 해준다. 쿼리 적고, Board.class 해주면 끝이다.

💡

Board.class 들어가는 애들은 @Entity 가 붙은 애들만 된다. 일반클래스 X, 엔티티로 관리되는 애들만 매핑이 된다.

오브젝트 매핑으로, query 에는 Board 객체들이 담길 것.

쿼리에 하나만 담겨 나오면 getSingleResult() / 여러개면 getResultList() 를 적용한다.

select * 로 단건이 아닌 전체 데이터를 가져오는 쿼리문을 사용했으니,

여기서는 getResultList() 사용. List 형태로 리턴 된다.


public List<Board> findAll() {
        Query query = em.createNativeQuery("select * from board_tb order by id desc", Board.class);
        List<Board> boardList = query.getResultList(); // 5개의 데이터니까 
        return boardList;
    }