자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한

lodash 홈페이지: https://lodash.com/ debounce, throttle은 생소한 기능인데요 간단히 요약하면 이벤트의 반복 실행시 콜백 함수의 불필요한 실행을 줄이는 역할을 합니다. 이로 인해 클라이언트가 혜택을 볼 수도 있거나 혹은 서버 측에 불필요한 리퀘스트를 줄일 수도 있습니다. debounce: 동일 이벤트가 반복적으로 시행되는 경우 마지막 이벤트가 실행되고 나서 일정 시간(밀리세컨드)동안 해당 이벤트가 다시 실행되지 않으면 더보기…

자바 예제: 한글 검색 SQL 만들기 (자음 초성 검색 포함)

한글 유니코드와 관련된 내용은 이 글을 참고하세요: Java 예제: 한글 초성 중성 종성 분리 (자모분리)   만들고자 하는 SQL(mariadb)은 다음과 같습니다. SELECT `id`, `keyword`, `date`, count(keyword) as kcount FROM `recent_search_keyword` WHERE keyword >= ‘가’ and keyword <= ‘깋’ group by keyword order by keyword 자바(또는 Spring)에서 입력된 키워드를 분석해서 위 SQL의 더보기…

자바스크립트 예제: 루비 문자 변환기

루비 문자 변환기 바로가기 루비 문자는 글자 위에 첨자가 붙는 것으로서 아래와 같은 것들을 루비 문자라고 합니다. 모든 문자 및 언어에서 사용되는 것이지만 주로 일본어 등에서 볼 수 있습니다. (루비 문자에 대한 설명)  振ふり仮が名な HTML으로 이 루비 문자를 입력할 수 있는데, 매번 태그를 입력하는 것이 귀찮기 때문에 변환기를 만들었습니다. 사용법은 더보기…

자바스크립트: 캔버스로 원 그리기 + 원을 n등분하기

캔버스에 대한 기초 사용법은 모질라 web docs에서 볼 수 있습니다.   원 그리기 호(arc) 명령을 이용해서 원을 그릴 수 있습니다. arc(x, y, radius, startAngle, endAngle, anticlockwise) (x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값 false – 시계방향 회전) 호를 그리게 됩니다. 예제 코드를 살펴보겠습니다. HTML 기본 토대는 다음과 같습니다. <!DOCTYPE 더보기…

자바스크립트: 오디오(Audio) 요소 구간반복하기

자바스크립트와 HTML로 이루어진 페이지에서 audio태그를 사용하여 음원을 재생할 때 설정할 수 있는 구간 반복 기능을 구현한 예제입니다. 언어 학습 등에 사용하면 좋을 것 같습니다. 자바스크립트 오디오 객체에서 특정 이벤트를 실행하는 방법은 다음과 같습니다. audioElement.addEventListener(type, listener[, useCapture]); type: 이벤트 종류(timeupdate, play, loaddedmetadata 등) listener: 해당 이벤트 발생 시 실행할 함수 useCapture: 더보기…

Spring Boot: “네이버 아이디로 로그인하기” 연동 – 스프링 시큐리티와 연결 (3)

보다 개선된 네이버 로그인 – 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 아이디로 로그인   이전글의 두 상황을 결합하여 네이버 아이디로 로그인(이하 네아로)을 스프링 시큐리티와 연결하는 예제입니다. Spring Boot: – 네이버 아이디로 로그인하기 – 연동하기 (1) Spring Boot: 시큐리티(Security) – 4 – 로그인 폼을 거치지 더보기…

Spring Boot: “네이버 아이디로 로그인하기” 연동 – 스프링 시큐리티와 연결 (2)

깃허브에서 전체 코드 보기 – https://github.com/ayaysir/spring-boot-security-example-1 보다 개선된 네이버 아이디로 로그인 – 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 아이디로 로그인   이전글의 두 상황을 결합하여 네이버 아이디로 로그인(이하 네아로)을 스프링 시큐리티와 연결하는 예제입니다. Spring Boot: – 네이버 아이디로 로그인하기 – 연동하기 (1) Spring Boot: 시큐리티(Security) 더보기…

Spring Boot: “네이버 아이디로 로그인하기” 연동 – 스프링 시큐리티와 연결 (1)

깃허브에서 전체 코드 보기 – https://github.com/ayaysir/spring-boot-security-example-1 보다 개선된 네이버 로그인 – 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 아이디로 로그인 이전글의 두 상황을 결합하여 네이버 아이디로 로그인(이하 네아로)을 스프링 시큐리티와 연결하는 예제입니다. Spring Boot: – 네이버 아이디로 로그인하기 – 연동하기 (1) Spring Boot: 시큐리티(Security) – 4 더보기…

phpMyAdmin: 테이블에 외래키 설정하기

[구조] 버튼을 클릭합니다. [릴레이션 뷰] 버튼을 클릭합니다. 제약의 이름을 입력합니다. 외래키로 사용할 컬럼(다른 테이블을 참조하는 컬럼)의 컬럼명을 설정합니다. 참조되는 컬럼(다른 테이블의 기본키)의 컬럼명을 찾아 설정합니다. 두 컬럼 간의 데이터 타입 및 인코딩은 일치해야 합니다. 옵션 (SET NULL: 참조되는 컬럼이 변경되면 null로 업데이트/CASCADE: 연쇄 업데이트/RESTRICT: 변경 제한/NO ACTION: 참조되는 컬럼의 변경에 더보기…

Spring Boot 예제: 회원가입 폼 만들기

이 예제에는 스프링 시큐리티와 Thymeleaf가 사용되었습니다. 기초적인 데이터베이스 insert 예제로, 특별한 내용은 없고 다음을 연습하기 위해 만들었습니다. 회원 테이블에 비밀번호를 BCrypt로 해싱한 텍스트를 입력 원칙적으로 입력한 값에 대한 유효성 검사는 프론트엔드 측과 백엔드 측 모두에서 행해져야 하는데, 백엔드 측의 유효성 검사 과정을 추가 시간 관계상 프론트엔드 측 유효성 검사는 구현하지 더보기…