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 라고..

Heroku란? Heroku는 Java, Node.js, Python등 여러 언어를 지원하는 클라우드 Paas(Platform as a Service)이다. 나는 m1맥북을 쓰고 있으므로 m1에 맞추어 환경 설정을 해야한다. rosetta를 사용하여 iterm 실행 rosetta 버전 brew 설치 이미 brew가 일반 터미널에 있더라도 설치한다. (which brew)로 확인하면 /opt/homebrew/bin/brew 로 표시된다면 설치한 적이 있는 것이다. rosetta터미널에서 brew를 설치한다 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"​ rosetta 버전 brew를..

이벤트 발생 Socket.IO의 기본 아이디어는 원하는 데이터와 함께 원하는 이벤트를 보내고 받을 수 있다는 것이다. JSON으로 인코딩할 수 있는 모든 개체가 수행되며 이진 데이터도 지원된다. index.html - script섹션 index.js - chat message 출력 io.on('connection', (socket) => { socket.on('chat message', (msg) => { console.log('message: ' + msg); }); // console.log('a user connected'); }); Broadcasting 서버에서 나머지 사용자에게 이벤트를 내보내는 것이다. 모든 사람에게 이벤트를 내보내기 위해 Socket.IO는 io.emit() 메서드를 제공한..