Don’t worry about failures

자바스크립트는 프로토타입 기반의 언어이다. 자바와 다르게 상속이 아닌 프로토타입으로 객체와의 연결을 통해 상속과 같은 역할을 하여 구현을 한다. 이로써 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 되는 것이다. Person이라는 함수를 간단하게 테스트해보자. 이를 기반으로 살펴보면, person변수가 Person함수를 할당 받는 순간 person.prototype 또한 새로운 객체가 생성이 된다. 이 prototype의 객체는 생성자와 그의 prototype인 Object를 가리키고 있다. 이 생성자는 Person 함수를 가리키고 있다. 이와 같이 prototype의 객체를 새로 생성하여 서로 순환 참조의 관계를 가지고 있다. 여기에 추가적으로 person객체를 더 생성해보자. P..

앞서 소개했던 babel, terser에 이어 SWC with Next.js를 살펴보겠다. 이전글 https://sangwonny.tistory.com/71 babel, terser and SWC with Next.js (1) 해당 글에서는 babel, terser의 기본 개념과 이를 넘어서기 위한 새로운 도구인 SWC에 대해 살펴보고자한다. 1. Babel 1-1 개념 및 테스트 바벨은 구형 브라우저나 환경에서 ES6+의 기능들을 사용하기 위 sangwonny.tistory.com SWC ( Speedy Web Compiler) 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는 Rust라는 언어로 제작된 빌드 툴이다. 단순 컴파일만 제공하는 것이 아닌 웹팩과 같은 자바스크립트 번들러의 기..

해당 글에서는 babel, terser의 기본 개념과 이를 넘어서기 위한 새로운 도구인 SWC에 대해 살펴보고자한다. 1. Babel 1-1 개념 및 테스트 바벨은 구형 브라우저나 환경에서 ES6+의 기능들을 사용하기 위해서 이전 스크립트 버전으로 변환해주는 트랜스파일러이다. 간단한 예를 봐보자 https://babeljs.io/repl Babel · Babel The compiler for next generation JavaScript babeljs.io 간단하게 테스트할 수 있게 바벨에서 웹으로 지원해준다. 아래와 같이 코드를 작성했다고 해보자. const HelloWorld = ({ name, content }) => { let fullText = ""; if (name) { fullText +..

보통 애니메이션을 적용할 때 CSS를 이용하여 구현을한다. 하지만 사용자와의 상호작용을 통한 애니메이션을 구현할 경우 자바스크립트를 통해 애니메이션을 구현할 수 있다. 하지만 CSS보다는 성능이 좋지가 않다. 이를 위해 최적화된 애니메이션을 구현하기 위해 제공되는 API가 requestAnimation이다. 위에서 "최적화된" 애니메이션 구현이라는 것은 뭘까? 이를 비교하기 위해 다른 방식의 애니메이션을 구현하는 방법을 봐보자. setInterval, setTimeout을 통해 반복되는 로직으로 width와 같은 값을 변경하여 구현할 수가 있다. 그럼 requestAnimationFrame과의 차이가 뭐고 왜 requestAnimationFrame이 더 최적화되어 있다고 말할 수 있나 봐보자. 보통 브라..

C와 같은 저수준의 언어가 아니면 언어들은 보통 가비지 컬렉터가 존재하며, 불필요한 메모리를 정리한다. 자바스크립트의 v8엔진 기준으로 가비지 컬렉터에 대해 알아보자. 메모리 할당 구조. 변수는 원시 변수와 참조 변수로 나누어져있다. 이 두 타입의 변수는 저장되는 방식이 약간 다르다. 원시변수는 단순하게 콜스택에 바로 저장이 되지만, 참조 변수의 경우 메모리 힙에 실제 변수가 저장이 되고, 이에 대한 주소값을 콜스텍에 저장을 한다. 가비지컬렉터는 참조 변수 관리의 역할을 한다. 즉, 참조 변수는 메모리에 저장되고 주소가 콜스텍에 저장이 된다고 했다. 여기서 콜스텍에 있는 데이터가 사라진다고 하면 메모리 힙에 있는 값을 따로 삭제하지 않으면 아무도 사용하지 않는 메모리가 되어버린다. 이렇게 됐을 때 가비지..

push와 splice의 실행 시간 비교에 대해 글을 써보려한다. 처음에는 당연히 push가 더 빠른 결과값을 나올 것이라 판단하였다. 하지만 그렇지는 않았다. 먼저 테스트 한 것부터 확인해보자. TEST 1. 결과 push가 더 긴 시간이 도출됐다. 바로 다음 테스트 케이스를 봐보자 TEST2 결과 이번에는 push와 splice 단순히 위치만 변경만 한 결과값이다. 이번에는 splice가 더 큰 결과값이 나왔다. 단순하게 push는 O(1) splice O(n)이라 생각했었다. 하지만 위와 같은 결과값에 띠용했다. 왜 그럴까? array에 대한 특성을 조금 더 살펴 본 결과 동적배열에 관련된 이슈였다. array1과 같이 정해진 크기로 할당을 하고 이후에 push를 하게 되면 공간이 없어 자바스크립트..

자바스크립트는 동적타입이기 때문에 타입 검사에 어려움이 있다. 단순히 타입 체크를 할 경우 오류를 범할 수 있다. 먼저 자바스크립트 변수에는 원시변수와 참조 변수가 존재한다. 원시변수는 string, number, boolean, undefined 등이 있다. 참조 변수는 array, Date, String, Obect, function 등이 있다. 일반적으로 typeof를 통해 타입을 체크할 경우 원시변수의 경우 별 이상없이 체크가 가능할 것이다. 하지만 참조 변수의 경우 typeof를 찍어보면 모두 object로 나올 것이다. 이는 instanceof로 구분하여 사용할 수 있다. Const arr = []; Const func = function() {}; Const date = new Date();..

호이스팅이란? 선언과 할당이 런타임 때 분리가 되는 것 런타임 시 선언을 최상단으로 끌어 올림. 호이스팅으로 인한 문제 코드를 작성 시 예측하지 못한 실행을 할 수 있다. 해결 var를 사용하지 않는다. 함수 또한 호이스팅이 되기 때문에 함수 표현식을 사용한다. const a = () => {} 호이스팅 예제를 봐보자. var global = 0; fuction outer() { console.log(global) // undefined var global = 5; function inner() { var global = 10; console.log(global); // 10 } inner(); global = 1; console.log(global); // 1 } outer(); 예시는 위와 같다. 이..