JavaScript (46) 썸네일형 리스트형 [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가 이미 적용돼 있는 경우가 많다.그러니까 퍼블리싱이 완료된 화면이다.따라서 구조는 그대로 두고 내용만 채워야 한다.먼저 퍼블리싱이 적용된 단위 요소 하나를 템플릿으로 먼저 둔다.나중에 이 템플릿을 복사해서 요소를 새로 만들고 내용만 채워서 .. [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) { // 조건문 안 넣으면 한 .. [JavaScript] 숫자만 입력 가능한 정규식 조건 만들기 - 만들고 싶은 기능 - > text 타입의 input 컴포넌트에 숫자만 입력하도록 하기 - 방법 구상하기 - > input 컴포넌트의 value 에 넣어주는 값을 다른 변수 val와 바인딩해 둔다. > input 컴포넌트에 onChange 이벤트를 걸어둔다. > onChange 이벤트 리스너에 조건문 처리를 해준다. 입력한 값이 숫자일 때는 value 와 바인딩해 두었던 변수 val 의 값을 수정하고, 숫자가 아닐 때에는 a 의 값을 수정하지 않고 그대로 둔다. - 구현하기 - [JavaScript] 문자열을 그대로 html 태그로 DOM에 추가하고 싶을 때 - 사용 기술 - React(class형) / mobx - 기능 설명 - 버튼이 있다. 이 버튼을 누르면 모달이 하나 뜬다. 모달은 왼쪽과 오른쪽으로 나뉘어 있다. 왼쪽은 목록이고 오른쪽은 미리보기다. 왼쪽에는 미리 작성해둔 양식들의 제목이 목록으로 뜬다. 목록에 있는 제목 위에 마우스를 가져다 대면 모달 오른쪽으로 해당 양식의 미리보기가 뜬다. - 문제 - 서버로부터 받아오는 값은 html 문자열이다. 예를 들어 이런 식이다. const contents = "안녕하세요"; 이 내용을 모달 오른쪽으로 출력해야 한다. 그런데 문자열을 그대로 출력하는 게 아니라 html 태그로 생성해서 화면에 띄워야 하는데 그게 안 됐다. 1) textarea 가장 먼저 시도한 방법은 textarea 에다가 value로 넣.. [JavaScript] 값이 null 일 경우 parameter 에 key 조차 존재하면 안 될 때 - 사용 기술 - React(class형) / mobx - 상황 - 자동차를 만들고 있다. 중간중간 점검을 실시한다. 점검은 총 5번 있다. 점검 일정이 잡히면 DB에 넣어둔다. 자동자A 의 점검 일정을 복사하여 자동차B 점검 일정에 입력하는 기능이 있다. carB.checkDate1 = carA.checkDate1 || ""; carB.checkDate2 = carA.checkDate2 || ""; carB.checkDate3 = carA.checkDate3 || ""; carB.checkDate4 = carA.checkDate4 || ""; carB.checkDate5 = carA.checkDate5 || ""; - 문제 - 점검은 날짜가 정해진 일정도 있고 아직 정해지지 않은 일정도 있다. 이때 날.. 이전 1 2 3 4 ··· 6 다음