[DAY-11] VanillaJS를 통한 JS 기본 역량 강화(3)
😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 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을 누르고 싶었어요 😅
열심히 찾아본 결과, 인스턴스 생성만을 목적으로 작성한 해당 코드가 변수로 할당될 것을 예측해 검출하는 오류라고 합니다.
그렇다면 해당 객체를 변수에 할당하면 어떻게 될까요?
그럼 또 새로운 오류가 생깁니다.
이는 선언되지 않은 변수의 사용을 허용하지 않는 오류로 굉장히 흔하게 볼 수 있습니다.
컴포넌트를 클래스 형태로 바꾸지 않고서는 어떻게 수정할지 모르겠어서 그냥 eslint 설정을 바꾸고 구현을 이어갔습니다.
지금까지 계속 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)
전체적으로 로컬 스토리지와 같은 세션 스토리지의 가장 큰 하나의 차이점은
브라우저를 닫으면 삭제된다는 것 입니다.
댓글남기기