2주차 코드리뷰를 통해 알게 된 것
1. 숫자 변환 시 Number보다는 parseInt 사용하기
둘 다 들어온 인자값을 숫자로 변경해주지만 parseInt가 더 정확하게 숫자를 변환한다.
두 방식의 차이는 다음과 같다.
- Number는 들어온 인자의 타입을 변경하지만 parseInt는 들어온 인자에서 숫자로 해석되는 부분을 가져온다.
Number("12"); // 12
parseInt("12"); // 12
Number("12px"); // NaN => 타입 변경 불가
parseInt("12px"); // 12
- Number는 falsy한 값을 숫자로 인식해서 타입변경을 허용하지만 parseInt는 정확히 구별한다
Number(false); // 0
parseInt(false); // NaN
참고 사이트
2. 이벤트 위임을 통해 이벤트 제어하기
동일한 기능을 가진 엘리먼트들 (가령 포스트 삭제 버튼) 각각에 event를 걸어주는 방식을 예전에 주로 썼다. 이 방식이 좀 더 객체지향적 방식, 즉 자기 자신에 대한 제어는 무조건 자기 자신에게 주어지게 구현하는 것, 에 가깝다고 생각했고 좋은 패턴이라 생각했다.
하지만 수많은 엘리먼트들이 생성될 때마다 이벤트를 추가하면 메모리를 많이 소모하게 되고, 특히 초기에 많은 데이터를 바탕으로 화면을 뿌려줄 때 초기화 과정이 길어지게 된다. 또한 엘리먼트를 화면에서 제거할 때마다 removeEventListner을 적어서 코드가 길어지고 깜빡잊고 제거하는 것을 잊어 메모리 누수가 생길 수 있다.
이 방식보다 코드가 간결해지고 메모리도 적게 소모되는 방식은 바로 이벤트 버블링을 사용한 이벤트 위임 패턴이다. 이벤트 위임 이란 엘리먼트들을 감싸는 부모에게 단 한 번 이벤트를 걸어주고 해당 이벤트가 발동할 때마다 어느 엘리먼트에서 시작되었는지 판단하여 기능을 실행하는 방식이다.
주로 자식 엘리먼트들에 dataset으로 고유식별자와 action(이벤트 발동 시 수행해야 할 기능명)을 속성으로 지정하여 이벤트 발동할 때 참조하는 식으로 구현한다.
세션
function 을 new 키워드로 호출했는 지 확인하는 방법
- new.target이 정식방법
- 그외방식 : this.constructor , this === window , instanceOf
immutability(변경불가능성)
매번 새 객체를 만들어 변경된 값을 전달하기 때문에 메모리 낭비가 있다.
하지만 메모리 낭비보다 예측가능한 코드 작성을 강조하는 추세
localStorage 사용시 try~catch문으로 감싸기
다음과 같이 두 개의 에러사항을 대비하기 위해 try~catch문이 필요하다
- parse에러 시 런타임 중지
- setItem에서 최대 저장할 수 있는 크기를 넘었을 때 에러날 수 있음
// parse가 제대로 되지 않을 경우 default 값을 반환하는 방식으로 에러 사항을 대처
export const getItem = (key,defaultValue)=>{
try{
const storedValue = localStorage.getItem(key)
return storedValue ? JSON.parse(sotredValue) : defaultValue;
}catch(e) {
console.log(e.message);
return defaultValue;
}
}
// 최대 저장 크기가 넘어갔을 때 에러를 출력
export const setItem = (key, value) => {
try{
localStorage.setItem(key,JSON.stringify(value);
}catch(e){
console.log(e.message)
}
}
추가적으로 localStorage에는 form 데이터 임시 저장, API 캐쉬 등을 위해 사용한다
넘기는 파라미터를 객체 형태로 만들기
- 다른 언어의 named parameter 흉내낼 수 있다
- 각 인자가 무슨 의미를 가지는 지 바로 확인할 수 있다
test(true,false)
test({validate:true, notify:false})
관심사 분리
Input 은 추가하는 행위를 감지하는 역할이고 실제 state를 변경하는 것은 App만 권한을 가지게 한다. 관심사를 분리하기 위해서 App에서 state를 변경하는 함수를 생성하고 하위 컴포넌트에 해당 함수를 인자로 넘겨서 하위 컴포넌트가 상위컴포넌트인 App의 함수를 실행시키는 방식으로 구현해야 한다.
커스텀 이벤트를 언제 쓰는가?
- 컴포넌트 깊이가 깊을 때 인자로 계속 내리기 보다는 커스텀 이벤트로 바로 가져다 쓸 수 있도록 함
ex) scroll 이벤트 - 하지만 많이 사용하면 어디서 변경이 일어나는지 파악하기 어려운 단점
시멘틱한 html 구조
<body>
<header>
<nav> // 네비게이션 역할은 nav로 묶기
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>OOST</li>
</ul>
</nav>
</header>
<main>
<h1>단 한 번 사용해야 하는 HTML 문서의 제목</h1> // 가장 중요한 태그, 검색어 인덱싱
<form>
<label for='input-todo'>투두 입력</label>
<input id="input-todo" type="text"/>
<fieldset> // 여러 컨트롤과 레이블 묶을 때 사용
<legend>생년월일</legend> // 요소 그룹 설명
<select>
<option>년</option>
</select>
<select>
<option>월</option>
</select>
<select>
<option>일</option>
</select>
</fieldset>
<button type="submit">제출</button> // '제출버튼' 쓰지 말 것. 스크린 리더는 '제출버튼 버튼' 으로 읽음
</form>
<section>
<h2>
Todolist를 보여줄께
</h2>
<ul>
<li>JS 공부하기</li>
<li>JS 공부하기</li>
</ul>
<figure> // 이미지, 도표, 코드
<img src="" alt=""/> // 크롤러가 이미지 정보, alt값에 이미지 쓰지 말 것. 스크린 리더는 '이미지 이미지'로 읽음
<figcaption></figcaption> // 이미지, 도표, 코드 등 설명
</figure>
</section>
<article> // RSS로 단독으로 제공할 수 있는 컨텐츠
<h2></h2>
<section></section>
</article>
<aside> // sidebar에 주로 씀
</aside>
</main>
<footer></footer>
<a> // 클릭해서 홈으로 돌아가는 이미지는 a태그로 감싸기
<img src="logo.png" alt="logo"/>
</a>
<button>Search</button> // 택스트는 입력하지만 아이콘 만 보이게 overflow 숨김처리
백그라운드 이미지 접근성
<div role="img" aria-label="Description of the image" title="Tooltip for users not using assistive technologies" />
접근성 추천 사이트
https://web.dev/measure/
https://accessibility.naver.com/accessibility
https://seulbinim.github.io/WSA/accessibility.html
