반응형

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"를 입력


반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05
[React] DnD - Drag andDrop for React  (0) 2022.09.08
[React.js] React.js 시작하기  (0) 2022.07.27
[Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.  (0) 2022.07.26
[javascript] .getTime()과 .getMilisecond()  (0) 2022.07.01
반응형

1. Node.js와 NPM 설치하기 

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

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

버전 확인.

 

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' 명령어로 리액트 프로젝트 시작

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[React] DnD - Drag andDrop for React  (0) 2022.09.08
[Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run  (0) 2022.09.07
[Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.  (0) 2022.07.26
[javascript] .getTime()과 .getMilisecond()  (0) 2022.07.01
[javascript] Date.getTime()으로 날짜/시간 비교  (0) 2022.06.29
반응형

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

 

 

 

 

.

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run  (0) 2022.09.07
[React.js] React.js 시작하기  (0) 2022.07.27
[javascript] .getTime()과 .getMilisecond()  (0) 2022.07.01
[javascript] Date.getTime()으로 날짜/시간 비교  (0) 2022.06.29
제이쿼리 each() 반복문  (0) 2022.04.06
반응형

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>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[React.js] React.js 시작하기  (0) 2022.07.27
[Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.  (0) 2022.07.26
[javascript] Date.getTime()으로 날짜/시간 비교  (0) 2022.06.29
제이쿼리 each() 반복문  (0) 2022.04.06
[javascript] IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)  (0) 2022.03.23
반응형

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

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.  (0) 2022.07.26
[javascript] .getTime()과 .getMilisecond()  (0) 2022.07.01
제이쿼리 each() 반복문  (0) 2022.04.06
[javascript] IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)  (0) 2022.03.23
[javascript] 전체 화면 Full screen  (0) 2022.03.15
반응형

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);
});
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] .getTime()과 .getMilisecond()  (0) 2022.07.01
[javascript] Date.getTime()으로 날짜/시간 비교  (0) 2022.06.29
[javascript] IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)  (0) 2022.03.23
[javascript] 전체 화면 Full screen  (0) 2022.03.15
[javascript] How copy and paste excel columns to HTML table with inputs?  (0) 2022.02.21
반응형

 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"

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Date.getTime()으로 날짜/시간 비교  (0) 2022.06.29
제이쿼리 each() 반복문  (0) 2022.04.06
[javascript] 전체 화면 Full screen  (0) 2022.03.15
[javascript] How copy and paste excel columns to HTML table with inputs?  (0) 2022.02.21
[javascript] 숫자 세자리 콤마 제거하기, ASP 숫자형 리턴  (0) 2022.02.04
반응형

Toggle Fullscreen

하나의 버튼으로 전체화면과 일반화면을 토글시키고 싶다면 아래와 같이 사용합니다.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

https://www.cckn.dev/js-ts/20210519-fullscreen/

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

제이쿼리 each() 반복문  (0) 2022.04.06
[javascript] IIFE - 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)  (0) 2022.03.23
[javascript] How copy and paste excel columns to HTML table with inputs?  (0) 2022.02.21
[javascript] 숫자 세자리 콤마 제거하기, ASP 숫자형 리턴  (0) 2022.02.04
[javascript] ES6 for beginners, ES6 문법 + 활용 패턴 살펴보기  (0) 2022.01.24

+ Recent posts

티스토리툴바