notion-037

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
실습을 진행하며 몰랐던 부분, 혹은 조금이라도 궁금했던 부분에 대해서 포스팅합니다.

토이 프로젝트를 vue로 진행하며 vuter와 충돌이 너무 일어나서 삭제했던
prettier를 다시 설정하느라 진땀뺐습니다...

와중에 eslint는 왜 그렇게 나에게만 기준이 엄격한 걸까요..?
언젠가는 eslint rules를 추가하지 않고도 오류가 뜨지 않는 clean code를 작성할 수 있길 빌며..😉




[1] Todo List

[1-1] 컴포넌트 방식으로 생각하기

표현하는 부분들을 추상화합니다.

즉 추상화한다는 것은 어떤 독립적인 부분들을 묶어서 단위를 생성한다고 할 수 있습니다.


[1-2] 구조 분해 할당

function TodoList(params) {
  const $target = params.$target;
}

해당 코드는 이런 식으로 변경될 수 있습니다.

function TodoList(params) {
  const { $target } = params;
}

즉 params 안에서 $target을 꺼내온다는 의미이겠죠?


그렇다면 애초에 받아올 때 꺼낼 수 있을까요?

function TodoList({ $target }) {
  ...
}

네 있습니다!

params 안에서 $target미리 꺼내와 사용할 수 있습니다.

이를 구조 분해 할당이라 합니다.


정확히 말해 객체나 배열에서 저장된 데이터 전체가 아닌 일부만 필요할 때 사용할 수 있는 자료 구조입니다.

let name = ["Jiyoung", "Jung"];

// 구조 분해 할당
let [firstName, surname] = name;

alert(firstName); // Jiyoung
alert(surname); // Jung

이처럼 배열의 요소들도 나누어 할당하는 것이 가능합니다.


[1-3] No-new Error

TodoLIst 컴포넌트를 생성하고 구현을 이어가던 중, 오류가 발생했습니다.

사실 오류를 보는 순간 Disable this ~~ rule 을 누르고 싶었어요 😅

Untitled

열심히 찾아본 결과, 인스턴스 생성만을 목적으로 작성한 해당 코드가 변수로 할당될 것을 예측해 검출하는 오류라고 합니다.

Untitled 1

그렇다면 해당 객체를 변수에 할당하면 어떻게 될까요?


그럼 또 새로운 오류가 생깁니다.

이는 선언되지 않은 변수의 사용을 허용하지 않는 오류로 굉장히 흔하게 볼 수 있습니다.

Untitled 2

컴포넌트를 클래스 형태로 바꾸지 않고서는 어떻게 수정할지 모르겠어서 그냥 eslint 설정을 바꾸고 구현을 이어갔습니다.

Untitled 3

지금까지 계속 export, import로 컴포넌트를 나눴던 저라 적응이 되지 않네요..

일단은 no-new 또한 경고 수준을 낮추고 수업과 동일하게 구현을 진행해야겠습니다.

나중에 클래스 형태로 구현해서 구조를 리팩토링 해보도록 할게요 😀


[1-4] 의존성

TodoForm 생성 파라미터에 TodoLIst를 넣고 직접 참조를 하게 되면

TodoForm에 TodoList 컴포넌트의 의존성이 강하게 생깁니다.


쉽게 생각해서 TodoForm에서 TodoList의 요소들을 불러와서 추가하고 제거하고 삭제하는 작업들을 할 수 있지만

그렇다면 TodoForm은 독립적으로 사용이 불가능합니다!!


따라서 TodoForm 생성 파라미터에 이벤트 콜백을 넣고 text를 입력받으면 해당 콜백을 통해 text를 넘겨줄 수 있습니다.

콜백을 통해서 독립적인 컴포넌트들이 통신할 수 있습니다.

// todoForm Component
function TodoForm({ $target, onSubmit }) {
  // ...

  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);
      });
    }
  };

  this.render();
}

onSubmit 함수 인자를 추가하고 안에서 onSubmit에 text를 넘겨주고 호출해주지만

onSubmit이 무슨 작업을 하는지 TodoForm은 관여하지 않습니다.


아래와 같이 onSubmit 함수의 내용은 새로운 인스턴스를 생성하고 그 안에서 선언할 수 있습니다.

// main.js

// ...

new TodoForm({
  $target: $app,
  onSubmit: (onSubmit = (text) => {
    console.log(text);
  }),
});




[2] 클라이언트 데이터 저장

[2-1] 쿠키(Cookie)

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

가장 오래된 방식입니다.


하지만 쿠키는 여러 단점이 존재합니다.

  • HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 사이즈도 비례해서 커집니다.
  • 사이즈에 제한이 있습니다.
  • 보안 취약점이 많습니다.
  • 브라우저를 껐다 키면 사라집니다.


[2-2] 로컬 스토리지(Local Storage)

로컬 스토리지는 key,value 기반으로 Local에 데이터를 저장할 수 있습니다.

도메인 기반으로 Storage가 생성이 되기 때문에, 도메인만 같다면 여러 페이지 내에서 같은 Storage가 공유됩니다.


삭제하거나 Storage를 날리지 않는 한 삭제되지 않습니다.

setItem, getItem, removeItem, clear 함수들을 이용해 데이터를 조작합니다.


로컬 스토리지에는 string만 넣을 수 있기 때문에

JSON.stringify로 데이터를 넣고, JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋습니다.


[2-3] 세션 스토리지(Session Storage)

전체적으로 로컬 스토리지와 같은 세션 스토리지의 가장 큰 하나의 차이점은

브라우저를 닫으면 삭제된다는 것 입니다.




출처

프로그래머스

https://ko.javascript.info/destructuring-assignment

https://eslint.org/docs/rules/no-new

댓글남기기