개발일지, 개인 또는 단체 포트폴리오 등
자바스크립트로 테이블을 역순으로 정렬하는 예제입니다. 참고로 테이블을 작성할 시에는 <table> 태그 밑에 <thead>와 <tbody>로 제목 부분과 내용 부분을 나누는 것이 관리 측면에 좋습니다. DOM 배열은 forEach등을 사용할 수 없으므로 Array.from($domArrr)로 forEach 등을 사용할 수 있는 배열로 변환합니다. 이것을 reverse()한 다음에 다시 테이블 <tbody> 밑에 append하면 됩니다. 그리고 reverse()를 sort()로 바꾸면 더보기…
주소를 입력하면 MP3 파일을 다운받을 수 있는 컨트롤러를 만들고 있었습니다. 먼저 아래 글을 먼저 참고하세요. 그리고 글에 사족이 많습니다. 전체 코드는 맨 밑에 있습니다. 참고:JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기 파일 다운로드도 잘 되고 재생도 되었습니다만, 크롬과 사파리(맥, iOS)에서 <audio> 태그에 넣으면 구간 탐색이 안되는 문제가 있었습니다. 더보기…
이전 글: 스프링 부트(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: 커스텀 로그인 페이지 구현 출처 및 참고글 Baeldung – 스프링 부트 OAuth 커스텀 로그인 페이지 만들기 (영문) 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 Spring Boot: 시큐리티(Security) – 2 – 커스텀 로그인 페이지 만들기 OAuth 2.0으로 더보기…
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 // 더보기…
먼저 무한스크롤은 JQuery에서도 다양한 플러그인이 있고, 그 외에도 검색하면 많은 라이브러리들이 있기 때문에 무한스크롤을 직접 구현하기보다는 이러한 외부 라이브러리를 사용하는 것을 우선 추천드립니다. IntersectionObserver에 대한 내용은 이전 글에서 설명되어 있습니다. 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현 IntersectionObserver을 이용한 무한 스크롤은 MDN 문서에서도 공식적으로 권장하고 있는 사항입니다. Implementing “infinite 더보기…
출처 바로가기 일반적인 HTML 문서에서 <img src="…">를 사용하면 브라우저는 일괄적으로 이미지 로딩을 시도하게 됩니다. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> </head> <body> <img src=”…/img/Chrysanthemum.jpg” alt=””> <img src=”…/img/Desert.jpg” alt=””> <img src=”…/img/Hydrangeas.jpg” alt=””> <img src=”…/img/Jellyfish.jpg” alt=””> <img src=”…/img/Koala.jpg” alt=””> <img src=”…/img/Lighthouse.jpg” alt=””> <img src=”…/img/Penguins.jpg” alt=””> <img src=”…/img/Tulips.jpg” alt=””> </body> </html> 더보기…
먼저 아래 코드는 일단 동작하는 코드입니다. 표면적인 문제는 없지만 SQL Injection(이하 인젝션)의 문제점에 노출되어 있습니다. public List<Product> findByTitleAndLocale(String keyword, String locale) { String sql = “select * ” “from product_list ” + “where title like ‘%” + keyword + “%’ ” + “and locale like ‘%” + locale + “%'”; 더보기…
업로드한 파일을 컨트롤러에서 처리하고자 할 때에는 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이 있으면 여러 파일 업로드 허용, 없으면 하나의 파일만 허용합니다. 단일 더보기…
출처 바로가기 파일의 무결성 검사를 할 때 해시값을 이용한 비교를 많이 사용합니다. 이 예제는 단순히 파일이 같은지 여부 체크에만 사용할 것이기 때문에 복잡한 알고리즘은 필요하지 않고 MD5 정도의 해시 알고리즘이면 충분합니다. import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public FileManager { public static String getHash(String path) throws IOException, NoSuchAlgorithmException { MessageDigest messageDigest = 더보기…