728x90

Frontend/JavaScript 4

[JavaScript] 프로토타입에 대해 알아보자! ( prototype )

이번 포스팅에서는 자바스크립트의 prototype에 대해 알아보겠습니다. 자바스크립트에는 클래스 개념이 존재하지 않습니다. ??? export default class sheep extends animal{ ... } 클래스 ( Class )를 한번쯤은 구현해보셨을 겁니다. Java, Python 등 객체 지향 언어에서는 빠질 수 없는 개념입니다. 중요한 점은 자바스크립트도 객체 지향 언어라는 것입니다. 하지만 자바스크립트에는 클래스의 개념은 존재하지 않습니다. 대신 프로토타입( prototype )이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이기도 합니다. 자바스크립트엔 클래스가 없으니 상속 또한 존재하지 않습니다. 그래서 보통 프로토타입을 기반으로 상속을 흉내 내어 구현..

Frontend/JavaScript 2022.03.04

[JavaScript] 얕은 복사와 깊은 복사에 대해 알아보자!

이번 포스팅에서 알아볼 내용은 JavaScript의 얕은 복사 깊은 복사 에 대해 알아보겠습니다. 우선 JavaScript의 자료형은 원시값과 참조값으로 나뉩니다. 원시값 Number String Boolean Null Undefined 참조값 Object Symbol 원시 값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 복사한 값과 복사된 값이 서로에게 영향을 미치지 않습니다. // 원시값 복사 => 기존의 값에 영향을 미치지 않는다 const num = 1 let num2 = num num2 = 2 // 1 console.log(num) // 2 console.log(num2) 하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킵니다. //..

Frontend/JavaScript 2022.02.06

[JavaScript] 호이스팅 ( hoisting ) 개념을 알아보자!

이번 포스팅에서 알아볼 내용은 자바스크립트의 중요한 개념 중 하나인 Hoisting입니다. JavaScript에서의 Hoisting이란?? *인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할 달 하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면에 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 그럼 호이스팅을 설명할때는 어떻게 하는지?? 호이스팅을 설명할 때는 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 현상 으로 해당 현상을 말할 수 있습니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 하지만 선언과 초기화를 동시에 수행하는 경우에 선언 코드까..

Frontend/JavaScript 2022.01.25

[JavaScript] 업로드 이미지를 Base64로 변환하기

서버에 이미지를 올릴 때 이미지를 Base64로 변환하여 DB에 저장하고 웹에서 보여줄 때 다시 디코딩해서 보여주는 방법을 많이 사용합니다 변환하는 이유가 궁금했습니다. 이유 중 하나는 비동기 함수를 사용해 이미지를 업로드하고 바로 화면에 보여줄 로직이 있을 때 이미지 자체를 업로드 후 로딩시키게 되면 DB에 저장하는 시간 혹은 서버 파일에 저장하는 시간보다 View가 mount 되는 시간이 더 빨라 이미지가 보이지 않기 때문입니다. 처음에는 비동기 함수의 반환이나 reponse를 늦추는 방법을 사용했지만 옳지 않은 방법이어서 구글링 하던 도중 찾아낸 방법 중 하나가 JavaScript로 Base64 인코딩 디코딩입니다. 업로드 이미지를 Base64로 변환하는 방법은 다양합니다. Base64 인코딩, 디..

Frontend/JavaScript 2022.01.14
728x90