개발일지, 개인 또는 단체 포트폴리오 등
업로드한 파일을 컨트롤러에서 처리하고자 할 때에는 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) { 더보기…
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)]으로 사용하는데, 예제를 통해 보는 것이 이해가 빠릅니다. 더보기…