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이 더 최적화되어 있다고 말할 수 있나 봐보자. 보통 브라..

태그를 통해 리소스 우선순위를 제어할 수 있는 속성들이 존재한다. 이를 정리해보자. 1. rel 속성 - preload : 리소스를 사전로드하여 페이지 로딩 성능을 개선한다. - prefetch : 리소스를 사전로드하지만 현재 페이지 로딩에 직접적으로 필요하지 않을 때 사용. 지정된 리소스의 다운로드를 백그라운드에서 진행. 저장된 리소스를 캐시에 저장하며, 페이지 전환 시에 사용된다. - stylesheet : 스타일시트 파일을 지정 - icon : 페이지 아이콘을 지정. favicon 지정 - dns-prefetch : 도메인의 DNS를 사전 로드 - preconnect : 서버와의 연결을 사전 설정 2. as 속성 - script : 스크립트 파일로 처리 - style : 스타일시트로 처리 - ima..

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

webpack만을 공부 및 테스트 하기 위해 간단하게 프로젝트를 생성해 나아가보자. 1. 빈 프로젝트에 package.json 생성 npm init -y 2. 웹팩 관련 라이브러리 설치 및 lodash 설치 npm i webpack webpack-cli -D 3. index.html 생성 스크립트는 밑에서 생성할 예정. 4. src/index.js 생성 function component() { const btn = document.createElement("button"); btn.innerHTML = "Click me"; return btn; } document.body.appendChild(component()); 5. package.json 내용 추가 "script" : { "build" : "we..

시멘틱 웹의 개념을 봐보자. 현재의 인터넷에서 리소스에 대한 정보와 자원 사이의 관계를 온톨로지 형태로 표현해서, 기계가 처리하도록 하는 프레임워크 이자 기술. 개념상으로는 이해가 너무 어렵다. 우선, 개념 설명에 나온 온톨로지에 대해 이해를 해보자. 온톨로지란? 지식 공학 및 정보 과학 분야에서 사용되는 개념적인 도구로, 현실 세계의 객체, 개념 그리고 그들 간의 관계를 형식적으로 정의하는 것을 의미. 즉, 온톨로지라는 것은 어떠한 개념을 표현하기 위한 도구라고 생각하면된다. 예를 들어보자 자동차를 생각해보자. 자동차라는 개념은 엔진의 힘을 이용하여 바퀴를 굴러가게하여, 땅위를 움지기게 하는 탈 수 있는 것으로 개념이 표현이 된다. 조금 더 자세히 파보면, 엔진 + 바퀴를 통해서 개념을 표현한다. 이처..