반응형

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

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

 

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

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

www.itworld.co.kr

노드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 

 

반응형
반응형

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

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

 

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

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

www.itworld.co.kr

노드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

 

react-dnd.github.io

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 

 

react-dnd-example-3 - CodeSandbox

auto-generated package for codesandbox import

codesandbox.io

Backends

HTML5
Touch
Test
반응형
반응형

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/

 

Home - billboard.js API doc

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. Documents Playground Play with the diverse options generating on the fly! https://naver.

naver.github.io

 

https://github.com/naver

 

 

NAVER

NAVER has 207 repositories available. Follow their code on GitHub.

github.com

https://www.highcharts.com/demo

 

Highcharts | Highcharts.com

 

www.highcharts.com

 

 

 

 

.

반응형
반응형

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

 

Date.prototype.getTime() - JavaScript | MDN

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.

developer.mozilla.org

 

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

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

<!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 

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

<!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>
반응형
반응형

Date.getTime()으로 날짜/시간 비교

Date.getTime()는 UTC 시간을 millisecond로 리턴합니다. UTC는 1970/01/01를 0초로 지금까지 흐른 시간을 표현한 것입니다. millisecond이기 때문에 비교 연산자를 이용하여 크기를 비교할 수 있고, 또한 동등 연산자로 비교할 수도 있습니다.

const date1 = new Date('2022-05-04');
const date2 = new Date('2022-05-05');

console.log('date1: ' + date1.getTime());
console.log('date2: ' + date2.getTime());

console.log(date1.getTime() > date2.getTime());
console.log(date1.getTime() >= date2.getTime());
console.log(date1.getTime() < date2.getTime());
console.log(date1.getTime() <= date2.getTime());
console.log(date1.getTime() == date2.getTime());

 

날짜 복사에 getTime () 사용

동일한 시간 값으로 날짜 객체를 생성합니다.

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

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

 

Date.prototype.getTime() - JavaScript | MDN

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.

developer.mozilla.org

 

반응형
반응형

each()문을 써야하는 이유는 무엇일까 특징을 살펴보자?

1. 일반 for문보다 가독성이 좋다
2. 객체형을 다루기가 쉽다.
3. Array 객체에서 사용가능
4. 빠른편이다.
5. 리턴값을 받지 못한다.

 

for, foreach, each 

var arr= [ 
			{name : '알리송', backnumber : '1'}
          , {name : '반다이크', backnumber : '4'} ];

//for문
for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].name);
  console.log(arr[i].backnumber);
  console.log(arr[i].name + arr[i].backnumber);
};


foreach문
arr.forEach (function (el, index) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});


$.each문
$.Each (arr, function (index, el) {
  console.log('element', index, el);
  console.log(el.name);
  console.log(el.backnumber);
  console.log(el.name + el.backnumber);
});
반응형
반응형

 IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)

   : 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

(function () {
    statements
})();

첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

 

아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다.

(function () {
    var aName = "Barry";
})();
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

 

IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
var result = (function () {
    var name = "Barry";
    return name;
})();
// 즉시 결과를 생성한다.
result; // "Barry"

 

반응형

+ Recent posts