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

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

이벤트 핸들러란 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)

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(): 요소에서 클래스를 제거합니다.

Redux - A predictable state container for JavaScript apps. | Redux

Redux 시작하기 | Redux

react에서 redux 사용하는 기본 구조입니다.

forgithub00/redux_1 at master · a3040/forgithub00

Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 도구입니다. 

React와 함께 많이 사용되며, React에서 컴포넌트 간에 상태를 공유하고 업데이트하기 위한 상태 관리 방법으로 Redux를 많이 사용합니다.

중요한 메소드는 다음과 같습니다.

createStore(reducer, [preloadedState], [enhancer]): 

애플리케이션의 상태를 저장하고 업데이트하는 스토어를 생성합니다. reducer는 액션에 따라 상태를 업데이트하는 함수이며, preloadedState는 초기 상태값을 나타내며 선택적으로 전달될 수 있습니다. enhancer는 미들웨어와 같은 스토어의 기능을 확장하는 함수입니다.

combineReducers(reducers): 

다수의 리듀서를 하나로 합쳐줍니다. 이를 통해 하나의 애플리케이션 상태를 여러 개의 작은 리듀서로 나눌 수 있습니다.

dispatch(action): 

액션을 발생시킵니다. 액션은 객체 형태로 {type: 'ACTION_TYPE', payload: ...}와 같은 형태로 구성됩니다. 리듀서는 이 액션에 따라 상태를 업데이트합니다.

getState(): 

스토어에 저장된 현재 상태를 반환합니다.

subscribe(listener): 

스토어에 상태가 변경될 때마다 호출되는 콜백 함수를 등록합니다. 이를 통해 상태가 변경될 때마다 UI를 업데이트하거나, 상태 변경을 로그로 기록할 수 있습니다.

applyMiddleware(...middlewares): 

미들웨어를 등록합니다. 미들웨어는 액션을 디스패치하기 전 또는 후에 추가적인 동작을 수행할 수 있습니다. 

Redux Thunk와 같은 미들웨어를 사용하면 비동기 작업을 처리할 수 있습니다.

사용 방법

기본 뼈대를 생성하고 1.~4를 순서대로 진행하면서 필요한 action을추가 하고 사용합니다.

1. actions를 생성합니다

2. reducer를 생성합니다.

3. store를 생성합니다.

4. 사용합니다.

1. actions를 생성합니다

export const increment = () => {
    return {
      type: 'INCREMENT'
    };
  };
  ...

2. reducer를 생성합니다.

const initialState = {
    count: 0
};


export const counterReducer = (state = initialState, action) => {
 switch (action.type) {
  case 'INCREMENT':
    return {
     count: state.count + 1
    };
...
  default:
    return state;
 }
};

3. store를 생성합니다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { counterReducer } from './reducers';
const store = createStore(counterReducer);


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
  </React.StrictMode>
);

4. 사용합니다.

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement,multiply  } from './actions';


function App() {
 const [value, setValue] = useState(1);
 const dispatch = useDispatch();
 const count = useSelector(state => state.count);


 const handleIncrement = () => {
   dispatch(increment(value));
 };
 ...  
 return (
 <div>
   <h1>Count: {count}</h1>
   <input type="number" value={value} onChange={handleChange} />
   <button onClick={handleIncrement}>Increment</button>
   <button onClick={handleDecrement}>Decrement</button>   
   <div>
       <label>
         Multiply by:
       </label>
       <button onClick={handleMultiply}>Multiply</button>
     </div>
 </div>
  );
}


export default App;

container 클래스는 반응형 웹 디자인을 위한 그리드 시스템을 제공하며, 내부에 있는 콘텐츠를 중앙에 배치할 수 있도록 해줍니다.

이 클래스는 웹 페이지의 전체 너비를 사용하지 않고, 일부 공간을 비워 두는 것으로 컨텐츠의 가독성을 높일 수 있습니다.

mx-auto 클래스는 부모 요소의 가로 방향 중앙에 자식 요소를 배치합니다.

이 클래스는 margin-left와 margin-right 속성을 모두 auto로 설정하여 가로 방향으로 중앙 정렬합니다.

<div class="container mx-auto">
  <h1 class="text-3xl font-bold">Hello, World!</h1>
  <p class="text-lg">This is an example of using Tailwind CSS classes.</p>
</div>