Develop Note by J.S.

Memory Leak, GC에 이어 GC에서 걸러지지 않은 Memory Leak의 유형 및 식별 방법에 대하여 알아보겠습니다. 1. Memory Leak 유형 1) 선언되지 않은 변수의 참조 또는 참조가 없는 변수를 생성 - 선언되지 않은 변수를 참조한 경우에는 컴파일 과정에서 전역 객체(Root)에서 새 변수를 생성합니다. function foo(){ this.message = 'I am accidental variable'; } foo(); Mark-and-Sheep 알고리즘에서는 Root를 가리키는 변수는 항상 active 상태이기 때문에 GC가 이를 제거할 수 없어 메모리 누수가 발생합니다. - 코딩 시점에 사용되지 않거나 선언없이 참조한 코드를 삭제하거나, 자바스크립트의 use strict Mo..

브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다. 해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. // vite.config.ts export default define..

Vite(프랑스어로 "빠른", 발음: /vit/)는 Module Bundling, DevServer, HMR 등의 기능을 지원하는 프론트엔드 개발자를 위한 Tools 입니다. Vite를 사용해야하는 이유 1. 번들링(Bundling) .js, .html, .vue, .jsx 등 여러 종류의 파일로 이루어신 소스를 브라우저에서 실행할 수 있도록 하나로 모아주는 Bundling 기능을 제공합니다. 2. 개발 서버 구동속도 향상 이전 번들링 기반 개발서버 구동 방식에는 모든 소스코드의 크롤링 및 빌드작업이 완료되어야 페이지 접속이 가능했습니다. 소스내에 포함된 Require 모듈들의 번들링 완료 후 서버가 구동되었던 방식에서 Native ESM(ES Modules) 기반 개발 서버 구동방식으로 브라우저 실행 ..