-
Localstorage 보다 store.js 라이브러리!
-
가독성 떨어지게 코드 짜지 않기 중요 🔥
-
기본 alert 사용 지양 (그동안은 자바스크립트 코드가 멈추기 때문에)
-
filter가 복잡해지면 useMemo쓰기
-
useMemo 값을 저장, useCallback은 function을 저장 (연산량이 많으면 사용하기)
-
코딩 용어
글로벌 네이게이션 바(GNB) : 메인 메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴 바
서브 네비게이션 바(SNB) : 일반적으로 왼쪽에 많이 위치, 사이드바
로컬 네비게이션 바(LNB) : GNB의 서브메뉴
캐러셀 슬라이드 : 이미지나 텍스트를 가로로 슬라이드 시키는 효과 -
prevState
- class 컴포넌트에서 prevState
state={ lucky_number: 7, };
this.setState({ lucky_number: 4});
this.setState(prevState => ({
lucky_number: prevState + 3
}});- Hook
const [text, setText]=ustState("")
useEffect(()=>{
console.log("a")
},[text])text가 변할 때, useEffect 실행! (class 컴포넌트처럼 state 이전값과 현재값 비교할 필요 없음)
-
===는 반드시 세개쓰기!
-
Localstorage쓸 때 initialstate활용
-
state에 객체 웬만하면 넣지 않기
-
삼항연산자 쓸때 ?? 활용하기
-
리코일 키 값 앞에 #넣기(있어보임^^)
-
버튼과 텍스트 모양 구분하기
-
overflow-x:scroll (모바일에서 가로로 넘칠 때, 터치로 슬라이드)
-
setTimeout하면 clearTimeout도 하기
-
:root[color-theme:"dark]
-> 모든 css에 접근 가능 -
caniuse 사이트 이용하기
-
오픈 소스 라이브러리 깃헙에 Issues들어가서 검색해보기
-
질문하는 법
- 내가 기대하는 결과 설명 -> 재현 절차 -> 실제 결과(스크린샷, 콘솔 에러 등등)
-
이미지 최적화
- https://squoosh.app/
- resize랑 compress
- 색상 수가 적은 사진은 png로 바꾸고 palette로 컬러 줄이기
-
타입스크립트에서 interface붙은것들은 앞에 i붙이기
-
https://dribbble.com/ 디자인 참고 사이트
