개인 자료 정리 홈페이지 입니다.

Note > 자바스크립트 관련

Note > 자바스크립트 관련반복문

By a3040, Published on Invalid Date

for, while, do...while, for...in

for...of, forEach, map, filter, reduce


for: for문은 일반적인 반복문입니다. 주로 배열이나 객체와 같은 컬렉션을 순회할 때 사용합니다.


const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, 2, 3
}


while: while문은 주어진 조건식이 true인 동안 코드를 반복해서 실행합니다.


let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}


do...while문은 일단 코드를 한 번 실행한 후에, 주어진 조건식이 true인 동안 코드를 반복해서 실행합니다.


let i = 0;
do {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
} while (i < 5);


for...in은 객체의 속성(property)을 반복해서 처리하는 데 사용됩니다. 객체의 프로퍼티를 순회할 때 사용합니다.


const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`); // a: 1, b: 2, c: 3
}


for...of는 반복 가능한(iterable) 객체의 요소를 반복해서 처리하는 데 사용됩니다. 배열, 문자열, Map, Set 등의 객체를 반복할 수 있습니다.


const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 1, 2, 3
}

const str = 'hello';
for (const char of str) {
  console.log(char); // h, e, l, l, o
}


forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 데 사용됩니다. for...of문보다 간결하고 직관적으로 사용할 수 있습니다.


const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item); // 1, 2, 3
});


map은 배열의 각 요소를 변환하는 데 사용됩니다. 배열의 각 요소에 함수를 적용하고, 그 결과로 새로운 배열을 생성합니다.


const arr = [1, 2, 3];
const doubled = arr.map((item) => item * 2);
console.log(doubled); // [2, 4, 6]


filter는 배열의 요소 중에서 주어진 조건에 맞는 요소만 추출하는 데 사용됩니다. 새로운 배열을 반환합니다.


const arr = [1, 2, 3, 4, 5];
const even = arr.filter((item) => item % 2 === 0);
console.log(even); // [2, 4]



Note > 자바스크립트 관련DOM과 주요 제어 메소스

By a3040, Published on Invalid Date

DOM 소개 - Web API | MDN (mozilla.org)


DOM(Document Object Model)은 HTML, XML 등의 문서를 객체로 표현하는 모델입니다.

우리가 작성한 HTML 문서를 브라우저가 사용하기 위해 해석하고 사용자가 javascript를 이용해서 추가, 수정등을 할수있게 해석한 객체들의 요소에 대한 이야기 입니다. 주요 요소는 Document, Element, Node, Event, NodeList, Window 등이 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>Document 객체 예시</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is an example of Document object.</p>
  </body>
</html>


위 예시의 HTML문서 전체가 Document 객체를 나타냅니다. 문서의 모든 요소는 document객체의 하위요소로 포함됩니다.


> console.log( document.title )
Document 객체 예시
> console.log( document.head )
  <head>
    <title>Document 객체 예시</title>
  </head>


HTML 문서에서 element와 tag는 종종 혼용되어 사용됩니다. 위 예시에서 h1, p등이 Dom 객체중 Element가 됩니다. Node는 Elment들을 표현합니다.

document 객체는 Node들이 모여서 만들어 지고 Node는 Element들이 모여서 만들어집니다.


// `document` 객체를 사용하여 `h1` 요소를 선택합니다.
const h1 = document.querySelector('h1');

// `h1` 요소의 `text` 노드를 선택합니다.
const textNode = h1.firstChild;

// `text` 노드의 내용을 변경합니다.
textNode.textContent = 'Hello DOM!';

// `text` 노드의 스타일을 변경합니다.
textNode.style.color = 'red';



document.getElementById(): HTML 요소의 ID를 사용하여 해당 요소를 가져옵니다.

document.getElementsByClassName(): 지정된 클래스 이름과 일치하는 모든 요소를 가져옵니다.

document.getElementsByTagName(): 지정된 태그 이름과 일치하는 모든 요소를 가져옵니다.

document.querySelector(): selctor를 이용한 요소를 가져옵니다.

element.appendChild(): 지정된 요소를 다른 요소의 자식으로 추가합니다.

element.removeChild(): 지정된 요소를 삭제합니다.

element.setAttribute(): 요소의 속성을 설정합니다.

element.getAttribute(): 요소의 속성 값을 가져옵니다.

element.style.propertyName: 요소의 스타일 속성을 설정하거나 가져옵니다.

element.classList.add(): 요소에 클래스를 추가합니다.

element.classList.remove(): 요소에서 클래스를 제거합니다.

Note > 자바스크립트 관련DOM과 Event, EventHandler

By a3040, Published on Invalid Date


이벤트란 웹페이지에서 사용자와 상호작용을 할 때 발생하는 사건 또는 신호를 말합니다. 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 입력하면 해당 이벤트가 발생하고 이벤트 핸들러 함수를 실행하여 특정 동작을 수행하도록 합니다. 


이벤트 핸들러란 DOM 요소에 발생하는 이벤트(ex: 클릭, 마우스 오버 등)를 처리하기 위한 함수입니다. 이벤트 핸들러를 등록하여 해당 이벤트가 발생했을 때 실행되도록 할 수 있습니다.


HTML에서 버튼을 만들면, 브라우저는 사용자의 마우스 동작에 대한 이벤트를 계속해서 추적하고 있습니다. 사용자가 버튼 위를 마우스로 지나가거나 클릭했을 경우, 이벤트가 발생하게 됩니다.


우리는 이러한 이벤트를 적절한 핸들러 함수를 등록하여 사용자의 행동에 대한 반응을 정의할 수 있습니다. addEventListener() 메서드를 사용하여 이벤트 핸들러 함수를 등록합니다.


사용자가 마우스를 클릭한경우 발생한 click 이벤트에 대한 핸들러 함수를 등록하고 싶은 경우에는 다음과 같이 작성합니다.


HTML에서 직접 등록하기

<button onclick="handleClick()">Click me</button>


JavaScript에서 등록하기

<button id="myButton">Click me</button>


<script>
// document.getElementById() 메소드를 사용하여 
//DOM에 있는 Element들중에 id 속성이 'myButton'인 요소를 찾아 
//변수 button에 할당하는 코드입니다. 
//변수 button의 유형은 Element입니다.
const button = document.getElementById('myButton');

//addEventListener() 메소드는 요소에 이벤트를 추가하기 위해 사용됩니다. 
//첫번째 인자로 등록하고자 하는 이벤트의 이름을, 
//두번째 인자로 해당 이벤트가 발생했을 때 실행할 콜백 함수를 전달합니다.
button.addEventListener('click', handleClick);

function handleClick() {
  alert('안녕');
}
</script>


EventTarget.addEventListener() - Web API | MDN (mozilla.org)


브라우저에서 자주 사용되는 이벤트 객체에는 다음과 같은 것들이 있습니다:


MouseEvent : 마우스와 관련된 이벤트를 처리하기 위한 객체입니다.

KeyboardEvent : 키보드와 관련된 이벤트를 처리하기 위한 객체입니다. 

TouchEvent : 터치와 관련된 이벤트를 처리하기 위한 객체입니다.

DragEvent : 드래그와 관련된 이벤트를 처리하기 위한 객체입니다.

FocusEvent : 포커스와 관련된 이벤트를 처리하기 위한 객체입니다.

WheelEvent : 마우스 휠 이벤트를 처리하기 위한 객체입니다.

Event : 위의 객체들을 포함하는 기본 이벤트 객체입니다. 이벤트의 타입, 발생한 요소 등의 정보를 제공합니다.


각 객체별 주요 이벤트와 addEventListener() 예제는 다음과 같습니다.


MouseEvent:

click: 사람이 버튼이나, 테이블, 혹은 메뉴가들어있는 ul등을 클릭했을때 발생하고, 이벤트를 처리하고 싶은 객체를 찾아 처리함수를 등록합니다.

const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  console.log('Element clicked');
});


KeyboardEvent:

keydown: 사용자가 로그인 하기위해 아이디를 input 요소에 입력하는등의 키를 눌렀을 때 발생하는 이벤트입니다.

const input = document.getElementById('myInput');
input.addEventListener('keydown', (event) => {
  console.log(`Key pressed: ${event.key}`);
});


TouchEvent:

touchstart: 사용자가 화면을 터치할때 터치된 요소에 발생하는 이벤트입니다.

const element = document.getElementById('myElement');
element.addEventListener('touchstart', () => {
  console.log('Touch started');
});


dragstart: 드래그 작업이 시작될 때 발생하는 이벤트입니다.

element.addEventListener('dragstart', () => {


focus: 요소가 포커스를 받았을 때 발생하는 이벤트입니다

input.addEventListener('focus', () => {


wheel: 마우스 휠을 움직였을 때 발생하는 이벤트입니다.

element.addEventListener('wheel', (event) => {



DOM객체별 발생하는 이벤트 정보

Event reference | MDN (mozilla.org)

Note > 자바스크립트 관련모듈/CommonJS/AMD/UMD/ESM

By a3040, Published on Invalid Date

JS 모듈은 코드를 구성하고 재사용하는 방법 중 하나입니다. 모듈을 사용하면 코드를 구조화하고 관리하기 쉬워지며, 다른 파일에서 코드를 재사용할 수 있습니다.


JS 모듈은 변수, 함수, 클래스 및 다른 코드를 내보내기(export) 및 가져오기(import)하는 방법을 제공합니다. 내보내기(export)는 모듈에서 외부로 공개(public)하고자 하는 항목을 지정하는 것이며, 가져오기는 다른 모듈에서 내보낸 항목을 가져와 사용하는 것입니다.


JS 모듈은 CommonJS, AMD, UMD, SystemJS, ES6/ES2015 등의 다양한 모듈 시스템을 제공합니다. 이들 모듈 시스템은 서로 다른 방식으로 내보내기 및 가져오기를 지원하며, 각각의 장단점이 있습니다.


ES6/ES2015에서는 import 및 export 문을 사용하여 내보내기 및 가져오기를 지원하며, 모듈 간의 종속성 관리 및 로드 방식을 개선했습니다. 이러한 개선으로 인해, ES6/ES2015에서 지원하는 JS 모듈이 널리 사용되고 있습니다.


CommonJS - 서버 사이드 자바스크립트(Node.js)에서 모듈을 사용하기 위한 형식으로 개발되었습니다. require() 함수와 module.exports 객체를 사용하여 모듈을 정의하고 내보냅니다.

const fs = require('fs');
module.exports = {
  read: function(file) {
    return fs.readFileSync(file, 'utf8');
  }
};

express등 node를 이용하는 작업을 하면 사용하는 유형입니다.


AMD(Asynchronous Module Definition) - 브라우저에서 동작하는 자바스크립트 애플리케이션 개발에 많이 사용됩니다. define() 함수를 사용하여 모듈을 정의하고, require() 함수를 사용하여 모듈을 로드합니다.

define(['module1', 'module2'], function(module1, module2) {
  // 모듈 내용
});


AMD는 사용해본적 없습니다.


UMD(Universal Module Definition) - AMD와 CommonJS를 함께 지원하여 브라우저에서도 모듈을 사용할 수 있도록 지원합니다. 일종의 패턴입니다.

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD 환경에서 모듈을 로드하는 경우
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS 환경에서 모듈을 로드하는 경우
    module.exports = factory();
  } else {
    // 브라우저에서 모듈을 로드하는 경우
    root.myModule = factory();
  }
}(typeof self !== 'undefined' ? self : global, function () {
  // 모듈 내용
  function hello() {
    console.log('Hello, world!');
  }

  return {
    hello: hello
  };
}));

forgithub00/module_umd1 at master · a3040/forgithub00


사용

// 브라우저에서 사용하는 경우
myModule.hello(); // "Hello, world!" 출력

// Node.js에서 사용하는 경우
const myModule = require('./myModule');
myModule.hello(); // "Hello, world!" 출력

// AMD 환경에서 사용하는 경우
define(['myModule'], function(myModule) {
  myModule.hello(); // "Hello, world!" 출력
});

// CommonJS 환경에서 사용하는 경우
const myModule = require('myModule');
myModule.hello(); // "Hello, world!" 출력


ESM(ECMAScript Modules) - ECMAScript 모듈 시스템으로, 브라우저와 Node.js에서 모두 지원하는 표준입니다. import 문과 export 문을 사용하여 모듈을 정의하고 내보냅니다.

export const name = 'John';
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

forgithub00/module_esm2 at master · a3040/forgithub00

사용

import { name, sayHello } from './myModule.js';


console.log(name); // 'John'
sayHello(); // 'Hello, John!'


Note > 자바스크립트 관련동기, 비동기처리, 콜백 함수, 프로미스, async/await

By a3040, Published on Invalid Date

동기식(synchronous)은 순서대로 진행되는 방식을 말하며, 이전 작업이 완료되지 않으면 다음 작업이 시작되지 않습니다.


function a() {
  // do something 1s
  return "a done";
}


function b() {
  // do something 2s
  return "b done";
}


function c() {
  // do something 3s
  return "c done";
}


console.log(a()); 
console.log(b()); //a()가 완료된후 실행
console.log(c()); //b()가 완료된후 실행


//보통 위에서 아래로 우리가 보는 글처럼 위와 아래가 고정되어서 순서대로 동작합니다.
console.log(c()); //c()실행
console.log(a()); //c() 완료후 a()실행
console.log(b()); //a()가 완료된후 b() 실행


반면에, 비동기식(asynchronous)은 작업이 순서에 구애받지 않고 동시에(한꺼번에) 실행되는 방식입니다. 이전 작업이 완료되지 않더라도 다음 작업이 실행될 수 있습니다.


function a() {
  // do something
  setTimeout(() => {
    console.log("a done");
  }, 1000);
}


function b() {
  // do something
  setTimeout(() => {
    console.log("b done");
  }, 2000);
}


function c() {
  // do something
  setTimeout(() => {
    console.log("c done");
  }, 3000);
}


console.log(a()); // a()작업 실행
console.log(b()); // a()와 관계없이 b() 실행
console.log(c()); // a(), b()와 관계없이 c() 실행


비동기식에서 기억해야 할 것은 함수의 결과가 나오지 않아도 다음 작업은 실행을 시작한다는 것입니다.

한꺼번에 다 실행하니 빠르고 좋을것 같지만,

부분 부분은 순서대로 진행되어야 되는 작업들이 존재합니다.


콜백 함수는 비동기식 처리에서 가장 기본적으로 사용되는 기술입니다. 콜백 함수는 비동기식 작업이 끝나면 호출되는 함수로, 콜백 함수를 등록하여 비동기식 작업이 끝나면 자동으로 호출되도록 할 수 있습니다.


예를 들어, 서버에서 블로그 글을 가져온 후( load() ) 도착한 블로그 글 내용을 div에 넣는다( setDiv( blogtext) ) 라는 함수들이 있을 경우


const blogtext = load(); //서버에서 데이터를 가져오는 함수(load) 시간이 걸림

setDiv( blogtext ); // blogtext를 div에 넣는 함수


이 두 함수가 비동기적으로 동시에 실행되면 load()이후 결과가 도착하기전 setDiv를 실행하기 때문에 setDiv에서는 blogtext의 값이 없어서 기대했던 결과가 나오지 않게 됩니다.


이런 경우 load()->load(fn) 함수를 수정해서 완료되면 함수를 실행하도록 변경합니다.


그리고 load가 데이터를 받으면 처리해달라고 setDiv 함수를 load에게 전달합니다. 이때 setDiv처럼 load에 의해서 불려지는 함수를 콜백함수라고 합니다.



const blogtext = load();

setDiv( blogtext );


여기서 

load( setDiv ) ; //이런 형태로 함수를 전달하고 이렇게 load에 의해 불려지는 함수를 콜백함수라고 말합니다.

 

콜백 함수는 비동기식 작업이 끝나면 호출되는 함수로, 콜백 함수를 등록하여 비동기식 작업이 끝나면 자동으로 호출되도록 할 수 있습니다.

비동기적으로 함수를 실행하고 동기적 작업(순서대로 해야하는작업)이 있는 경우 콜백함수를 사용하는 방식으로 처리를 진행하게 됩니다.


콜백함수 예시

function a(callback) {
  // do something
  setTimeout(() => {
    callback("a done");
  }, 1000);
}


function b(callback) {
  // do something
  setTimeout(() => {
    callback("b done");
  }, 2000);
}

function c(callback) {
  // do something
  setTimeout(() => {
    callback("c done");
  }, 3000);
}

a((result) => {
  console.log(result);
  b((result) => {
    console.log(result);
    c((result) => {
      console.log(result);
    });
  });
});


이렇게 콜백을 사용하던중 위에 보는 예시와 같이 콜백함수가 중첩되는 콜백지옥이라 불리는 문제가 발생하고 이를 해결하기 위해 프라미스라는 기술이 도입됩니다.


프라미스는 비동기식 작업의 결과를 담는 객체로, 비동기식 작업이 완료되면 프라미스 객체가 이행(resolve)되어 결과를 반환합니다.


async/await은 프라미스의 사용을 더욱 간단하게 만든 기술입니다. async 함수는 내부에서 비동기식 작업을 수행하면서 await 키워드를 사용하여 작업의 완료를 기다리고, 작업이 완료되면 결과를 반환합니다. 이를 이용하여 콜백 함수나 프라미스를 사용할 때보다 코드를 더욱 간단하고 직관적으로 작성할 수 있습니다.



Using promises - JavaScript | MDN (mozilla.org)

Promise의 간략 설명


Promise 객체는 기본적으로 세 가지 상태를 가집니다. 

pending,fulfilled(이행),rejected(거부)


처음에는 pending 상태이며, 이 상태에서는 비동기 작업이 진행 중입니다. 

- 서버로 자원 전송 요청을 보내는 함수 실행한 후 입니다.


작업이 완료되면 fulfilled(이행) 상태가 됩니다.

- 서버로 부터 문제 없이 데이터를 수신한 경우입니다.


만약 작업이 실패하면 rejected(거부) 상태가 됩니다.

- 서버에서 데이터를 수신하던중 에러가 발생한 경우입니다.


- 성공 후 then() 메소드를 이용해서, 실패 시 catch() 메소드를 이용해서 결과를 처리합니다.


fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { //500,404등
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {// Promise가 거부될 때, 네트워크 에러등
    console.error('Error occurred:', error);
  });


new Promise 예시

function myFetch(url, options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || "GET", url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send(options.body);
  });
}


윗쪽 callback방식을 변경한 경우

function a() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("a done");
    }, 1000);
  });
}

function b() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("b done");
    }, 2000);
  });
}

function c() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("c done");
    }, 3000);
  });
}

a()
  .then((result) => {
    console.log(result);
    return b();
  })
  .then((result) => {
    console.log(result);
    return c();
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });


Promise.resolve(value): value를 포함한 새로운 fulfilled Promise 객체를 반환합니다.

Promise.reject(reason): reason을 포함한 새로운 rejected Promise 객체를 반환합니다.

Promise.all(iterable): iterable의 모든 Promise 객체가 fulfilled되면 이를 배열로 반환합니다. 하나라도 rejected되면 가장 먼저 rejected된 Promise 객체의 이유를 포함한 rejected Promise 객체를 반환합니다.

Promise.race(iterable): iterable 중 가장 먼저 fulfilled 또는 rejected된 Promise 객체를 반환합니다.

Promise.prototype.then(onFulfilled, onRejected): fulfilled 또는 rejected된 Promise 객체의 결과를 처리하기 위한 메소드입니다. 반환된 Promise 객체가 fulfilled되면 onFulfilled 콜백 함수를 실행하고, rejected되면 onRejected 콜백 함수를 실행합니다.

Promise.prototype.catch(onRejected): rejected된 Promise 객체를 처리하기 위한 메소드입니다. 반환된 Promise 객체가 rejected되면 onRejected 콜백 함수를 실행합니다.



async function - JavaScript | MDN (mozilla.org)

await - JavaScript | MDN (mozilla.org)


async와 await는 ES2017(ES8)에서 추가된 기능으로, 비동기적인 작업을 더 쉽게 처리할 수 있게 해줍니다.

순서가 필요한 작업을 async 함수로 묶고 함수를 실행합니다. 


async 는 비동기함수를 선언하기 위한 키워드이고 async가 붙은 함수는 함수 내부에서 await 키워드를 통해 promise 가 fulfilled상태가 될때까지 대기합니다.

await 연산자는 Promise를 기다리기 위해 사용됩니다. 연산자는 async function 내부에서만 사용할 수 있습니다.


function load1() { //서버에서 자료를 가져옴

function draw(todos){ // load1이 완료된후 그 데이터로 작업하는 함수


//이렇게 실행시키게 되면 load1실행후 바로 draw가 실행되어 data는 promise 상태이거나 값이 없을수 있습니다.

const data = load1();

draw(data); 


load1();이후 draw(data)가 실행되도록 aysnc 함수를 하나 만듦니다.


async function syncJob() {

 const result = await load1(); //load1이 완료될때까지 대기

 draw(result);

}


//이후 사용은

syncJob();//새로 만든 함수를 실행합니다.


function load1() { //서버에서 자료를 가져옴
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('todos');
    }, 2000);
  });
}
function draw(todos){
  console.log(`todos가 있어야함:${todos}`);
}
//원하는작업 순서 load1이 완료된후 draw수행
const todo = load1();
draw(todo);  //비동기 실행으로 todo 값은 Promise객체임

async function syncJob() {
  console.log('calling');
  const result = await load1();
  draw(result);
}
//순서대로 실행하기 위해 syncJob() 함수를 만들고 함수를 실행해줌

syncJob(); //async 방식으로 순서대로 실행
load1().then( res => draw(res)); //primise로 순서대로 실행


syncJob();과 load1().then 은 특별한 순서가 없기에 동시에 시작됩니다.


//어디선가 만들어진것
function modulefn(){
 init();
}
//내가 만든것
function load() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("do c!");
    }, 3000);
  });
}
//내가 만든것 
function make(todos){
 console.log(todos);
}

//load() 후 make가 되야함
function init(){//다른 모듈에서 호출됨
 const res = load();
 make(res);//promise pending 상태로 완료후 종료
}

modulefn();
console.log('무엇인가 계속 진행1');

function init(){
 load().then(res => make(res));  //load후 make진행
}
modulefn();
console.log('무엇인가 계속 진행2');

function init(){
 async function gatherJobs(){
  const res = await load();
  make(res);
 } 
 gatherJobs(); //<-- async로 묶은 함수를 실행해줌
}

modulefn();
console.log('무엇인가 계속 진행3');