#TIL_21.08.23

컴포넌트 방식으로 생각하기(w. To Do List)

ToDoList

// params.$target ... 해당 컴포넌트가 추가가 될 DOM 엘리먼트
// params.initialState ... 해당 컴포넌트의 초기 상태

// 변수 앞 $ ... DOM 객체를 담고있는 변수 라는 의미 (개인적으로 사용하는 것)
// 또는, 접미사에 Element를 붙여 todoListElement 로 사용 가능
const $todoList = document.createElement('div')
const $target = params.$target
$target.appendChild($todoList)

...

${this.state.map(todo => `<li>${this.state[i].text}</li>`)
  // -> ['<li>자바스크립트 공부하기</li>', '<li>...</li>']
  // join('') 이후에는
  // <li>자바스크립트 공부하기</li><li>...</li> ...
  
...

• ES6로 넘어오면서 위 코드에서 바로 객체에서 값들을 꺼내오게끔 수정할 수 있다.

// params 대신 객체로 $target 과 initialState를 바로 꺼내올 수 있다.
function TodoList({ $target, initialState }) {

...

$todoList.innerHTML = `
  <ul>
    // 마찬가지로, todo 대신 text 를 바로 꺼내서 쓸 수 있다.
    ${this.state.map(({ text }) => `<li>${text}</li>`).join('')}
  </ul>
`
...

---

ToDoForm

if(!isInit) {
  // form 의 submit 은 해당 Input에 입력된 값을 url로 전송된다.
  // 이를 방지하기 위해 preventDefault를 선언
  ...
  
  $form.addEventListener('submit', e => {
    e.preventDefault()

  // input 의 name이 todo 인 것을 선택하여 .value 를 통해 입력된 값을 text로 저장
    const text = $form.querySelector('input[name=todo]').value
}

...

---

ToDoForm 에서 입력 받은 값을 ToDoList 에 넣으려면?

• ToDoForm 생성 파라미터에 이벤트 콜백을 넣고, text 를 입력 받으면 해당 콜백을 통해 text를 넘겨주는 방법

// -----main.js-----

// onSubmit
new TodoForm({
  $target: $app,
  onSubmit: (text) => {
    ...
  }
})


// -----ToDoForm.js-----

// text를 onSubmit 으로 넘겨준다.
function TodoForm({ $target, onSubmit }) {
  ...
  
}

---

TodoList 에 상태를 변할 수 있게 만들기

// -----TodoList.js-----

// 현재의 상태를 바꾸고, render를 다시 호출 
this.setState = nextState => {
  this.state = nextState
  this.render()
}

// -----main.js-----

const nextState = [...todoList.state, {
  text
}]
todoList.setState(nextState)

---

todo 추가 후 input 비우기

// -----todoForm.js----- 

// const text = $form.querySelector('input[name=todo]').value
// 를 $todo 와 text로 나누고, todo의 value 를 비워준다.

const $todo = $form.querySelector('input[name=todo]')
const text = $todo.value

$todo.value = ''

• 위 코드는 아무것도 입력을 하지 않았을 때에도 todo 에 추가하게 된다.

if (text.length > 1) {
  $todo.value = ''
  
  onSubmit(text)
}

• $todo.value 를 위처럼 if 로 입력값이 2글자 이상일때만 동작하도록 수정한다.

---

Client Side 에서의 데이터 저장

cookie

• 쿠키는 브라우저에 저장되는 작은 문자열 (HTTP 프로토콜의 일부)

• 가장 오래된 저장 방식

• cookie 추가: document.cookie = 'language=js' ... 이전 쿠키를 덮지 않고 key=value 형태로 새로 추가됨

• cookie 읽어 오기: const cookies = document.cookie ... 쿠키는 ; 로 구분되어 있어, split 등으로 쪼개서 사용해야 함

• cookie 는 유효기간을 넣지 않으면 브라우저를 닫는 순간 사라지게 됨 (ex. 오늘 하루 열지 않기, 14일 동안 열지 않기 등...)

  • cookie 유효기간 넣기: document.cookie = 'user=krungy; expires=Wed, ~~~(GMT 시간 기준으로 넣어야 함) ... new Date().toGMTString() 을 통해 GMT 시간을 구할 수 있음
  • max-age 를 통해 유효기간을 넣을 수 있음. (초 단위)

Cookie 주의사항

• HTTP 요청 시, 헤더에 쿠키가 같이 나가기 때문에, 쿠키의 사이즈가 커지면 HTTP 요청 크기도 커짐
• 사이즈에 제한이 있음
• 보안 취약점이 다수 존재함

---

Local Storage

• key, value 기반으로 Local 에 데이터를 저장
• 도메인 기반으로 Storage 가 생성됨 ... 도메인만 같다면, 여려 탭 내에서 같은 Storage 가 공유됨
• 삭제하거나 Storage 를 날리지 않는 한 삭제되지 않음 (브라우저를 껏다 켜도 유지됨)
• Local Storage 에는 string 만 넣을 수 있음
  - JSON.srtingify 로 넣고, JSON.parse 로 파싱해서 꺼내 사용하는 것이 좋음

Local Storage 에 값을 저장하는 세가지 방법

// key: name, value: 'krungy'
window.localStorage.name = 'krungy'
window.localStorage['name'] = 'krungy'
window.localStorage.setItem('name', 'krungy')

• setItem 을 사용하여 명시적으로 함수를 통해 값을 저장하는 방법이 가장 안전함

// 저장
window.localStorage.setItem('name', 'krungy')

// 불러오기
const storedName = localStorage.setItem('name')

// 삭제하기
localStorage.removeItem('name')

// 전체 삭제하기
localStorage.clear()

---

Session Storage

• 전체적으론 Local Storage 와 같음
• 브라우저를 닫거나, 브라우저에서 도메인의 모든 탭을 닫으면 저장된 내용이 초기화 됨 (Local Storage 와 다른점)
  - 로그인을 처리하거나, 임시값이 필요할 때 사용함
• Local Storage 사용법에서 localStorage 를 Session Storage 로 바꾸면 된다.

---

Simple Todo App 에 Local Storage 붙이기

// -----App.js-----

onSubmit: (text) => {
      ...
  localStorage.setItem('todos', JSON.stringify(nextState))
}

// -----main.js-----

// main.js 의 data 를 삭제하고, local storage 에서 꺼내게 함

const initialState = JSON.parse(localStorage.getItem('todos') || '[]')

• 하지만, 이 방식은 위험할 수 있음
  - ex) 외부 툴을 이용해 todos json sting 을 올바르지 않은 값으로 바꿔버릴 경우 ... 페이지가 로드되지 않음

• src/storage.js 를 만들어, 여기에서만 localStorage 에 접근하도록 해야 함 (try / catch 사용)

const setItem = (key, value) => {
  try {
    storage.getItem(key, value)
  } catch(e) {
    console.log(e)
  }
}

const getItem = (key, defaultValue) => {
  try {

    ...
    
    // storedValue 가 유효한 경우에만 parse
    // 문제가 있는 경우에는 defaultValue 리턴
    if(storedValue) {
      return JSON.parse(storedValue)
    }
    return defaultValue
  } catch(e) {
    return defaultValue
  }

...

---

회고

오늘은 간단한 to do list 를 통해 컴포넌트 방식을 익히고, 로컬 스토리지를 통해 to do list 의 데이터를 유지시키는 법을 학습하였다.

확실히 어제보다 조금 더 컴포넌트 방식이 익숙해지고 있는 것 같다. 아직은 이해가 안가는 부분이 조금씩 있지만, todolist 를 익히면서 오늘 짜놓은 코드를 보지 않고 새로 만들어 보는 것을 목표로 하고 있다.

to do list 만 만들었을 때는 그럼 만든 리스트를 어떻게 저장하지? 하는 생각을 했지만 바로 다음강의로 이 궁금증에 대한 강의를 진행해주셔서 뭔가 좋았다..

더 어려운 주제를 다루기 전에 얼른 컴포넌트에 익숙해져야겠다.