DJ pupm this party

Clerk.js는 사용자 인증 및 사용자 관리(User Management)를 간편하게 구현할 수 있도록 돕는 개발자 도구이다. Clerk는 주로 React, Next.js, Vue, Node.js 등 다양한 프레임워크와 통합되어 작동하며, 인증 및 사용자 관련 기능을 직접 구현할 필요 없이 빠르게 구축할 수 있게 도와주는 역할을 한다. 

Clerk.js 주요 특징

1. 다양한 인증 방식 지원
   • 이메일/비밀번호 기반 로그인
   • 소셜 로그인 (Google, Facebook, GitHub 등)
   • OTP 기반 인증 (SMS, 이메일)
   • 패스워드 없는 인증 (Magic Link, WebAuthn 등)
2. 사용자 관리(User Management)
   • 사용자 프로필 관리
   • 사용자 설정 페이지(User settings UI) 제공
   • 조직 관리(팀 및 조직 기반 워크플로우 지원)
3. Next.js와의 강력한 통합
   • Middleware를 활용해 특정 페이지를 보호(Protected Routes)
   • API 라우트 보호를 위해 auth 객체 제공
   • Server-side Rendering(SSR) 및 **Static Site Generation(SSG)**에서 유연하게 인증 정보 사용 가능.
4. 커스터마이징 가능한 UI
   • 기본 제공되는 Sign-in, Sign-up, User Profile 컴포넌트를 그대로 사용할 수 있음.
   • Tailwind CSS 등으로 스타일 커스터마이징 가능.
5. 보안과 규정 준수
   • WebAuthn 지원을 통해 보안 인증 구현 가능.
   • GDPR, CCPA, SOC 2 등 주요 데이터 보호 규정을 준수.
6. 다중 플랫폼 지원
   • React, React Native, Vue, Angular, Node.js 등 다양한 프레임워크와 통합 가능.
   • REST API, GraphQL API를 사용하여 프론트엔드와 백엔드 모두 쉽게 연결 가능.

Clerk.js 의 장점

1. 빠른 개발
   • 인증 및 사용자 관리에 필요한 시간을 크게 절약할 수 있음.
   • API 호출만으로 복잡한 인증 로직을 구현 가능.
2. 확장성
   • 단순 로그인 기능뿐만 아니라, 사용자 프로필, 팀, 조직 등 더 복잡한 사용자 관리 기능도 제공.
3. 보안 강화
   • WebAuthn, Magic Link 등 강력한 보안 인증 방식 내장.
4. SSR/SSG 지원
   • Next.js 등에서 서버 사이드 렌더링과 정적 페이지 생성에 필요한 인증 정보를 제공.
5. 손쉬운 커스터마이징
   • 기본 제공되는 UI 컴포넌트를 Tailwind CSS 등으로 자유롭게 수정 가능.

Clerk.js 주요 구성 요소

1. Auth Components
   • <SignIn />: 로그인 UI 컴포넌트
   • <SignUp />: 회원가입 UI 컴포넌트
   • <UserProfile />: 사용자 프로필 관리 UI 컴포넌트
   • <SignOutButton />: 로그아웃 버튼
2. API 및 Hook
   • useAuth: 현재 로그인 상태와 인증 정보를 가져옴.
   • useUser: 현재 사용자(User) 정보를 가져옴.
   • authMiddleware: 특정 라우트를 보호하는 데 사용.
   • getAuth: 서버에서 인증 정보에 접근하기 위한 함수.
3. Middleware
   • Next.js에서 특정 페이지나 API 라우트를 보호할 수 있도록 Clerk의 미들웨어를 제공.
4. Dashboard
   • Clerk 대시보드를 통해 사용자, 팀, 조직 등을 관리 가능.

Clerk.js와 기존 인증 시스템 비교

사용 예시 (Next.js)

import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return <SignIn />;
}

API Route보호 

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  publicRoutes: ["/public-page"],
});

export const config = {
  matcher: "/((?!_next|static|favicon.ico).*)",
};

공식 사이트 및 문서

https://clerk.com/

더 궁금한 내용이 있으면 다음 내용을 살펴 보자 

shadcn ui

shadcn/ui는 React를 기반으로 Tailwind CSS를 활용해 빠르고 효율적으로 UI 컴포넌트를 구축할 수 있도록 돕는 오픈소스 UI 라이브러리이다. 이 라이브러리는 일반적인 UI 키트와는 다르게 컴포넌트 코드를 직접 복사해서 사용하는 방식을 채택하고 있어, 사용자 맞춤화와 확장성이 뛰어나다.

shadcn ui의 주요 특징 

1. tailwind CSS기반 

- 모든 스타일링은 Tailwind CSS유틸리티 클래스를 사용하여 작성된다. 

- 덕분에 기존 Tailwind프로젝트와의 호환성이 매우 뛰어난 편이다. 

2. 코드 우선 접근 방식 

- 일반적인 UI라이브러리처럼 외부 패키지를 설치해 사용하는 대신 , 컴포넌트를 직접 복사해서 프로젝트 내에 포함하는 방식을 권장한다. 

- 이를 통해 컴포넌트 스타일과 동작을 프로젝트 요구에 맞게 쉽게 수정할 수 있다. 

3. Radix UI활용 

- Radix UI의 접근성 높은 컴포넌트를 기반으로 빌드되었다. 

- 예를 들어, 드롭다운, 모달, 토글 등 접근성 지원이 내장된 고급 컴포넌트를 제공한다. 

4. 유연성과 확장성 

- 컴포넌트 코드를 복사하므로 완전한 제어가 가능하다. 

- 디자인 시스템의 일관성을 유지하거나 특정 기능을 커스터마이징하는 데 유리하다 

5. 간단한 설치 

- 컴포넌트를 가져오고 Tailwind 설정을 추가하기만 하면 바로 사용할 수 있다. 

shadcn/ui와 기존 UI 라이브러리의 차이점

공식 사이트  및 문서 

https://ui.shadcn.com/

https://github.com/shadcn-ui/ui

토스트 노티피케이션은 어떤 동작에 대한 피드백을 나타내는 것을 뜻합니다

이번 포스트에서는 버튼을 눌렀을 때 그 동작에 대한 반응을 확인 하라 수 있는 toast notification을 만들어 보려고 합니다. 

저기 위에 버튼들을 누르면 해당 토스트들이 생성이 됩니다. 

그리고 timeout을 걸어서 시간이 되면 사라지게 만들었습니다. 

함께 코드 보면서 진행해봅시다. 

ToastBox와 메시지 변수 선언 

let toastBox = document.getElementById("toastBox");
let successMsg = '<i class="fa-solid fa-circle-check"></i>successfully submitted';
let errorMsg = '<i class="fa-solid fa-circle-xmark"></i>Please fix the error';
let invalidMsg = '<i class="fa-solid fa-circle-exclamation"></i>Invalid input, check again';

- 먼저 toastBox라는 ID를 가진 변수를 가져옵니다. toastBox는 동적으로 생성될 알람(toast)메시지를 담는 역할을 합니다. 

successMsg, errorMsg, invalidMsg는 각각 성공, 에러, 그리고 잘못된 입력에 대한 알림 메시지를 Html코드와 함께 문자열로 저장합니다. 

showToast함수 정의 

function showToast(msg) {
  let toast = document.createElement("div");
  toast.classList.add("toast");
  toast.innerHTML = msg;
  toastBox.appendChild(toast);
  if (msg.includes("error")) {
    toast.classList.add("error");
  }
  if (msg.includes("invalid")) {
    toast.classList.add("invalid");
  }
  setTimeout(() => {
    toast.remove();
  }, 6000);
}

- 버튼을 누르면 발생하게 되는 showToast( )함수입니다. 

- document.createElement('div')를 사용해 새로운 div요소를 생성합니다. 이 요소는 동적으로 생성되는 알림의 컨테이너 역할을 수행합니다 .

- toast.classList.add('toast')는 이 div요소에 toast라는 css클래스를 추가해, 알림에 대한 스타일을 지정할 수 있게 합니다. 

- toast.innerHTML=msg는 함수에 전달된 메시지(msg)를 div안에 넣는 역할을 합니다. 

- 마지막으로 toastBox.appendChild(toast)는 생성된 toast를 toastBox안에 추가해 화면에 표시되게 합니다. 

메시지에 따른 추가 클래스 지정 

- error라는 단어가 포함되어 있으면 toast요소에 error라는 클래스를 추가합니다. 

- Invalid라는 요소가 포함되어 있으면 invalid클래스를 추가해 입력이 잘못된 경우 별도로 스타일링 할 수 있도록 합니다. 

알림 자동 제거 

setTimeout(() => {
  toast.remove();
}, 6000);

- setTimeout함수를 이용해 6초(6000ms)후에 toast요소를 자동으로 제거하는 역할을 합니다. 알림 메시지가 일정 시간 후에 자동을 ㅗ사라지게 하기 위한 설정된 일부입니다. 

이러한 방식으로 사용자가 알림을 확인한 뒤 일정 시간이 지나면 자동으로 사라져 화면이 깔끔하게 유지될 수 있습니다. 

우리 일상에서 qr코드는 흔하게 사용되는 기술이고 매우 유용하게 사용되고 있습니다

간편하게 신원을 조회하거나 사이트에 접근하기 편하기 때문인거 같아요 

그 qr코드를 어떤 식으로 만드는 지 실습을 통해 알아보도록 하겠습니다

이 프로그램에 들어가게되면 텍스트나 url을 입력하는 Input창과 생성하기 버튼이 먼저 눈에 들어옵니다. 

input에 원하는 사이트를 입력하면 해당 사이트에 대한 qr코드가 생성이됩니다.

이 qr코드가 잘 생성이 된건지 확인 해보기 위해서 카메라를 통해 확인을 해보았습니다. 

오호라 사이트가 뜨는 걸 보니 잘 작동이 되고 있습니다.

이번에는 어떤식으로 코드가 진행이되었는지 살펴 보도록 하겠습니다.

1. 변수 선언 및 DOM 요소 선택

let imgBox = document.getElementById("ImgBox");
let qrImage = document.getElementById("qrImage");
let imgText = document.getElementById("qrText");

이 프로젝트에서 사용되는 변수들은 다음과 같습니다. 

- imgbox는 QR코드가 생성될 때 이미지를 보여줄 <div id="imgBox">입니다. 나중에 이 div에 show-img클래스를 추가하여 이미지가 보이도록 제어할 수 있습니다. 

- qrImage는 <img>태그로 QR코드 이미지가 표시될 곳으로 사용자가 입력한 텍스트로 QR코드를 생성한 후, 이 태그의 src속성을 변경해 이미지가 나타나게 됩니다. 

- imgText는 사용자가 텍스트 또는 URL을 입력하는 input필드를 선택합니다. 이 값을 읽어서 qr코드를 생성하는데 사용합니다. 

2. QR 코드 생성 함수 (generateQR)

function generateQR() {
  if (qrText.value.length > 0) {
    qrImage.src =
      "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
      qrText.value;
    imgBox.classList.add("show-img");
  } else {
    qrText.classList.add("error");
    setTimeout(() => {
      qrText.classList.remove("error");
    }, 1000);
  }
}

generatorQR함수는 QR코드 생성버튼을 눌렀을 때 호출됩니다. 

1. 입력값 확인 

if(qrText.value.length>0)

사용자가 텍스트 또는 URL을 입력했는지 확인하는 조건문입니다. 만약 입력 값이 있다면 QR코드를 생성하는 단계로 넘어가고, 입력값이 없으면 오류처리가 실행됩니다. 

2. QR코드 생성 및 이미지 업뎃

qrImage.src =
  "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
  qrText.value;

입력값이 있을 경우 QR코드 이미지를 생성합니다. qrImage.src는 img태그의 src속성을 변경하여 이미지를 로드하는 역할을 합니다. 여기서 src에 설정된 URL은 QR코드 생성 API인 

https://api.qrserver.com/v1/create-qr-code/

입니다. 여기서 이 API는 size와 data라는 두개의 파라미터를 사용합니다. size=150x150으로 이 사이즈로 코드를 생성합니다. data=뒤에는 사용자가 입력한 텍스트나 URL이 추가됩니다. 즉 입력한 데이터가 QR코드에 인코딩 됩니다. 

3. 이미지 박스 표시 

imgBox.classList.add("show-img");

qr코드가 성공적으로 생성되면, imgBox에 show-img클래스를 추가합니다. 이 클래스는 CSS에서 정의된대로 이미지 박스의 max-height값을 늘려 QR코드 이미지를 보여주도록 합니다. 초기에는 이미지 박스의 높이가 0이므로 QR코드가 보이지 않다가 show-img클래스가 추가되면 이미지가 자연스럽게 나타납니다. 

4. 오류 처리 

qrText.classList.add("error");
setTimeout(() => {
  qrText.classList.remove("error");
}, 1000);

만약 입력 값이 없다면 qrText에 error클래스를 추가하여 입력 필드가 흔들리는 애니메이션이 적용됩니다. 

이건 css 에서 @keyframes shake로 정의된 애니메이션 입니다. 

setTimeout함수는 1초 후에 error클래스를 제거합니다. 이는 애니메이션이 반복되지 않고 한번만 실행되게 합니다. 

이번 실습은 생각보다 코드가 짧았지만 유용한 결과를 얻을 수 있었습니다. 

재밌는 실습이었어요 

안녕하세요 오늘 만들려고 하는 건 인용구를 랜덤으로 생성해주는 앱입니다. 

https://github.com/lukePeavey/quotable

이API를 사용해서 아주 쉽고 간단한 랜덤 인용구를 생성시킬 수 있습니다. 

페이지를 열게 되면 "Quote of the day"라는 제목으로 아래 " "안에는 인용구 밑에는 작가 이름이 생성이 됩니다. 

지난 번에 했을 때는 잘됐는데 지금은 잘 안되고 있는게 아마 API문제인것 같아요.. 해결 방법을 아직은 잘 몰라서 일단 그냥 했습니다

New Quote버튼을 누르면 새로운 인용이 생성되고 

Tweet을 누르면 X와 연결되서 바로 Tweet할 수 있게 했습니다. 

전X계정이 없어서 저건 굳이 안하긴 했는데 글 많이 쓰시는 분들에게는 유용할 수  있다고 생각합니다. 

자 그럼 코드를 확인 해봅시다. 

요소선택 

const quote = document.getElementById("quote");
const author = document.getElementById("author");
const api_url = "https://api.quotable.io/random";

- quote와 author 요소를 선택해서 나중에 인용구와 저자를 표시할 수 있게 합니다. 

- api_url은 랜덤으로 인용구를 가져올 API의 UR을 정의하는 것입니다. 

비동기 함수로 API호출 및 데이터 처리 

async function getquote(url) {
  const response = await fetch(url);
  var data = await response.json();
  console.log(data);
  quote.innerHTML = data.content;
  author.innerHTML = data.author;
}

getquote(api_url);

- get quote 함수는 API로부터 인용구 데이터를 비동기적으로 가져옵니다. 

- API는 fetch를 통해 API로부터 데이터를 가져오고 await로 비동기 작업이 완료될 때까지 기다립니다. 

- 데이터 처리는 가져온 데이터를 JSON형식으로 변환하여 인용구와 저자를 HTML요소에 표시합니다. 

트위공유 기능 구현

function tweet() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      quote.innerHTML +
      " ---- by " +
      author.innerHTML,
    "Tweet Window",
    "width=600,height=300"
  );
}

- tweet함수는 현재 표시된 인용구를 트위터(X)화면에 공유하기 위한 새로운 창을 여는 과정입니다. 

- 트윗 메시지 구성: 인용구와 저자를 포함한 트윗 메시지를 작성하고 window.open을 사용해 트윗 작성 창을 엽니다. 

-아, 트위터 공유 기능은

https://developer.x.com/en/docs/x-for-websites/tweet-button/overview

해당 사이트의 코드를 가져와서 추가하였습니다. 

버튼을 누를때마다 새로운 인용들이 생성되는게 꽤 재밌더라구요 !

이번에 만들어 볼 프롤젝트는 태어난 날부터 지금까지 며칠이 지났는지는 계산하는 앱을 만들어 보려고 합니다. 

이 프로젝트에서는 년도별 월별 일별에 따라 계산이 달라지기 때문에 이전 프로젝트들에 비해 조금 더 복잡한 조건문들이 사용되었습니다. 

가장 초기화면의 모습입니다. 프로젝트의 이름이 적혀있고 날짜를 지정할 수 있는 창과 버튼이 있습니다.

달력 버튼을 누르게 되면 날짜를 지정할 수 있는 달력이 나타나게 됩니다. 이 프로젝트는 과거의 날짜에서 오늘까지의 날짜를 계산하는 것이기 때문에 오늘 이후의 날짜들은 선택할 수 없게 비활성화가 되어 있습니다.

저는 제 나이를 밝히고 싶지는 않아서 2000년 1월 1일부터 오늘까지의 날을 계산해보았습니다. 

21세기가 된지 벌써 24년 하고도 8개월 9일이나 지나있습니다. 

시간이 정말 빠르네요 ㅎㅎ 

그럼 어떤 코드들이 사용되어 있는지 확인해 봅시다. 

1. HTML요소 선택 및 초기화 

let userInput = document.getElementById("date");
userInput.max = new Date().toISOString().split("T")[0];
let result = document.getElementById("result");

• let userInput = document.getElementById("date"): date라는 id를 가진 HTML 요소(입력 필드)를 선택하여 userInput이라는 변수에 저장합니다.
• userInput.max = new Date().toISOString().split("T")[0]: 사용자가 오늘 이후의 날짜를 입력하지 못하도록 max 속성을 오늘 날짜로 설정합니다. new Date().toISOString().split("T")[0] 코드는 현재 날짜를 YYYY-MM-DD 형식으로 변환하는 역할을 합니다.
• let result = document.getElementById("result"): 결과를 표시할 result라는 id를 가진 HTML 요소를 선택하여 result 변수에 저장합니다.

2. 나이계산함수 CalculateAge()

function calculateAge() {
  let birthDate = new Date(userInput.value);
  let d1 = birthDate.getDate();
  let m1 = birthDate.getMonth() + 1;
  let y1 = birthDate.getFullYear();

  let today = new Date();

  let d2 = today.getDate();
  let m2 = today.getMonth() + 1;
  let y2 = today.getFullYear();

  let d3, m3, y3;
  y3 = y2 - y1;
  if (m2 >= m1) {
    m3 = m2 - m1;
  } else {
    y3--;
    m3 = 12 + m2 - m1;
  }
  if (d2 >= d1) {
    d3 = d2 - d1;
  } else {
    m3--;
    d3 = getDaysInMonth(y1, m1) + d2 - d1;
  }
  if (m3 < 0) {
    m3 = 11;
    y3--;
  }
  result.innerHTML = `You are <span>${y3}</span> years,<span>${m3}</span> months and <span>${d3}</span> days old`;
}

• function calculateAge() { ... }: 이 함수는 사용자가 입력한 생년월일(userInput.value)을 받아 현재 나이를 계산하고, 그 결과를 HTML 요소에 표시합니다.
• let birthDate = new Date(userInput.value);: 사용자가 입력한 생년월일을 Date 객체로 변환하여 birthDate 변수에 저장합니다.
• let d1 = birthDate.getDate(): birthDate 객체에서 일을 추출합니다.
• let m1 = birthDate.getMonth() + 1: birthDate 객체에서 월을 추출합니다. (자바스크립트에서 월은 0부터 시작하므로 +1을 해줍니다.)
• let y1 = birthDate.getFullYear(): birthDate 객체에서 연도를 추출합니다.
• let today = new Date(): 현재 날짜를 나타내는 Date 객체를 생성합니다.
• let d2 = today.getDate(): 현재 날짜에서 일을 추출합니다.
• let m2 = today.getMonth() + 1: 현재 날짜에서 월을 추출합니다.
• let y2 = today.getFullYear(): 현재 날짜에서 연도를 추출합니다.
• let d3, m3, y3: 나이 계산을 위한 변수를 선언합니다.
• y3 = y2 - y1: 기본적으로 현재 연도에서 출생 연도를 빼서 나이를 계산합니다.
• if (m2 >= m1) { ... } else { ... }: 생월과 현재 월을 비교하여 만 나이를 계산합니다. 현재 월이 생월보다 이전이면 나이를 한 살 줄여줍니다.
• if (d2 >= d1) { ... } else { ... }: 생일과 현재 일을 비교하여 월을 조정합니다. 현재 일이 생일보다 이전이면 한 달을 빼고 일수를 조정합니다.
• if (m3 < 0) { ... }: 월 계산 후 월이 음수로 나오면 11개월로 설정하고 나이를 한 살 줄여줍니다.
• result.innerHTML = ...: 최종적으로 계산된 나이(년, 월, 일)를 HTML 요소에 표시합니다.

3.월별 일수 계산 함수 

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

• function getDaysInMonth(year, month) { ... }: 특정 연도와 월에 해당하는 일수를 계산하는 함수입니다.
• return new Date(year, month, 0).getDate(): 주어진 연도와 월에 맞는 마지막 날짜를 반환합니다. 여기서 new Date(year, month, 0)은 지정된 월의 마지막 날을 의미합니다.

이렇게 하면 완성입니다!

텍스트를 작성할 수 있는 노트앱을 만들어 볼겁니다.!! 

이 앱은 처음에는 이렇게 아무것도 없는 빈공백에 버튼만 놓여져 있고 이 버튼을 누르게 되면 텍스트를 작성할 수 있는 박스가 생성됩니다.

이 박스에서는 텍스트만 쓸 수 있고 내용을 삭제할 수도 있습니다. 

이렇게 만들어 질 수 있고 다양한 어플들에서 이러한 메모장을 생성해서 어플을 만들었다는 기억이 납니다 .

자, 그럼 이 어플은어떻게 생성되었는지 한번 확인해 보도록 하겠습니다. 

const notesContainer = document.querySelector(".notes-container");
const createBtn = document.querySelector(".btn");
let notes = document.querySelectorAll(".input-box");

- noteContainer는 노트들이 추가될 컨테이너 역할을 합니다. 

- createBtn은 class가 btn인 요소를 참조합니다. 

- notes는 class가 input-box인 <p>요소들을 선택하여 참조합니다. 

function showNotes() {
  notesContainer.innerHTML = localStorage.getItem("notes");
}

showNotes();

 이 함수는 로컬스토리지에서 저장된 노트를 불러와서 notesContainer에 표시하는 함수입니다. 

localStorage.getItem('notes')는 로컬 스토리지에서 'notes'라는 키로 저장된 값을 가져옵니다. 

이 값은 notesContainer의 innerHTML로 설정되어 페이지가 로드될 때 저장된 노트들이 표시되도록 합니다.

showNotes()를 호출하여 페이지가 로드될 때 자동으로 저장된 노트들이 화면에 표시됩니다.

function updateStorage() {
  localStorage.setItem("notes", notesContainer.innerHTML);
}

updateStorate함수는 현재 notesContainer의 내용을 로컬 스토리지에 저장하는 역할을 합니다. localStorage.setIem('notes',notesContainer.innerHTML)는 notesContainer의 현재 innerHTML을 'notes'라는 로컬 스토리지에 저장합니다. 이를 토통해 페이지를 새로고침해도 노트가 유지됩니다. 

createBtn.addEventListener("click", () => {
  let inputBox = document.createElement("p");
  let img = document.createElement("img");
  inputBox.className = "input-box";
  inputBox.setAttribute("contenteditable", "true");
  img.src = "images/delete.png";
  notesContainer.appendChild(inputBox).appendChild(img);
});

이 코드는 createBtn이 클릭되면 새로운 노트를 생성하는 역할을 합니다. 

- inputbox는 새로운 <p>요소를 생성하며 class를 input-box로 설정하고 contentededitable속성을 true로 설정한다. 이 속성은 사용자가 해당 요소를 클릭하여 내용을 편집할 수 있게 해준다. 

- img는 살제버튼으로 사용할 이미지를 생성한다. 이 이미지는 나중에 노트를 삭제할 때 사용된다. 

- 마지막으로 생성된 inputbox와 img를 notesContainer에 추가한다. 이로써 새로운 노트가 화면에 나타나게 된다. 

notesContainer.addEventListener("click", function (e) {
  if (e.target.tagName === "IMG") {
    e.target.parentElement.remove();
    updateStorage();
  } else if (e.target.tagName === "P") {
    notes = document.querySelectorAll(".input-box");
    notes.forEach((nt) => {
      nt.onkeyup = function () {
        updateStorage();
      };
    });
  }
});

 이 코든느 notesContainer내에서 발생하는 클릭 이벤트를 처리한다.

- e.target.tagName==='IMG'는 만약 클릭한 요소가 이미지(IMG)라면 해당 이미지를 포함하는 부모요소를 제거한다. 그런다음 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

- e.target.tagName==='p'는 만약 클릭한 요소가 p태그라면 모든 노트요소를 다시 선택하고 각각의 노트에 대해 keyup이벤트를 등록한다. 이 이벤트는 사용자가 노트의 내용을 수정할 때마다 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.execCommand("insertLineBreak");
    event.preventDefault();
  }
});

이 코드는 사용자가 노트(inputBox) 안에서 Enter 키를 누를 때 발생하는 동작을 정의합니다.

- 기본적으로 Enter 키를 누르면 새로운 노트가 생성되거나 현재 노트의 내용이 변동될 수 있지만, 이 코드는 document.execCommand("insertLineBreak")를 사용하여 대신 줄 바꿈을 삽입합니다

- event.preventDefault()는 기본 동작을 막아, Enter 키를 누를 때 새 노트가 생성되거나 다른 원치 않는 동작이 발생하지 않도록 합니다.

우리가 가끔 패스워드를 비밀번호찾기를 하게되는데 

그때 임시비밀번호로 프로그램에서 만들어주는 비밀번호를 이메일로 받게되는 경우가 있었다

그때의 기억을 되살려 보며 랜덤패스워드를 만들어보자 

이 프로그램은 '비밀번호 생성하기' 버튼을 누르게 되면 

영어 소문자, 대문자, 숫자, 특수문자를 조합하여 12자리의 랜덤비밀번호를 생성한다

그리고 옆의 복사하기 버튼을 누르면 해당 비밀번호를 복사할 수 있다

코드 설명 

변수 설정 

const passwordBox = document.getElementById("password");
const length = 12;

const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerCase = "abcdefghijklmnopqrstuvwxyz";
const number = "0123456789";
const symbol = "@#$%^&*()_+~|}{></-=";

const allChars = upperCase + lowerCase + number + symbol;

-  passwordBox는 id가 password인 요소를 선택하여 참조하는 변수이다. 이 요소는 사용자가 생성된 비밀번호를 볼 수 있는 input box이다. 

- length는 생성되는 비밀번호의 길이를 나타내는 변수로 여기서는 12자로 설정되어 있다. 

- 아래 uppserCase는 대문자, lowerCase는 소문자, number는 숫자, symbol은 특수문자 문자열을 담는 변수이다. 이것들은 랜덤비밀번호를 생성할 때 랜덤하게 선택하여 생성해서 사용하게 된다. 

- allChars변수는 대문자, 소문자, 숫자, 특수문자를 모두 포함하는 문자열이다. 비밀번호를 생헝할 때 이 문자열에서 랜덤하게 문자를 선택하게 된다.

CreatePassword() 함수 

function createPassword() {
  let password = "";
  password += upperCase[Math.floor(Math.random() * upperCase.length)];
  password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
  password += number[Math.floor(Math.random() * number.length)];
  password += symbol[Math.floor(Math.random() * symbol.length)];

  while (length > password.length) {
    password += allChars[Math.floor(Math.random() * allChars.length)];
  }
  passwordBox.value = password;
}

- 생성하기 버튼을 누르게되면 실행되는 함수이다. 

- password라는 빈 문자열을 초기화하고 대문자, 소문자, 숫자, 특수문자 각각에서 하나씩 랜덤하게 선택해서 password에 추가한다. 이렇게 하면 최소한 하나의 대문자, 소문자, 숫자, 특수문자가 비밀번호에 포함되도록 보장할 수 있다. 

- 이후 while 루프를 사용하여 password의 길이가 length(12)보다 작을 때 까지 allCahrs문자열에서 랜덤하게 문자를 선택해 password에 추가한다. 

- 마지막으로 생성된 비밀번호를 passwordBox입력 상자의 값으로 설정한다. 

copyPassword()함수 

function copyPassword() {
  passwordBox.select();
  document.execCommand("copy");
}

이 함수는 생성된 비밀번호를 복사하는 역할을 한다. 

- passwordBox.select()는 passwordBox입력상자의 내용을  선택한다. 

-document.execCommand('copy')는 선택된 내용을 클립보드로 복사한다. 사용자는 이제 이 비밀번호를 다른 곳에 붙여 넣을 수 있게 된다. 

끝 

매우 간단한 프로그램이다! 

다만, 이렇게 생성된 문자열의 경우 앞의 4자리가 대문자, 소문자, 숫자, 특수문자로 고정된 위치에 만들어 진다는 점이 매력이 떨어지는 것 같다. 모든 문자들이 포함되면서 랜덤하게 생성될 수 있는 알고리즘에 대해서 고려해 봐야될 거 같다.