kyoungholee · kyoungholee · Jan 13, 2023
diff --git a/client/index.html b/client/index.html
@@ -5,13 +5,27 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./style.css" />
-    <script src="./main.js"></script>
-    <title>Document</title>
+
+    <script defer type="module" src="./main.js"></script>
+    <title>calculator</title>
   </head>
   <body>
-    <h1>
-      <span>hello</span>
-      <span>world</span>
-    </h1>
+    <form class="calculator">
+      <div class="first">
+        <label for="firstNumber">First Value</label>
+        <input type="number" name="first" id="firstNumber" required />
+      </div>
+
+      <div class="operator">+</div>
+
+      <div class="second">
+        <label for="secondNumber">Second Value</label>
+        <input type="number" name="second" id="secondNumber" required />
+      </div>
+
+      <input id="done" type="submit" value="done" />
+
+      <div class="result">-</div>
+    </form>
   </body>
 </html>
diff --git a/client/lib/dom/attr.js b/client/lib/dom/attr.js
@@ -0,0 +1,113 @@
+/* 
+
+// IIFE 패턴 
+
+const attr = (function(){
+  function getAttr(node,prop){
+    // node = '.first'
+    // prop = 'class'
+
+    if(typeof node === 'string'){
+      node = getNode(node);
+    }
+
+    return node.getAttribute(prop);
+
+  }
+
+
+
+  // computed property
+  function setAttr(node,prop,value){
+    // validation : 확인 
+    if(typeof node === 'string') node = getNode(node);
+    if(typeof prop !== 'string') throw new TypeError('setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.')
+
+    if(prop.includes('data')){
+      let rest = prop.slice(5);
+      node.dataset[rest] = value;
+    }
+
+    if(!value) throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.')
+
+    node.setAttribute(prop,value);
+
+  }
+
+
+
+
+  // const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+  function attr(node,prop,value){
+
+    // if(!value){
+    //   return getAttr(node,prop);
+    // }else{
+    //   setAttr(node,prop,value);
+    // }
+
+    return !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+
+  }
+
+  // incapsulation // 캡슐화 
+  // 정보 은닉 
+
+
+  return attr
+
+})()
+
+
+// incapsulation // 캡슐화
+// 정보 은닉
+
+
+attr()
+
+ */
+
+function getAttr(node, prop) {
+  // node = '.first'
+  // prop = 'class'
+
+  if (typeof node === 'string') {
+    node = getNode(node);
+  }
+
+  return node.getAttribute(prop);
+}
+
+// computed property
+function setAttr(node, prop, value) {
+  // validation : 확인
+  if (typeof node === 'string') node = getNode(node);
+  if (typeof prop !== 'string')
+    throw new TypeError(
+      'setAttr 함수의 두 번째 인자는 문자 타입 이어야 합니다.'
+    );
+
+  if (prop.includes('data')) {
+    let rest = prop.slice(5);
+    node.dataset[rest] = value;
+  }
+
+  if (!value)
+    throw new SyntaxError('setAttr 함수의 세 번째 인자는 필수값입니다.');
+
+  node.setAttribute(prop, value);
+}
+
+// const attr = (node,prop,value) => !value ? getAttr(node,prop) : setAttr(node,prop,value);
+
+function attr(node, prop, value) {
+  // if(!value){
+  //   return getAttr(node,prop);
+  // }else{
+  //   setAttr(node,prop,value);
+  // }
+
+  return !value ? getAttr(node, prop) : setAttr(node, prop, value);
+}
diff --git a/client/lib/dom/bindEvent.js b/client/lib/dom/bindEvent.js
@@ -0,0 +1,16 @@
+
+function bindEvent(node,type,handler){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+
+  if(!(/mouseenter|click|mousemove|mouseleave/g.test(type))){
+    typeError('bindEvent 함수의 두 번째 인자는 유효한 이벤트 타입 이어야 합니다.')
+  }
+
+
+  node.addEventListener(type,handler);
+
+  return ()=> node.removeEventListener(type,handler);
+
+}
diff --git a/client/lib/dom/css.js b/client/lib/dom/css.js
@@ -0,0 +1,84 @@
+
+export function addClass(node,className){
+
+  if(typeof node === 'string') node = getNode(node);
+
+  if(typeof className !== 'string'){
+    typeError('addClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.add(className)
+
+}
+
+// 변경하기 : 대상의 클래스를 지운다.
+export function removeClass(node,className){
+  if(typeof node === 'string') node = getNode(node);
+
+  if(!className){
+    node.className = ''
+    return;
+  }
+
+  if(typeof className !== 'string'){
+    typeError('removeClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.remove(className)  
+}
+
+
+export function toggleClass(node,className){
+  if(typeof node === 'string') node = getNode(node);
+  if(typeof className !== 'string'){
+    typeError('toggleClass 함수의 두 번째 인자는 문자 타입 이어야 합니다.');
+  }
+
+  node.classList.toggle(className)
+}
+
+
+
+
+
+
+function getCss(node,prop){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+
+  if(!(prop in document.body.style)){
+    syntaxError('getCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.')
+  }
+  return getComputedStyle(node)[prop]
+}
+
+
+// jQuery
+
+// 대상에게 원하는 css 속성을 추가 = set
+function setCss(node,prop,value){
+  if(typeof node === 'string'){
+    node = getNode(node);
+  }
+  if(!(prop in document.body.style)){
+    syntaxError('setCSS 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다.')
+  }
+  if(!value){
+    syntaxError('setCSS 함수의 세 번째 인자는 필수값 입니다.')
+  }
+
+  // if(value.replace(/\s+/g,'') === ''){
+
+  // }
+
+  node.style[prop] = value;
+
+}
+
+
+export const css = (node,prop,value) => { 
+  return !value ? getCss(node,prop) : setCss(node,prop,value) 
+}
+
+
diff --git a/client/lib/dom/getNode.js b/client/lib/dom/getNode.js
@@ -0,0 +1,20 @@
+
+export function getNode(node){
+  if(typeof node !== 'string'){
+    throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.');
+  }
+
+  // if(!isString(node)) typeError('에러가 발생했습니다.');
+
+  return document.querySelector(node)
+}
+
+
+export function getNodes(node){
+  if(typeof node !== 'string'){
+    throw new Error('getNode 함수의 인자는 문자 타입 이여야 합니다.');
+  }
+
+  return document.querySelectorAll(node)
+}
+
diff --git a/client/lib/dom/index.js b/client/lib/dom/index.js
@@ -0,0 +1,6 @@
+
+
+
+export * from './css.js';
+export * from './getNode.js';
+export * from './insert.js';
diff --git a/client/lib/dom/insert.js b/client/lib/dom/insert.js
@@ -0,0 +1,33 @@
+export function insertBefore(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    typeError('insertBefore 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+
+  node.insertAdjacentHTML('beforebegin', text);
+}
+
+export function insertFirst(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) typeError('insertFirst 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  node.insertAdjacentHTML('afterbegin', text);
+}
+
+
+
+export function insertLast(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    refError('insertLast 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+  node.insertAdjacentHTML('beforeend', text);
+}
+
+export function insertAfter(node, text) {
+  if (typeof node === 'string') node = getNode(node);
+  if (node.nodeType !== document.ELEMENT_NODE) {
+    refError('insertAfter 함수의 첫 번째 인자는 ELEMENT 노드여야 합니다.');
+  }
+  node.insertAdjacentHTML('afterend', text);
+}
diff --git a/client/lib/error/typeError.js b/client/lib/error/typeError.js
@@ -0,0 +1,22 @@
+
+// 📂 typeError.js
+function typeError(message){
+  throw new TypeError( message );
+}
+
+// 📂 refError.js
+function refError(message){
+  throw new ReferenceError( message );
+}
+
+// 📂 syntaxError.js
+function syntaxError(message){
+  throw new SyntaxError( message );
+}
+
+
+
+
+
+
+
diff --git a/client/lib/index.js b/client/lib/index.js
@@ -0,0 +1,2 @@
+export * from "./dom/index.js";
+// export * from "./dom/su.js";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./dom/index.js";
		// export * from "./dom/su.js";