[TIL #19] 231107_함수 파라미터, classList, UUID 설치 및 생성방법

Bora.K | 권보라·2023년 11월 7일

JavaScript React TIL

TIL

목록 보기

19/51

오늘 한 일

[스탠다드반] 투두리스트 만들기 Zoom 수업
[베이직반] 1회차 녹화본 수강 및 과제
[알고리즘] Level.1 5문제 풀기

학습내용

오늘부터 알고리즘 문제를 풀기 시작했다. 아직 레벨1의 초반이라 나름 간단한 문제들이었다. 간단하지만 아직 모르는 메서드들이 있어서 찾아가면서 풀어서 생각보다는 오래 걸렸다.
알고리즘 Level.1 문제풀이 기록

함수에 파라미터 넣기

함수를 만드는 이유는?

반복해서 사용하는 코드를 저장하여 코드 재사용하기 위해!

함수 이름으로 어떤 기능을 하는지 표현하여 누구나 쉽게 이해할 수 있도록 하기 위해!

1. 모달창에 UI 채워넣기

<body>
  <div>본문</div>
  <button class="modal-btn">모달열기</button>
  <div class="modal">
    <div class="modal-content">
      <input class="아이디" type="text" />
      <input class="비밀번호" type="password" />
      
      // 로그인하기 클릭 시 뜨는 경고메세지----------
      <div class="경고메세지">
        아이디, 비번 채워넣으세요~~~!! <button class="경고창닫기">X</button>
      </div>
      //X 버튼 클릭 시에는 다시 안보이게-------------
      
      <button class="login">로그인하기</button>
      <button class="close-btn">닫기</button>
    </div>
  </div>
</body>

2. CSS로 숨기기

이 부분은 새롭게 배운 내용이다. '경고메세지'를 클래스 네임으로 갖는 div 요소의 CSS에 display를 none으로 한 다음 클릭 이벤트를 추가하여 클릭 시 '경고메세지'의 div 요소가 보이게(block), 또는 안보이게(none) 만들 수 있다.

.경고메세지 {
  color: red;
  display: none;
}

3. login 버튼 클릭 시 보이게, 경고창닫기 버튼 클릭 시 숨기게

document.querySelector(".login").addEventListener("click", function () {
  document.querySelector(".경고메세지").style.display = "block";
});

document.querySelector(".경고창닫기").addEventListener("click", function () {
  document.querySelector(".경고메세지").style.display = "none";
});

여기서 중복되는 부분인 document.querySelector(".경고메세지").style.display 이 부분을 파라미터(매개변수)가 있는 함수로 만들어 처리할 수 있다. 값 자리에 block, none이 와서 함수를 실행할 수 있다.

function 경고메세지열닫(값) {
  document.querySelector(".경고메세지").style.display = 값;
}

document.querySelector(".login").addEventListener("click", function () {
  경고메세지열닫("block");
	// => document.querySelector(".경고메세지").style.display = "block"; 
});

document.querySelector(".경고창닫기").addEventListener("click", function () {
  경고메세지열닫("none");
	// => document.querySelector(".경고메세지").style.display = "none"; 
});

clssList.add/remove/toggle

1. classList 사용

classList.add(클래스네임) 해당 클래스를 클래스리스트에 추가하여 속성을 추가
classList.remove(클래스네임) 해당 클래스를 글래스리스트에 삭제하여 속성을 제거
classList.toggle(클래스네임) 해당 클래스 속성이 없으면 추가하고, 있으면 제거

show에는 css 속성이 들어가 있음

document.querySelector(".modal-btn").addEventListener("click", function () {
  document.querySelector(".modal").classList.toggle("show"); // -> 여기
});

document.querySelector(".close-btn").addEventListener("click", function () {
  document.querySelector(".modal").classList.toggle("show"); // -> 여기
});

중복되는 부분 함수로 넣기

// toggleModal
function 모달창열닫() {
  document.querySelector(".modal").classList.toggle("show");
}

document.querySelector(".modal-btn").addEventListener("click", function () {
  모달창열닫();
});
document.querySelector(".close-btn").addEventListener("click", function () {
  모달창열닫();
});

현재 날짜, 시간 구하기

1. 현재 날짜 구하기

new Date()

2. 현재 연도, 월, 일, 요일 구하기

getFullYear() : Date 객체의 년도를 가져온다.
getMonth() : Date 객체의 월 정보를 가져온다. 1월은 0으로 표현(0~11)
getDate() : Date 객체의 일자 정보를 가져옴(0~31)
getDay() : Date 객체의 요일 정보를 가져옴(0~6) (일요일이 0, 토요일이 6으로 표현)

3. 현재 시간, 분, 초 구하기

getHours() : Date 객체의 시간을 가져온다.(0~23)
getMinutes() : Date 객체의 분 정보를 가져온다. (0~59)
getSeconds() : Date 객체의 초 정보를 가져온다. (0~59)

UUID 사용하여 id값 불러오기

UUID는 이번 투두리스트 만들기를 진행하며 알게된 것으로, 이 부분은 처음 접하여서 나는 id값을 통해 완료, 취소, 삭제 버튼 구현을 못했었는데, 오늘 스탠다드반 수업을 통해 id값을 자동으로 설정해 주는 UUID에 대해 알게되어 UUID가 무엇인지에 대해 알아보았다.

1. UUID(Universally Unique Identifier)란?

범용 고유 식별자를 의미하는 것으로, 쉽게 말하면 각각의 개체에 중복되지 않도록 고유한 값 즉, id를 부여하는 것이다. 투두리스트를 만들 때 각각의 리스트에 id값을 부여하여 완료, 취소, 삭제 처리를 할 수 있다.

UUID는 무작위로 생성된다.
중복될 가능성이 거의 없는 고유성을 보장받는다.
전 세계에서 고유한 값으로 취급되어 여러 시스템간 교환, 통합에 유용하다.

2. UUID의 구조

UUID는 16바이트 형태를 가지고 있으며, 하나의 UUID 길이는 36자리이며, 4개의 하이픈과 32개의 16진수 문자열로 구성되어 있다. 어려워서 그냥 내용만 알고 지나가도 될 듯 하다.

3. UUID 사용

설치
npm: npm install uuid
yarn: yarn add uuid
UUID 모듈 import

import { v4 as uuidv4 } from 'uuid';
);

UUID 생성

const myUUID = uuidv4();
console.log(myUUID);

오늘의 회고

오늘부터 알고리즘 문제 풀이를 시작했다. 아직 레벨1이라 난이도가 쉬운 문제들이 많지만, 그 중에도 막히는 것들이 있다. 알고리즘을 풀면서 모르는 메서드를 찾아보면서 많이 배울 것 같다.
오늘 스탠다드반 수업에서 투두리스트 만들기를 1시간 타임어택으로 진행했다. 개인 과제에서도 투두 추가하는 것까지만 구현하고 완료, 취소, 삭제 버튼 구현은 못했었는데... 그걸 다시, 그것도 한 시간 안에 만들기라니... 당황스러웠지만, 내가 구현할 수 있는 데까지는 구현했다. 오늘 강의하면서 UUID라는 것을 알아서 이걸 활용해서 구현 못했던 투두리스트 과제를 다시 구현해 봐야겠다.
도저히 강의와 특강, 과제가 버겁게 느껴지고, 강의 속도가 너무 느려서 계획을 체계적으로 세워야겠다는 생각이 들었다. 그래서 노션 템플릿을 찾아서 나에게 맞게 수정을 했다. 그래서 오늘부터 개발일지를 작성했다. 강의별로 2회독을 목표로 주간, 일간 일정을 계획하고 수시로 나오는 특강과 수준별 수업 일정도 확인해서 유연하게 조절하려고 한다. 오늘 물론... 계획한 것을 다 체크하진 못했지만, 해야할 일을 계획해두니 할 게 너무 많아서 막연하게 느껴지던 것들을 그래도 하게 되는 것 같다.