HTML&CSS&Javascript 📚/JS40 [JS] base64 이미지 File 객체로 변환하기 0. 개요 react-cropper를 사용하던 중, url 형식으로 되어있는 이미지를 File 객체로 변환하여 백엔드로 전송해주어야 하는 경우가 발생했습니다. base64 형식의 이미지를 File 객체로 변환해주는 방법 2가지를 정리해보도록 하겠습니다. (react-cropper Sandbox 코드를 참고하였습니다.) 1. 반복문을 사용하는 방법 const dataUrlToFile = (url: string, fileName: string) => { const [mediaType, data] = url.split(","); const mime = mediaType.match(/:(.*?);/)?.[0]; var n = data.length; const arr = new Uint8Array(n); whil.. 2023. 11. 30. [JS] 객체의 깊은 복사 / 얕은 복사 참조 타입의 데이터는 복사 시 데이터의 값 자체가 아닌 '값이 저장된 메모리의 주소'가 저장된다. 따라서 참조 타입의 복사 방법은 얕은 복사(Shallow Copy)와 깊은 복사(deep copy)로 나뉜다. - 얕은 복사(Shallow copy)는 데이터가 저장된 참조값(주소)를 복사한다. 즉, 데이터 자체를 복사한 것이 아니라 해당 데이터의 참조 값을 전달하여 하나의 데이터를 공유하는 것이다. ex) Object.assign(), 전개구문 모두 2차원 이상의 객체에서는 얕은 복사가 수행됨 - 깊은 복사(Deep Copy)는 새로운 메모리 공간을 확보해 데이터 자체를 완전히 복사하는 것을 의미한다. ex) JSON.parse()와 JSOM.stringify() 함수를 사용하는 방법 2023. 11. 27. [JS Deep Dive] 24장 클로저 클로저(closure)란? 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈Haskell, 리스프Lisp, 얼랭Erlag, 스칼라Scala등)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 사양에 등장하지 않는다. 클로저를 이해하려면 먼저 렉시컬 환경, 즉 렉시컬 스코프를 이해해야 한다. 1. 렉시컬 스코프 const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); // 1 } outerFunc(); 함수의 스코프는 호출하는 위.. 2023. 11. 24. [JS] 함수 선언 방식 : 함수 표현식 & 함수 선언식 1. 함수 선언식과 함수표현식이란? function sum(a,b) { // 함수 선언식 return a + b; } const sum = function(a,b) { // 함수 표현식 return a + b; } JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. - 함수 선언식 (function declartion) : 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 - 함수 표현식 (function Expression) : 정의한 function을 별도의 변수에 할당하는 것 2. 함수 선언식과 표현식의 차이 sum(50, 50); // 100 minus(100, 50) // Uncaught TypeError: minus is not a function fun.. 2023. 11. 24. [JS Deep Dive] 13장 스코프 1. 스코프란 ? 스코프란 ? 식별자가 유효한 범위 즉, 식별자 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위 var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 } } function foo() { var var4 = 4; // 함수 내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 } } console.log(var1); // 1 console.log(var2); // 2 console.log(var3); // 3 consol.. 2023. 11. 24. [JS Deep Dive] 22장 this 1.this 키워드 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티나 메소드를 참조하고 변경할 수 있어야 한다. 이때 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하는데, 이때 this를 사용한다. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. r.. 2023. 11. 24. 이전 1 2 3 4 ··· 7 다음
