foobarbaz

chrome, edge, firefox등 최신 업데이트 되는 브라우저들은 Audio 태그 만으로도 고유의 플레이어가 생성됩니다. 업데이트되지않는 IE같은 경우는 Audio태그가 작동하지 않는 경우가 있는데 그경우 사용할 JavaScritp코드입니다. 기본적으로 object 태그를 이용합니다. value 값에 사용할 파일 위치, URL을 사용합니다. 1. object 태그 직접 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter 2. jQuery 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // DOM // script function fileToAudioObject(src){ v..

C언어나 JAVA의 경우 정적 타이핑 언어로 변수 선언 시 변수에 저장할 값의 종류에 따라 사전에 자료형을 지정하여야 했습니다. 12int num = 46;char * str = "String";cs 자바스크립트는 동적 타이핑 언어로 변수의 Type annotation이 필요없이 값이 할당되는 과정에서 자동으로 변수의 자료형이 결정됩니다. 따라서 같은 변수에 여러 자료형의 값을 할당할 수 있습니다. 123var str = 'Hello';var num = 1;var bool = true;cs 이와같은 효과가 편해 보일수 있지만, 디버깅 혹은 해당 값의 자료형이 무엇인지 알기 힘들기 때문에 디버깅 등에서 혼란이 일어나기도 합니다. 그렇기 때문에 자바스크립트를 개선한 다른 언어에서는 자료형을 표시하기도 했습니..

자바스크립트의 동작원리 Javascript는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 Full-stack 개발 언어이지만, 그래도 Javascript가 가장 많이 사용되는 분야는 웹 브라우저에서 동작하는 웹 페이지/애플리케이션입니다. 브라우저의 주요 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 응답(Response)을 받아 브라우저에 표시하는 것입니다. 브라우저는 서버로부터 html, css, javascript 파일을 응답받습니다. html, css 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합됩니다. HTML 파서는 script 태그를 만나면 DOM 생성 프..

입사 후 작업하며 공부한 것을 토대로 글을 작성하고자 합니다. 주로 웹 클라이언트단을 작업하고 있는 신입입니다. 참고사항 도서 Learning JavaScript – O’Reily jQuery를 활용한 인터랙티브 웹 콘텐츠 제작 사이트 https://poiemaweb.com/ https://www.w3schools.com/ 그 외 수 많은 블로그 주로 JAVA를 공부했었습니다만... 앞단을 작업하기 위해 JavaScript를 공부하게되었습니다. JavaScript에 대한 기초지식은 전무했고 일을 하며 공부한 것을 바탕으로 글을 작성하려 합니다. 먼저 Javascript는 HTML, CSS와 함께 웹을 구성하는 요소중 하나로 웹브라우저에서 동작하는 유일한 언어이며,멀티-패러다임 언어로 명령형, 함수형, 프..

Controller : - 사용자의 Request를 전달받아 요청의 처리를 담당하는 Service 를 호출 Service : - Controller에 의해 호출되어 실제 비즈니스 로직과 트랜잭션을 처리 - dao를 호출하여 DB CRUD를 처리 후 Controller로 반환 dao : - Service에 의해 호출되어 DB CRUD를 담당 mapper : - dao에서 요청하는 실제 쿼리문이 위치하는 곳 단순하게 페이지를 불러오고 DB정보를 한번에 불러오는 간단한 프로젝트의 경우 Service와 dao의 차이가 거의 없을 수 있다. Service는 사용자가 요청한 작업을 처리하는 과정을 하나의 작업으로 묶은 것이고, dao는 CRUD작업을 하나씩 분할해 놓은 것이다. 사용자가 한 번의 요청으로 단순히 페..

웹 페이지에서 서버로 이미지 파일을 올려주기 전 이미지의 크기가 클 경우 리사이징 후 파일을 올려주고자 한다. 서버단에서도 조정할 수 있지만 서버에 무리가 올수 있기에 클라이언트단에서 처리하는 것이 좋다고 한다. 아래 두 주소는 코드를 참고한 사이트이다. https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload https://codepen.io/tuanitpro/pen/wJZJbp 하단의 코드는 전체 소스코드이다. 이 코드는 파일이 resizing 됐는지 확인하기 위한 코드이며 메모장으로 .html로 저장하여 간단하게 확인할 수 있도록 upload부분은 제외하였다. (file 크기확인은 f12 개발자모드 ..

javascript, jQuery, DOM, CSS 활용 자바스크립트를 공부하며 간단한 달력(Calendar)을 만들어 보았습니다. 주로 자바스크립트로 생성하기 위해 HTML은 최소한으로 사용하였습니다. 아래는 전체 소스코드(간단히 메모장에 text.html로 저장해도 확인가능) 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161..

Spring작업 시 웹 페이지에서 서버로 혹은 서버에서 웹 페이지로 데이터를 보내는 경우 페이지 이동이나 ajax 를 사용한 데이터 이동 시 데이터를 쓰기 편한 형태로 변환할 필요가 있다. HttpServletRequest 의 getParameterMap() 으로 만들어지는 map의 값이 String형태의 Array이다. 위 형태의 데이터로 ibatis 에서 map을 사용하면 제대로 동작하지 않으므로 Parameter의 값을 HashMap형태로 변환하고자 한다. 우선 Controller로 받아온 HttpServletRequest를 가져온다. Service.java 1234567891011121314151617@Autowiredprivate Mapper mapper; public List getInfoLi..