Vite는 원래 Vue 전용 빌드 툴이었지만 지금은 범용이다. Javascript 개발 환경의 두 가지 요구사항인 dev 모드 실행과 프로덕션용 빌드에 초점을 둔다. 빠른 속도를 목표로 하는 Vite(프랑스어로 빠르다는 뜻)는 빠른 dev 서버 시작과 빠른 모듈 교체를 내세운다. 높은 속도의 기반은 ESM 활용과 esbuild를 사용한 사전 번들링이다. ESM을 사용한다는 것은 개발 중에 번들링 작업 부하를 브라우저로 넘길 수 있고, 변경 중 제공된 파일을 확인할 때 더 높은 세분성을 달성할 수 있음을 의미한다. 앱 설정 $ npm init vite@latest vite_react_tutorial --template react $ cd vite-react_tutorial $ npm install $ np..

템플릿(template) 이란? user interface를 다룰 때 사용할 수 있고, 보통 data set이 주어지면 HTML 태그 형식을 문자열로 반환한다. 컴포넌트(component)란? 다른 framework에서 user interface를 다룰 때 사용하는 템플릿과는 다른 개념이다. 컴포넌트는 재사용이 가능한 API로 많은 기능들이 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여 줄..

Virtual DOM https://wonillism.tistory.com/214 [Javascript] DOM 이란? BOM이란? Browser Object Model의 약자로 브라우저와 관련된 객체들의 집합으로서 BOM을 이용하여 Browser와 관련된 기능들을 구성한다. 이 BOM을 이용해서 Browser와 관련된 기능들을 구성한다. BOM의 최상위 wonillism.tistory.com Virtual DOM을 알아보기전에 이전에 알아보았던 DOM을 짚고 넘어가자. DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 않다는 것이다. HTML은 자체적으로 정적이므로 자바스크립트를 사용하여 이를 동적으로 만들 수 있다. 하지만, 요즘 흔히 접하는 큰 규모의 웹 애플리케이션들을..

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임와크와 달리 오직 View만 신경 쓰는 라이브러리이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 component(컴포넌트)라고 한다. 다른 프래임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 초기 렌더링 렌더링이란 사용자 화면에 뷰를 보여주는 것이다. render() { .....

CDN Content Delivery Network, 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템 이를 html에 추가해주면, React, ReactDOM모두 사용할 수 있다. 개발용으로 적합하지만, 배포용 버전에는 적합하지 않다. UNPKG https://unpkg.com/ UNPKG UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You m..

nodeJS, npm, nvm, npx에 대해서 알아보자. NodeJS 확장성 있는 네트워크 어플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 대부분의 Javascript가 웹 브라우저에서 실행되는 것과 달리, 서버 측에서 실행된다. Node는 Javascript의 runtime이다. 쉽게 말해, Javascript program을 실행할 수 있게 해준다. Java 언어가 모든 OS 운영체제에서 Virtual Machine 환경 안에서 Runtime 이 구동 되듯이 Node.JS 는 웹브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 Runtime 환경을 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공하게 된다. 이것을 Node.JS 라고..

Javascript를 접하게되면 자연스래 ES5, ES6 ... 등의 단어를 들어볼 수 있다. 그냥 자바스크립트의 버전이겠거니하고 넘겼었는데 좀 더 자세히 알아보자. ECMAScript란? ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다. ECMAScript는 문서로 작성되어 있으며, 이 곳에서 자세히 알 수 있다. ECMA-262 - Ecma International ECMAScript® 2020 language specification, 11th edition - ECMAScript is a programming language ba..

AJAX, Asynchronous Javascript and XML의 약자이다. 비동기적인 웹 애플리케이션 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML(또는 XHTML)과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, Javascript 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest AJAX는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬하지 않고서도 수행 되는 비동기성이다. 이러한 비동기성을 통해 사용자의..