간단한 화면 구현
💬 시연 영상을 위해 간단한 화면 구현을 해야했습니다. 별도의 Front 서버를 만들기보다는 기존 서버에 Thymeleaf을 사용해서 화면을 구성하기로 했습니다. HTML, JQuery, CSS, BootStrap5를 사용했습니다.
✔ Controller 추가
💬 제가 맡은 부분은 아이디어 쓰기, 아이디어 업데이트 부분이었습니다. 해당 페이지를 호출하기 위해 Controller를 생성하고 url에 연결 시켜주었습니다.
@Controller @RequestMapping("/view") public class ViewController { @GetMapping("/pageWrite") public String ideaWritePage() { return "page/ideaWrite"; } @GetMapping("/pageUpdate") public String ideaUpdatePage() { return "page/ideaUpdate"; } }
✔ JQuery, BootStrap5 추가
💬 JQuery와 Ajax를 사용하기 위해 JQuery 3.5.1 버전을 추가했습니다. 그리고 화면을 쉽게 그릴 수 있도록 컴포넌트를 제공하는 BootStrap5를 위한 JS 파일과 CSS 파일을 추가했습니다.
<!-- JQuery 3.5.1 버전 JS 파일 --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <!-- BootStrap 5.3.0 JS 파일과 CSS 파일 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
✔ 화면 작업
💬 상단 Nav 파일을 만들었으며, 그 아래로 BootStrap5에서 제공하는 그리드로 레이아웃을 잡았습니다. 거기에 필요한 입력할 수 있는 칸들을 왼쪽 컨테이너 만들었으며, 오른쪽 컨테이너에는 현재 사진을 보여주도록 만들었습니다. 맨 아래 컨테이너에는 내용을 입력할 수 있도록 BottStrap에서 제공하는 textarea를 적용했습니다.
✔ 결과 화면
'개발일지 > TIL' 카테고리의 다른 글
[230923] Java PriorityQueue와 Comparator 사용하기 (1) | 2023.09.23 |
---|---|
[230913] Scale-out 환경에서 Scheduler 중복으로 실행되는 문제 (0) | 2023.09.13 |
[230830] 서버간 통신을 위해 Kafka 적용 (0) | 2023.08.30 |
[230829] SSE 서버 분리하기 (0) | 2023.08.29 |
[230828] 입찰 API 응답 Average Latency 속도 문제 (0) | 2023.08.28 |