Local storage 사용

로컬 스토리지는 사용자의 쿠키를 사용하지 않고 사용자 페이지에 대한 데이터를 저장할 수 있는 방법으로 임시적인 데이터에 대한 저장이나 호출을 할 수 있는 방법으로 페이지에 대한 저장을 시행함으로 URI에서 불러들여와 사용하는 방법이다.

localStorage의 사용은 set 과 get을 통해 이루어 진다.

twittler 구현시에 사용한 localStorage 함수

// 로컬 스토리지에 'data' : arr 객체를 저장한다.
const setStorage = (arr) => { 
  localStorage.setItem('data', JSON.stringify(arr));
}

// localStorage에 저장된 JSON 형식의 데이터를 불러와 저장한다.
const getStorage = () => {
  return JSON.parse(localStorage.getItem('data'));
}

데이터를 로컬에 저장하는 방법으로 localStorage가 비어있다면 setStorage하는 방법으로 사용된다.

비어 있지 않다면 이미 저장된 Storage의 정보를 읽어 온다.

let dataObj = localStorage.getItem('data') 
  ? JSON.parse(localStorage.getItem('data'))
  : setStorage(DATA);

데이터를 업데이트 시에 setItem을 사용할 때 기존의 객체의 데이터를 덮어 씌워 새로 arr 자체를 조작하여 추가해주어야만 한다. 때문에 update 함수를 별도로 선언 하였다.

function updateStorage(data) {
  let tempdata = getStorage();
  tempdata.push(data);
  setStorage(tempdata);
}

코플릿 review

고차함수 method들에 대한 좀 더 학습이 필요함

고차함수 (opens new window) ← 이것은 백링크

.map → 새로운 배열을 리턴

.foreach → 리턴값은 항상 undefined이다.

트위틀러 기능의 구현에서 배울 수 있었던 것

• 기능에 대한 분리가 얼마나 효율적으로 이루어 질 수 있는지에 대한 고민을 할 수 있었다.
• 코드의 가독성을 위해 어떠한 노력이 가능한지 알 수 있었다.

금주의 알고리즘 - 3진법 뒤집기

parseInt(Number, base) ⇒ base 밑을 가진 진수를 10base 진수로 Number를 치환하여 리턴한다.

.toString(base) ⇒ base 밑을 가진 진수로 반환하여 준다.

3진법 (opens new window) ←이것도 백링크

CSS 구현의 한 방법

CSS grid 와 flexbox를 적절히 사용하는 것은 충분히 좋은 ui를 만들기 위해 필요함.

grid에 대한 연습을 함께하는 것이 좋아 보임

깔끔한 것이 꾸미는 것보다는 낫다는 것을 배움

더 공부해야 할 것

고차함수 메서드들에 대한 정리 및 예시 구현

CSS grid layout 에 대한 고찰이 필요함