[ 자바스크립트 스터디 ] 세션 #2

Frontend Dev Diary·2020년 11월 4일
0

DOM 접근을 최소화
(DOM 접근이 많아질수록 변경을 추적하는 것이 어려워진다. 상태 관리가 힘들어짐)
DOM을 변경할때는 하나의 패턴으로만 최소화

Component 형식으로 만들기

상태를 추상화시키자. function/class 이용
(class: es6에서 나온 문법, 결국엔 function 기반이다.)

컴포넌트를 만들 때 $target 변수명을 사용하자. ($: DOM 변수명이라는 의미)
-> class/id에 상관없이 추가 가능

functional 한 방식으로 생성자를 만들 때 메소드는 prototype의 프로퍼티로 정의하는 게 좋다.
function 안에 this.method를 선언하면 매번 생성할 때마다 새로운 함수로 할당되기 때문.

todolist.state = newData;
todolist.render();

validation이 없고, render 함수를 빼먹으면 문제가 생길 수 있다.
setState 메소드를 추가해서 render까지 담당하게 하기.
(React와 비슷한 방식. React는 이를 더 추상화한 것.)

Validation

validation을 얼만큼 해야할까?
validation 또한 여러 컴포넌트에서 반복될 수 있기 때문에 모듈로 분리하자.
중복되는 검증 코드를 최소화하기

try-catch를 이용해서 에러가 나온 경우 따로 메세지를 보여주기
try-catch의 위치도 중요하다.

HTML, CSS

https://1linelayouts.glitch.me/
https://css-tricks.com/

profile
성장하는 프론트엔드 개발자

0개의 댓글