0. 프로젝트 생성
🧑🏻💻 인텔리제이를 열어주고 New Project 을 클릭하면 아래와 같은 창이 나온다.
-
Generators에서Spring Initializr를 선택해주고 위 설정처럼 변경해준다. -
Next를 클릭하면 다음과 같이Dependencies를 추가해주는 창이 나오는데Added dependencies에 추가되어 있는 항목을 왼쪽 위 검색창에 검색해 체크해주면 된다. (dependencies는 편리한 개발을 위해 보조해주는 도구 정도로 생각하면 좋다. )
-
Create를 클릭하면 아래와 같이 프로젝트가 생성된다.
-
먼저
mariaDB와 프로젝트를 연결해주자. -
src - main - resources에 들어가보면application.properties라는 파일이 있을 것이다. 해당 파일을 클릭해 열어주고 아래와 같이 코드를 작성해주자.
-
line3의 빨간 빈칸에는 mysql workbench에 생성한
mariadb의 paasword를 넣어주면 된다.
🧑🏻💻 이제 Controller 파일을 생성할건데, 컨트롤러는 생각과 행동 사이의 길 정도라고 생각하면 된다. html이나 js파일을 작성하고 그것을 온라인 상으로 연결해주는 것이 바로 Controller 이다.
src - main - java - com.study.board하위에controller패키지를 추가해주고BoardController를 추가해주자.
- 위와 같이 코드를 작성하고 동작시켜보자. 그리고 크롬 검색 창에
localhost:8080을 입력하고 접속해보자.
- 그럼 이렇게 결과가 잘 출력되었음을 확인할 수 있다.
@Controller는 해당 클래스가 Controller임을 명시하고 프로젝트의 Controller 역할을 하게 된다.
@GetMapping("/")은 해당 경로에 접속했을 때 아래 코드를 실행해 결과를 리턴하는 역할을 한다.
💻 이제 본격적으로 게시물 작성 페이지를 만들어보도록 하자. 그 전에 데이터를 저장할 mariadb에 테이블을 먼저 만들어주자.
-
Mysql-Workbench를 실행하고 mariadb에 접속하자.
-
board - Tables에서 우클릭하고Create table을 통해 테이블을 생성한다. 생성된 테이블에는 데이터들이 들어갈텐데, 그 데이터는 위와 같이id,title,content로 이루어지게 요소들을 추가하여 만들어주자.
- 다시 인텔리제이로 돌아와
templates에boardwrite라는 이름의 html 파일을 하나 생성해주자.
해당 파일에 아래와 같이 작성해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성 게시판</title>
</head>
<style>
.layout{
width : 500px;
margin : auto;
margin-top : 40px;
}
.layout > input{
width: 100%;
box-sizing: border-box;
}
.layout >textarea{
width: 100%;
margin-top: 10px;
min-height: 300px;
}
</style>
<body>
<div class="layout">
<label><b>게시물 작성</b></label>
<input type="text">
<textarea>Write your story!!</textarea>
<button>작성</button>
</div>
</body>
</html>-
하지만 위처럼 작성하고 재실행해도 실제 페이지에서는 아무것도 반영되지 않는다. 다시
Controller로 이동해보자
-
기존에 있던 main 부분을 삭제하고 다시 작성해보자.
/board/write에 사용자가 접속하면boardwrite라는 html 파일을 리턴해주면서 화면에 우리가 작성한 boardwrite가 보이게 될 것이다. -
이제
localhost:8080/board/write에 접속해보자.
- 위처럼 게시물 작성 페이지가 만들어졌을 것이다!! 아직 원시적인 모습이긴하지만 css나 html을 조금 더 만지면 볼만한 페이지가 만들어질 것이다😹
작성버튼을 클릭했을 때 작성된 데이터의 흐름을 제어해보자. 먼저 들어온 데이터를 어디론가 보내주거나 할 때에는<form>테그로 해당 데이터를 묶어주어야한다.
<body>
<form action="/board/writedo" method="post">
<div class="layout">
<label><b>게시물 작성</b></label>
<input name="title" type="text">
<textarea name="content">Write your story!!</textarea>
<button type="submit">작성</button>
</div>
</form>
</body>-
mariadb의 board 테이블에 추가한 요소들을 다시 생각해보면
name테그를 이해할 수 있을 것이다. -
이제 컨트롤러로 이동해
submit한 데이터가 잘 넘어오는지 체크해보자.
-
위처럼 코드를 작성해주고 재실행한 뒤, 아래와 같이 내용을 입력하고
작성버튼을 눌러주면
- 콘솔 창에 이렇게 데이터가 잘 넘어오는 것을 볼 수 있다.
-
이 데이터를 전에 설계한 mariadb에 넣어주려면 몇가지 작업이 필요한데, 먼저
com.study.board하위에entity,repository패키지를 만들어준다. -
그리고
entity하위에 Board 자바 파일을 하나 생성해주고 아래처럼 코드를 작성해준다.
☝️ 이렇게 작성을 마치고 다시 컨트롤러로 돌아와서 boardWriteDo 매소드의 매개변수를 Board board로 변경해준다.
전에는 매소드의 매개변수를 String 타입의 두 매개변수를 받아왔지만, 후에는 Board 객체를 매개변수로 받아오면서 Board 객체의 요소들(
title,content,Id)을 사용할 수 있게 된 것이다.
- 설명한 것과 같이
get___()메소드를 통해 객체의 변수에 접근이 가능해졌다.
- 그리고
repository패키지 하위에BoardRepository인터페이스를 생성해주고 위와 같이 코드를 작성하자.
- 그 다음
com.study.board하위에service패키지를 하나 만들어 주고 그 하위에BoardService자바 파일을 하나 추가하고 아래와 같이 작성해준다.
@Repository나@Service는 해당 파일이 각각 이 프로젝트의 Repository, Service라는 것을 명시한다.
그리고 @Autowired 테그를 넣어주게 되면, 해당 객체를 생성할 때 더이상 new 키워드를 사용하지 않아도 된다. 이를 의존성 주입 이라고 한다.
- 다시
BoardController로 돌아와 다음과 같이 수정해준다.
🧑🏻💻 그리고 다시 크롬으로 돌아와 작성창에서 title과 content를 입력하고 작성버튼을 눌러 제출하고 mariadb 로 넘어가보자. 데이터가 잘 넘어왔는지 확인해볼 것이다.
board - board - 표버튼을 클릭하면 위처럼 데이터가 잘 넘어온 것을 확인할 수 있다!!!
- 이제 게시물을 작성하고 그 데이터를 DB에 넣는것까지 성공했으니 다음은 게시물 리스트를 만들어볼것이다. 다음에 계속.. 😹😹
