11일차 배운 것 정리

목차

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

1-1. 컴포넌트 방식으로 생각하기란

컴포넌트란

• UI를 선언적으로 표현하기 위해, 표현 부분을 추상화한 것
• <TodoForm / >은 투두리스트 앱에서 폼을 제출하는 동작이 표현되어 들어가있다.

• 독립적으로 기능할 수 있도록 묶어놓은 단위
• 투두리스트 앱 → TodoList > TodoForm > Header 의 조합

• 하나의 컴포넌트에 관련 기능이 묶이기 때문에, 특정 기능의 추가/수정 개발 시 해당 컴포넌트를 찾아 쉽게 수정/개발 할 수 있다.

• 컴포넌트는 여러개의 다양한 데이터를 반영한 컴포넌트로 재생성이 가능하며, 서로의 컴포넌트의 간섭을 주지 않는다.

1-2. 실습 - simpleTodoList 작성

• object구조분해할당 하여 TodoList({$target, initialState})로 바로 사용하기

• <script /> 의 위치
• body태그 아래쪽 (script실행 동안 브라우저렌더링 멈추기 때문에, 빈화면 보여주지 않기 위해서)
• 루트 script가 가장 아래쪽에 위치하도록 (위쪽의 js파일 부터 읽어지기 때문)

• <Form> 태그는 onClick 뿐 아니라 폼안에서 엔터버튼 누르면 제출 된다.

• <TodoForm> 과 <TodoList>가 서로 의존성을 가지지 않도록 하기 (up)
• BAD!! - TodoForm 생성 파라미터로 TodoList를 넣어 직접 참조하여, 리스트에 반영하는 방법
• GooD -(!) TodoForm의 외부에 onSubmit함수를 정의하고 인자로 onSubmit함수를 넘겨준다.
• 해당 컴포넌트 안에서는 onSubmit() 함수가 어떤지 관련이 없다. 인자로 받아 실행시킬 뿐 구현은 todoForm 외부에 존재
• TodoForm 관련 작업은 모두 TodoForm 에서만 고치면 되도록 되었다. (선언적)

2. Client Side에서 데이터 저장하기

2-1. 쿠키를 통한 데이터 저장

• 쿠키는 긴 물자열로 이루어져있으며, 하나의 쿠키는 세미콜론(;)으로 구분되어 있기 때문에 split() 메소드를 통해 쿠키를 구분할 수 있다.

2-2. local Storage

key-value 기반으로 local에 데이터를 저장하는 방법

• 도메인 기반으로 Storage 생성
• 도메인만 같다면, 여러탭 내에서 같은 Storage를 공유한다.

• 삭제하거나, Storage를 직접 전근하지 않으면 탭을 닫아도 삭제되지 않는다.

• 모든 키와 값은 문자열로만 받기 때문에, 객체와 같은 다른자료형을 사용시 JSON.stringify() & JSON.parse() 를 사용하여 저장 및 불러오기를 해야한다.

• window.localStorage.name = ‘outwater’
• or window.localStorage[’name’] = ‘outwater’

• window.localStroage.setItem(’key’, ‘outwater’)

• localStorage.getItem(’key’)

const storedName = localStorage.getItem('key') || '';

if(storedName){
	document.querySelector('#name').value = storedName
}

document.querySelector('#save').addEventListener('click', () => {
	localStorage.setItem('name', document.querySelector('#name').value)
})

document.querySelector('#remove').addEventListener('click', () => {
	localStorage.removeItem('name')
})

2-3 Session Storage

localStorage와 유사하지만, 브라우저 탭을 닫는 경우 모든 Storage가 삭제된다.

• 로그인 유지, 임시값 저장등에 사용된다.

• window.sessionStroage.setItem(’key’, ‘outwater’)

• sessionStorage.getItem(’key’)

• sessionStorage.removeItem('key')

2-4 localStorage 실습