[게시판 만들기] IntelliJ를 활용한 게시판 만들기 1탄

Jinju Bae·2022년 2월 20일

이제 강의도 다 들었고 실전으로 넘어가서 IntelliJ를 활용해 게시판을 만들어 볼 것이다.

내가 참고할 블로그는 다음과 같다.

https://tjdans.tistory.com/7?category=992472

그런데 위 글에서 프로젝트를 생성하는 방법은 강의 때 했던 방법과 달라서, inflearn 강의에서 배운 내용으로 직접 실행해보고 기록으로 남기려 한다.

spring initializr 사이트 접속

https://start.spring.io/

여기에 접속하면 다음과 같은 페이지가 뜬다.

설정은 다음과 같이 해주면 된다.

Project: Gradle Project
Language: Java
Spring Boot: 2.5.8 (동료분이 2.6.2 버전에서는 호환되지 않는 기능이 있다고 해서 2.5.7로 하라고 하셨는데, 내가 들어갔을 때는 2.5.8이 가장 낮은 버전이어서 일단 이걸로 다운받은 후 버전을 수정할 것이다)
Project Metadata: group 이름은 알아서 설정하시고, artifact는 프로젝트 내용을 담아 설정해주었다. Java는 11.
Dependencies: ADD DEPENDENCIES 버튼을 눌러 Spring Boot DevTools, Lombok, Thymeleaf, H2 Database, spring web, mybatis framework를 검색해 추가해준다.

완성본

맨 아래 GENERATE를 눌러준다. 네이버 웨일에서는 다운이 잘 안 받아지는데 크롬에서는 잘 된다. 크롬 추천.

C드라이브에 study라는 폴더를 만들어 방금 다운받은 bulletin-board.zip 파일을 이 폴더에서 압축을 푼다.

그 결과, C:\study\bulletin-board가 생성된다.

IntelliJ 에서 프로젝트 열기

IntelliJ 상단에 File 에서 Open을 누른다.

아까 압축해제한 zip파일 폴더에 들어가 build.gradle를 클릭해 OK를 누르고, 팝업창이 뜨면 Open as Project를 누른다.

한 1-2분 정도 기다리면 파일이 생성된 것을 확인할 수 있다.

짠.

DEPENDENCIES가 적절히 주입되었으면 build.gradle 파일에서 다음과 같은 모습을 볼 수 있다.

IntelliJ 버전 수정

앞서 말했듯이 IntelliJ 2.5.7 버전 이하에서는 호환되지 않는 기능이 있어, 버전을 수정해줄 것이다.

build.gradle 파일을 열어보자.

아래와 같이 되어 있을 것이다.

plugins {
	id 'org.springframework.boot' version '2.5.8'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

여기서 version '2.5.8' 을 version '2.5.7'로 바꿔주자.

개발을 위한 설정

bulletin-board>src>main>resources에 들어가면 application.properties라는 파일이 있다.

이 파일에 아래의 코드를 추가해준다. IntelliJ가 Ultimate 버전이 아니라 Community 버전이라면 unused property 경고가 뜨는데, 딱히 신경쓰지 않아도 된다.

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

spring.h2.console.enabled=true
spring.h2.console.path=/h2

spring.devtools.restart.enabled=true

(나중에 h2 database 설정할 때 jdbc:h2:mem:testdb 이라는 url 을 JDBC url 에 입력해야 한다.)

테스트

사용할 view인 Thymeleaf가 제대로 동작하는지 확인해보자.

main>resources>templates 폴더에 마우스 우클릭, boards 라는 폴더를 만든다. (new - directory)
그 폴더 위에 다음과 같이 hello.html 파일을 만든다. (New - html files)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>테스트 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>

controller 생성

src>main>java>wedatalab.bulletinboard(본인이 설정한 프로젝트 이름)에 Controller라는 패키지를 만들어준다. (폴더 위 마우스 우클릭 - new - package)
그 폴더 위에 BoardController 라는 클래스를 만든다. (new - java class)

결과

이 클래스가 컨트롤러 역할을 한다는 것을 명시해보자.

다음의 코드를 삽입하면 된다.

@Controller // 어노테이션을 입력하면 알아서 상단에 import 가 된다!

@RequestMapping("/board/**")
public class BoardController {

    @GetMapping("/hello")
    public String Hello() {
        return "/boards/hello";
    }
}

@(골뱅이)를 붙이는 걸 어노테이션이라고 한다.

어노테이션을 하면 import 구문이 상단에 자동으로 생성된다.

각 어노테이션의 의미

@Controller 어노테이션: 컨트롤러 역할을 수행하는 클래스라는 것을 명시한다.
@RequestMapping 어노테이션: "/board/"로 접근하는 url 처리를 이 클래스인 BoardController 에서 맡는다고 알려준다.
@GetMapping 어노테이션: "/hello"로 접근하는 url 처리를 이 클래스인 BoardController 에서 맡는다고 알려준다.

@RequestMapping("/board/") 에서 가 의미하는 건 무엇일까?

주소가 localhost:8080/board/로 시작한다면, /board/ 뒤에 블라블라~~ 더 긴 주소가 와야 한다는 것이다.

그래서 @GetMapping 을 통해 뒤에 url 을 붙여줬고, 따라서 주소창에 localhost:8080/board/hello 를 치면 @GetMapping 에 해당되는 클래스인 Hello를 실행하게 된다.

Hello 객체의 return 값은 "/boards/hello" 인데, 이는 templates>boards 폴더에 들어가 hello 라는 이름을 가진 파일을 띄우라는 의미다.

IntelliJ 우측 상단에 있는 초록색 재생 버튼을 눌러 스프링부트를 구동하고

크롬 창에 http://localhost:8080/board/hello 를 쳐보면

결과가 이렇게 잘 뜬다.

이제 view 개발의 준비가 끝났다.

결과가 잘 안 뜬다면 controller 코드에 오타가 없는지 (폴더명은 boards 이고 url 은 board 이다) 한번 확인해보길 바란다.

database

이제 H2 database 와 스프링부트를 연결해보겠다.

먼저 https://www.h2database.com/ 에 들어가 자신의 OS에 맞는 버전을 다운받는다. 윈도우는 Windows Installer를, 그 외는 All Platforms 를 다운 받는다.

www.h2database.com

나는 아까 C드라이브 밑에 study라는 폴더를 만들었었는데, 마찬가지로 h2 파일도 study 폴더에 압축을 풀어준다.

h2를 실행해보자.

크롬 창에 http://localhost:8080/h2를 입력한다.

아까 말한 '개발을 위한 설정' 챕터에서 JDBC URL 에 입력하라고 했던 url 을 복사해 입력해준다.

그리고 Connect 버튼을 눌러준다.

이런 창이 뜬다. 그럼 성공.

좌측 상단 빨간 번개모양 버튼을 누르면 이전 페이지로 돌아갈 수 있다.

이제 새로운 테이블을 생성해보자.

// 테이블 생성

CREATE TABLE tbl_board(
boardId Long auto_increment,
title varchar (30) not null,
content varchar (30) not null,
name varchar (30) not null,
primary key(boardId)
);

위의 코드를 SQL 문에 넣어 실행 버튼을 누르면 되는데, 윈도우에서는 Shift + enter를 눌러서 실행할 수 있다.

테이블에 새로운 값을 삽입할 차례다.

다음의 sql 문을 입력해 실행해보자.

// 테이블에 새로운 값 삽입

INSERT INTO tbl_board( title, content, name) VALUES ('제목', '내용', '이름')

삽입된 값은 어떻게 확인할 수 있을까?

select 문을 사용해 삽입된 값을 확인할 수 있다.

다음의 코드를 실행창에 입력해보자.

SELECT * FROM TBL_BOARD

*은 ALL의 의미다. 즉 TBL_BOARD에서 모든 값을 선택해 꺼내보라는 의미다.

잘 삽입된 것을 볼 수 있다.

번외

IntelliJ에서는 build가 자바를 직접 실행하는 게 아니라 gradle을 통해 실행될 때가 있는데, gradle로 실행하게 되면 느려지는 경우가 발생할 수 있기 때문에 이를 방지하기 위해 다음과 같은 과정을 거쳐야 한다.

상단 바 File > Settings 을 클릭해 뜨는 창에서 좌측 상단에 검색 기능이 있는데 이곳에 gradle 이라고 검색하면 gradle settings과 gradle projects 이 나온다. gradle projects에서 build and run using, run tests using 옆에 gradle (default) 라고 되어 있는 것을 IntelliJ IDEA 로 바꿔준다.