개발일지, 개인 또는 단체 포트폴리오 등
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) { 더보기…
fetch를 이용하면 매우 간단하게 Blob 형태의 데이터를 받을 수 있습니다. await 키워드는 blob 변수를 최초 사용할 때까지만 사용하면 됩니다(await blob). 파일을 전송하는 백엔드 서버(자바 스프링) 만드는 방법은 아래 글을 참고하세요. 그리고 구버전 자바스크립트에서도 사용 가능한 XMLHttpRequest를 사용해 Blob 데이터를 받아오는 방법도 첨부합니다. JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기 자바스크립트: 더보기…
참고 블로그 문법 scp -i [pem_file] [upload_file] [user_id]@[ec2_public_IP]:[transfer_address] pem_file – 아마존 EC2 인스턴스를 만들 때 발급받은 pem키 파일의 경로를 입력합니다. user_id – 터미널에 접속하면 보이는 빨간색 부분 (또는 루트 디렉토리에서 pwd를 누르면 home/ 뒤에 나오는 정보)이 유저 아이디입니다. ec2_public_ip – 퍼블릭 DNS나 퍼블릭 IP(v4) 중 하나를 사용합니다. transfer_address – 루트 더보기…
출처 바로가기 (영문) say 텍스트를 들을 수있는 음성으로 변환(음성 합성)합니다. 이 도구는 음성 합성 관리자를 사용하여 입력 텍스트를 음성 음성으로 변환하고, 시스템 환경 설정에서 선택한 사운드 출력 장치를 통해 재생하거나 AIFF 파일로 저장합니다. 문법 say [-v voice] [-o out.aiff | -n name:port ] [-f file.in | string …] 더보기…
자바 8 이상부터 도입된 Stream이라는 타입은 람다식을 이용해 컬렉션 자료의 순회, 필터링 등을 할 수 있습니다. 자바스크립트에서는 ES5 도입 이후 자주 쓰이는 형태인데 자바의 Stream은 상대적으로 사용법이 낯설기 때문에 동일한 로직의 코드를 비교해가면서 사용법을 알아보도록 하겠습니다. 자바스크립트에서는 배열에서 바로 사용할 수 있지만 자바에서는 List, Set 등 Iterable을 구현하는 자료형이 forEach()만을 더보기…
자바8 람다식: 자바(Java): 람다식 (Lambda Expression) 기초 (Java 8 이상) 콜론 두개 (:: – 이중 콜론 연산자)의 정식 명칭은 메소드 참조 표현식(method reference expression)이며, 결론부터 말하자면 람다식에서 파라미터를 중복해서 쓰기 싫을 때 사용합니다. 말 그대로 람다 표현식(expression)에서만 사용 가능하고, 사용 방법은 [인스턴스]::[메소드명(또는 new)]으로 사용하는데, 예제를 통해 보는 것이 이해가 빠릅니다. 더보기…
Travis CI (Continuous Integration)와 AWS Code Deploy를 이용하면 깃허브에 푸시만 해도 자동으로 웹 서비스가 빌드 및 배포되도록 할 수 있습니다. 하나의 EC2 계정에 여러 레퍼지토리를 빌드 및 배포할 수 있습니다. 아래 차례에서 6번 부분만 조심하면 됩니다. 자세한 내용은 위 출처에 나와 있으며, 이 게시물은 제가 나중에 다시 보기 위해 요약하였습니다. 더보기…
개요 이 예제는 예전에 만들었던 Spring Boot 예제: 초간단 게시판 과 비슷한 예제인데, 이클립스 대신 인텔리제이 커뮤니티 버전을 바탕으로 이전에 사용하지 않았던 JUnit 단위 테스트, JPA, Lombok 등을 사용하였고, 아마존 웹 서비스와 Travis CI라는 자동 배포 서비스를 이용해 외부 인터넷 상에서 접속할 수 있도록 하였습니다. 과정의 대부분은 스프링 부트와 AWS로 혼자 구현하는 웹 더보기…