개발일지, 개인 또는 단체 포트폴리오 등
스프링 부트 시큐리티 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 = 더보기…
Vue.js에서 무한 스크롤(무한 페이징, 스크롤 페이징)을 적용하는 방법입니다. Vue-infinite-loading 이라는 라이브러리를 사용하면 무한 스크롤을 쉽게 구현할 수 있습니다. 원리는 특정 영역, 일반적으로 화면 맨 아래에 화면이 이동하면 Vue.js 에서 목록을 관리하는 배열에 추가 데이터를 AJAX 로 더하여 다시 렌더링하는 방식입니다. 이 예제는 별도의 예외 상황에 대한 고려 없이 단순하게 목록을 30개씩 더보기…
제가 예전에 자바스크립트의 MIDIjs라는 라이브러리를 이용해 미디 플레이어를 만든 적이 있습니다. 자바스크립트: 인터넷에서 미디(MIDI) 파일을 바로 재생하는 라이브러리(http://www.midijs.net/) + 예제: 미디 플레이어 여기서 다른 스마트폰에서는 테스트해보지 않았지만 아이폰에서는 사파리 창을 닫으면 재생이 되지 않습니다. 컴퓨터에서는 문제가 없습니다만, 아이폰에서는 제가 사용하면서 이 점이 매우 불편했습니다. 그런데 외부 라이브러리를 사용했기 때문에 더보기…
출처 바로가기(영문) Vue.js: v-on:click을 사용해 해당 요소(element)의 DOM 가져오기 이벤트 객체 $event를 사용하여 이벤트 핸들러를 가져올 수 있습니다. <div id=”foo” v-on:click=”select($event)”>…</div> $event는 자바스크립트에서 다음과 같이 처리할 수 있습니다. 참고로 event 자체는 클릭 이벤트이고, 어떤 요소를 클릭했는지 가져오는 것이 event.currentTarget(또는 event.target)입니다. export default { methods: { select: function(event) { 더보기…