Portfolio

컴포넌트 방식으로 생각하기

독립적으로 사용할 수 있고, 다른 곳에 영향을 주지 않음.

그렇기 때문에 재사용이 가능하고 확장, 수정에 용이함.

TodoList 제작

for문을 map으로


let html = "";
for (let i = 0; i < this.state.length; i++) {
  html += `<li>${this.state[i].text}</li>`;
}

html = `<ul>${html}</ul>`;

$todoList.innerHTML = html;

for문


$todoList.innerHTML = `
      <ul>
          ${this.state.map((todo) => `<li>${todo.text}</li>`).join("")}
      </ul>
  `;

map

object destructuring (구조 분해 할당)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.


function TodoList(params) {
  const $todoList = document.createElement("div");
  const $target = params.$target;
  $target.appendChild($todoList);

  this.state = params.initialState;

  this.render = () => {
    $todoList.innerHTML = `
            <ul>
                ${this.state.map((todo) => `<li>${todo.text}</li>`).join("")}
            </ul>
        `;
  };
  this.render();
}

before


function TodoList({ $target, initialState}) {
  const $todoList = document.createElement("div");
  $target.appendChild($todoList);

  this.state = initialState;

  this.render = () => {
    $todoList.innerHTML = `
            <ul>
                ${this.state.map(({text}) => `<li>${text}</li>`).join("")}
            </ul>
        `;
  };
  this.render();
}

after

의존성 제거

❎ TodoForm 생성 파라미터에 TodoList를 넣고 직접 참조.

✅ TodoForm 생성 파라미터에 이벤트 콜백을 넣고, text를 입력 받으면 해당 콜백을 통해 text 넘겨주기.

📌

TodoForm에 TodoList 컴포넌트의 의존성이 강하게 생기기 때문에(TodoForm 자체를 독립적으로 사용할 수 없음), 콜백으로 의존성을 제거할 수 있음.


//main.js
new TodoForm({
  $target: $app,
  onSubmit: (text) => {
    const nextState = [
      ...todoList.state,
      {
        text,
      },
    ];
    todoList.setState(nextState);
  },
});

//TodoForm.js
this.render = () => {
    $form.innerHTML = `
        <input type="text" name="todo" />
        <button>Add</button>
      `;

    if (!isInit) {
      $form.addEventListener("submit", (e) => {
        e.preventDefault();
        const text = $form.querySelector("input[name = todo]").value;

        onSubmit(text);
      });
      isInit = true;
    }
  };

  this.render();

TodoForm은 오직 onSubmit의 구현 방식과 상관없이 text를 매개변수로 전달하여 호출할 뿐임.

실제 submit이 발생했을 때 처리하는 코드는 TodoForm 밖에 있는 것임.

컴포넌트 분리

main.js에서 초기 데이터도 준비하고 각 컴포넌트를 만들고 있기 때문에 분리가 필요함.


//main.js
const $app = document.querySelector(".app");

new App({
  $target: $app,
  initialState: data,
});

//App.js
function App({ $target, initialState }) {
  new TodoForm({
    $target: $app,
    onSubmit: (text) => {
      const nextState = [
        ...todoList.state, //현재 배열 복사
        {
          text,
        },
      ];
      todoList.setState(nextState);
    },
  });

  const todoList = new TodoList({
    $target: $app,
    initialState: data,
  });
}

main.js는 app 컴포넌트 삽입 위치 및 초기 데이터를 정의함.

app.js는 app 전체에서 어떠한 컴포넌트가 들어가는지를 생성 및 관리함.

Client Side에서 데이터 저장하기

cookie

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

다른 저장 방법에 비해 가장 오래된 방식.

document.cookie = 'language=javascript' 로 추가할 수 있음.

이전 cookie를 덮어쓰지 않고 새로 추가됨.

const cookies = document.cookie 로 읽어올 수 있음.

각 쿠키는 ;으로 구분되어 있어 불러온 후 split 등으로 쪼개서 써야 함.

유효기간을 넣지 않으면 브라우저를 닫았을 때 사라짐.

document.cookie = 'kdt_user_name=hyo; expires=${date.toGMTString()}', document.cookie = 'kdt_user_name=hyo; max-age=60'으로 하루동안 보지 않기 등의 유효 기간을 추가할 수 있음.

cookie 주의사항

HTTP 요청시 헤더에 담기기 때문에 쿠키 사이즈가 커지면 HTTP 요청도 커짐.

사이즈 제한 있음.

여러가지 보안 취약점을 조심해야 함.

Local storage

key, value 기반으로 Local에 데이터 저장 가능.

도메인 기반으로 storage가 생성됨 → 도메인만 같다면, 여러탭 내에서 같은 Storage가 공유됨.

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


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

값을 저장하는 방법 3가지

setItem을 사용하는 것을 권장함. 함수를 통해 넣지 않으면 length, toString 같은 내장 함수들을 덮어 씌울 수 있기 때문.


//window 생략 가능

//저장(무조건 stirng 취급)
localStorage.setItem('name', 'hyosung')

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

//삭제하기
localStorage.removeItem('name')

//전체 삭제
localStroage.clear()

기본적인 데이터 저장, 호출, 삭제 방법

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


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

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

미사용시 출력 결과에 object를 띄움.

Session storage

전체적으로 local storage와 같으나 브라우저를 닫으면 저장된 내용이 초기화됨.

로그인을 엄격하게 처리하거나 임시값이 필요할 때 등 상황에 따라 전략적으로 사용함.

TodoList에 Local Storage 적용하기


//App.js
localStorage.setItem("todos", JSON.stringify(nextState));

//main.js
const initialState = JSON.parse(localStorage.getItem("todos") || []);

단 storage의 값을 직접적으로 변경되거나 캐시가 너무 많이 쌓이는 등 여러 에러가 발생할 수 있기 때문에 storage.js를 만들고, 여기서만 localStorage에 접근하도록 만들어야 함.

컴포넌트 방식으로 생각하기 ~ Local Storage