[211011-211017] 2021 GDSC Spring Study - 3주차

🌱   이번주 스터디 목표, 스터디 범위

• 서버 템플릿 엔진과 머스테치 소개
• 화면 만들기 

🌱   머스테치로 화면 구성하기 - 서버 템플릿 엔진과 머스테치 소개

[Spring Boot] 04장. 머스테치로 화면 구성하기 - 서버 템플릿 엔진과 머스테치 소개

1. 템플릿 엔진
2. 머스테치란
3. 머스테치 플러그인 설치

🌱   머스테치로 화면 구성하기 - 화면 만들기

1. 기본 페이지 만들기 [Spring Boot] 04장. 머스테치로 화면 구성하기 - 기본 페이지 만들기
2. 게시글 등록 화면 만들기 [Spring Boot] 04장. 머스테치로 화면 구성하기 - 게시글 등록 화면 만들기
3. 전체 조회 화면 만들기 [Spring Boot] 04장. 머스테치로 화면 구성하기 - 전체 조회 화면 만들기
4. 게시글 수정 화면 만들기 [Spring Boot] 04장. 머스테치로 화면 구성하기 - 게시글 수정 화면 만들기
5. 게시글 삭제 화면 만들기 [Spring Boot] 04장. 머스테치로 화면 구성하기 - 게시글 삭제 화면 만들기

🌱   스터디하면서 어려웠던 부분 (트러블 슈팅) 

🌟 tomcat 기동 시, 8080 포트가 이미 사용 중이어서 문제 발생

 

1. cmd 창 실행
2. netstat -ano 명령어 입력
3. taskkill /f /pid 프로세스ID 명령어 실행

netstat -ano를 통해 8080 포트의 프로세스 아이디인 PID

taskkill /f /pid 프로세스ID 입력으로 프로세스 종료

🌟 IndexController의 위치를 다른 곳으로 이동 시 오류 발생

 

Bean의 이름 중복

1. gradle에서 clean 진행
2. gradle에서 build 진행
3. 다시 실행하여 해결

clean - build

🌟 등록, 수정, 삭제 버튼이 작동하지 않을 때는 index.js의 코드를 다시 확인해볼 것!

🌱   새롭게 배운 것

• 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이
• 머스테치를 통한 스프링 부트의 화면 처리 방법 : IndexController를 생성한 후 @GetMapping을 통해 머스테치에 URL 매핑
• 머스테치 화면 어디서나 필요한 부트스트랩과 제이쿼리는 레이아웃 방식으로 추가를 해야 함 (별도의 파일로 분리해 가져다 씀)
• 페이지의 로딩 속도를 높이기 위해서는 js와 css의 선언 위치를 다르게 해야 함 (css는 header에, js는 footer에)
• 스코프로 인해 덮어씌워지는 문제가 발생하지 않기 위해 index 객체 안에 function을 추가하여 유효 범위를 만들기
• 화면 만들기에 필요한 코드 부분 :

1. header.mustache, footer.mustache : css를 위한 부트스트랩과 js를 위한 제이쿼리 
2. index.mustache : 첫 페이지에 다른 페이지로 이동하는 버튼 생성, 전체 조회 등의 UI 변경
3. IndexController.java : @GetMapping을 통해 머스테치에 연결되도록 URL 매핑
4. posts-save.mustache, posts-update.mustache : 페이지에 따른 UI 생성
5. index.js : 버튼 클릭 등의 이벤트 발생 시 API를 호출하기 위한 JS
6. PostsRepository.java : 전체 조회를 위한 SELECT 쿼리 작성
7. PostsService.java : 조회 속도 개선을 위한 메소드 및 등록, 수정, 삭제 API 생성을 위한 서비스 메소드 작성
8. PostsListResponseDto.java : 전체 조회를 위한 Dto
9. PostsApiController.java : 등록, 수정, 조회, 삭제 API 요청을 받는 Controller

🌱   PR

🌱   참조했던 링크, 문서 및 소스파일 GIT 주소

• '스프링 부트와 AWS로 혼자 구현하는 웹 서비스' 교재 활용

http://www.yes24.com/Product/Goods/83849117

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - YES24

https://github.com/dsc-sookmyung/2021-02-Spring-Study/tree/GaGa-Kim

GitHub - dsc-sookmyung/2021-02-Spring-Study: [2021 GDSC Sookmyung 2기] 1분기 스터디(Spring)를 위한 저장소

Caused by: java.net.BindException: Address already in use: bind 해결

https://mkil.tistory.com/466

tomcat Address already in use : bind 해결방법

Caused by: org.springframework.context.annotation.ConflictingBeanDefinitionException 해결

https://github.com/jojoldu/freelec-springboot2-webservice/issues/271

[오류] indexController 폴더 변경후 bean중복 오류 · Issue #271 · jojoldu/freelec-springboot2-webservice