블록체인 TIL-2Week-14Day주말(일요일)

2023.03.26(일요일)

오늘은 오랜만에 늦잠을 잤다. 수영을 가고 싶었으나 정기휴관일인 관계로 1시간 걷는걸로 운동을 대체했다. 오랜만에 가족들과 만나서 점심도 먹고 커피도 한잔하면서 오랫만에 이런저런 이야기를 나누었다. 미용실에 가서 머리도 자르고 저녁까지 먹고난 후 자리에 앉았다. 이제 어제 마무리 하지 못했던 javascript 코드리뷰에 대해 정리는 해보도록 하겠다.

✅ 개인프로젝트 준비 Javascript(명언,등록버튼편).

function getQuotes() {
  const quotesMsg = document.querySelector(".quotesMsg");
  let savedQuotes = localStorage.getItem(QUOTES);
  }

• function getQuotes()

  • getQuotes 이라는 함수를 정의하여 명언을 가져오는 역할을 부여했다.

• const quotesMsg = document.querySelector(".quotesMsg");

  • ".quotesMsg" 클래스를 가진 HTML 요소를 가져와서 "quotesMsg" 변수에 할당했다. 이 HTML 요소는 명언을 나타내는 데 사용될 것이다. querySelector는 quotesMsg이라는 클래스를 가져오기 위해 작성되었다.

• let savedQuotes = localStorage.getItem(QUOTES);

  • 이 코드는 웹 브라우저에서 사용되는 "localStorage"라는 기술을 이용하여, "QUOTES"라는 이름으로 저장된 값을 불러와 "savedQuotes"라는 변수에 저장하는 역할을 한다.

  • localStorage는 브라우저 내부에 작은 데이터를 저장할 수 있는 기술이다. 이를 이용하면 사용자가 다시 웹사이트에 방문해도 이전에 입력한 정보를 그대로 유지할 수 있다.

  • getItem() 함수는 localStorage에서 저장된 값을 불러오는 함수다. QUOTES는 localStorage에서 가져올 데이터의 식별자(키)다. 이후에 불러온 데이터는 "savedQuotes" 변수에 저장되며, 해당 변수를 이용하여 다양한 작업을 수행할 수 있다.

  • 즉, 이 코드는 이전에 저장된 "QUOTES" 데이터를 "savedQuotes" 변수에 불러와서 활용할 수 있도록 하는 코드다.

if (!savedQuotes) {
    localStorage.setItem(
      QUOTES,
      JSON.stringify([
        "열심히 살지맙시다.",
        "그래도 열심히 살자",
        "아니 싫어",
        "그럼말고",
      ]) 
    );
    savedQuotes = localStorage.getItem(QUOTES);
  }

• 이 코드는 localStorage에 대한 if문(조건문)이다.

  • localStorage는 브라우저 내부에 있는 작은 데이터 저장소이며, 이 코드에서는 QUOTES라는 상수를 선언하여 localStorage에 저장된 인용구를 나타낸다.

  • if문의 조건은 savedQuotes가 false나 undefined일 경우다. 즉, 이전에 저장된 인용구가 없거나 localStorage에서 QUOTES를 찾을 수 없는 경우, 기본 인용구를 localStorage에 저장하는 것이다. 설정한 기본 인용구는 "열심히 살지맙시다.", "그래도 열심히 살자", "아니 싫어", "그럼말고"로 구성된 배열이다.

  • 이 배열은 JSON.stringify를 사용하여 문자열로 변환되고, localStorage.setItem을 사용하여 QUOTES라는 키에 저장된다.

  • 따라서 이 코드는 이전에 저장된 인용구가 없는 경우에만 기본 인용구를 localStorage에 저장하는 것을 말한다.

• savedQuotes = localStorage.getItem(QUOTES);

  • 이 코드는 브라우저의 localStorage에서 'QUOTES'라는 이름으로 저장된 값을 불러와 'savedQuotes' 불러오는 기능을 구현하는 코드다.

let quotesArray = JSON.parse(savedQuotes);
   quotesMsg.innerText =
    quotesArray[Math.floor(Math.random() * quotesArray.length)];

• let quotesArray = JSON.parse(savedQuotes);

  • 이 코드는 savedQuotes라는 문자열을 JSON 객체로 변환한 다음, quotesArray라는 변수에 할당.

  • JSON 객체는 일반적으로 JavaScript 배열 또는 객체를 저장하는 데 사용된다.

• quotesMsg.innerText = quotesArray[Math.floor(Math.random() * quotesArray.length)];

  • 이 코드는 quotesArray 배열의 요소 중 하나를 무작위로 선택하여 quotesMsg 엘리먼트의 텍스트 내용으로 설정한다.

  • Math.random() 함수는 0과 1 사이의 무작위 숫자를 반환하므로, Math.floor(Math.random() * quotesArray.length)는 quotesArray의 무작위 index를 생성하는것을 말한다.

  • 따라서 이 코드는 저장된 인용구 목록을 불러오고, 그 목록에서 무작위 인용구를 선택하여 화면에 표시하는 것을 말한다.

getQuotes();

• getQuotes를 호출하기 위해 필요한 코드.

function onClickAdd() {
  const newQuotes = document.querySelector(".newQuotes");
  newQuotes.style.display = "inline-block";
}

• function onClickAdd()

  • onClickAdd 이라는 함수를 function으로 정의한다.

• const newQuotes = document.querySelector(".newQuotes");

  • 이 코드는 document.querySelector() 메소드를 사용하여 HTML 문서에서 .newQuotes class를 갖는 요소(element)를 찾아온다. 그리고 HTML 문서에서 특정 클래스를 가진 요소를 찾아서 해당 요소를 newQuotes 변수에 저장하는 역할을 합니다. 이후에 newQuotes 변수를 사용하여 요소를 수정하거나 조작할 수 있다.

• newQuotes.style.display = "inline-block";

  • 이 코드는 newQuotes라는 이름을 가진 HTML 요소를 선택하고, 이 요소의 display 속성을 "inline-block"으로 설정하여 해당 요소를 보이도록 만든다.

  • newQuotes는 HTML 문서에서 id 속성이 "new-quotes"인 요소를 나타낸다. style.display는 CSS의 display 속성에 해당하는 것으로, 이 속성은 요소를 어떻게 표시할지를 결정한다. "inline-block" 값은 요소를 인라인 텍스트와 같은 방식으로 배치하면서, 블록 요소의 특성을 가지도록 하는 값이다.

function onClickRegist() {
  const quotesMsg = document.querySelector(".quotesMsg");
  const newQuotes = document.querySelector(".newQuotes");
  const newQuotesInput = document.querySelector(".newQuotesInput");

• function onClickRegist()

  • onClickRegist() 함수는 사용자가 등록 버튼을 클릭했을 때 실행되는 함수로, 사용자가 입력한 폼 데이터를 검증하고, 서버에 전송하여 사용자를 등록하는 역할을 한다.

• const quotesMsg = document.querySelector(".quotesMsg");

  • 이 코드는 HTML 문서 내에서 class가 ".quotesMsg"인 요소를 찾아서, 그 요소를 quotesMsg라는 변수에 할당한다. 이때, quotesMsg라는 변수에 할당하기 위해 document.querySelector()를 사용한다.

• const newQuotes = document.querySelector(".newQuotes");

  • 이 코드는 HTML 문서 내에서 class가 ".newQuotes"인 요소를 찾아서, 그 요소를 newQuotes라는 변수에 할당한다. 이때, newQuotes라는 변수에 할당하기 위해 document.querySelector()를 사용한다.

• const newQuotesInput = document.querySelector(".newQuotesInput");

  • 이 코드는 HTML 문서 내에서 class가 ".newQuotesInput"인 요소를 찾아서, 그 요소를 newQuotesInput라는 변수에 할당한다. 이때, newQuotesInput라는 변수에 할당하기 위해 document.querySelector()를 사용한다.

if (!newQuotesInput.value) {
    return;

• if문(조건문)을 사용한 이 코드는 새로운 인용구를 입력하는 input 요소가 비어있다면 아무런 작업도 하지 않고 함수를 끝내버리는 역할을 한다. 이를 통해 프로그램 실행 시, 불필요한 코드 실행을 막고 효율적으로 실행 시간을 관리할 수 있다.

  • 여기서 ! 연산자는 논리 부정 연산자이며, newQuotesInput.value가 false 값을 반환하는 경우에 true를 반환하고, 그 반대의 경우에는 false를 반환한다. 따라서, 만약 newQuotesInput.value가 비어있다면 if문 안에 있는 return 키워드가 실행되어 함수의 실행이 즉시 종료된다. 그렇지 않은 경우, 이후에 다른 코드가 실행된다.

let savedQuotes = localStorage.getItem(QUOTES);
 
   let quotesArray = JSON.parse(savedQuotes);
   quotesArray.push(newQuotesInput.value);
   
 localStorage.setItem(QUOTES, JSON.stringify(quotesArray));

  quotesMsg.innerHTML = `<span style="color:white;">${newQuotesInput.value}</span>`;
  newQuotes.style.display = "none";
  newQuotesInput.value = "";

  console.log(newQuotesInput.value);

• let savedQuotes = localStorage.getItem(QUOTES);

  • 이 코드는 웹 브라우저에서 사용되는 "localStorage"라는 기술을 이용하여, "QUOTES"라는 이름으로 저장된 값을 불러와 "savedQuotes"라는 변수에 저장하는 역할을 한다.

• let quotesArray = JSON.parse(savedQuotes);

  • 이 코드는 JSON 형식으로 저장된 문자열을 자바스크립트 객체로 변환하는 역할을 한다. 여기서 savedQuotes는 이전에 localStorage에서 'QUOTES'라는 이름으로 가져온 값이다. 이 값은 JSON 형식으로 저장되어 있다.

  • JSON.parse()는 JSON 형식으로 작성된 문자열을 자바스크립트 객체로 변환하는 메서드다. 따라서, let quotesArray = JSON.parse(savedQuotes); 코드는 이전에 가져온 JSON 형식의 문자열을 자바스크립트 객체인 quotesArray 변수에 할당한다.

• quotesArray.push(newQuotesInput.value);

  • quotesArray라는 배열에 새로운 값을 추가하는 역할을 한다. 여기서 quotesArray는 이전에 localStorage에서 가져온 인용구 목록을 저장한 배열이다. 따라서, quotesArray.push() 메서드는 새로운 값을 배열의 끝에 추가하는 메서드다.

  • ex) 기존 저장된 배열이 있다면 그 내용에 추가로 작성된 명언을 저장한다.

  • 이렇게 인용구 목록을 저장하는 배열에 새로운 인용구를 추가하면, 이후에 해당 배열을 다시 로컬 스토리지에 저장하여, 브라우저를 종료해도 저장된 데이터를 유지할 수 있습니다.

• localStorage.setItem(QUOTES, JSON.stringify(quotesArray));

  • localStorage.setItem()은 localStorage에 데이터를 저장하는 메서드다. 이 때 첫 번째 인자(QUOTES)는 저장할 key, 두 번째 인자(JSON.stringify(quotesArray))는 해당 key에 저장할 value이다.

  • QUOTES는 인용구 목록을 저장할 key의 이름을 나타내는 상수다. quotesArray는 이전에 새로운 인용구를 추가한 후에 저장한 배열이다. 이 배열은 이전에 JSON 형식으로 문자열로 변환하여 저장된 배열이다.

  • 따라서, JSON.stringify(quotesArray)는 quotesArray 배열을 JSON 형식의 문자열로 변환하는 메서드다. 이 문자열은 localStorage.setItem() 메서드의 두 번째 인자로 전달된다. 이전에 저장한 'QUOTES'라는 key의 value가 새로운 인용구가 추가된 배열로 업데이트된다.

• quotesMsg.innerHTML = <span style="color:white;">${newQuotesInput.value}</span>;

  • 여기서 quotesMsg는 새로운 인용구가 추가되는 메시지를 화면에 보여주는 HTML 요소를 나타낸다. 이 요소는 보통은 화면 상단에 위치하여, 새로운 인용구가 추가되면 해당 메시지를 표시한다.

  • newQuotesInput.value는 새로운 인용구를 입력하는 input 요소의 값을 나타낸다. 이 값은 ${newQuotesInput.value}로 문자열 템플릿 리터럴로 작성되어 있다. 이렇게 작성하면, 이전에 입력한 인용구를 문자열의 일부로 사용할 수 있다.

  • 태그는 인용구를 감싸는 HTML 요소다. 이 태그는 인용구에 스타일을 적용하기 위해 사용된다. 여기서는 인용구의 글씨색을 하얀색으로 설정하였다.

  • 따라서, quotesMsg.innerHTML = ${newQuotesInput.value}; 코드는, 새로운 인용구를 입력받은 input 요소의 값을 화면에 보여주는 메시지로 변환하는 코드다. 이 변환된 메시지는 quotesMsg 요소의 innerHTML 속성에 할당되어 화면에 표시된다.

• newQuotes.style.display = "none";

  • 이 코드는 인용구 목록에 새로운 인용구를 추가한 후, 입력 폼을 숨기는 역할을 한다.

  • newQuotes는 새로운 인용구를 입력받는 폼 요소를 나타냅니다. 이 폼 요소는 일반적으로 화면 상단에 위치하며, 새로운 인용구를 입력하는 용도로 사용된다.

  • style.display는 CSS 스타일 속성 중 하나로, HTML 요소가 화면에 표시되는 방법을 설정할 수 있다. 이 속성은 일반적으로 none, block, inline, flex 등의 값을 가질 수 있다.

  • newQuotes.style.display = "none"; 코드는, 새로운 인용구가 추가된 후에, newQuotes 폼 요소를 화면에서 숨기는 역할을 한다. 이를 통해 사용자가 새로운 인용구를 계속해서 입력하는 것을 방지할 수 있다.

• newQuotesInput.value = "";

  • 이 코드는 새로운 인용구를 입력하는 input 요소의 값을 초기화하는 역할을 한다.

  • 여기서 newQuotesInput은 새로운 인용구를 입력하는 input 요소를 나타낸다. 이 input 요소는 일반적으로 newQuotes 폼 요소 내부에 위치하며, 사용자가 인용구를 입력하고 추가 버튼을 누르면, 해당 값이 처리되는 용도로 사용된다.

  • value는 input 요소의 현재 값을 나타내는 속성이다. 이 속성을 빈 문자열("")로 설정하면, input 요소의 값을 초기화할 수 있다.

  • 따라서, newQuotesInput.value = ""; 코드는, 새로운 인용구가 추가된 후에, newQuotesInput input 요소의 값을 초기화하는 역할을 한다. 이를 통해 사용자가 다시 새로운 인용구를 입력하기 위해 폼 요소를 클릭할 때마다 기존 입력 값이 자동으로 삭제된다.

• console.log(newQuotesInput.value);

  • console.log(newQuotesInput.value) 코드는 입력한 새로운 인용구 값을 개발자 도구 콘솔에 출력하는 역할을 한다.

  • value는 input 요소의 현재 값을 나타내는 속성이다. 따라서, newQuotesInput.value는 사용자가 입력한 새로운 인용구를 나타낸다.

🌜하루를 마치며..

코드를 알아보며 정말 javascript는 어렵다는걸 느꼈다. 물론 작성하는법, 어떤 상황에 쓰는지 정도만 들었으니 내가 제대로 이해하고 넘어가지 못하는건 당연하지만 결국 그 과정에서 내가 부족한 지식을 채워야하는것도 맞기에 부담감이 더한것같다. 충분히 나의것으로 만들어야 내능력이 되는데 그렇지 못하고 따라가기에 급급하니 조바심이 더 나는것 같다. 주말에 혼자 공부를 해보며 이렇게 하는게 잘하고있는건지 의구심이 들었다. 내가 하나하나 알아보며 이해하려고 해도 이해가 안되는 부분도 있고, 이해가 되어도 나중에 머릿속에서 딱! 하고 떠오르지 않을때면 답답함을 느낀다. 이렇게 하는게 맞는걸까? 내일 또 진도를 나갈텐데 단순히 코드 따라치기를 하는게 맞는걸까? 모르겠다. 어떻게 해야하는지. 오늘도 열심히 해본다고 했지만 정말 모르겠다. 정말.