[TIL] DAY-11 자바스크립트 기본역량

5taecoo·2022년 4월 5일
0

TIL

목록 보기
10/12
post-thumbnail

명령형 프로그래밍과 선언형 프로그래밍

명령형 프로그래밍

명령형 프로그래밍(Imperative programming)은 어떤 방법(How)으로 할것인지에 가깝다. 알고리즘을 명시하지만 목표는 명시하지 않는다. 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다. 또한, 프로그램의 제어 흐름을 설명하기 위해 제어문을 사용한다.

선언형 프로그래밍

선언적 프로그래밍은 무엇인가(What)를 작업하기 위한 방법을 정의하는 것을 의미한다. 제어 흐름을 설명하지 않고 계산 논리에 집중하는 프로그래밍 패러다임이다.

  • 결과만 기술할 뿐 어떻게는 기술하지 않는 프로그래밍 방법

  • 의도에 집중한 프로그래밍 방법

선언형 프로그래밍할 때 고려할 점

  • 응집도: 하나의 목적을 가진 코드를 뭉치기.

  • 단일책임: 함수가 한가지 기능을 하도록 하기.

  • 추상화: 함수의 세부구현 단계를 일치시키기.


컴포넌트 방식으로 간단한 TodoList 구현


쿠키는 브라우저에 저장되는 작은 문자열로
RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부

다른 방식에 비해 제일 오래된 방식이다.

  • HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다.
  • 사이즈 제한
  • 여러가지 보안 취약점 조심

local Storage

  • key, value 기반으로 local에 데이터를 저장.

  • 도메인 기반으로 storage가 생성

    도메인만 같다면, 여러탭 내에서 같은 storage가 공유.

  • 삭제하거나 storage를 날리지 않는 한 삭제되지 않는다.


값을 저장하는 방법은 크게 세 가지가 있는데 setitem을 이용해 사용하는 것이 권장된다.

property를 수정하는 식으로 하면 length, toString 같은 내장 함수들을 덮어 씌울 수 있기 때문.

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

const user = {
	name: '5taecoo',
	position: 'front-end',
}
// 저장
localStorage.setItem( 'user', JSON.stringify( user ))
// 불러오기
const storedName = JSON.parse(localStorage.getItem( 'name' ))

회고🥲

오늘 공부한 것 중 컴포넌트 방식에 대해서 많이 찾아봤는데 컴포넌트가 나온 이유는
다른 모듈과의 호환을 생각하지 않고 개발하면 이는 결국 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인 이 되기에 소프트웨어의 재사용의 중요성과 필요성 을 위해서 써야한다는 점을 인지하고 관점에 따라 다양하지만 재사용 부품으로서의 컴포넌트가 되기 위해서는 여러가지 조건들을 생각하면서 사용해야 한다는 것. 원래 알고 있는 내용이라 생각하였지만 오늘 공부하면서 느낀 것은 내가 안다고 생각이 들어도 설명 못한다면 그것은 착각이라는 것을 다시 한번 느꼈다.

profile
프론트엔드를 꿈꾸며 개발을 공부 합니다.

0개의 댓글