라벨이 자바스크립트인 게시물 표시

JS파일을 다른곳에 전달하기(code, class, function ......)

이미지
js파일에 있는 class, function을 다른곳에서도 사용할수 있는 module.exports를 사용하도록 하겠습니다. (위 예제들을 실행하기전 node, npm 모듈이 설치되 있어야 합니다.)   class Person { // Person Class constructor ( name , age ){ // constructor name, age this . name = name ; this . age = age ; } greeting (){ // method that will print the text console . log ( `Hello. My name is ${ this . name } and my age is ${ this . age } ` ); } } module . exports = Person ; // Exports the class Person 위 코드는 person.js파일로 간단한 class입니다. Person을 class로 선언하면 name, age를 입력하고 meghod greeting()를 이용하여 간단한 콘솔로그 문장을 출력합니다. 이때 class Person을 다른 코드에서도 사용하고 싶다면 'module.exports'를 사용합니다. 당연히 출력하는 것은 class Person입니다.  const Person = require ( './person' ); const personA = new Person ( 'Alex' , '27' ); personA . greeting (); 이제 새로운 파일을 만듭니다. index.js파일을 만들어 위와 같이 코드를 작성합니다. 처음 만들었던 person.js을 입수하기 위해 require를 사용합니다. 이때 경로가 중요한데 './'는 같은경로를 의미합니다.  위 사진을 보면 index.js와 person.js가 NODEJS_EX...

Switch asynchronous callback(비동기 콜백) to Promise Example

이미지
  ' use strict ' ; class   UserInfor {      UserInfor ( id ,  passWord ){          return   new   Promise ( ( resolve ,   reject )   =>   {              setTimeout ( ()   =>   {                  if (                     ( id   ===   ' Alex '   &&   passWord   ===   ' 1234 ' )  ||                     ( id   ===   ' Jhon '   &&   passWord   ===   ' 5678 ' )  ||                ...

Build asynchronous callback(비동기 콜백) Example

이미지
  class   UserInfor {           UserInfor ( id ,  passWord ,  onSucc ,  onError ){          setTimeout ( ()   =>   {              if (                 ( id   ===   ' Alex '   &&   passWord   ===   ' 1234 ' )  ||                 ( id   ===   ' Jhon '   &&   passWord   ===   ' 5678 ' )  ||                 ( id   ===   ' Mical '   &&   passWord   ===   ' 123 ' )             ) {     ...

synchronous callback(동기적 콜백) & asynchronous callback(비동기적 콜백) 정의

이미지
JavaScript Code  function   runFunction ( fun ){      fun () ; } function   callBack ()   {      console . log ( " Hello World " ) ; } runFunction ( callBack ) ; synchronous callback(동기적 콜백)은 콜백함수가 바로 실행되는 것을 말합니다. 위의 두 function(runFunction, callBack)을 선언하고 runFunction(callBack)을 하였을때 바로 실행 되는것을 확인할수 있습니다. 코드를 실행하기전 Hoisting(호이스팅) 단계가 있습니다. 이는 var, function의 선언 같은 것들을 코드 가장 위쪽으로 올리고 그것부터 실행하는 것입니다. 지금 위의 코드처럼 JavaScript가 function 선언문을 위쪽으로 배치시키고 순차적으로 아래까지 실행하는 것입니다. function   runFunction ( fun ,  sec ){      setTimeout ( fun ,   sec ) ; } function   callBack ()   {      console . log ( " Hello World " ) ; } console . log ( " one " ) ; runFunction ( callBack ,   1000 ) ; console . log ( " two " ) console . log ( " three " ) ;  asynchronous callback(비동기적 콜백)은 위 코드를 보면 알다싶이 언제 실행될지 모르는 콜백함수를 말하는 것입니다. 지금 코드에서는 시연을 하기 위해 setTimeout()메소드를 줘서 실행하였지...

synchronous(동기) & asynchronous(비동기) 정의

이미지
JavaScript Code synchronous(동기) console . log ( " one " ) ; console . log ( " two " ) console . log ( " three " ) ; JavaScript 코드는 위 콘솔로그처럼 위에서 아래로 순차적으로 진행되는 것을 synchronous(동기)라고 부릅니다. console . log ( 1 ) ; setTimeout ( function   ()   { console . log ( 2 ) },   1000 ) ; console . log ( 3 ) ; 위에 순서대로 1,2,3이 나오지 않고 1,3,2가 나온이유는 'console.log(2)'가 1초간 setTimeout에의해 대기했기 때문입니다. 이처럼 언제 실행될지 모르는 상황을 asynchronous(비동기)라고 합니다.

JavaScript의 Function(함수) 구조

이미지
 안녕하세요. 알렉스입니다. 이번에는 제가 개인적으로 중요하다고 생각하는 'Function'(함수)에 대해서 설명드리겠습니다. Function의 구조는 생각외로 간단합니다. Function의 이름, 전달인자 그리고 리턴값이 있으면 됩니다. 물론 리턴을 생략을 할수도 있습니다.  위 그림은 Function이 프로그램을 얼마나 단순화 시키는지 보여주기 위해서 넣었습니다. 프로그램을 일일이 다 묘사하면 한없이 복잡해 지지만 Function을 이용하여 순서도를 단순화 시킬수 있습니다. 그리고 필요할때 함수에 대한 더 자세한 내용을 확인할수 있죠. Function내부의 순서도 입니다. 실제 콘솔창에 입력을 하면 위 사진처럼 돌아가는 것을 확인할수 있습니다. 중요한 것은 Function 선언과 함수 실행은 다르다는 것입니다. 0번이 함수를 진행한다는 코드입니다. 0번 위의 코드는 변수를 선언하거나 Function을 선언한 것입니다. Function은 복잡한 코드를 더 쉽게 짤수 있도록 합니다. 잘 짜여진 Function은 다른 프로그램에서도 재사용이 가능하기 때문에 매우 중요하다고 할수 있습니다.

Object 오브젝트 개념

이미지
 안녕하세요. 알렉스 입니다. 입번에는 오브젝트(object)인 객체에 대해서 알아보겠습니다.  프로그램의 변수는 숫자, 문자, 등등으로 구분할수 있습니다. 하지만 현실에서는 그렇게 단순하게 나눌수도 있지만 여러가지가 섞인 상태도 존재합니다. 예를들어 책에 대해서만 이야기 할수 있습니다.  그림1) Object 생성 책은 제목,저자,출판사,장수로 나타낼수 있습니다. 변수로는 하나하나 표현할수밖어 없습니다. 하지만 Object를 사용하면 그림1과 같이 하나의 오브젝트 안에 모든것을 표현할수 있습니다. 그림2) Object에서 키값을 배열로 출력 그림2는 책(Object)에서 Key값을 배열로 출력합니다. Key값은 모두 문자열로 구성되어 있으며 함수(Object.Keys())를 이용하면 해당 오브젝트에 있는 키 명칭들을 문자열 배열로 받을수 있습니다. 그림3) 키값을 이용하여 value값 출력 그림3은 키를 이용하여 오브젝트에 저장되어있는 Value를 확인하는 것입니다. 책 제목(title)을 확인하는 예제 입니다.  Book.title  & Book[title]: value값을 확인할수 있지만 Object안에 title가 존재하지 않으면 'undefined'가 나온다. 그림4) 키(author)에 배열 할당 오브젝트안 키에 또다른 오브젝트 또는 배열을 할당할수 있습니다. 그림4에서 만약 저자가 2명이면 'author'부분에 2명의 저자를 넣어야 합니다. 이때 크기가 2인 배열에 각각의 저자를 넣어서 'author'키에 배정하면 됩니다.