Portfolio
Vue.js 예제: 할 일(todo) 관리 애플리케이션
깃허브 주소: https://github.com/ayaysir/vue-todo Vue.js로 만든 할 일(todo) 관리 애플리케이션입니다. 주요 기능 입력, 수정, 삭제 기능 목록 표시 기능 목록을 JSON으로 저장하여 localStorage에 동기화 작성 날짜 표시 기능 모든 목록 삭제 기능
DEVLOG
개발일지, 개인 또는 단체 포트폴리오 등
WEB: Backend
스프링 부트(Spring Boot) 미디 플레이어 만들기 (3): 다음 곡 연속 재생 기능 & 미디 정보 업데이트 및 삭제
이전 글 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기 스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기 현재까지 완성된 미디 플레이어 (임시) 바로 가기 이 서비스는 AWS 프리티어 기간 만료로 인해 폐쇄하였습니다.서비스 당시 모습을 영상 더보기…
WEB: Frontend
자바스크립트: 테이블의 tbody 내용 뒤집기(reverse)
자바스크립트로 테이블을 역순으로 정렬하는 예제입니다. 참고로 테이블을 작성할 시에는 <table> 태그 밑에 <thead>와 <tbody>로 제목 부분과 내용 부분을 나누는 것이 관리 측면에 좋습니다. DOM 배열은 forEach등을 사용할 수 없으므로 Array.from($domArrr)로 forEach 등을 사용할 수 있는 배열로 변환합니다. 이것을 reverse()한 다음에 다시 테이블 <tbody> 밑에 append하면 됩니다. 그리고 reverse()를 sort()로 바꾸면 더보기…
WEB: Backend
스프링 부트 (Spring Boot): mp3을 전송하는 컨트롤러 – 크롬 및 사파리(Safari) 브라우저에서 구간 탐색이 안되는 문제 해결 방법
주소를 입력하면 MP3 파일을 다운받을 수 있는 컨트롤러를 만들고 있었습니다. 먼저 아래 글을 먼저 참고하세요. 그리고 글에 사족이 많습니다. 전체 코드는 맨 밑에 있습니다. 참고:JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기 파일 다운로드도 잘 되고 재생도 되었습니다만, 크롬과 사파리(맥, iOS)에서 <audio> 태그에 넣으면 구간 탐색이 안되는 문제가 있었습니다. 더보기…
WEB: Backend
스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기
이전 글: 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기 현재까지 완성된 미디 플레이어 (임시) 바로 가기 이 서비스는 AWS 프리티어 기간 만료로 인해 폐쇄하였습니다.서비스 당시 모습을 영상 기록으로 확인할 수 있습니다. 현재 버전에서의 TimidityRunner package com.example.awsboard.util; import java.io.*; import java.security.MessageDigest; 더보기…
WEB: Backend
Spring Boot Security OAuth2: 커스텀 로그인 페이지 구현
스프링 부트 시큐리티 Spring Boot Security OAuth2: 커스텀 로그인 페이지 구현 출처 및 참고글 Baeldung – 스프링 부트 OAuth 커스텀 로그인 페이지 만들기 (영문) 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 Spring Boot: 시큐리티(Security) – 2 – 커스텀 로그인 페이지 만들기 OAuth 2.0으로 더보기…
WEB: Backend
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 // 더보기…
WEB: Frontend
자바스크립트: IntersectionObserver (2) 무한 스크롤(Infinite Scroll) 구현 (라이브러리 없이)
먼저 무한스크롤은 JQuery에서도 다양한 플러그인이 있고, 그 외에도 검색하면 많은 라이브러리들이 있기 때문에 무한스크롤을 직접 구현하기보다는 이러한 외부 라이브러리를 사용하는 것을 우선 추천드립니다. IntersectionObserver에 대한 내용은 이전 글에서 설명되어 있습니다. 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현 IntersectionObserver을 이용한 무한 스크롤은 MDN 문서에서도 공식적으로 권장하고 있는 사항입니다. Implementing “infinite 더보기…
WEB: Frontend
자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현
출처 바로가기 일반적인 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> 더보기…
WEB: Backend
스프링(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 + “%'”; 더보기…