12. 게시글 등록화면 만들기

해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다.

 

 

 앞서서 PostsApiController로 api는 미리 만들어 놨으므로 바로 화면으로 개발한다. 여기서 오픈소스인 부트스트랩을 이용하여 화면을 구성해본다.

 

 부트스트랩, 제이쿼리 등과 같은 프론트엔드 라이브러리는 첫째, 외부 CDN을 받아 사용하는 것이며 둘째는 직접 라이브러리를 받아서 사용하는 방법이다.

 

 해당 책에서는 외부 CDN을 받아서 사용한다. 실제 서비스에서는 외부 서비스에 의존해 버려, CDN 서비스하는 곳에 문제가 생기면 우리 서비스도 타격을 받아 잘 사용하지 않지만, 사용법이 간단하고 실제 서비스가 아니므로 이 방법을 선택한다.

---

 

 하지만 부트스트랩과 제이쿼리를 추가하려면 머스테치 화면 어디에서나 필요하다. 따라서 레이아웃 방식으로 추가한다. 여기서 레이아웃 방식은 하나의 영역을 다수의 파일로 분리하고, 필요할 때 마다 사용하는 방식을 말한다.

 

 아까 생성한 templates 디렉토리에 layout 디렉토리를 생성한다. 그리고 header.mustache, footer.mustache를 생성한다.

 

header.mustache

 

footer.mustache

 

 여기서 보면 css는 header에, js는 footer에 놓았다. 그 이유는 HTML은 위에서 아래로 코드가 실행되기 때문에, head가 실행된 후 body가 실행된다.

 

 우선 css같은 경우 늦게 로딩되면 깨진 화면을 사용자가 볼 수 있으므로, header에 위치해 먼저 로딩되도록 한다. 이에 반해 js의 용량이 크면 클수록 오래걸리기 때문에 body 하단에 두어서 화면이 다 생성되고 난 뒤에 로딩되도록 한다. 마지막으로 bootstrap의 경우 jquery가 꼭 필요하여, jquery를 선언한 후 선언해야 한다.

---

 

 header와 footer를 완성하였으므로 이를 활용하여 index.mustache를 바꿔본다.

 

 코드를 보면 <a> 태그로 /posts/save 페이지로 이동한다. 따라서 이에 해당하는 컨트롤러를 추가한 후, 등록 화면 posts-save을 작성한다. 이 책은 프론트 중심의 책이 아니다보니, 중요한 부분을 제외하고는 정확한 코드를 올리지는 않을 것이다.

 

 

 실제로 application을 실행해 보면, 글 등록 버튼이 생겼고 이를 클릭하면 게시글 등록 화면으로 넘어가게 된다. 하지만 아직 api를 호출하는 JS가 없으므로 등록기능은 비활성화 되어있다.

 

 

 

 따라서 src/main/resource 에 static/js/app 디렉토리를 생성하고, 여기에 index.js를 생성한다.

 

 

 이때 가장 첫 줄에 var main이라고 지정하는 이유는 같은 페이지의 다른 js파일과 함수명이 겹칠 경우, 먼저 로딩된 js의 함수를 덮어쓰게 되기 때문이다. 하지만 var main이라는 객체를 만들어, index 객체 안에서만 function이 유효하기 때문에 다른 JS와 겹칠 위험이 사라진다.

 

이를 footer.mustache에 추가하고, 실행해본다.

 

 

 하지만 처음에는 등록버튼을 눌러도 안내문구가 나오지 않았다. 따라서 개발자도구의 Sources으로 들어가 보았는데, 아예 index.js를 인식 못하는 것으로 보였다. 아무리 찾아봐도 코드에는 문제가 없어보였고, 구글링을 해본 결과 "/js/app/index.js"의 경로명에 "/js/app/index.js?ver=1" 이렇게 버전명을 넣으면 인식이 잘 된다는 글을 발견하였다. 이대로 코드를 수정하니 정상적으로 작동이 완료되었다.

 

 

 

 http://localhost:8080/h2-console에서 확인해본 결과, 테이블에 정상적으로 저장되었음을 확인할 수 있었다.

 

 

 

 

 

---

- 학습 내용 저장할 github

https://github.com/imgzon3/imgzon3-springboot-test

imgzon3/imgzon3-springboot-test