js로 기초적인 코드 구현

오늘은 js의 기초 구현에 대해 공부해봤다. 그냥 이전에는 말그대로 막구현했다면, 이제는 조금 더 컴포넌트 기반으로 설계할 수 있는 게 눈에 조금씩 들어온다.

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

특정 라이브러리 방식으로 생각하지 않고 컴포넌트 방식으로 생각하자!
필요한 기능들을 독립적이면서도 집약적으로 코드를 짜야 한다.

컴포넌트에서는 다른 컴포넌트를 건들면 안된다. 의존성이 생기기 때문이다.
컴퓨넌트 생성 파라메터에 이벤트 콜백을 넣고, 해당 콜백을 통해 다른 컴포넌트에 데이터 등을 넘겨주어야 한다.

그냥 단순히 구현만 하면 어디서 어딜 고쳐야 할지 알기가 힘들다. 그래서 저번 프로젝트에서 마지막에는 코드를 찾느라 한참 시간이 오래 걸렸다.. 나 혼자 하는 데도 그랬으니.. 협업에서는 완전히 엉망진창일 것이다..

컴포넌트 방식으로 구현하면 어딜 고쳐야 하는지, 또 그 부분만 고치면 되는 것이 명확하다!

더불어 localStorage에 대해 공부했다.

Client side 에서 data 저장하기

cookie
브라우저에 저장되는 작은 문자열, rfc 6265명세에서 정의한 http 프로토콜의 일부이다.

document.cookie='language=javascript'

key=value 형태로 저장됨.

cookie에 유효기간 넣기

document.cookie='user=name; expires=[날짜(GMT)]'

// GMT 시간 확인 방법
new Date().toGMTString();
=> gmt 기준 시간 나옴

쿠키 주의사항
http요청 시 헤더에 쿠키가 같이 나가기 때문에
쿠키 사이즈가 커지면 http요청 크기도 커진다.
사이즈 제한이 있고, 여러가지 보안 취약점을 조심해야 한다.

Local Storage

• key value 기반으로 local에 데이터를 저장할 수 있다.
• 도메인 기반으로 Storage가 생성된다.
• 도메인만 같다면, 여러 탭 내에서 같은 Storage 가 공유된다.
• 삭제하거나 Storgage를 날리지 않는 한 삭제되지 않는다.

• 값을 저장하는 방법은 크게 세 가지가 있다.

window.localStorage.name = 'doong';
window.localStorage['name'] = 'doong';
window.localStorage.setItem('name', 'doong');

그 중 setItem을 이용해 사용하는 것이 권장된다.
property를 수정하는 식으로 하면 localStorage의 기존에 있던 length, toString같은 내장함수들을 덮어씌울 수 있기 때문이다.

localStorage.setItem('name', 'doong'); // 저장
const storedName = localStorage.getItem('name'); // 불러오기
localStorage.removeItem('name') // 해당 값 삭제
localStorage.clear() // 전체 삭제 

localStorage에는 string만 넣을 수 있기 때문에, Json.stringify로 넣고
JSON.parse로 거낸 값을 파싱해야 한다.
=> 이거 몰라서 해맸던...

Session Storage

전체적으로 local Storage와 같다.
브라우저를 닫으면 저장된 내용이 초기화된다.
상황에 따라 local / session을 용도에 맞게 써야 한다. ☺️

local storge 의 값을 json이 아닌 형태로 바꾸면 에러가 발생한다. 따라서 에러 처리를 위해 try, catch를 묶어 처리한다.
특히 set item 같은 경우에는 용량 제한이 있기 때문에 요청 부분이 꼬이거나 에러가 나을 수 있다. 따라서 최대한 storge 처리는 한 파일에 묶어 처리한다!