DEVLOG

개발일지, 개인 또는 단체 포트폴리오 등

스프링 부트(Spring Boot): JPA + Thymeleaf로 페이지네이션(페이징, 페이지 내비게이션) 구현

스프링 부트 + JPA + Thymeleaf를 이용해 게시판에 페이지네이션(페이징, 페이지 내비게이션) 기능을 추가해 보겠습니다.   0) 엔티티 클래스, 레퍼지토리 인터페이스 작성 Spring Boot: Spring JPA + H2 데이터베이스 기초 + 단위 테스트   1) 엔티티에 대한 서비스 클래스 작성 package com.example.awsboard.service.posts; import com.example.awsboard.domain.posts.Posts; import com.example.awsboard.domain.posts.PostsRepository; import com.example.awsboard.web.dto.PostsListResponseDTO; import com.example.awsboard.web.dto.PostsResponseDTO; import 더보기…

글쓴이 yoonbumtae (BGSMM), 전

자바(Java) 예제: 페이지네이션(Pagination, 페이징, 페이지 내비게이션) 도와주는 프로그램

페이지네이션, 페이징, 페이지 내비게이션 등 다양한 이름으로 불리는 이것은 웹 페이지에서 흔히 볼 수 있는 페이지 번호를 클릭하면 특정 페이지로 이동하는 부분이나 기법을 통칭하는 용어입니다. 위의 HTML 요소 전부를 편의상 블럭이라고 하겠습니다. 이 예제는 (1) 현재 페이지, (2) 블럭 당 페이지 개수, (3) 전체 글 개수, (4) 페이지당 글 개수에 더보기…

글쓴이 yoonbumtae (BGSMM), 전

자바스크립트 + 스프링 부트(Spring Boot): BASE64로 JSON을 통해 파일 업로드하기

BASE64란 8비트 바이너리 데이터(예를 들어 실행파일이나, ZIP파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 스트링으로 바꾸는 인코딩 방식을 가리키는 개념입니다. 다시 말해서, 바이너리를 읽을 수 있는 스트링 형태로 바꾼 자료형을 BASE64라고 합니다. (자세한 설명)   예전에 스프링 부트에서 MultipartFile을 이용해 파일 업로드를 하는 방법에 대한 더보기…

글쓴이 yoonbumtae (BGSMM), 전

Vue.js: 라우터(Vue Router) 기초

이 방법은 npm의 Vue CLI를 통해 개발하는 경우 및 처음에 Vue.js 프로젝트를 생성할 때 Vue Router가 포함되지 않은 경우를 기준으로 작성되었습니다.   1) npm에서 Vue Router 설치 npm install vue-router –save   2) router 관련 설정 js 파일 생성 이름 및 경로는 자유롭게 지정할 수 있습니다.   3) 라우터 설정 더보기…

글쓴이 yoonbumtae (BGSMM), 전

스프링 부트(Spring Boot): SPA 라우트(route)를 위한 URL 컨트롤러

Vue.js 등 SPA 프레임워크는 자바스크립트의 History API를 이용하여 클라이언트 단에서 URL 라우팅을 하는 기능이 있습니다. Vue Router: HTML5 히스토리 모드 History API 이 기능을 사용하면, 서버에서 별도로 처리하지 않고도 index.html에서 URL을 지정할 수 있게 됩니다. 전통적으로 브라우저창에 URL을 입력하면 서버에서 해당 URL 매핑 정보를 찾아 페이지를 리턴하는 방식이었지만, History API를 더보기…

글쓴이 yoonbumtae (BGSMM), 전

스프링 부트(Spring Boot) 예제: 미디 플레이어

MIDI란 컴퓨터 음악을 위한 규격화된 포맷으로 미디 표준을 지켜 만든 음악 파일들은 미디 플레이어 등에서 실행할 수 있으며 오늘날 음악 제작에서 필수적으로 사용되고 있습니다. 자세한 내용 미디 플레이어는 자신이 가진 미디 파일을 인터넷상에 업로드하고 어디서나 재생할 수 있는 웹사이트입니다. AWS를 이용해 인터넷상에서 접근 가능하도록 했습니다.   개발 일지 스프링 부트(Spring Boot) 더보기…

글쓴이 yoonbumtae (BGSMM), 전

스프링 부트(Spring Boot) 미디 플레이어 만들기 (3): 다음 곡 연속 재생 기능 & 미디 정보 업데이트 및 삭제

이전 글 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기 스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기   현재까지 완성된 미디 플레이어 (임시) 바로 가기 다음 곡 연속 재생 기능 이전 버전에서는 한 곡만 재생하고 끝이었는데, 더보기…

글쓴이 yoonbumtae (BGSMM), 전

자바스크립트: 테이블의 tbody 내용 뒤집기(reverse)

자바스크립트로 테이블을 역순으로 정렬하는 예제입니다. 참고로 테이블을 작성할 시에는 <table> 태그 밑에 <thead>와 <tbody>로 제목 부분과 내용 부분을 나누는 것이 관리 측면에 좋습니다. DOM 배열은 forEach등을 사용할 수 없으므로 Array.from($domArrr)로 forEach 등을 사용할 수 있는 배열로 변환합니다. 이것을 reverse()한 다음에 다시 테이블 <tbody> 밑에 append하면 됩니다. 그리고 reverse()를 sort()로 바꾸면 더보기…

글쓴이 yoonbumtae (BGSMM), 전

스프링 부트 (Spring Boot): mp3을 전송하는 컨트롤러 – 크롬 및 사파리(Safari) 브라우저에서 구간 탐색이 안되는 문제 해결 방법

주소를 입력하면 MP3 파일을 다운받을 수 있는 컨트롤러를 만들고 있었습니다. 먼저 아래 글을 먼저 참고하세요. 그리고 글에 사족이 많습니다. 전체 코드는 맨 밑에 있습니다. 참고:JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기   파일 다운로드도 잘 되고 재생도 되었습니다만, 크롬과 사파리(맥, iOS)에서 <audio> 태그에 넣으면 구간 탐색이 안되는 문제가 있었습니다. 더보기…

글쓴이 yoonbumtae (BGSMM), 전