스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기

이전 글: 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기   현재까지 완성된 미디 플레이어 (임시) 바로 가기 이 서비스는 AWS 프리티어 기간 만료로 인해 폐쇄하였습니다.서비스 당시 모습을 영상 기록으로 확인할 수 있습니다.   현재 버전에서의 TimidityRunner package com.example.awsboard.util; import java.io.*; import java.security.MessageDigest; 더보기…

Spring Boot Security OAuth2: 커스텀 로그인 페이지 구현

스프링 부트 시큐리티 Spring Boot Security OAuth2: 커스텀 로그인 페이지 구현 출처 및 참고글 Baeldung – 스프링 부트 OAuth 커스텀 로그인 페이지 만들기 (영문) 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 Spring Boot: 시큐리티(Security) – 2 – 커스텀 로그인 페이지 만들기   OAuth 2.0으로 더보기…

Spring JPA: 테이블(엔티티) 검색 기능 만들기 + 단위 테스트

Spring JPA는 Repository의 메소드 이름으로 쿼리를 지정할 수 있습니다. API 문서 (영문) 바로가기   참고: Entity 클래스의 구조는 다음과 같습니다. package com.example.awsboard.domain.posts; import com.example.awsboard.domain.BaseTimeEntity; import lombok.Builder; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.ToString; import javax.persistence.*; @Getter @NoArgsConstructor @ToString @Entity // 테이블과 링크될 클래스 public class Posts extends BaseTimeEntity { @Id // 더보기…

스프링(Spring): JdbcTemplate에서 LIKE 키워드 사용 시 SQL Injection 방지 코드 작성하는 방법 (Mysql, Mariadb)

먼저 아래 코드는 일단 동작하는 코드입니다. 표면적인 문제는 없지만 SQL Injection(이하 인젝션)의 문제점에 노출되어 있습니다. public List<Product> findByTitleAndLocale(String keyword, String locale) { String sql = “select * ” “from product_list ” + “where title like ‘%” + keyword + “%’ ” + “and locale like ‘%” + locale + “%'”; 더보기…

스프링 부트(Spring Boot): 파일 업로드 처리하기 (한 개, 여러 개)

업로드한 파일을 컨트롤러에서 처리하고자 할 때에는 MultipartFile을 이용합니다. 파일이 하나인 경우는 MultipartFile을 변수 타입으로 하고 여러 개인 경우 List<MultipartFile>을 변수 타입으로 합니다.   HTML <form method=”post” action=”/[업로드할_컨트롤러_주소]” enctype=”multipart/form-data”> <input multiple type=”file” name=”files”> <button>submit</button> </form> <form> 태그에 enctype="multipart/form-data"를 추가합니다. <input>에서 multiple이 있으면 여러 파일 업로드 허용, 없으면 하나의 파일만 허용합니다.   단일 더보기…

Vue.js: 무한 스크롤 기초(Vue-infinite-loading 라이브러리 + Spring JPA 이용)

Vue.js에서 무한 스크롤(무한 페이징, 스크롤 페이징)을 적용하는 방법입니다. Vue-infinite-loading 이라는 라이브러리를 사용하면 무한 스크롤을 쉽게 구현할 수 있습니다. 원리는 특정 영역, 일반적으로 화면 맨 아래에 화면이 이동하면 Vue.js 에서 목록을 관리하는 배열에 추가 데이터를 AJAX 로 더하여 다시 렌더링하는 방식입니다. 이 예제는 별도의 예외 상황에 대한 고려 없이 단순하게 목록을 30개씩 더보기…

스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기

제가 예전에 자바스크립트의 MIDIjs라는 라이브러리를 이용해 미디 플레이어를 만든 적이 있습니다. 자바스크립트: 인터넷에서 미디(MIDI) 파일을 바로 재생하는 라이브러리(http://www.midijs.net/) + 예제: 미디 플레이어   여기서 다른 스마트폰에서는 테스트해보지 않았지만 아이폰에서는 사파리 창을 닫으면 재생이 되지 않습니다. 컴퓨터에서는 문제가 없습니다만, 아이폰에서는 제가 사용하면서 이 점이 매우 불편했습니다. 그런데 외부 라이브러리를 사용했기 때문에 더보기…

스프링 부트 웹 사이트 예제: 아마존 웹 서비스 게시판 (Spring Boot + JPA + AWS + Travis CI)

개요 이 예제는 예전에 만들었던 Spring Boot 예제: 초간단 게시판 과 비슷한 예제인데, 이클립스 대신 인텔리제이 커뮤니티 버전을 바탕으로 이전에 사용하지 않았던 JUnit 단위 테스트, JPA, Lombok 등을 사용하였고, 아마존 웹 서비스와 Travis CI라는 자동 배포 서비스를 이용해 외부 인터넷 상에서 접속할 수 있도록 하였습니다. 과정의 대부분은 스프링 부트와 AWS로 혼자 구현하는 웹 더보기…

스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 아이디로 로그인

  이 방법은 JSTL, Thymeleaf, Mustache 등 서버 사이드 템플릿 엔진을 사용하는 로그인 방법입니다. SPA에서 사용할 수 있는 소셜 로그인 연동 방법은 아래 글을 참고하세요, 스프링 부트(Spring Boot): SPA에서 사용할 수 있는 OAuth2 소셜 로그인 (구글, 페이스북, 깃허브) 순서 build.gradle에 디펜던시 추가 application-oauth.properties 작성 + .gitignore 등록 Role enum 클래스 더보기…

스프링 부트 Thymeleaf: fragment로 웹 페이지에 header, footer 등 조각 삽입

스프링 부트 Thymeleaf: fragment로 웹 페이지에 header, footer 삽입하는 방법입니다. 공통되는 부분을 미리 만들어 놓은 다음 재사용할 수 있습니다. 전체 소스 보기   프로젝트 구조   먼저 HTML 파일을 만든 뒤(fragments/common.html) 조각(fragment)로 만들고 싶은 요소의 태그에 th:fragment="[이름]" 을 삽입합니다. <head th:fragment=”html-head”> …….. </head> <div th:fragment=”header”> <nav class=”navbar navbar-expand-lg navbar-dark bg-dark mb-2″> 더보기…