DAY7

Blcok chain

• 양뱡향 / 단방향
  : 양뱡향은 소통에 사용되고, 단방향은 주로 검증에 사용된다.
  ex) 단방향 : Id/pw 저장
  

---

• SHA(Secure Hash Algorithm, 안전한 해시 알고리즘)
  : 암호학적 해시 함수들의 모음이다. 이들 함수는 미국 국가안보국(NSA)이 1993년에 처음으로 설계했으며 미국 국가 표준으로 지정되었다. SHA-256은 2계열에 해당한다.

---

• SHA 256
  - Input -> Output 동일. 역산 불가 함수.
  - 결과물의 용량은 256bit이다. 16진수로 64자리이다. 어떤 크기의 입력값이 들어가더라도 동일한 용량을 가진 출력값이 나오게 된다.
  - SHA 256은 $2^{256} = 16^{64}$ 만큼 경우의 수를 만들수 있다. 엄청나게 큰 숫자이기는 하지만, 같은 결과물이 나올 확률이 없는 것은 아니다.

---

• 해시충돌 : 서로 다른 2개 혹은 그 이상의 입력값에 대해 동일한 출력값이 나오는 상황. 해시 충돌을 완벽하게 피할 수는 없지만, 그 가능성을 최대한 낮추어야 안전한 암호화적 해시 함수라고 할 수 있다.

Frontend

startScreen (quotes & 추가 버튼)

SCSS

• Add 버튼의 위치를 중앙으로 맞춰주고 마우스를 올렸을 때 보이도록 만듦

.quotesAddBtn {
      display: none;
      position: absolute; 
      top: 50%;
      right: 50%;
      transform: translate(50%, -50%);
    }
    &:hover {
      .quotesAddBtn {
        display: inline-block;
      }
    }

---

JS

• localStorage
  : localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다. 문자열로 저장 되기 때문에 객체나 배열를 저장하기 위해서는 객체를 문자열로 변환해서 저장해야 한다.

  localStorage.setItem(key, value) : key, value 추가
  localStorage.getItem(key) : value 읽어 오기
  localStorage.length : 전체 item 갯수
  JSON.stringify() : 객체, 배열을 문자열로 변환
  JSON.parse() : 문자열을 객체, 배열로 변환

---

• startScreen
  1) 명언 여러 줄 입력
  -> [JS] localStorage사용 > local storage는 배열이 저장되지 않음 > 파싱 작업
  (배열->문자, 문자->배열)이 필요함 > 읽어오기

function getQuotes() {
  const quotesMsg = document.querySelector(".quotesMsg");
  let savedQuotes = localStorage.getItem(QUOTES);  //localStorage에서 가지고 오기
  if (!savedQuotes) {
    localStorage.setItem( QUOTES, JSON.stringify(["개미는", "오늘도", "열심히", "일을하네"])); 
    //setItem:추가, stringify:배열->JSON문자열로 변경
    savedQuotes = localStorage.getItem(QUOTES); //문자열 가지고오기
  }
  let quotesArray = JSON.parse(savedQuotes); ///JSON문자열 -> 배열로 변경
  quotesMsg.innerText = quotesArray[Math.floor(Math.random() * quotesArray.length)]; 
  //랜덤한 문장 나오게 만들기
}

2) 새로운 명언 추가하기
-> [JS] 필요한 상수 선언 > 기존에 있던 명언 리스트 불러오기 > 새로운 명언 추가 > 추가된 목록 보내기

function onClickRegist() {
  const quotesMsg = document.querySelector(".quotesMsg");
  const newQuotes = document.querySelector(".newQuotes");
  const newQuotesInput = document.querySelector(".newQuotesInput");
  if (!newQuotesInput.value) {
    alert("내용을 입력해주세요");
    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 = "";
}