TIL 이미지

선언형 프로그래밍

1. 명령형 프로그래밍

  • 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.
  • 어떻게 구현하는가를 디테일하게 기술

2. 선언형 프로그래밍

  • HTML, SQL 등
  • 어떻게 보다는 "무엇"에 초점이 있다.
    목표를 명시하고 알고리즘을 명시하지 않는다.
  • 선언형으로 작성하는 것이 좋다. 특히 UI 개발에서.

컴포넌트 개발

  • 컴포넌트? 독립적이고 재사용이 가능한 단위.
    유지보수가 쉬워진다는 장점.
  • $: Dom 객체를 담은 변수임을 표시 (개인적인 컨벤션)
  • 객체 디스트럭처링을 할 때는 ()로 감싸야 한다.
  • index.html은 src 폴더 외부에 둔다.
  • form 내부의 button은 type=”submit”이 기본값이다.
  • 컴포넌트 내부에서 다른 컴포넌트를 생성하면 두 컴포넌트 간에 의존성이 높아진다.
    이는 지양해야 한다. 콜백 함수를 통해 이를 해결할 수 있다.

웹 스토리지

1. 쿠키

  • 브라우저에 저장되는 작은 문자열
  • 가장 오래된 방식
  • document.cookie
  • 유효기간을 적지 않으면, 브라우저 종료 시 사라진다.
  • 사이즈 제한, 보안 취약점 등

2. 로컬 스토리지

  • key, value 기반으로 Local에 데이터 저장
  • 도메인 기반으로 스토리지 생성
    (도메인이 같으면 여러 탭에서 스토리지 공유)
  • 명시적으로 삭제하지 않는 한 유지된다.
  • 값을 저장하는 방법 3가지
window.localStorage.name = 'gihong';
window.localStorage['name'] = 'gihong';
window.localStorage.setItem('name', 'gihong');

setItem을 사용하는 것을 권장한다.

  • 조회
    getItem()
  • 삭제
    removeItem(), clear()
  • string만 저장할 수 있기 때문에,
    JSON.stringify로 넣고 꺼낸 값을 JSON.parse하는 것이 좋다.
  • try~catch문과 함께 사용하는 것이 좋다.
  • 스토리지를 관리하는 파일을 따로 만드는 것이 좋다.
const user = {
  name: 'gihong',
  position: 'vocal',
  songs: ['Singing in the rain']
};

// 저장
localStorage.setItem('user', JSON.stringify(user));

// 불러오기
const storedName = JSON.parse(localStorage.getItem('name'));

3. 세션 스토리지

  • 전반적으로 로컬 스토리지와 같다.
  • 현재 사이트의 모든 탭이 닫히거나, 브라우저가 종료되면
    저장된 내용 초기화

참고자료

데브코스 11일차 강의