HTML&CSS&Javascript 📚53 [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. [HTML] 시맨틱 웹이란 ? 웹사이트는 검색엔진에 의한 노출이 매우 중요하다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 사용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.) 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결.. 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. 이전 1 2 3 4 ··· 9 다음
