분류 전체보기 (133) 썸네일형 리스트형 [JavaScript] base64 문자열로 받은 데이터를 이미지로 띄우기 - base64 데이터를 이미지로 변환하여 화면에 띄우기 -일단 xhr 을 호출하여 서버로부터 데이터를 받아온다. 이때 데이터는 base64 문자열이다. 이 base64 문자열을 이미지 파일로 변환하여 화면에 띄우는 방법은 여러 가지가 있다. 여기서는 총 3가지 방법을 보려고 한다. 1. base64 문자열을 그대로 src 속성에 박아버리기 2. base64 문자열을 파일로 변환하여 참조 url 을 생성하기 3. base64 문자열을 blob 으로 변환하여 참조 url 을 생성하기 - Base64란? -데이터를 64진법 문자로 인코딩하거나 디코딩하는 방식이다. 컴퓨터에서 다루는 모든 데이터는 0과 1로 이루어진 조합이다. 0과 1들을 모아서 그 데이터들을 어떻게 해석할지 데이터 타입이 바뀔 뿐이다. 문자.. [JavaScript] hex 문자열로 받은 데이터를 이미지로 띄우기 페이지가 로드 된다.이후에 사용자마다 다르게 사용하는 이미지를 서버로부터 받아온다.서버에서는 hex 코드 문자열로 던져준다.이 hex 문자열을 이미지 파일로 바꿔서 화면에 보여줘야 한다.이 기능을 구현하는 JavaScript 코드이다.직접 짠 코드는 아니고 stackoverflow 를 참고했다. // 출처 stackoverflowfunction decodeHex(param){ let hexStr = param.replace(/[^A-Fa-f0-9]/g,""); if(hexStr.length % 2) { console.error("InvalidArguments: Hex String length is odd"); return; } let binary = new .. [JavaScript] HTML 요소 안에서 inline 으로 이벤트 걸어줄 때 이벤트 객체 받아오기 위처럼 onchange, onclick, onkeydown 등 html 요소 태그 안에 inline 으로 직접 콜백을 지정할 수 있다.이때 event 객체를 파라미터로 받을 수 있다. event 객체 안에는 isTrusted, currentTarget, type 등 이벤트와 관련된 다양한 정보들이 들어 있다. inline 안에서는 event 라는 이름으로 정해져 있기 때문에 event 라는 이름으로 넣어줘야 한다. 호출받는 callback 함수에서는 로컬 scope 변수로 사용되기 때문에 이름은 아무렇게나 써도 되고 파라미터 위치만 맞춰주면 된다. - 241230 [JavaScript] 목록 채우기 - 퍼블리싱이 적용된 템플릿을 복사하여 채우기 - 만들고 싶은 기능 -게시판에서 게시글 목록을 채우는 기능이다.페이지를 열면 일단 게시글 목록을 띄운다. 이때 게시글 목록은 비어 있다. 페이지가 모두 완료되면 서버로부터 게시글 목록을 받아온다. 목록을 리스트로 받아와서 반복문을 돈다. 리스트 안에 있는 각 요소들마다 게시글 목록을 하나씩 추가한다. 각 게시글 제목 앞에는 미리보기 이미지도 있다. - 구현한 방법 -이런 경우에 나는 아래처럼 템플릿 패턴(내가 멋대로 지은 이름)을 자주 쓴다.보통 디자인이나 CSS가 이미 적용돼 있는 경우가 많다.그러니까 퍼블리싱이 완료된 화면이다.따라서 구조는 그대로 두고 내용만 채워야 한다.먼저 퍼블리싱이 적용된 단위 요소 하나를 템플릿으로 먼저 둔다.나중에 이 템플릿을 복사해서 요소를 새로 만들고 내용만 채워서 .. <jsp:include> / <jsp:param> 사용법 - Expecting "jsp:param" standard action with "name" and "value" attributes with root cause 일단 에러 메세지부터 ERROR 30796 --- [nio-9000-exec-3] [dispatcherServlet] Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [/WEB-INF/jsp/view/mypage.jsp (line: [16], column: [16]) Expecting "jsp:param" standard action with "name" and "value" attributes] with root cause org.apache.jasper.JasperException: /WEB-INF/jsp/view/mypage.jsp (line: [16], column: [16]) Expe.. [JavaScript] XMLHttpRequest 로 URL 호출해서 팝업창 띄우기 - 만들려는 기능 -팝업을 띄우는 기능을 공통함수로 만들려고 한다.함수에 url 만 파라미터로 넣으면 팝업이 뜨도록 한다.XMLHttpRequest 을 이용한다.파라미터로 넣어준 url 을 호출하면 page 를 던져준다.받아온 page 안에서 팝업에 해당하는 특정 구역만 골라서 긁어온다.새로 받아온 response 를 현재 document 안에 삽입한다. - 초안 - function makeRequest() { const xhr = new XMLHttpRequest(); const xhrUrl = "${pageContext.request.contextPath}/mypage"; const callbackFunc = function(data) { // 조건문 안 넣으면 한 .. [Java] 로컬에서 생성한 Date 를 DB 에 넣으면 값이 달라질 때 - Update 기능 테스트 코드 만들기 - 테스트 코드를 만들던 중이었다. member 객체를 수정하는 기능이었다. 우선 member 객체를 하나 생성한다. 그리고 DB 에 등록한다. 마지막에 등록한 member 객체를 다시 받아온다. 로컬에서 생성했던 member 객체와 DB에서 받아온 member 객체가 같은지 비교한다. 여기까지는 준비다. 이제 update 를 테스트해 보자. DB 에서 받아온 member 객체를 수정한다. id, psw, 생성일, 수정일 등이 있다. 모두 새로운 값으로 바꿔준다. 수정한 member 객체를 DB 에 덮어쓴다. DB 에 덮어썼던 member 객체를 받아온다. 로컬에서 수정한 member 객체와 DB 에서 받아온 member 객체가 같은지 비교한다. 여기까지가 upd.. [JavaScript] 숫자만 입력 가능한 정규식 조건 만들기 - 만들고 싶은 기능 - > text 타입의 input 컴포넌트에 숫자만 입력하도록 하기 - 방법 구상하기 - > input 컴포넌트의 value 에 넣어주는 값을 다른 변수 val와 바인딩해 둔다. > input 컴포넌트에 onChange 이벤트를 걸어둔다. > onChange 이벤트 리스너에 조건문 처리를 해준다. 입력한 값이 숫자일 때는 value 와 바인딩해 두었던 변수 val 의 값을 수정하고, 숫자가 아닐 때에는 a 의 값을 수정하지 않고 그대로 둔다. - 구현하기 - 이전 1 2 3 4 ··· 17 다음