fetch 함수의 결과를 반환하는 함수 생성 (reponse.json())에는 Promise가 반환되기 때문에 여기에도 await를 써줌으로써 리턴값이 발생할 때까지 기다렸다가 반환합니다. 이 때 해당 함수는 async function이어야 합니다. async function getTestData() { const url = 'testurl'; const response = await fetch(url, { method: 'GET', }); const data = await response.json(); return data; }
Frontend/Javascript
서버에서 받아온 바이너리 파일을 다시 파일 데이터로 변환하는 방법입니다. 일전에 파일을 바이너리 타입으로 변환해 DB에 저장한 상태라고 가정하겠습니다. 추가적으로, 복수의 파일을 다운로드할 경우에는 zip 형태의 파일로 저장하게끔 하는 요청사항이 있다고 간주해보겠습니다. const result = (await axios.get(url)).data; const blobData = result.blob; const extension = result.type; let fileType = getFileType(extension); File 타입 지정 바이너리 데이터를 다시 파일로 변환하기 위해서는 파일의 확장자에 따라 다른 파일 타입을 지정해주어야 한다. 저는 주로 MS Office에서 다뤄지는 확장자들(특히 ..
이 게시글에서는 Javascript를 이용해 파일을 바이너리 데이터로 변환하거나 그 반대의 경우에 어떤 개념들이 이용되는지와 어떻게 해야하는지를 설명하고 있습니다. File Javascript에서 파일 데이터를 처리하기 위해 지원하는 인터페이스입니다. Blob의 한 종류로 Blob의 여러 기능을 사용할 수 있습니다. 아래와 같이 HTML의 File의 값을 받아올 때에도 해당 유형의 데이터로 받을 수 있습니다. 개발자 도구로 확인해보게 되면 name, type 등을 속성으로 가지나 데이터의 내용을 보여주지는 않습니다. const file = document.querySelector('#file').files[0]; File(또는 Blob)의 내용을 읽어오기 위해서는 FileReader라는 인터페이스를 이용..
문자열 배열을 Set으로 만들어 중복되는 요소를 제거하고, 이를 다시 스프레드 연산자를 통해 배열로 만들 수 있다. const arr = ['a', 'b', 'c', 'd', 'a', 'c']; const set = new Set(arr); // {'a', 'b', 'c', 'd'} const result = [...set]; // ['a', 'b', 'c', 'd']
Cell의 edittype은 기본적으로 text이다. 이 경우에는 Cell edit 시에 가 생성된다. 나는 이 부분을 number타입의 input으로 사용하고 싶었는데, formatter를 integer로 주는 방식은 값이 '4'일 경우에도 '4.00' 형태로 보이게끔 했다. 나는 일반적인 'number' 타입의 input처럼 정수로 표현할 수 있되, 증가/감소 버튼이 있는 ui를 원했기 때문에 custom 타입으로 대체를 하게 되면서 찾아보게 된 부분이다. 아래 코드는 JqGrid에서 제공하는 API Document에서 발췌한 내용이다. edittype: 'custom'을 사용할 경우에는 editoptions로 custom_elem과 custom_value를 key로 하는 객체를 전달해주어야 한다. ..
최근 코드 변경 사항이 없는데도 불구하고 하루아침에 Element를 드래그하면 화면이 하얗게 변하는 문제가 발생했다. 이럴 때 다른 요소(위치를 유추하여 드래그해야 한다..)를 또 다시 드래그하거나, 화면 배율을 늘리거나 줄이는 등의 변화를 주면 다시 화면이 돌아오긴 한다만 여간 불편한 일이 아니었다. 아무래도 코드 상의 문제라기 보다는 일부 라이브러리가 브라우저의 최신 버전을 호환하지 않아 그러한 문제가 생긴 것이 아닌가 하고 생각했는데, 아직까지도 정확한 원인은 밝히지 못했다. 다만, 스택오버플로우에서 나와 유사한 사례를 찾았고, 무슨 관련이 있나 싶은 방법이지만 이를 해결하는 방법 또한 찾았다. 브라우저의 문제는 맞았다..! 해결 방법 해결 방법은 간단하다. 다만, 이것이 무슨 관련이 있는지는 모르..
🐣 객체 Property 객체는 기본적으로 { } 의 형태로 정의하며, 내부에는 key : value 의 형태로 프로퍼티를 가진다. const superman = { name: 'clark', age: 33 } 접근 superman.name superman["age"] 추가 superman.gender = 'male'; superman["hairColor"] = 'black'; 삭제 객체의 프로퍼티를 제거하기 위해서는 delete [객체의 프로퍼티] 형태로 호출할 수 있다. delete superman.hairColor; 단축 프로퍼티 아래와 같이 key : value 형태가 아닌 이미 값이 할당되어 있는 변수만을 전달하면, 해당 변수의 key와 value값이 해당 프로퍼티의 key와 value값으로 자..
🐣 함수 선언문 function test() {} 어디서는 호출 가능하다(변수도 마찬가지). 이는 인터프리터 언어의 특징이며 호이스팅(hoisting)때문이다. cf. 호이스팅(hoisting) : 자바스크립트는 실행전 초기화단계에서 모든 선언문을 찾아서 생성해두기 때문이다. 🐣 함수 표현식 let test = function() {} 자바스크립트가 해당 블록에 도착해야 생성된다. 호이스팅에 영향을 받지 않아 함수 선언문보다 더 자유롭게 작성 가능하다. 유용하게 사용되는 경우 클로져로 사용 콜백으로 사용(다른 함수의 인자로 전달 가능)
🐣 함수의 선언 및 정의 // 함수 선언(정의) function hello(name) { let msg = `hello`; if (name) { msg += ` ${name}!!`; } console.log(msg); } hello("Mike"); // 함수 호출 🐣 변수 전역 변수 함수 바깥에 있는 변수 지역 변수 함수 내부에 있는 변수 함수 내부에서 전역변수의 값을 변경시키면 이후에도 유지된다. let msg = "Hello"; console.log("함수 호출 전"); console.log(msg); // Hello function hello(name) { if (name) msg += `${name}!!`; console.log("함수 내부"); console.log(msg); // Hello M..
🐣 자료형 문자열 const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; // 벡틱 const message = `My name is ${name}`; console.log(message); // My name is Mike cf. 템플릿 리터럴(ES6부터 도입된 문자열 표기법) : 벡틱, 달러 벡틱 내부에 변수 사용 시 ${} 사용(”, ‘ 사용시 변수 치환되지 않음) 숫자 const val = 0/2; console.log(val); // Infinity const name = "Mike"; const y = name/2; console.log(y); // NaN null & undefined null : 객체가 아님에 유의할 것. 존재하..
