From 2f746ab42e51168faacc0293352a78b436e31142 Mon Sep 17 00:00:00 2001 From: SeungJin051 Date: Tue, 13 Aug 2024 20:42:05 +0900 Subject: [PATCH 1/2] =?UTF-8?q?08.13=20=EC=8A=A4=ED=84=B0=EB=94=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- seungjin/nomad/README.md | 34 ++++++++++++++++++++++++++++++++++ seungjin/nomad/app.js | 23 ++++++++++++++++++----- seungjin/nomad/index.html | 8 +++++--- 3 files changed, 57 insertions(+), 8 deletions(-) diff --git a/seungjin/nomad/README.md b/seungjin/nomad/README.md index 30228ab..06793ec 100644 --- a/seungjin/nomad/README.md +++ b/seungjin/nomad/README.md @@ -24,3 +24,37 @@ ## CSS 이벤트: - **transitionend**: CSS 애니메이션이 종료되었을 때 발생합니다. + +*** + +# 로컬스토리지 +로컬스토리지는 웹 브라우저에서 제공하는 데이터 저장 기능입니다. 이를 통해 웹사이트는 사용자의 컴퓨터나 스마트폰에 작은 양의 데이터를 저장할 수 있습니다. + +``` js +// 데이터 저장 +localStorage.setItem('username', 'SeungJin'); + +// 데이터 불러오기 +let username = localStorage.getItem('username'); + +// 데이터 삭제 +localStorage.removeItem('username'); +``` + +주요 특징: +- 용량: 보통 5-10MB의 저장 공간을 제공합니다. +- 지속성: 브라우저를 닫아도 데이터가 유지됩니다. +- 도메인 별 저장: 각 웹사이트는 자신의 고유한 저장 공간을 가집니다. +- 클라이언트 측 저장: 서버가 아닌 사용자의 기기에 저장됩니다. +- 만료기간 없이 저장이 가능하여 자동 로그인, 다크 모드에 사용됩니다. + +장점: +- 쿠키보다 큰 저장 용량 +- 서버 부하 감소 +- 빠른 데이터 접근 + +단점: +- 보안에 취약할 수 있음 (중요한 정보는 저장하지 않아야 함) +- 브라우저 간 호환성 문제가 있을 수 있음 + +... 쿠키 세션 로컬스토리지 ... \ No newline at end of file diff --git a/seungjin/nomad/app.js b/seungjin/nomad/app.js index 55b6ca4..ccdf892 100644 --- a/seungjin/nomad/app.js +++ b/seungjin/nomad/app.js @@ -1,9 +1,22 @@ const loginInput = document.querySelector("#login-form input"); -const loginButton = document.querySelector("#login-form button"); +const loginForm = document.querySelector("#login-form"); -function onBtnClick() { - console.log(loginInput.value); - console.log("Click"); +const del = document.querySelector("#login-form .del") + +const HIDDEN_CLASSNAME = "hidden" + +function onLoginSubmit(event) { + event.preventDefault(); + loginForm.classList.add(HIDDEN_CLASSNAME); + const username = loginInput.value; + localStorage.setItem("username", username); + greeting.innerText = `Hello ${username}`; } -loginButton.addEventListener("click", onBtnClick); +function delItem(){ + localStorage.removeItem('username'); +} + +loginForm.addEventListener("submit", onLoginSubmit); + +del.addEventListener("click",delItem) \ No newline at end of file diff --git a/seungjin/nomad/index.html b/seungjin/nomad/index.html index 6b5d1ba..c06105d 100644 --- a/seungjin/nomad/index.html +++ b/seungjin/nomad/index.html @@ -7,10 +7,12 @@ Momnentum App -
- +
+ -
+ + +

From e210b20ad7509050d1bb9594a6842d1247adf04d Mon Sep 17 00:00:00 2001 From: Jihong Kim <34394165+jihongeek@users.noreply.github.com> Date: Tue, 20 Aug 2024 18:27:54 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EA=B0=95=EC=9D=98=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=8B=A4=EC=8A=B5=20=EB=B0=8F=20=EB=B0=B0=EC=9A=B4=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=A0=95=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jihongeek/forNomadLecture/20240820.md | 37 ++++++++++++++++++++++++ jihongeek/forNomadLecture/app.js | 40 +++++++++++++++++++------- jihongeek/forNomadLecture/clock.js | 13 +++++++++ jihongeek/forNomadLecture/greeting.js | 41 +++++++++++++++++++++++++++ jihongeek/forNomadLecture/index.css | 15 ++++++++++ jihongeek/forNomadLecture/index.html | 9 +++++- 6 files changed, 144 insertions(+), 11 deletions(-) create mode 100644 jihongeek/forNomadLecture/20240820.md create mode 100644 jihongeek/forNomadLecture/clock.js create mode 100644 jihongeek/forNomadLecture/greeting.js create mode 100644 jihongeek/forNomadLecture/index.css diff --git a/jihongeek/forNomadLecture/20240820.md b/jihongeek/forNomadLecture/20240820.md new file mode 100644 index 0000000..a560763 --- /dev/null +++ b/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()` 생성자에 인수로 주면 그 객체에는 그 시간이 담긴다. + * 이때 현재 시간과 비교 연산을 통해서 지났는 지 알 수 있다. (나중 날짜가 더 크다, 아마 타임스탬프 값이 더 크기 때문이 아닐까) \ No newline at end of file diff --git a/jihongeek/forNomadLecture/app.js b/jihongeek/forNomadLecture/app.js index 5728030..b1ea1b8 100644 --- a/jihongeek/forNomadLecture/app.js +++ b/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"); -}); \ No newline at end of file + +loginForm.addEventListener("submit",onSumbit); diff --git a/jihongeek/forNomadLecture/clock.js b/jihongeek/forNomadLecture/clock.js new file mode 100644 index 0000000..05d7fd2 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/jihongeek/forNomadLecture/greeting.js b/jihongeek/forNomadLecture/greeting.js new file mode 100644 index 0000000..06da39d --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/jihongeek/forNomadLecture/index.css b/jihongeek/forNomadLecture/index.css new file mode 100644 index 0000000..22aef96 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/jihongeek/forNomadLecture/index.html b/jihongeek/forNomadLecture/index.html index 72958d6..170b399 100644 --- a/jihongeek/forNomadLecture/index.html +++ b/jihongeek/forNomadLecture/index.html @@ -4,9 +4,16 @@ Document + -

🍅

+

+

+
+ + +
+

\ No newline at end of file