javascript
JavaScript에서 export { }와 export default의 차이점
>> 그래서 적어본 export와 export default의 차이점! 출처: https://www.google.com/url?sa=i&url=https%3A%2F%2Fbootcamp.uxdesign.cc%2Fnamed-export-vs-default-export-in-es6-a2370b062f17&psig=AOvVaw3526ddTwrULsBlVYSnaxql&ust=1715784990773000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFwoTCKiR16azjYYDFQAAAAAdAAAAABAE JavaScript 모듈 시스템은 코드를 구성하고 재사용하기 위한 방법을 제공하고 있습니다.그 중 export는 2가지 방법이 있습니다. Named Export ..
Svelte와 vite로 CSR 개발 환경 세팅
Svelte는 웹 애플리케이션 개발 프레임워크입니다. 직관적이고 쉬운 문법을 가지고 있는 Svelte로 만든 SSR 기반 프레임워크가 SvelteKit 입니다. 최근에 Svelte에 관한 공식 문서를 보다가 한가지 이상함을 느낌적이 있습니다. Svelte 공식 문서를 보는데, 이상하게 설치는 SvelteKit을 알려주고 있습니다. 공식적으로 CSR(Client Side Rendering)인 Svelte보다 SSR(Server Side Rendering)을 사용하라는 말인것 같네요. 그런데 저는 최근에 오직 CSR을 위해 Svelte를 사용하고 싶었습니다. 그것은 크롬 익스텐션 때문입니다. 크롬 익스텐션은 SSR은 당연히 사용할리 없고.. CSR만 쓰고 싶은데 왜 설치 방법은 따로 없는거지..? . . ...
REPL(Read Eval Print Loop) 이란?
REPL은 "Read Eval Print Loop"의 약자로, 인터프리터 기반의 프로그래밍 언어에서 사용되는 대화식 환경을 제공하는 도구입니다. REPL은 사용자가 코드를 입력하면 해당 코드를 읽어들이고(Read), 평가하여 실행합니다(Eval), 그리고 실행 결과를 출력합니다(Print). 이후 다시 새로운 코드를 입력할 수 있도록 반복적으로 동작합니다(Loop). REPL의 동작 REPL은 다음과 같이 동작합니다: 1. Read (읽기): 사용자가 입력한 JavaScript 코드를 읽습니다. 2. Eval (평가): 읽은 코드를 평가하고 실행합니다. 3. Print (출력): 코드의 결과 값을 출력합니다. 4. Loop (반복): 이후 사용자가 더 많은 코드를 입력할 수 있도록 반복합니다. REPL은..
Shadow DOM - DOM을 캡슐화 하자!
Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..
V8 Liftoff와 웹 어셈블리: 웹 성능을 향상시키는 강력한 조합
웹 성능은 현대 소프트웨어 개발에서 매우 중요한 측면입니다. 웹 애플리케이션이 점점 더 복잡해지면, 웹 성능을 최적화하여 부드럽고 반응성 있는 사용자 경험을 보장하는 것이 더욱 중요해집니다. 이를 위해 V8 Liftoff와 웹 어셈블리라는 두 가지 기술이 큰 영향을 미치고 있습니다. 웹 어셈블리 (WebAssembly) 란? 웹 어셈블리(WebAssembly) 라는 것은 무엇일까요? 웹을 개발할 때 주로 사용하는 언어는 무엇인가요? 바로 자바스크립트입니다. 우리는 웹을 개발할 때, 자바스크립트 없이는 개발할 수 없습니다. 그러나 만약 자바스크립트가 아닌 다른 언어로 웹 개발을 하는 방법이 있다는 사실 알고 계셨나요? C언어와 C++로 웹 개발을 할 수 있습니다. 이것은 웹 어셈블리가 있음으로써 가능합니다..
자바스크립트 엔진인 V8에 대해 알아보자
V8 엔진은 구글이 개발한 고성능 자바스크립트 엔진으로, Google Chrome과 Node.js에서 사용됩니다. V8은 ECMAScript 및 Web Assembly를 표준에 맞게 구현하였으며, JavaScript 코드를 컴파일하여 매우 빠른 실행 속도를 보장합니다. Just-In-Time(JIT)이라는 컴파일링 기술을 사용하여, JavaScript 코드를 실행할 때 실시간으로 컴파일합니다. 그리고 안정적이고 안전한 구조를 가지고 있어, 코드가 비정상적으로 동작하거나 메모리 누수가 발생하는 경우를 막습니다. 이렇게 가볍고, 빠르고, 강력한 자바스크립트 엔진이기 때문에, 현재도 여러 응용 프로그램에서 사용되고 있죠. V8엔진의 구조 V8은 다양한 구성 모듈을 포함하고 있습니다. Ignition: 자바스크..
[자바스크립트] String에 대해 알아보자.
js string 이번 글또를 위한 포스팅을 위해 자바스크립트에 대한 지식을 공부 겸 포스팅해보려고 합니다. 이번에 알아볼 내용은 자바스크립트 String에 대한 내용입니다. 자바스크립트에서는 리터럴인 문자열을 다룰 때 사용하는 String이라는 객체가 있습니다. 이 String 객체는 문자열을 생성하거나, 검색, 치환, 추출, 분할 등의 작업을 수행할 수 있는 다양한 메소드를 제공합니다. 이번 포스트에서는 전체적으로 어떤 메소드가 있는지 간략하게 설명하고, 차후 몇몇 메소드에 대한 디테일한 내용을 다뤄볼까 합니다. javascript Property length length : 문자열의 길이를 반환합니다. 'hello world'.length // 11 javascript Method at at(ind..
자바스크립트 맵 객체 (Javascript Map Object)
Map이란? Map객체는 Key와 Value로 이루어진 자료구조입니다. Key는 고유한 값을 가져야 하는 특징을 가지고 있습니다. 자바스크립트에서의 Map객체는 Key와 Value을 서로 매핑시켜 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 해줍니다. ES6부터 도입된 문법이며 ES5에서는 사용할 수 없습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections 키기반의 컬렉션 - JavaScript | MDN 이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. deve..
[자바스크립트] console.log를 다양하게 쓰자. console 객체
console.log()는 자바스크립트로 개발하면서 아주 다양하게 사용됩니다. 개발자나 사용자에게 여러 정보를 알리는 수단이 되거나 디버깅에 사용되는 용도가 되곤 합니다. 그런데 혹시 console.log()만 사용하고 계신가요? console 객체는 log 함수만 아니라 다양한 함수를 가지고 있습니다. 많은 사람들이 알고 있지만, 모르는 사람은 모르는 console 객체의 함수들을 살펴보겠습니다. ※ 참고로 웹 콘솔 기반의 포스팅입니다. nodejs나 다른 경우는 제외했습니다. 1. console.log(), console.info(), console.warn(), console.error() 처음부터 간단하고 쉬운 것부터 다루겠습니다. 익숙한 console.log()는 매개변수의 문자열을 콘솔에 출력..