자바스크립트: 배경색에 ‘어두움 정도’ 따라 텍스트의 색상 결정하기

출처: 바로가기 예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다. 어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다. 색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다. function getTextColorByBackgroundColor(hexColor) 더보기…

스프링 부트(Spring Boot): JPA 엔티티에 자동으로 생성 날짜, 변경 날짜 추가하기

JPA 엔티티에 생성 날짜(createdDate), 변경 날짜(modifiedDate) 필드를 자동으로 추가하는 방법입니다.   1) BaseTimeEntity 추상 클래스 작성 package com.example.awsboard.domain; import lombok.Getter; import org.springframework.data.annotation.CreatedDate; import org.springframework.data.annotation.LastModifiedDate; import org.springframework.data.jpa.domain.support.AuditingEntityListener; import javax.persistence.EntityListeners; import javax.persistence.MappedSuperclass; import java.time.LocalDateTime; @Getter @MappedSuperclass @EntityListeners(AuditingEntityListener.class) public abstract class BaseTimeEntity { @CreatedDate private LocalDateTime createdDate; @LastModifiedDate private LocalDateTime modifiedDate; }   더보기…

스프링 부트(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 더보기…

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

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

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

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

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

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

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

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

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

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

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

이전 글 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기 스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기   현재까지 완성된 미디 플레이어 (임시) 바로 가기 이 서비스는 AWS 프리티어 기간 만료로 인해 폐쇄하였습니다.서비스 당시 모습을 영상 더보기…