Day18

Day18

컴포넌트 방식으로 생각하기

• UI의 어떤 요소들을 Component 단위로 추상화하고 응집력있게 개발하는 방법

• TodoList Component 만들기
  • main.js ```javascript const data = [ { text: ‘JavaScript 공부하기’ }, { text: ‘JavaScript 복습하기’ } ]

  const data1 = [ { text: ‘베이스 연습하기’ }, { text: ‘턱걸이 하기’ }, { text: ‘공부하기’ } ]

  const $app = document.querySelector(‘.app’) new TodoList({ $target: $app, initialState: data })

  new TodoList({ $target: $app, initialState: data1 })

  - todolist.js
  ```javascript
  // params.$target = 해당 컴포넌트가 추가될 DOM 엘리먼트
  // params.initialState = 해당 컴포넌트의 초기 상태
    
  function TodoList({ $target, initialState }) {
      const $todoList = document.createElement('div');
      $target.appendChild($todoList);
    
      this.state = initialState;
    
      this.render = () => {
          $todoList.innerHTML =
          `
          <ul>
              ${this.state.map(({ text }) => `<li>${text}</li>`).join('')}
          </ul>
          `
      }
    
      this.render();
  }
  

• TodoForm Component 만들기

  ❌ TodoForm 생성 파라미터에 TodoList를 넣고 직접 참조하면 TofoForm에 TodoList 컴포넌트의 의존성이 강하게 생기게 됨.

  ✅ TodoForm 생성 파라미터에 이벤트 콜백을 넣고, text를 입력받으면 해당 콜백을 통해 text를 넘겨줘야 한다.

  

• main.js에서 하는 작업을 App.js로 분리
• main.js에서는 component가 어디에 들어갈지 어떤 데이터가 들어갈지만 정의

• app.js에서는 app 전체에서 어떤 component들이 들어갈지 관리하는 기능

  

Client Side에서 데이터 저장하기

Cookie

• 쿠키는 브라우저에 저장되는 작은 문자열로 RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부
• 다른 저장 방법에 비해 가장 오래된 방식
• 추가할 때 이전의 cookie를 덮어씌우지 않고 새로 추가된다.
• 각 쿠키는 ;로 구분되어 있어서 split하여 써야 한다.
• 쿠키는 브라우저를 닫는 순간 다 날아가버리기 때문에 유효기간을 넣어야 한다.(팝업창에서 하루 보지 않게, 일주일 보지 않기 등으로 많이 활용된다.)
• expires와 max-age로 넣는 방법이 있다.
• HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크키도 커진다.
• 사이즈에 제한이 있다.
• 보안에 취약하다.

Local Storage

• key, value 기반으로 Local에 데이터를 저장할 수 있다.
• 도메인 기반으로 Storage가 생성된다. 도메인이 같다면 여러 탭 내에서 같은 Storage가 공유된다.
• 삭제하거나 Storage를 날리지 않는한 삭제되지 않는다.
• 값을 저장하는 방법엔 3가지가 있다.
  • window.localStorage.name = 'roto'
  • window.localStorage['name'] = 'roto'
  • window.localStorage.setItem('name','roto') ✅
• 저장, 불러오기, 삭제하기, 전체 삭제하기
  • 저장 : localStorage.setItem('name','roto')
  • 불러오기 : localStorage.getItem('name')
  • 삭제하기 : localStorage.removeItem('name')
  • 전체 삭제 : localStorage.clear()

• localStorage에는 string만 넣을 수 있기 때문에 JSON.stringify로 넣고 JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋다.