강의 내용 실습 및 배운 내용 정리 추가

jihongeek/forNomadLecture/20240820.md

@@ -0,0 +1,37 @@
+## 더 알아보기
+* new Date() 현재시간의 기준 : 시스템에 따라 다르다
+	* 보통 서버에서는 [UTC(협정 세계시)](https://ko.wikipedia.org/wiki/%ED%98%91%EC%A0%95_%EC%84%B8%EA%B3%84%EC%8B%9C)를 사용
+	* UTC 시간을 확인 하기 위해서는 `getUTCXXXX()` 메소드를 사용하면 된다.
+
+* [Date 객체 더 알아보기](https://ko.javascript.info/date)
+* Date 생성자
+```javascript
+const date = new Date(1000); // 1970년 1월 1일 0시 00분 00초 + 인자로 넣은 값 (밀리초 : 1/1000초), UTC 기준
+const date = new Date("2024-08-20") // 문자를 Date로 바꿔줍니다
+const date = new Date(2024,8,20,0,0,0,0); // 년,월,일,시,분,초,밀리초
+```
+* Date 비교 연산
+```javascript
+console.log(new Date(2024,08,20) > new Date(2024,08,21)) // false
+console.log(new Date(2024,08,20) < new Date(2024,08,21)) // true
+```
+* Date 연산(뺄셈, 덧셈)
+```javascript
+// 뺄셈 : 타임스탬프 -> 밀리초 값
+new Date(2024,08,20,0,0,0,500) - new Date(2024,08,20,0,0,0,0)
+// 답 : 500
+// 덧셈 : date 문자열의 연결
+new Date(2024,08,20,0,0,0,500) + new Date(2024,08,20,0,0,0,0)
+//'Fri Sep 20 2024 00:00:00 GMT+0900 (한국 표준시)Fri Sep 20 2024 00:00:00 GMT+0900 (한국 표준시)'
+```
+만약 덧셈을 하고 싶으면 타임스탬프 변환 후 덧셈을 하거나, setXXXXs를 쓰면 된다.
+```javascript 
+// 한 시간 뒤의 시간 구하기
+let nowDate = new Date();
+nowDate.setHours(nowDate.getHours() + 1);
+```
+
+* 최근 진행하고 있는 프로젝트에서의 Date 함수 사용
+	* 노드 JS로 디스코드에 공지를 날리는 봇을 만들고 있음
+	* 이때 노션에 저장된 예정 시간 정보를 문자열로 API를 통해 가져오고 `new Date()` 생성자에 인수로 주면 그 객체에는 그 시간이 담긴다.
+	* 이때 현재 시간과 비교 연산을 통해서 지났는 지 알 수 있다. (나중 날짜가 더 크다, 아마 타임스탬프 값이 더 크기 때문이 아닐까)

jihongeek/forNomadLecture/app.js

@@ -1,12 +1,32 @@
-const header = document.querySelector("h1");
-
-function headerClickHandler() {
-    console.log("🍅");
+const mainText = document.querySelector(".main-text");
+const greeting = document.querySelector("#greeting");
+function mainTextClickHandler() {
+    if (mainText.className !== "main-text tomato")
+    {
+        mainText.className = "main-text tomato"    
+    }
+    else {
+        mainText.className = "main-text apple"    
+    }        
 }
-header.onclick = headerClickHandler;
-header.onclick = ()=>{
-    console.log("Tomato");
+mainText.addEventListener("click",mainTextClickHandler);
+
+const loginInput = document.querySelector("#login-form input");
+const loginButton = document.querySelector("#login-form button");
+const loginForm = document.querySelector("#login-form");
+
+function onSumbit(e) {
+    e.preventDefault();
+    const username = loginInput.value; 
+    const regexPattern = /^[가-힣]+$/;
+    if (regexPattern.test(username) === false) {
+        alert("죄송합니다만, 이름은 한글 문자만 가능합니다.");
+        return;
+    }    
+    loginForm.classList.add("hidden");
+    greeting.innerText = `안녕하세요! ${username}님`;
+    localStorage.setItem("username",username);
+    greeting.classList.remove("hidden");
 }
-header.addEventListener("click",()=>{
-    console.log("Tomato");
-});
+
+loginForm.addEventListener("submit",onSumbit);

jihongeek/forNomadLecture/clock.js

@@ -0,0 +1,13 @@
+const clock = document.querySelector("h2#clock");
+
+function getClock() {
+    const nowDate = new Date();
+    const nowHours = String(nowDate.getUTCHours()).padStart(2,"0");
+    const nowMinutes = String(nowDate.getUTCMinutes()).padStart(2,"0");
+    const nowSeconds = String(nowDate.getUTCSeconds()).padStart(2, "0");
+    const timeString = `${nowHours}:${nowMinutes}:${nowSeconds}`; 
+    clock.innerText = timeString;
+}
+
+getClock()
+setInterval(getClock,1000);

jihongeek/forNomadLecture/greeting.js

@@ -0,0 +1,41 @@
+const mainText = document.querySelector(".main-text");
+const greeting = document.querySelector("#greeting");
+function mainTextClickHandler() {
+    if (mainText.className !== "main-text tomato")
+    {
+        mainText.className = "main-text tomato"    
+    }
+    else {
+        mainText.className = "main-text apple"    
+    }        
+}
+mainText.addEventListener("click",mainTextClickHandler);
+
+const loginInput = document.querySelector("#login-form input");
+const loginButton = document.querySelector("#login-form button");
+const loginForm = document.querySelector("#login-form");
+const USERNAME_KEY = "username"
+const HIDDEN_CLASSNAME = "hidden"
+const savedUsername = localStorage.getItem(USERNAME_KEY);
+function onSumbit(e) {
+    e.preventDefault();
+    const username = loginInput.value; 
+    const regexPattern = /^[가-힣]+$/;
+    if (regexPattern.test(username) === false) {
+        alert("죄송합니다만, 이름은 한글 문자만 가능합니다.");
+        return;
+    }    
+    loginForm.classList.add(HIDDEN_CLASSNAME);
+    greeting.innerText = `안녕하세요! ${username}님`;
+    localStorage.setItem(USERNAME_KEY,username);
+    greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+loginForm.classList.remove("hidden");
+loginForm.addEventListener("submit",onSumbit);
+if (savedUsername !== null)
+{
+    loginForm.classList.add(HIDDEN_CLASSNAME);
+    greeting.innerText = `안녕하세요! ${savedUsername}님`;
+    greeting.classList.remove(HIDDEN_CLASSNAME);
+}

jihongeek/forNomadLecture/index.css

@@ -0,0 +1,15 @@
+body {
+    text-align: center;
+}
+.main-text {
+    font-size: 100px;
+}
+.main-text.tomato::after {
+    content: "🍅";
+}
+.main-text.apple::after{
+    content: "🍏";
+}
+.hidden {
+    display: none;
+}

jihongeek/forNomadLecture/index.html

@@ -4,9 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="index.css">
 </head>
 <body>
-    <h1>🍅</h1>
+    <h1 class="main-text tomato"></h1>
+    <h1 id="greeting" class="hidden"></h1>
+    <form id="login-form">
+        <input required type="text" placeholder="당신의 이름이..?"/>
+        <button>로그인</button>
+    </form>
+    <h1 class="hidden"></h1>
     <script src="app.js"></script>
 </body>
 </html>