변수 가독성을 높이자!
const getData = () => { }vs
const getDataFromLocalStorage = () => { } 이 두개의 함수명을 생각해보면, 후자가 구분이 훨씬 명확하고, 함수명을 통해 이 함수의 로직을 짐작할 수 있다.
Array.prototype.reduce()
reduce 모르면 자바스크립트 개발자로써 짜세가 안 나온다.
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
// expected output: 10리듀서 함수를 실행하고 '하나의' 결과값을 반환한다.
알아두고 나중에 필요할때 써보자!
alert 사용 지양하자
alert('10글자 이상 입력이 불가능합니다')이런 alert 안써본 사람 있나? 경고창 띄울 때 alert 만큼 편한게 없다.
근데 alert는 동작을 실행하는 시점부터 모든 자바스크립트 코드를 멈추게 한다고 한다. 쉽게 말해서 서비스 장애로 이어질 수도 있다는 점.
그냥 쓰지말고, 모달을 파던지 다른 형태로 유저에게 주의를 주자.
함수형 업데이트
const [name, setName] = useState('');
const [boolean, setBoolean] = useState(false);
const handleNameChange = (e) => { setName(e.currentTarget.value) }
const hnaldeBoolean = () => {setBoolean(prev) => !prev } 아니, 이름은 왜 함수형 업데이트를 안해주죠?
=== 이전 state를 가공할 필요 없으면, prev값을 줘서 굳이 함수형 업데이트를 해줄 필요가 없다.
useMemo, useCallback 남용 금지!
누구나 개발을 시작하고 최적화에 관심을 갖게 될 때 알게되는 훅!
나도 내 컴포넌트에 어떻게 적용시키는지 몰라 발을 동동 굴렀을 때가 있는데, 멘토님은 남용은 금지라고 하셨다
함수 연산량이 많아 리렌더링시 계속해서 함수가 생성되는 걸 막아야할 때는 고려해보고, 아니면 굳이 써야되는 최적화 훅은 아니라는 것이다.
caniuse.com 과 footer, dl, dt, dd, article 과 같은 태그를 적재 적소에 사용하자!
HTML 태그들을 공부해서 다양한 상황에 알맞게 사용하자.
사진 파일! 제발 줄이자! 메모리 낭비다!
렌더링 시 큰 사진 파일은 웹 서비스 속도에 큰 영향을 준다.
https://squoosh.app/ 같은 서비스를 이용해 크기를 줄이고 용량을 줄이도록 하자.
