긍정적 사고, 음식의 절제, 규칙적인 운동

“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?

https://www.itworld.co.kr/news/258112

노드JS(node.js)와 데노(Deno)의 새로운 경쟁자가 등장했다. 자바스크립트 및 타입스크립트의 런타임 기술인 ‘번(Bun)’이 그 주인공이다. 
 

ⓒ Getty Images Bank 
베타 버전으로 공개된 번은 노드JS나 데노와 유사한 역할을 하며, 번들러, 트랜스파일러, 패키지 매니저 같은 자바스크립트 코드를 위한 종합 기술을 제공한다. 특히 성능을 높이고, 빠르게 시작할 수 있게 만든 것이 특징이다.

번의 공식 홈페이지에 따르면 “번은 전 세계 자바스크립트를 브라우저 밖에서 실행하고, 미래 인프라에서 활용할 수 있도록 성능을 높이고 복잡성을 줄인 기술”이라고 소개됐다. 번 개발진은 이런 구조 덕에 개발자가 보다 간편하게 생산성을 높일 수 있을 것이라 기대하고 있다. 또한 궁극적으로 로컬 컴퓨터, 서버, 엣지 등에서 실행되는 자바스크립트 및 타입스크립트 기반 앱과 스크립트를 대체할 수 있다고 설명했다. 

번은 노드 API 기능의 90%를 지원하고 있으며, 자체 내장된 API로 fetch, WebSocket, ReadableStream 등을 제공한다. 지그(Zig)라는 로우레벨 언어로 작성된 번은 웹킷 프로젝트의 자바스크립트 코어 엔진을 사용한다. 또한 NPM, SQLite, HTTP, 웹소켓(WebSocket)용 클라이언트와 JSX/타입스크립트의 트랜스파일러를 지원한다. 

번 개발진은 “번은 지그 언어를 사용해 메모리나 제어 흐름을 관리하고 있기 때문에, 개발자는 소프트웨어를 더욱 빠르게 개발할 수 있을 것”이라며 “노드JS나 데노가 사용하는 V8 기반 기술보다 번의 속도가 더 빠를 것”라고 밝혔다. 

원문보기:
https://www.itworld.co.kr/news/258112#csidx8977b9ea249046bbfaa56c90270aa86 

[React] DnD - Drag andDrop for React 

https://react-dnd.github.io/react-dnd/about

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.

Installation

npm install react-dnd react-dnd-html5-backend

The second package will allow React DnD the HTML5 drag and drop API under the hood. You may choose to use a third-party backend instead, such as the touch backend.

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_js/01-dustbin/multiple-targets?from-embed=&file=/package.json 

Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run 

Node.js의 패키지 만들기
 - 폴더 생성
 - 콘솔에서 생성된 폴더로 이동
 - 패키지를 생성하기 위해 npm init 명령어를 실행
 - 폴더에 package.json 파일이 생성됩니다.
D:\_nodejs\nodePjt>
D:\_nodejs\nodePjt>npm init

{
  "name": "test1",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "carrotweb",
  "license": "ISC"
}

* 패키지를 설치하는 명령어입니다.
  Express.js 설치하기
  Express.js는 Node.js에서 HTTP와 관련된 컴포넌트를 기반으로 하는 웹 애플리케이션 프레임워크입니다.
  현재 패키지(애플리케이션)에 Express.js를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다.
  npm install에 옵션으로 --save를 추가하면 자동으로 package.json 파일의 "dependencies"에 "express" 항목이 추가됩니다.

D:\_nodejs\nodePjt>
D:\_nodejs\nodePjt>npm install express --save

{
  "name": "test1",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "carrotweb",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1" --> 추가
  }
}

 * Node.js의 패키지(애플리케이션) 실행하기
 * Node.js를 종료는 콘솔에서 Ctrl + C를 누르면 됩니다.

D:\_nodejs\nodePjt>
D:\_nodejs\nodePjt>node index.js
Listening...
^C
D:\_nodejs\nodePjt>^C
D:\_nodejs\nodePjt>

=========================================================


접속 : http://localhost:8080/index.html


* npm으로 실행하기 위해 Script 추가하기
* 콘솔에서 npm start를 실행합니다.
  종료하려면 콘솔에서 Ctrl + C를 누르고 "Y"를 입력하고 엔터키를 누르면 됩니다.

D:\_nodejs\nodePjt>npm run start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> nodepjt@1.0.0 start
> node index.js

Listening...

* Express 정적 파일 적용하기
 - index.js를 오픈하여 이미지 파일이나 CSS 파일, JavaScript 파일 등과 같은 정적 파일을 제공하기 위해 
   Express.js의 express.static() 메서드를 추가합니다. 정적 파일들이 들어있는 폴더로 public 폴더를 설정하였습니다.
 - 폴더에 public 폴더를 생성합니다.
 - public 폴더에 index.html 파일을 생성합니다.
 - npm start를 실행합니다.
  

   D:\_nodejs\nodePjt>npm run start

 - 브라우저에서 "http://localhost:8080/index.html"를 입력

1. Node.js와 NPM 설치하기 

https://nodejs.org/ko/download/

버전 확인.

2. VSCode에서 React 프로젝트 생성

> npm install -g create-react-app

> create-react-app my-app

npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미합니다.
-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치됩니다.

3. 'my-app' 디렉터리로 이동 후 'npm start' 명령어로 리액트 프로젝트 시작

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

The name "billboard" comes from the famous billboard chart which everybody knows.

https://naver.github.io/billboard.js/release/latest/doc/

https://github.com/naver

https://www.highcharts.com/demo

.

getMilliseconds() returns the milliseconds (0 to 999) of a date.  현재의 밀리세컨드를 반환

getMilliseconds() 메서드는 Date 인스턴스의 밀리초를 현지 시간 기준으로 반환합니다.

getTime() returns the number of milliseconds since January 1, 1970 00:00:00.  : 1970-01-01 부터의 밀리세컨드값을 반환

1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자입니다.

 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

.getTime()  https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_gettime_year 

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getTime() Method</h2>

<p>Calculate the number of years since January 1, 1970:</p>

<p id="demo"></p>
<p id="demo2"></p>

<script>
// Calculate milliseconds in a year
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const year = day * 365;

// Divide Time with a year
const d = new Date();
let years = Math.round(d.getTime() / year); 

document.getElementById("demo").innerHTML = years;
document.getElementById("demo2").innerHTML = d.getTime();

// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
var birthday = new Date(1994, 12, 10);
var copy = new Date();
copy.setTime(birthday.getTime());

</script>

</body>
</html>

.getMilisecond()  https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_datetime_millisec 

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>

<p>Add zeros and colons to display the time:</p>

<p id="demo"></p>

<script>
function addZero(x,n) {
  while (x.toString().length < n) {
    x = "0" + x;
  }
  return x;
}

const d = new Date();
let h = addZero(d.getHours(), 2);
let m = addZero(d.getMinutes(), 2);
let s = addZero(d.getSeconds(), 2);
let ms = addZero(d.getMilliseconds(), 3);
let time = h + ":" + m + ":" + s + ":" + ms;
document.getElementById("demo").innerHTML = time;
</script>

</body>
</html>